@cqsjjb/jjb-cloud-component 0.0.4 → 0.0.6

package/README.md

@@ -0,0 +1,78 @@
+# ImportCloudComponent
+
+手动导入云组件
+
+## 何时使用
+
+需要提前预加载、批量加载云组件等场景时使用
+
+## 代码演示
+
+```jsx
+import { useEffect } from 'react';
+import { ImportCloudComponent } from '@cqsjjb/jjb-cloud-component';
+
+function App() {
+  useEffect(() => {
+    ImportCloudComponent({
+      lib: '__coreLib',
+      from: 'https://xxx.xxx.xx/index.js'
+    }).then(m => {
+      // m
+    });
+  }, []);
+}
+```
+
+## 参数
+
+| 属性      | 说明        |                                   类型                                    |       默认值 |
+|---------|:----------|:-----------------------------------------------------------------------:|----------:|
+| from    | 云组件资源链接   |                                `string`                                 |         - |
+| lib     | 云组件依赖库变量  |                                `string`                                 | `coreLib` |
+| cache   | 云组件资源缓存策略 | `default` `force-cache` `no-cache` `no-store` `only-if-cached` `reload` | `default` |
+| headers | 请求头       |                          `Record<string, any>`                          |         - |
+
+## 返回值
+
+| 属性           | 说明                                                    |    类型     | 默认值 |
+|--------------|:------------------------------------------------------|:---------:|----:|
+| styleId      | 样式id，云组件加载时，自动判断内部是否有自定义样式，如果有内部自定义添加到head元素上，并返回样式ID | `string`  |   - |
+| isNewVersion | 是否是新版云组件模板开发的云组件                                      | `boolean` |   - |
+| module       | 加载成功返回的组件模块                                           | `IModule` |   - |
+
+## IModule
+
+| 属性                | 说明     |        类型         | 默认值 |
+|-------------------|:-------|:-----------------:|----:|
+| info.name         | 组件的名称  |     `string`      |   - |
+| info.remark       | 组件说明   |     `string`      |   - |
+| info.version      | 组件版本   |     `string`      |   - |
+| info.description  | 组件描述   |     `string`      |   - |
+| info.environment  | 组件环境   |     `string`      |   - |
+| info.dependencies | 组件依赖清单 |     `string`      |   - |
+| default           | 组件本体   | `React.Component` |   - |
+
+## FAQ
+* 在底座中加载云组件报：Error: Minified React error #321  
+    这个错误通常是应用ReactDOM渲染了分别来自不同React构建的DOM树，简单来说就是存在两个React库。由于云组件默认使用__coreLib依赖变量，当你的云组件加载时可能用到其他应用的__coreLib，解决办法是把应用main.js中的__coreLib改成唯一变量名，例如：__coreUserLib，然后修改云组件的lib属性即可。
+    ```jsx 
+    <CloudComponent lib="__coreUserLib" />
+  
+* 组件"XX"不存在"info"配置，疑似旧版云组件或配置错误  
+    这个警告通常是使用了旧版云组件或链接不是云组件导致。
+* 需要"XX"依赖，请在"window.XX"中提供此依赖！
+    这个错误只有新版云组件才会有，通常是应用依赖变量（__coreLib）不匹配云组件的依赖清单，请请检查！注意应用依赖变量的键名必须与云组件的依赖清单键名一致，否则会报错！  
+    云组件
+    ```text
+    // src/jjb.config.json
+    { dependencies: { 'react': 'react', 'react-dom': 'react-dom' } }
+    ```
+    应用
+    ```js
+    // src/main.js
+    window.__coreLib = {
+      'react': require('react'),
+      'react-dom': require('react-dom')
+    }
+    ```

package/cloud-component.d.ts

@@ -1,19 +1,24 @@
 // @ts-ignore
 import * as React from 'react';
-import type I_ImportCloudComponent from './import-cloud-component';
 
 interface ComponentProps {
   ref?: React.Ref<{ [ p: string ]: any }>;
   children?: React.ReactNode;
 }
 
+/**
+ * @description 卸载云组件样式
+ * @param styleId {string} 样式id
+ */
+export function useUnMountCloudComponentStyle (styleId: string): void;
+
 interface CloudComponentProps extends ComponentProps {
   // 云组件依赖库变量
-  lib: string;
+  lib?: string;
   // 组件资源地址
   from: string;
   // 缓存
-  cache?: string;
+  cache?: 'default' | 'force-cache' | 'no-cache' | 'no-store' | 'only-if-cached' | 'reload';
   // 请求头
   headers?: {};
   // 是否需要初始化更新settings和dataSource
@@ -46,4 +51,4 @@ interface CloudComponentFc extends React.FC<CloudComponentProps> {
 }
 
 declare const CloudComponent: CloudComponentFc;
-declare const ImportCloudComponent: typeof I_ImportCloudComponent;
+export default CloudComponent;

package/cloud-component.js

@@ -4,7 +4,11 @@ import { tools } from '@cqsjjb/jjb-common-lib';
 
 import ImportCloudComponent from './import-cloud-component';
 
-function unMountCloudComponentStyle(styleId) {
+/**
+ * @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) {
@@ -12,6 +16,10 @@ function unMountCloudComponentStyle(styleId) {
   }
 }
 
+/**
+ * @description 云组件
+ * @param props {object} 组件props
+ */
 export default function CloudComponent(props) {
   let styleId;
   const [ Component, setComponent ] = React.useState(null);
@@ -35,7 +43,8 @@ export default function CloudComponent(props) {
       onLoadStart && onLoadStart();
       const {
         module,
-        styleId: _styleId
+        styleId: _styleId,
+        isNewVersion
       } = await ImportCloudComponent({
         lib,
         from,
@@ -47,14 +56,16 @@ export default function CloudComponent(props) {
 
       setComponent(() => {
         onLoadEnd && onLoadEnd();
-        return module.default();
+        return isNewVersion
+          ? module.default()
+          : module.default;
       });
     }
 
     load().then(() => null);
 
     return () => {
-      unMountCloudComponentStyle(styleId);
+      useUnMountCloudComponentStyle(styleId);
       onDestroy && onDestroy();
     };
   }, []);

package/import-cloud-component.d.ts

@@ -1,17 +1,15 @@
 // @ts-ignore
 import React from 'react';
 
-declare function ImportCloudComponent (options: {
-  // 组件依赖库变量
-  lib?: string;
-  // 组件地址
-  from: string;
-  // 缓存
-  cache?: string;
-  // 请求头
-  headers?: {}
-}): {
+/**
+ * @description 云组件模块
+ */
+type CloudModule = {
+  // 样式id
   styleId: string;
+  // 是否是新版云组件
+  isNewVersion: boolean;
+  // 组件模块
   module: {
     // 组件信息
     info: {
@@ -31,6 +29,52 @@ declare function ImportCloudComponent (options: {
     // 组件本体
     default: () => React.Component
   }
-}
+};
+
+/**
+ * @description 依赖检测
+ * @param lib {string} 依赖变量
+ * @param name {string} 依赖名称
+ * @return {boolean}
+ */
+declare function checkDependence (lib: string, name: string): boolean;
+
+/**
+ * @description 依赖检测
+ * @param lib {string} 依赖变量
+ * @param dependencies {string[]} 依赖名称
+ * @return {Array<{ name: string, check: boolean }>}
+ */
+declare function checkDependencies (lib: string, dependencies: string[]): Array<{ name: string, check: boolean }>
+
+/**
+ * @description 生成CJS运行环境
+ * @param options {string} 依赖变量
+ * @param code {string} 依赖名称
+ * @return {CloudModule}
+ */
+declare function genCommonJSRuntime (options: { lib: string, from: string }, code: string): CloudModule;
+
+/**
+ * @description 导入云组件
+ * @param options {string} 依赖变量
+ * @return {Promise<CloudModule>}
+ */
+declare function ImportCloudComponent (options: {
+  // 组件依赖库变量
+  lib?: string;
+  // 组件地址
+  from: string;
+  // 缓存
+  cache?: 'default' | 'force-cache' | 'no-cache' | 'no-store' | 'only-if-cached' | 'reload';
+  // 请求头
+  headers?: {}
+}): Promise<CloudModule>
 
 export default ImportCloudComponent;
+
+export {
+  checkDependence,
+  checkDependencies,
+  genCommonJSRuntime
+};

package/import-cloud-component.js

@@ -1,25 +1,18 @@
 import { tools } from '@cqsjjb/jjb-common-lib';
 
-/**
- * @description 优化依赖变量
- * @param name {string} 依赖变量名
- * @return {*|string}
- */
-function ansLibField(name) {
-  return name.indexOf('.') !== -1
-    ? name
-    : `.${name}`;
+function resolveLib(lib) {
+  if (typeof window.proxy !== 'undefined' && lib.indexOf('base') === -1) {
+    return genFieldPath(`window.proxy.${lib}`);
+  } else {
+    return genFieldPath(`window.${lib}`);
+  }
 }
 
-/**
- * @description 给地址加随机字符串
- * @param url {string} 地址
- * @return {string}
- */
-function fromURL(url) {
-  return `${url}${url.indexOf('?') !== -1
-    ? '&'
-    : '?'}v=${new Date().getTime()}`;
+function genFieldPath(field) {
+  return field
+    .split('.')
+    .filter(Boolean)
+    .join('.');
 }
 
 /**
@@ -28,7 +21,7 @@ function fromURL(url) {
  * @param {string} from 云组件地址
  * @param {string} code 注入云组件代码
  */
-function genCommonJSRuntime({
+export function genCommonJSRuntime({
   lib,
   from
 }, code) {
@@ -40,7 +33,12 @@ function genCommonJSRuntime({
     const module = { exports: null };
     const exports = {};
     const require = function (id) {
-      return window${ansLibField(lib)}[ id ];
+      const find = ${resolveLib(lib)}[ id ];
+      if (find) {
+        return find;
+      } else {
+        throw Error('云组件使用依赖失败，请确认"['+ id +']"是否在${resolveLib(lib)}中？');
+      }
     };
     /* cloud-component-code */
     ${code.replace(/\{cloudComponentStyleId\}/g, styleId)}
@@ -50,18 +48,14 @@ function genCommonJSRuntime({
   };
 }
 
-function print(msg) {
-  return `[ImportCloudComponent]: ${msg}`;
-}
-
 /**
  * @description 宿主环境依赖检测
  * @param lib {string} 依赖变量
  * @param name {string} 依赖名称
  * @return {boolean}
  */
-function checkDependence(lib, name) {
-  const dependencies = new Function(`return window${ansLibField(lib)}`)();
+export function checkDependence(lib, name) {
+  const dependencies = new Function(`return ${resolveLib(lib)}`)();
   return tools.isUndefined(dependencies[ name ]);
 }
 
@@ -69,14 +63,13 @@ function checkDependence(lib, name) {
  * @description 依赖检测
  * @param lib {string}
  * @param dependencies {string[]}
- * @param isProxy {boolean}
  * @return {Array<{ name: string, check: boolean }>}
  */
-function checkDependencies(lib, dependencies, isProxy) {
+export function checkDependencies(lib, dependencies) {
   return Object.keys(dependencies).map(name => {
     return {
       name,
-      check: checkDependence(lib, name, isProxy)
+      check: checkDependence(lib, name)
     };
   }).filter(i => i.check);
 }
@@ -85,67 +78,71 @@ function checkDependencies(lib, dependencies, isProxy) {
  * @description 手动加载模块
  * @param options {{ from: string, lib: string, cache: string, headers: {} }}
  * @example
- *  Import({
+ *  ImportCloudComponent({
  *    from: 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js'
  *  }).then(res => {
  *    console.log(res);
  *  });
  * @return {Promise<{ module: { info: {}, default:() => React.Component }, styleId: string }>}
  */
-export default function ImportCloudComponent(options) {
-  const lib = typeof window.proxy === 'undefined' ? `${options.lib || '__coreLib'}` : `.proxy.${options.lib || '__coreLib'}`;
+export default async function ImportCloudComponent(options) {
+  const lib = options.lib || '__coreLib';
   const from = options.from;
 
   const cache = options.cache || 'force-cache';
   const headers = tools.toObject(options.headers);
 
+  let isNewVersion = true;
+
   if (!from) {
-    throw Error(print('云组件资源访问地址不能为空!'));
+    throw Error('云组件资源访问地址不能为空！');
   }
 
-  return fetch(from, {
+  const response = await fetch(from, {
     cache,
     headers
-  })
-    .then(response => response.text())
-    .then(response => {
-      const {
-        styleId,
-        useModule
-      } = genCommonJSRuntime({
-        lib,
-        from
-      }, response);
-      // 获取云组件导出CJS模块
-      const module = useModule();
-      // 获取云组件info变量
-      const { info } = module;
-      // 判断当前云组件是否导出了info变量
-      if (tools.isUndefined(info)) {
-        throw Error(print(`${from} 缺少info变量导出, 无法获知此组件的基本信息, 请在组件包入口处导出组件的info变量!`));
-      }
-      // 获取云组件的基本信息
-      const {
-        name,
-        dependencies
-      } = info;
-      // 判断云组件是否有依赖配置
-      if (!tools.isEmptyObject(dependencies)) {
-        // 是否存在未安装的依赖项
-        const noInstallDependencies = checkDependencies(lib, dependencies);
-        // 判断是否有
-        if (tools.isValidArray(noInstallDependencies)) {
-          throw Error(print(`${name} 需要${noInstallDependencies.at(0).name}依赖, 请在window.${lib}中提供此依赖!`));
-        }
+  });
+  const responseText = await response.text();
+
+  const {
+    styleId,
+    useModule
+  } = genCommonJSRuntime({
+    lib,
+    from
+  }, responseText);
+  // 获取云组件导出CJS模块
+  const module = useModule();
+  // 获取云组件info变量
+  const { info } = module;
+  // 判断当前云组件是否导出了info变量
+  if (tools.isUndefined(info)) {
+    window[ 'console' ][ 'warn' ](`组件 "${from}" 不存在"info"配置，疑似旧版云组件或配置错误`);
+    isNewVersion = false;
+  } else {
+    // 获取云组件的基本信息
+    const {
+      name,
+      dependencies
+    } = info;
+    // 判断云组件是否有依赖配置
+    if (!tools.isEmptyObject(dependencies)) {
+      // 是否存在未安装的依赖项
+      const noInstallDependencies = checkDependencies(lib, dependencies);
+      // 判断是否有
+      if (tools.isValidArray(noInstallDependencies)) {
+        throw Error(`"${name}" 需要"${noInstallDependencies.at(0).name}"依赖，请在"${resolveLib(lib)}"中提供此依赖！`);
       }
+    }
 
-      console.log(print(`${module.info.name} 加载完成!`));
+    window[ 'console' ][ 'log' ](`云组件 [${info.name}] 加载完成！`);
+  }
 
-      // 返回组件CSJ模块
-      return {
-        module,
-        styleId
-      };
-    });
+  // 返回组件CSJ模块
+  return {
+    module,
+    styleId,
+    isNewVersion
+  };
 }
 

package/index.d.ts

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

package/index.js

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

package/package.json

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