@cqsjjb/jjb-cloud-component 0.0.7 → 0.0.9

package/cloud-component.js

@@ -1,176 +1,166 @@
-import React from 'react';
-
-import { tools } from '@cqsjjb/jjb-common-lib';
-
-import ImportCloudComponent from './import-cloud-component';
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import ReactDOM from 'react-dom';
+import * as jjbCommonLib from '@cqsjjb/jjb-common-lib';
+import ImportCloudComponent from './import-cloud-component';
+
 /**
  * @description 卸载云组件样式
  * @param styleId {string} 样式id
- */
-export function useUnMountCloudComponentStyle(styleId) {
-  const root = document.querySelector('head');
-  const styled = root.querySelectorAll(`[data-cloud-component-style-id="${styleId}"]`);
-  for (const style of styled) {
-    root.removeChild(style);
-  }
-}
-
+ */
+export function useUnMountCloudComponentStyle(styleId) {
+  const root = document.querySelector('head');
+  const styled = root.querySelectorAll(`[data-cloud-component-style-id="${styleId}"]`);
+  for (const style of styled) {
+    root.removeChild(style);
+  }
+}
+
 /**
  * @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;
-  const [ Component, setComponent ] = React.useState(null);
-  const {
-    from,
-    cache,
-    headers,
-    dependencies = {},
-    initialize,
-    componentRef,
-    componentKey,
-    componentProps,
-    onLoadStart,
-    onLoadEnd,
-    onDestroy,
-    onMounted,
-    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 {
-        onLoadStartRef.current && onLoadStartRef.current();
-        const {
-          module,
-          styleId: _styleId,
-          isNewVersion
-        } = await ImportCloudComponent({
-          from,
-          cache,
-          headers,
-          dependencies: stableDependencies
-        });
-
-        styleId = _styleId;
-
-        setComponent(() => {
-          onLoadEndRef.current && onLoadEndRef.current();
-          return isNewVersion
-            ? module.default({
-              // 组件引用
-              ref: componentRef,
-              // 将依赖项穿透下去，用于在组件内部使用依赖项（支持云组件嵌套云组件）
-              $$dependencies: stableDependencies
-            })
-            : module.default;
-        });
-      } catch (error) {
-        console.error('云组件加载失败:', error);
-        onLoadEndRef.current && onLoadEndRef.current();
-        // 可以设置一个错误组件或显示错误信息
-        setComponent(() => () => React.createElement('div', { 
-          style: { color: 'red', padding: '10px' } 
-        }, `组件加载失败: ${error.message}`));
-      }
-    }
-
-    load().then(() => null);
-
-    return () => {
-      if (styleId) {
-        useUnMountCloudComponentStyle(styleId);
-      }
-      onDestroyRef.current && onDestroyRef.current();
-    };
-  }, [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={stableInitialize}
-      {...stableComponentProps}
-      onMounted={onMounted}
-      onUpdated={onUpdated}
-    />
-  );
-}
-
+ */
+export default function CloudComponent(props) {
+  let styleId;
+  const [Component, setComponent] = React.useState(null);
+  const {
+    from,
+    cache,
+    headers,
+    dependencies = {},
+    initialize,
+    componentRef,
+    componentKey,
+    componentProps,
+    onLoadStart,
+    onLoadEnd,
+    onDestroy,
+    onMounted,
+    onUpdated
+  } = props;
+
+  // 默认内置依赖项，所有云组件都可以使用
+  const defaultDependencies = {
+    'react': React,
+    'react-dom': ReactDOM,
+    'jjbCommonLib': jjbCommonLib,
+    '@cqsjjb/jjb-common-lib': jjbCommonLib
+  };
+
+  // 合并默认依赖和用户自定义依赖，用户依赖优先级更高
+  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 {
+        onLoadStartRef.current && onLoadStartRef.current();
+        const {
+          module,
+          styleId: _styleId,
+          isNewVersion
+        } = await ImportCloudComponent({
+          from,
+          cache,
+          headers,
+          dependencies: stableDependencies
+        });
+        styleId = _styleId;
+        setComponent(() => {
+          onLoadEndRef.current && onLoadEndRef.current();
+          return isNewVersion ? module.default({
+            // 组件引用
+            ref: componentRef,
+            // 将依赖项穿透下去，用于在组件内部使用依赖项（支持云组件嵌套云组件）
+            $$dependencies: stableDependencies
+          }) : module.default;
+        });
+      } catch (error) {
+        console.error('云组件加载失败:', error);
+        onLoadEndRef.current && onLoadEndRef.current();
+        // 可以设置一个错误组件或显示错误信息
+        setComponent(() => () => /*#__PURE__*/React.createElement('div', {
+          style: {
+            color: 'red',
+            padding: '10px'
+          }
+        }, `组件加载失败: ${error.message}`));
+      }
+    }
+    load().then(() => null);
+    return () => {
+      if (styleId) {
+        useUnMountCloudComponentStyle(styleId);
+      }
+      onDestroyRef.current && onDestroyRef.current();
+    };
+  }, [from, cache, headers, shouldReloadDependencies]);
+
+  // 使用 useMemo 来稳定化 componentProps，避免因对象重新创建导致的重新渲染
+  const stableComponentProps = React.useMemo(() => {
+    return {
+      detail: {
+        componentKey
+      },
+      ...jjbCommonLib.tools.toObject(componentProps)
+    };
+  }, [componentKey, JSON.stringify(componentProps)]);
+
+  // 使用 useMemo 来稳定化 initialize 函数
+  const stableInitialize = React.useMemo(() => initialize, [initialize]);
+  return Component && /*#__PURE__*/React.createElement(Component, _extends({
+    initialize: stableInitialize
+  }, stableComponentProps, {
+    onMounted: onMounted,
+    onUpdated: onUpdated
+  }));
+}

package/import-cloud-component.js

@@ -1,35 +1,35 @@
-import { tools } from '@cqsjjb/jjb-common-lib';
-
+import { tools } from '@cqsjjb/jjb-common-lib';
+
 /**
  * @description 生成CJS运行环境
  * @param {string} from 云组件地址
  * @param {string} code 注入云组件代码
- */
-export function genCommonJSRuntime({
-  from
-}, code) {
-  const styleId = tools.createOnlyKey();
-  return {
-    styleId,
-    useModule: new Function(`
-    /* cloud-component-assets: ${from} */
-    const module = { exports: null };
-    const exports = {};
-    const require = id => {
-      try {
-        return arguments[0][id];
-      } catch (error) {
-        throw new Error("云组件依赖[" + id + "]不存在！请检查dependencies配置！");
-      }
-    };
-    /* cloud-component-code */
-    ${code.replace(/\{cloudComponentStyleId\}/g, styleId)}
-    /* cloud-component-code */
-    return Object.assign(module.exports, exports);
-  `)
-  };
-}
-
+ */
+export function genCommonJSRuntime({
+  from
+}, code) {
+  const styleId = tools.createOnlyKey();
+  return {
+    styleId,
+    useModule: new Function(`
+    /* cloud-component-assets: ${from} */
+    const module = { exports: null };
+    const exports = {};
+    const require = id => {
+      try {
+        return arguments[0][id];
+      } catch (error) {
+        throw new Error("云组件依赖[" + id + "]不存在！请检查dependencies配置！");
+      }
+    };
+    /* cloud-component-code */
+    ${code.replace(/\{cloudComponentStyleId\}/g, styleId)}
+    /* cloud-component-code */
+    return Object.assign(module.exports, exports);
+  `)
+  };
+}
+
 /**
  * @description 手动加载模块
  * @param options {{ from: string, cache: string, headers: {} }}
@@ -40,83 +40,73 @@ export function genCommonJSRuntime({
  *    console.log(res);
  *  });
  * @return {Promise<{ module: { info: {}, default:() => React.Component }, styleId: string }>}
- */
-export default async function ImportCloudComponent(options) {
-  const from = options.from;
-  const dependencies = options.dependencies || {};
-  const cache = options.cache || 'force-cache';
-  const headers = tools.toObject(options.headers);
-
-  let isNewVersion = true;
-
-  if (!from) {
-    throw Error('云组件资源访问地址不能为空！');
-  }
-
-  let response;
-  let responseText;
-  
-  try {
-    response = await fetch(from, {
-      cache,
-      headers
-    });
-    
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-    }
-    
-    responseText = await response.text();
-  } catch (error) {
-    throw new Error(`云组件加载失败: ${error.message}`);
-  }
-  const __dependencies = {};
-
-  Object.entries(dependencies).forEach(([key, value]) => {
-    __dependencies[key] = value;
-  });
-
-  let module;
-  let styleId;
-  let useModule;
-  
-  try {
-    const runtime = genCommonJSRuntime({
-      from
-    }, responseText);
-    
-    styleId = runtime.styleId;
-    useModule = runtime.useModule;
-    
-    // 获取云组件导出CJS模块
-    module = useModule(__dependencies);
-    
-    if (!module || typeof module !== 'object') {
-      throw new Error('云组件模块格式错误');
-    }
-  } catch (error) {
-    throw new Error(`云组件解析失败: ${error.message}`);
-  }
-  
-  // 获取云组件info变量
-  const { info } = module;
-  // 判断当前云组件是否导出了info变量
-  if (tools.isUndefined(info)) {
-    if (process.env.NODE_ENV === 'development') {
-      console.warn(`云组件 "${from}" 不存在"info"配置，疑似旧版云组件或配置错误`);
-    }
-    isNewVersion = false;
-  } else {
-    if (process.env.NODE_ENV === 'development') {
-      console.log(`云组件 [${info.name}] 加载完成！`);
-    }
-  }
-
-  // 返回组件CSJ模块
-  return {
-    module,
-    styleId,
-    isNewVersion
-  };
-}
-
+ */
+export default async function ImportCloudComponent(options) {
+  const from = options.from;
+  const dependencies = options.dependencies || {};
+  const cache = options.cache || 'force-cache';
+  const headers = tools.toObject(options.headers);
+  let isNewVersion = true;
+  if (!from) {
+    throw Error('云组件资源访问地址不能为空！');
+  }
+  let response;
+  let responseText;
+  try {
+    response = await fetch(from, {
+      cache,
+      headers
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    responseText = await response.text();
+  } catch (error) {
+    throw new Error(`云组件加载失败: ${error.message}`);
+  }
+  const __dependencies = {};
+  Object.entries(dependencies).forEach(([key, value]) => {
+    __dependencies[key] = value;
+  });
+  let module;
+  let styleId;
+  let useModule;
+  try {
+    const runtime = genCommonJSRuntime({
+      from
+    }, responseText);
+    styleId = runtime.styleId;
+    useModule = runtime.useModule;
+
+    // 获取云组件导出CJS模块
+    module = useModule(__dependencies);
+    if (!module || typeof module !== 'object') {
+      throw new Error('云组件模块格式错误');
+    }
+  } catch (error) {
+    throw new Error(`云组件解析失败: ${error.message}`);
+  }
+
+  // 获取云组件info变量
+  const {
+    info
+  } = module;
+  // 判断当前云组件是否导出了info变量
+  if (tools.isUndefined(info)) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`云组件 "${from}" 不存在"info"配置，疑似旧版云组件或配置错误`);
+    }
+    isNewVersion = false;
+  } else {
+    if (process.env.NODE_ENV === 'development') {
+      console.log(`云组件 [${info.name}] 加载完成！`);
+    }
+  }
+
+  // 返回组件CSJ模块
+  return {
+    module,
+    styleId,
+    isNewVersion
+  };
+}

package/index.js

@@ -1,2 +1,2 @@
-export { default as CloudComponent, useUnMountCloudComponentStyle } from './cloud-component';
-export { default as ImportCloudComponent, genCommonJSRuntime } from './import-cloud-component';
+export { default as CloudComponent, useUnMountCloudComponentStyle } from './cloud-component';
+export { default as ImportCloudComponent, genCommonJSRuntime } from './import-cloud-component';

package/package.json

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