@cqsjjb/jjb-cloud-component 0.0.10 → 0.0.11

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,
@@ -110,15 +110,17 @@ 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();
           const $module = isNewVersion ? module.default({
@@ -142,13 +144,16 @@ 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, moduleKey]);
+  }, [styleId]);
 
   /**
    * 深度比较两个值是否相等，支持 ReactNode

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,16 +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);
-    console.log('runtime', runtime);
-    styleId = runtime.styleId;
     useModule = runtime.useModule;
-
+    styleId = runtime.styleId;
     // 获取云组件导出CJS模块
     module = useModule(__dependencies);
     if (!module || typeof module !== 'object') {
@@ -107,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.10",
+  "version": "0.0.11",
   "description": "前端-云组件",
   "main": "index.js",
   "scripts": {