@cqsjjb/jjb-cloud-component 0.0.7-experimental.2 → 0.0.7

package/cloud-component.d.ts

@@ -11,9 +11,21 @@ interface ComponentProps {
  */
 export function useUnMountCloudComponentStyle (styleId: string): void;
 
+/**
+ * @description 云组件默认内置依赖项
+ * 所有云组件都可以直接使用这些依赖，无需手动传递
+ */
+interface DefaultDependencies {
+  'react': any;
+  'react-dom': any;
+  '@cqsjjb/jjb-common-lib': any;
+}
+
 interface CloudComponentProps extends ComponentProps {
-  // 组件依赖
-  dependencies?: { [ p: string ]: string }
+  // 组件依赖，支持函数引用（如require()的结果）
+  // 默认内置依赖：react, react-dom, @cqsjjb/jjb-common-lib
+  // 用户自定义依赖会与默认依赖合并，同名依赖会被覆盖
+  dependencies?: { [ p: string ]: any }
   // 组件资源地址
   from: string;
   // 缓存
@@ -26,6 +38,8 @@ interface CloudComponentProps extends ComponentProps {
   componentKey: string;
   // 组件的额外Props
   componentProps?: Record<string, unknown>;
+  // 组件引用
+  componentRef?: React.Ref<Record<string, unknown>>;
   // 组件开始加载
   onLoadStart?: () => void;
   // 组件结束加载

package/cloud-component.js

@@ -19,6 +19,9 @@ export function useUnMountCloudComponentStyle(styleId) {
 /**
  * @description 云组件
  * @param props {object} 组件props
+ * @param props.dependencies {object} 自定义依赖项，会与默认依赖项合并
+ * @note 默认内置依赖项：react, react-dom, @cqsjjb/jjb-common-lib
+ * @note 用户自定义依赖项会覆盖同名的默认依赖项
  */
 export default function CloudComponent(props) {
   let styleId;
@@ -27,7 +30,7 @@ export default function CloudComponent(props) {
     from,
     cache,
     headers,
-    dependencies = [],
+    dependencies = {},
     initialize,
     componentRef,
     componentKey,
@@ -39,10 +42,73 @@ export default function CloudComponent(props) {
     onUpdated
   } = props;
 
+  // 默认内置依赖项，所有云组件都可以使用
+  const defaultDependencies = {
+    'react': require('react'),
+    'react-dom': require('react-dom'),
+    '@cqsjjb/jjb-common-lib': require('@cqsjjb/jjb-common-lib')
+  };
+
+  // 合并默认依赖和用户自定义依赖，用户依赖优先级更高
+  const mergedDependencies = React.useMemo(() => {
+    return {
+      ...defaultDependencies,
+      ...dependencies
+    };
+  }, [dependencies]);
+
+  // 使用 useMemo 来稳定化 mergedDependencies 引用，避免不必要的重新渲染
+  const stableDependencies = React.useMemo(() => {
+    return mergedDependencies;
+  }, [mergedDependencies]);
+  
+  // 使用 useRef 来跟踪 dependencies 的变化，避免因对象引用变化导致的重新渲染
+  const prevDependenciesRef = React.useRef();
+  const shouldReloadDependencies = React.useMemo(() => {
+    if (!prevDependenciesRef.current) {
+      prevDependenciesRef.current = mergedDependencies;
+      return true;
+    }
+    
+    // 比较 dependencies 的键和值
+    const prevKeys = Object.keys(prevDependenciesRef.current);
+    const currentKeys = Object.keys(mergedDependencies);
+    
+    if (prevKeys.length !== currentKeys.length) {
+      prevDependenciesRef.current = mergedDependencies;
+      return true;
+    }
+    
+    for (const key of currentKeys) {
+      if (prevDependenciesRef.current[key] !== mergedDependencies[key]) {
+        prevDependenciesRef.current = mergedDependencies;
+        return true;
+      }
+    }
+    
+    return false;
+  }, [mergedDependencies]);
+  
+  // 使用 useRef 来存储回调函数，避免因回调函数重新创建导致的重新渲染
+  const onLoadStartRef = React.useRef(onLoadStart);
+  const onLoadEndRef = React.useRef(onLoadEnd);
+  const onDestroyRef = React.useRef(onDestroy);
+  
   React.useEffect(() => {
+    onLoadStartRef.current = onLoadStart;
+    onLoadEndRef.current = onLoadEnd;
+    onDestroyRef.current = onDestroy;
+  });
+
+  React.useEffect(() => {
+    // 只有当 dependencies 真正发生变化时才重新加载
+    if (!shouldReloadDependencies && prevDependenciesRef.current) {
+      return;
+    }
+
     async function load() {
       try {
-        onLoadStart && onLoadStart();
+        onLoadStartRef.current && onLoadStartRef.current();
         const {
           module,
           styleId: _styleId,
@@ -51,20 +117,25 @@ export default function CloudComponent(props) {
           from,
           cache,
           headers,
-          dependencies
+          dependencies: stableDependencies
         });
 
         styleId = _styleId;
 
         setComponent(() => {
-          onLoadEnd && onLoadEnd();
+          onLoadEndRef.current && onLoadEndRef.current();
           return isNewVersion
-            ? module.default(componentRef)
+            ? module.default({
+              // 组件引用
+              ref: componentRef,
+              // 将依赖项穿透下去，用于在组件内部使用依赖项（支持云组件嵌套云组件）
+              $$dependencies: stableDependencies
+            })
             : module.default;
         });
       } catch (error) {
         console.error('云组件加载失败:', error);
-        onLoadEnd && onLoadEnd();
+        onLoadEndRef.current && onLoadEndRef.current();
         // 可以设置一个错误组件或显示错误信息
         setComponent(() => () => React.createElement('div', { 
           style: { color: 'red', padding: '10px' } 
@@ -78,17 +149,25 @@ export default function CloudComponent(props) {
       if (styleId) {
         useUnMountCloudComponentStyle(styleId);
       }
-      onDestroy && onDestroy();
+      onDestroyRef.current && onDestroyRef.current();
     };
-  }, [from, cache, headers, dependencies]);
+  }, [from, cache, headers, shouldReloadDependencies]);
+
+  // 使用 useMemo 来稳定化 componentProps，避免因对象重新创建导致的重新渲染
+  const stableComponentProps = React.useMemo(() => {
+    return {
+      detail: { componentKey },
+      ...tools.toObject(componentProps)
+    };
+  }, [componentKey, JSON.stringify(componentProps)]);
+
+  // 使用 useMemo 来稳定化 initialize 函数
+  const stableInitialize = React.useMemo(() => initialize, [initialize]);
 
   return Component && (
     <Component
-      initialize={initialize}
-      {...{
-        detail: { componentKey },
-        ...tools.toObject(componentProps)
-      }}
+      initialize={stableInitialize}
+      {...stableComponentProps}
       onMounted={onMounted}
       onUpdated={onUpdated}
     />

package/import-cloud-component.js

@@ -70,10 +70,10 @@ export default async function ImportCloudComponent(options) {
   } catch (error) {
     throw new Error(`云组件加载失败: ${error.message}`);
   }
-  const __require = {};
+  const __dependencies = {};
 
   Object.entries(dependencies).forEach(([key, value]) => {
-    __require[key] = value;
+    __dependencies[key] = value;
   });
 
   let module;
@@ -89,7 +89,7 @@ export default async function ImportCloudComponent(options) {
     useModule = runtime.useModule;
     
     // 获取云组件导出CJS模块
-    module = useModule(__require);
+    module = useModule(__dependencies);
     
     if (!module || typeof module !== 'object') {
       throw new Error('云组件模块格式错误');

package/package.json

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