packages/omi-templates/package.json

@@ -20,7 +20,7 @@
     "copy-to-clipboard": "^3.3.3",
     "echarts": "^5.5.0",
     "markdown-it": "^14.0.0",
-    "omi": "7.7.0",
+    "omi": "7.7.3",
     "omi-ripple": "^0.1.2",
     "omi-router": "latest",
     "omi-suspense": "latest",

packages/omi-templates/src/pages/company.tsx

@@ -63,25 +63,6 @@ const team = signal([
 export function Company() {
   return (
     <>
-      <header class="shadow-sm dark:shadow-gray-700 mt-4 bg-blue-600">
-        <div class="flex max-w-7xl mx-auto pt-2 pb-3 lg:justify-normal justify-between px-1 lg:px-0 sm:px-3">
-          <div class="flex items-center cursor-pointer">
-            <img class="w-8 h-8" src="https://omi.cdn-go.cn/admin/latest/home/omi.svg" alt="OMI Logo" />
-            <div class="ml-1 text-2xl font-semibold font-bold text-white">OMI Tech</div>
-          </div>
-          <i class="t-icon t-icon-bulletpoint text-xl sm:text-xl lg:hidden text-white"></i>
-          <div class="flex-1 flex justify-center">
-            <div class="flex items-center">
-              {['公司主页', '业务', '关于我们', '团队', '联系我们'].map((item, key) => (
-                <div class="cursor-pointer mx-8 text-xl  text-white hover:text-blue-200" key={key}>
-                  <a href={`#`}>{item}</a>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </header>
-
       <main class="text-sm sm:text-base">
         <div class="hero-section w-full h-screen relative flex items-center justify-center">
           <img

packages/omi-templates/src/pages/food.tsx

@@ -57,23 +57,6 @@ const navItems = [
 export function Food() {
   return (
     <div>
-      <header class="shadow-sm dark:shadow-gray-700 mt-4 bg-blue-600">
-        <div class="flex max-w-7xl mx-auto pt-2 pb-3 lg:justify-normal justify-between px-1 lg:px-0 sm:px-3">
-          <div class="flex items-center cursor-pointer">
-            <img class="w-8 h-8" src="https://omi.cdn-go.cn/admin/latest/home/omi.svg" alt="OMI Logo" />
-            <div class="ml-1 text-2xl font-bold text-white">OMI 美食</div>
-          </div>
-          <div class="flex-1 flex justify-center">
-            <div class="flex items-center">
-              {navItems.map((item, key) => (
-                <div class="cursor-pointer mx-8 text-xl text-white hover:text-blue-200 flex items-center" key={key}>
-                  <a href={`#`}>{item.label}</a>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </header>
 
       <main class="text-sm sm:text-base">
         <div class="hero-section w-full h-screen relative flex items-center justify-center">

packages/omi/package.json

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

packages/omi/src/component.ts

@@ -9,6 +9,7 @@ import {
   isObject,
   createRef,
   installHook,
+  convertNodeListToVNodes,
 } from './utils'
 import { diff } from './diff'
 import { ExtendedElement } from './dom'
@@ -169,6 +170,9 @@ export class Component<State = any> extends HTMLElement {
         prop.changed.call(this, newTypeValue, oldTypeValue)
       }
     }
+    if(!this.props.ignoreAttrs){
+      this.update()
+    }
   }
 
   state: State
@@ -187,7 +191,15 @@ export class Component<State = any> extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return this.props ? Object.keys(this.props).map(hyphenate) : []
+    if (Object.keys(this.props || {}).length > 0) {
+      return Object.keys(this.props).map(hyphenate)
+    }
+    if(Object.keys(this.propTypes || {}).length > 0){
+      return Object.keys(this.propTypes)
+      .filter((p) => !/^on|children/.test(p))
+      .map(hyphenate)
+    }
+    return []
   }
 
   injectObject() {
@@ -510,7 +522,12 @@ export class Component<State = any> extends HTMLElement {
 
   updated() {}
 
-  beforeRender() {}
+  beforeRender() {
+    // 针对非omi环境使用children的情况
+    if (!this.props.children) {
+      this.props.children = convertNodeListToVNodes.call(this, this.childNodes)
+    }
+  }
 
   rendered(vnode: VNode | VNode[]) {}
 

packages/omi/src/diff.ts

@@ -473,13 +473,13 @@ function diffAttributes(
   if (isComponent && !updateSelf && dom.parentNode) {
     // __hasChildren is not accuracy when it was empty at first, so add dom.children.length > 0 condition
     // if (update || dom.__hasChildren || dom.children.length > 0 || (dom.store && !dom.store.data)) {
-    if (dom.receiveProps(dom.props, oldClone) !== false) {
+    if (dom?.receiveProps?.(dom.props, oldClone) !== false) {
       // 如果这里使用 update，会导致子、孙等等的重复更新，所有用queuedUpdate，
       // 详细见 repeat-rendering-test 的测试demo
       // 如果需要完全去掉 queuedUpdate 变成同步更新，需要：
       // 1. signal的依赖和computed的依赖组件产生的更新需要合并
       // 2. 收集到的组件需要按照嵌套关系进行去重，只保留最外层的组件
-      dom.queuedUpdate()
+      dom?.queuedUpdate?.()
     }
     // }
   }

packages/omi/src/index.ts

@@ -22,4 +22,4 @@ export type { Signal, SignalObject, Signal as SignalValue } from 'reactive-signa
 export { css } from './css-tag'
 export { mixin, globalCSS } from './options'
 export { registerDirective } from './directive'
-export const version = '7.7.2'
+export const version = '7.7.3'

packages/omi/src/utils.ts

@@ -1,5 +1,5 @@
 import { ExtendedElement } from './dom'
-import { ObjectVNode, VNode } from './vdom'
+import { ObjectVNode, VNode, Attributes } from './vdom'
 import './construct-style-sheets-polyfill'
 import { ComponentHookType, ComponentHooks } from './component'
 
@@ -313,3 +313,45 @@ export function executeComponentHooks(
     }
   }
 }
+
+/**
+ * 将DOM NodeList转换为Omi VNode
+ * @param childNodes DOM NodeList
+ * @returns Omi VNode[]
+ */
+export function convertNodeListToVNodes(
+  childNodes: NodeList,
+): Array<VNode | string> {
+  return Array.from(childNodes)
+    .map((node): VNode | string => {
+      // 处理文本节点
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent || ''
+      }
+
+      const element = node as Element
+      // 处理元素节点
+      if (element.nodeType === Node.ELEMENT_NODE) {
+        const attributes: Attributes = {
+          ignoreAttrs: false,
+        }
+
+        // 转换元素属性
+        Array.from(element.attributes).forEach((attr) => {
+          attributes[camelCase(attr.name)] = attr.value
+        })
+
+        // 递归处理子节点
+        const children = convertNodeListToVNodes(element.childNodes)
+        return {
+          nodeName: element.tagName.toLowerCase(),
+          attributes,
+          children,
+          key: attributes.key,
+        }
+      }
+      // 其他类型节点（注释等）返回 null
+      return null as any
+    })
+    .filter(Boolean) // 过滤掉 null 值
+}

packages/omi/src/vdom.ts

@@ -46,7 +46,9 @@ export function createElement(
 
   // jsx 嵌套的元素自动忽略  attrs
   if (attributes) {
-    attributes.ignoreAttrs = true
+    if(typeof attributes.ignoreAttrs !== 'boolean'){
+      attributes.ignoreAttrs = true
+    }
   } else {
     attributes = { ignoreAttrs: true }
   }

packages/omi/test/attrs-to-props.test.jsx

@@ -346,9 +346,9 @@ describe('attrs to props', () => {
     const el = document.createElement(node.name)
     parentElement.appendChild(el)
     el.setProp('info', { 'age': 18 })
-    // will not update
+    // will update
     el.removeAttribute('info')
-    expect(parentElement.firstChild.shadowRoot.innerHTML).toBe('<div>18</div>')
+    expect(parentElement.firstChild.shadowRoot.innerHTML).toBe('<div></div>')
   })
 
 

packages/omi/test/base.test.jsx

@@ -64,7 +64,10 @@ describe('base', () => {
 
     expect(Ele.prototype.render).toHaveBeenCalledTimes(1)
     expect(Ele.prototype.render).toHaveBeenCalledWith(
-      { ignoreAttrs: true },
+      { 
+        children: [],
+        ignoreAttrs: true 
+      },
       undefined
     )
     expect(Ele.prototype.render).toHaveReturnedWith(

packages/omi/test/svg.test.jsx

@@ -46,7 +46,7 @@ describe('index', () => {
     render(<my-svg />, parentElement)
 
     expect(Ele.prototype.render).toHaveBeenCalledTimes(1)
-    expect(Ele.prototype.render).toHaveBeenCalledWith({ 'ignoreAttrs': true }, undefined)
+    expect(Ele.prototype.render).toHaveBeenCalledWith({ 'ignoreAttrs': true, children: [] }, undefined)
     expect(Ele.prototype.render).toHaveReturnedWith(expect.objectContaining({ nodeName: 'svg' }))
 
     expect(parentElement.firstChild.shadowRoot.innerHTML).toBe('<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><polygon points="5,5 195,10 185,185 10,195" fill="red"></polygon><foreignObject x="20" y="20" width="160" height="160"><div xmlns="http://www.w3.org/1999/xhtml">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. Aliquam erat volutpat.</div></foreignObject></svg>')