packages/omi-elements/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
-    "omi": "^7.3.1",
+    "omi": "^7.3.2",
     "omi-router": "^4.0.3",
     "omi-suspense": "^0.0.3",
     "prismjs": "^1.29.0"

packages/omi-elements/src/routes.tsx

@@ -264,7 +264,16 @@ components.forEach((component: { type?: string; name?: string; page?: string; de
           <div class="flex">
             <side-nav class="block w-0 lg:w-60" onClick={(evt) => evt.stopPropagation()}></side-nav>
             <o-suspense imports={[component.dep()]} onDataLoaded={window.refreshDark} class="flex-1 ml-10 mr-10 w-0">
-              <div slot="pending">Loading...</div>
+              <div slot="pending" class="absolute top-20">
+                <div>
+                  <strong>Loading...</strong>
+                  <div
+                    className="ml-auto inline-block h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+                    role="status"
+                  ></div>
+                </div>
+              </div>
+
               <div slot="fallback">Sorry, we are unable to load the content at the moment. Please try again later.</div>
               <div class="flex">
                 <component.page

packages/omi/examples/lazy-define.tsx

@@ -83,7 +83,7 @@ setTimeout(() => {
     }
   })
 
-}, 1000);
+}, 1000)
 
 
 render(<todo-list onInstalled={()=>{

packages/omi/examples/reflect-props.tsx

@@ -0,0 +1,97 @@
+import { render, Signal, tag, Component, h, computed, registerDirective, define } from '@/index'
+
+import autoAnimate from '@formkit/auto-animate'
+registerDirective('auto-animate', autoAnimate)
+
+type Todo = { text: string, completed: boolean, id: number }
+
+class TodoApp extends Signal<{ todos: Todo[], filter: string, newItem: string }> {
+  completedCount: ReturnType<typeof computed>
+
+  constructor(todos: Todo[] = []) {
+    super({ todos, filter: 'all', newItem: '' })
+    this.completedCount = computed(() => this.value.todos.filter(todo => todo.completed).length)
+  }
+
+  addTodo = () => {
+    // api a
+    this.value.todos.push({ text: this.value.newItem, completed: false, id: Math.random() })
+    this.value.newItem = ''
+    this.update()
+
+    // api b, same as api a
+    // this.update((value) => {
+    //   value.todos.push({ text: value.newItem, completed: false })
+    //   value.newItem = ''
+    // })
+  }
+
+  toggleTodo = (index: number) => {
+    const todo = this.value.todos[index]
+    todo.completed = !todo.completed
+    this.update()
+  }
+
+  removeTodo = (index: number) => {
+    this.value.todos.splice(index, 1)
+    this.update()
+  }
+}
+
+const todoApp = new TodoApp([
+  { text: 'Learn OMI', completed: true, id: 1 },
+  { text: 'Learn Web Components', completed: false, id: 2  },
+  { text: 'Learn JSX', completed: false, id: 3  },
+  { text: 'Learn Signal', completed: false, id: 4  }
+])
+
+define('todo-list', class TodoList extends Component {
+  onInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    todoApp.value.newItem = target.value
+  }
+
+  render() {
+    const { todos } = todoApp.value
+    const { completedCount, toggleTodo, addTodo, removeTodo } = todoApp
+    return (
+      <>
+        <input type="text" value={todoApp.value.newItem} onInput={this.onInput} />
+        <button onClick={addTodo}>Add</button>
+        <my-el myProp={11} onInstalled={(el)=> {
+          console.log(el.detail,'installed')
+        }}></my-el>
+        <p>Completed count: {completedCount.value}</p>
+      </>
+    )
+  }
+})
+
+
+  define('my-el', class TodoList extends Component {
+    static reflectProps = {
+      myProp: (propValue: number) => {
+        console.log(propValue)
+        return propValue + 2
+      }
+    }
+
+    onInput = (event: Event) => {
+      const target = event.target as HTMLInputElement
+      todoApp.value.newItem = target.value
+    }
+
+    render() {
+      console.log('this.props', this.props)
+     return <div>b{this.props.myProp}b</div>
+
+    }
+  })
+
+
+
+
+render(<todo-list onInstalled={()=>{
+  console.log('installed')  
+}} />, document.body)
+

packages/omi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi",
-  "version": "7.3.1",
+  "version": "7.3.2",
   "scripts": {
     "start": "vite",
     "dev-vite": "vite",

packages/omi/src/component.ts

@@ -19,9 +19,14 @@ type PropTypes = {
   [key: string]: PropType | Array<PropType>
 }
 
+type ReflectProps = {
+  [key: string]: boolean | ((propValue: any) => any)
+}
+
 export class Component extends HTMLElement {
   static is = 'Component'
   static defaultProps: Record<string, unknown>
+  static reflectProps: ReflectProps
   static propTypes: PropTypes
   static css: CSSItem | CSSItem[]
   static isLightDOM: boolean

packages/omi/src/directive.ts

@@ -1,13 +1,13 @@
 /**
  * An object containing registered directives.
  */
-export const directives: { [key: string]: Function } = {};
+export const directives: { [key: string]: Function } = {}
 
 /**
  * Registers a directive with the specified name and handler.
  * @param name - The name of the directive.
  * @param handler - The handler function for the directive.
  */
 export function registerDirective(name: string, handler: Function) {
-  directives['o-' + name] = handler;
+  directives['o-' + name] = handler
 }

packages/omi/src/dom.ts

@@ -133,7 +133,14 @@ export function setAccessor(
           value
         )
       } else {
-        node.setAttribute(name, value)
+        if ((node.constructor as typeof Component).is === 'Component') {
+          const reflect = (node.constructor as typeof Component).reflectProps?.[name]
+          if(reflect) {
+            node.setAttribute(name, typeof reflect === 'function' ? reflect(value) : value)
+          }
+        } else {
+          node.setAttribute(name, value)
+        }
       }
     }
   }

packages/omi/src/index.ts

@@ -10,6 +10,6 @@ export { Signal } from './signal'
 export { css } from './css-tag'
 export { mixin } from './options'
 export  { registerDirective } from './directive'
-export const version = '7.3.1'
+export const version = '7.3.2'