@cqsjjb/jjb-cloud-component 0.0.9 → 0.0.11

package/README.md

@@ -92,6 +92,28 @@ function App() {
 }
 ```
 
+### 旧版云组件支持
+
+对于旧版云组件（没有导出 `info` 的组件），可以使用 `moduleKey` 指定要使用的导出键：
+
+```jsx
+import React from 'react';
+import { CloudComponent } from '@cqsjjb/jjb-cloud-component';
+
+function App() {
+  return (
+    <CloudComponent
+      from="https://example.com/legacy-component.js"
+      componentKey="legacy-component"
+      moduleKey="MyComponent"  // 指定从模块中导出的键名
+      componentProps={{
+        title: "旧版组件"
+      }}
+    />
+  );
+}
+```
+
 ## API 文档
 
 ### CloudComponent Props
@@ -100,6 +122,7 @@ function App() {
 |------|------|------|------|
 | `from` | `string` | ✅ | 云组件资源地址 |
 | `componentKey` | `string` | ✅ | 组件唯一标识 |
+| `moduleKey` | `string` | ❌ | 模块导出键名，用于指定从模块中导出的键（旧版云组件使用），默认为 `'default'` |
 | `dependencies` | `Record<string, unknown>` | ❌ | 组件依赖 |
 | `cache` | `CacheStrategy` | ❌ | 缓存策略 |
 | `headers` | `Record<string, string>` | ❌ | 请求头 |
@@ -158,10 +181,12 @@ const { module, styleId, isNewVersion } = await ImportCloudComponent({
 
 ### 组件结构
 
-云组件需要导出以下结构：
+#### 新版云组件（推荐）
+
+新版云组件需要导出 `info` 对象和 `default` 组件：
 
 ```javascript
-// 组件信息（可选，用于版本检测）
+// 组件信息（必需，用于版本检测）
 const info = {
   name: 'MyComponent',
   version: '1.0.0',
@@ -186,13 +211,32 @@ function MyComponent(props) {
   }, props.title);
 }
 
-// 导出
+// 导出（新版必须导出 info 和 default）
 module.exports = {
   info,
   default: MyComponent
 };
 ```
 
+#### 旧版云组件（兼容）
+
+旧版云组件可以不导出 `info`，但需要指定导出键名（通过 `moduleKey` 属性）：
+
+```javascript
+// 组件实现
+function MyComponent(props) {
+  return React.createElement('div', { 
+    className: 'my-component'
+  }, props.title);
+}
+
+// 导出（旧版可以导出任意键名）
+module.exports = {
+  MyComponent,  // 使用 moduleKey="MyComponent" 来指定
+  AnotherComponent  // 或者导出多个组件
+};
+```
+
 ### 样式处理
 
 云组件中的样式会自动注入到页面中，使用 `{cloudComponentStyleId}` 占位符会被替换为实际的样式ID。
@@ -211,7 +255,10 @@ const style = `
 2. **依赖管理**: 正确配置组件所需的依赖
 3. **样式隔离**: 使用样式ID避免样式冲突
 4. **错误处理**: 实现适当的错误处理机制
-5. **版本兼容**: 注意新旧版本云组件的兼容性
+5. **版本兼容**: 
+   - 新版云组件（有 `info` 导出）：使用 `module.default`，无需指定 `moduleKey`
+   - 旧版云组件（无 `info` 导出）：需要指定 `moduleKey` 来指定导出的键名，默认为 `'default'`
+6. **模块键名**: 如果旧版组件导出的键名不是 `'default'`，必须通过 `moduleKey` 属性指定正确的键名
 
 ## 许可证
 

package/cloud-component.d.ts

@@ -36,6 +36,8 @@ interface CloudComponentProps extends ComponentProps {
   initialize?: boolean;
   // 组件唯一key
   componentKey: string;
+  // 模块导出键名，用于指定从模块中导出的键（旧版云组件使用），默认为 'default'
+  moduleKey?: string;
   // 组件的额外Props
   componentProps?: Record<string, unknown>;
   // 组件引用

package/cloud-component.js

@@ -24,7 +24,7 @@ export function useUnMountCloudComponentStyle(styleId) {
  * @note 用户自定义依赖项会覆盖同名的默认依赖项
  */
 export default function CloudComponent(props) {
-  let styleId;
+  const styleId = React.useRef(null);
   const [Component, setComponent] = React.useState(null);
   const {
     from,
@@ -35,6 +35,7 @@ export default function CloudComponent(props) {
     componentRef,
     componentKey,
     componentProps,
+    moduleKey = 'default',
     onLoadStart,
     onLoadEnd,
     onDestroy,
@@ -46,7 +47,10 @@ export default function CloudComponent(props) {
   const defaultDependencies = {
     'react': React,
     'react-dom': ReactDOM,
+    'React': React,
+    'ReactDOM': ReactDOM,
     'jjbCommonLib': jjbCommonLib,
+    'jjb-common-lib-types': jjbCommonLib,
     '@cqsjjb/jjb-common-lib': jjbCommonLib
   };
 
@@ -106,23 +110,26 @@ export default function CloudComponent(props) {
         onLoadStartRef.current && onLoadStartRef.current();
         const {
           module,
-          styleId: _styleId,
-          isNewVersion
+          isNewVersion,
+          styleId: _styleId
         } = await ImportCloudComponent({
           from,
           cache,
           headers,
           dependencies: stableDependencies
         });
-        styleId = _styleId;
+
+        // 优先使用导入云组件时生成的styleId，如果导入云组件时没有生成styleId，则使用模块info中的cloudComponentStyleId
+        styleId.current = _styleId || module?.info?.cloudComponentStyleId;
         setComponent(() => {
           onLoadEndRef.current && onLoadEndRef.current();
-          return isNewVersion ? module.default({
+          const $module = isNewVersion ? module.default({
             // 组件引用
             ref: componentRef,
             // 将依赖项穿透下去，用于在组件内部使用依赖项（支持云组件嵌套云组件）
             $$dependencies: stableDependencies
-          }) : module.default;
+          }) : module[moduleKey];
+          return $module;
         });
       } catch (error) {
         console.error('云组件加载失败:', error);
@@ -137,23 +144,92 @@ export default function CloudComponent(props) {
       }
     }
     load().then(() => null);
+  }, [from, cache, headers, shouldReloadDependencies, moduleKey]);
+  React.useEffect(() => {
     return () => {
-      if (styleId) {
-        useUnMountCloudComponentStyle(styleId);
+      if (styleId.current) {
+        useUnMountCloudComponentStyle(styleId.current);
+        styleId.current = null;
       }
       onDestroyRef.current && onDestroyRef.current();
     };
-  }, [from, cache, headers, shouldReloadDependencies]);
+  }, [styleId]);
+
+  /**
+   * 深度比较两个值是否相等，支持 ReactNode
+   * @param {any} a 第一个值
+   * @param {any} b 第二个值
+   * @returns {boolean} 是否相等
+   */
+  function deepEqual(a, b) {
+    // 引用相等
+    if (a === b) return true;
+
+    // null 或 undefined 处理
+    if (a == null || b == null) return a === b;
+
+    // 类型不同
+    if (typeof a !== typeof b) return false;
+
+    // 基本类型
+    if (typeof a !== 'object') return a === b;
+
+    // React 元素（ReactNode）比较引用
+    // 如果只有一个是 ReactNode，肯定不相等
+    if (/*#__PURE__*/React.isValidElement(a) && ! /*#__PURE__*/React.isValidElement(b)) return false;
+    if (/*#__PURE__*/React.isValidElement(b) && ! /*#__PURE__*/React.isValidElement(a)) return false;
+    // 如果两个都是 ReactNode，比较引用
+    if (/*#__PURE__*/React.isValidElement(a) && /*#__PURE__*/React.isValidElement(b)) {
+      return a === b;
+    }
+
+    // 数组比较
+    if (Array.isArray(a) && Array.isArray(b)) {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) {
+        if (!deepEqual(a[i], b[i])) return false;
+      }
+      return true;
+    }
+
+    // 对象比较
+    if (Array.isArray(a) || Array.isArray(b)) return false;
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (const key of keysA) {
+      if (!keysB.includes(key)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    return true;
+  }
+
+  // 使用 useRef 来跟踪 componentProps 和 componentKey 的变化
+  const prevComponentPropsRef = React.useRef(componentProps);
+  const prevComponentKeyRef = React.useRef(componentKey);
+  const stableComponentPropsRef = React.useRef({
+    detail: {
+      componentKey
+    },
+    ...jjbCommonLib.tools.toObject(componentProps)
+  });
 
   // 使用 useMemo 来稳定化 componentProps，避免因对象重新创建导致的重新渲染
   const stableComponentProps = React.useMemo(() => {
-    return {
-      detail: {
-        componentKey
-      },
-      ...jjbCommonLib.tools.toObject(componentProps)
-    };
-  }, [componentKey, JSON.stringify(componentProps)]);
+    const propsChanged = !deepEqual(prevComponentPropsRef.current, componentProps);
+    const keyChanged = prevComponentKeyRef.current !== componentKey;
+    if (propsChanged || keyChanged) {
+      prevComponentPropsRef.current = componentProps;
+      prevComponentKeyRef.current = componentKey;
+      stableComponentPropsRef.current = {
+        detail: {
+          componentKey
+        },
+        ...jjbCommonLib.tools.toObject(componentProps)
+      };
+    }
+    return stableComponentPropsRef.current;
+  }, [componentKey, componentProps]);
 
   // 使用 useMemo 来稳定化 initialize 函数
   const stableInitialize = React.useMemo(() => initialize, [initialize]);

package/import-cloud-component.js

@@ -8,7 +8,8 @@ import { tools } from '@cqsjjb/jjb-common-lib';
 export function genCommonJSRuntime({
   from
 }, code) {
-  const styleId = tools.createOnlyKey();
+  const styleId = Math.random().toString(36).substring(2, 15);
+  const newCode = code.replace(/\{cloudComponentStyleId\}/g, styleId);
   return {
     styleId,
     useModule: new Function(`
@@ -23,7 +24,7 @@ export function genCommonJSRuntime({
       }
     };
     /* cloud-component-code */
-    ${code.replace(/\{cloudComponentStyleId\}/g, styleId)}
+    ${newCode}
     /* cloud-component-code */
     return Object.assign(module.exports, exports);
   `)
@@ -69,15 +70,14 @@ export default async function ImportCloudComponent(options) {
     __dependencies[key] = value;
   });
   let module;
-  let styleId;
   let useModule;
+  let styleId;
   try {
     const runtime = genCommonJSRuntime({
       from
     }, responseText);
-    styleId = runtime.styleId;
     useModule = runtime.useModule;
-
+    styleId = runtime.styleId;
     // 获取云组件导出CJS模块
     module = useModule(__dependencies);
     if (!module || typeof module !== 'object') {
@@ -106,7 +106,7 @@ export default async function ImportCloudComponent(options) {
   // 返回组件CSJ模块
   return {
     module,
-    styleId,
-    isNewVersion
+    isNewVersion,
+    styleId
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-cloud-component",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "前端-云组件",
   "main": "index.js",
   "scripts": {