@cqsjjb/jjb-cloud-component 0.0.5 → 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/import-cloud-component.js

@@ -1,14 +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}`);
+  }
+}
+
+function genFieldPath(field) {
+  return field
+    .split('.')
+    .filter(Boolean)
+    .join('.');
 }
 
 /**
@@ -29,11 +33,11 @@ export function genCommonJSRuntime({
     const module = { exports: null };
     const exports = {};
     const require = function (id) {
-      const find = window${ansLibField(lib)}[ id ];
+      const find = ${resolveLib(lib)}[ id ];
       if (find) {
         return find;
       } else {
-        throw Error('云组件使用依赖失败，请确认"['+ id +']"是否在window${ansLibField(lib)}中？');
+        throw Error('云组件使用依赖失败，请确认"['+ id +']"是否在${resolveLib(lib)}中？');
       }
     };
     /* cloud-component-code */
@@ -44,10 +48,6 @@ export function genCommonJSRuntime({
   };
 }
 
-function print(msg) {
-  return `[ImportCloudComponent]: ${msg}`;
-}
-
 /**
  * @description 宿主环境依赖检测
  * @param lib {string} 依赖变量
@@ -55,7 +55,7 @@ function print(msg) {
  * @return {boolean}
  */
 export function checkDependence(lib, name) {
-  const dependencies = new Function(`return window${ansLibField(lib)}`)();
+  const dependencies = new Function(`return ${resolveLib(lib)}`)();
   return tools.isUndefined(dependencies[ name ]);
 }
 
@@ -86,9 +86,7 @@ export function checkDependencies(lib, dependencies) {
  * @return {Promise<{ module: { info: {}, default:() => React.Component }, styleId: string }>}
  */
 export default async function ImportCloudComponent(options) {
-  const lib = typeof window.proxy === 'undefined'
-    ? `${options.lib || '__coreLib'}`
-    : `.proxy.${options.lib || '__coreLib'}`;
+  const lib = options.lib || '__coreLib';
   const from = options.from;
 
   const cache = options.cache || 'force-cache';
@@ -133,7 +131,7 @@ export default async function ImportCloudComponent(options) {
       const noInstallDependencies = checkDependencies(lib, dependencies);
       // 判断是否有
       if (tools.isValidArray(noInstallDependencies)) {
-        throw Error(`"${name}" 需要"${noInstallDependencies.at(0).name}"依赖，请在"window.${lib}"中提供此依赖！`);
+        throw Error(`"${name}" 需要"${noInstallDependencies.at(0).name}"依赖，请在"${resolveLib(lib)}"中提供此依赖！`);
       }
     }
 

package/package.json

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