@cqsjjb/jjb-cloud-component 0.0.3 → 0.0.5

package/cloud-component.d.ts

@@ -1,17 +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;
   // 组件资源地址
   from: string;
   // 缓存
-  cache?: string;
+  cache?: 'default' | 'force-cache' | 'no-cache' | 'no-store' | 'only-if-cached' | 'reload';
   // 请求头
   headers?: {};
   // 是否需要初始化更新settings和dataSource
@@ -44,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

@@ -11,24 +11,13 @@ function ansLibField(name) {
     : `.${name}`;
 }
 
-/**
- * @description 给地址加随机字符串
- * @param url {string} 地址
- * @return {string}
- */
-function fromURL(url) {
-  return `${url}${url.indexOf('?') !== -1
-    ? '&'
-    : '?'}v=${new Date().getTime()}`;
-}
-
 /**
  * @description 生成CJS运行环境
  * @param {string} lib 云组件依赖变量
  * @param {string} from 云组件地址
  * @param {string} code 注入云组件代码
  */
-function genCommonJSRuntime({
+export function genCommonJSRuntime({
   lib,
   from
 }, code) {
@@ -40,7 +29,12 @@ function genCommonJSRuntime({
     const module = { exports: null };
     const exports = {};
     const require = function (id) {
-      return window${ansLibField(lib)}[ id ];
+      const find = window${ansLibField(lib)}[ id ];
+      if (find) {
+        return find;
+      } else {
+        throw Error('云组件使用依赖失败，请确认"['+ id +']"是否在window${ansLibField(lib)}中？');
+      }
     };
     /* cloud-component-code */
     ${code.replace(/\{cloudComponentStyleId\}/g, styleId)}
@@ -60,7 +54,7 @@ function print(msg) {
  * @param name {string} 依赖名称
  * @return {boolean}
  */
-function checkDependence(lib, name) {
+export function checkDependence(lib, name) {
   const dependencies = new Function(`return window${ansLibField(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,73 @@ 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 = typeof window.proxy === 'undefined'
+    ? `${options.lib || '__coreLib'}`
+    : `.proxy.${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}"依赖，请在"window.${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 CloudComponent from './cloud-component';
-export 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.3",
+  "version": "0.0.5",
   "description": "前端-云组件",
   "main": "index.js",
   "scripts": {