@cqsjjb/jjb-cloud-component 0.0.1

package/cloud-component.d.ts

@@ -0,0 +1,42 @@
+// @ts-ignore
+import * as React from 'react';
+
+interface ComponentProps {
+  ref?: React.Ref<{ [ p: string ]: any }>;
+  children?: React.ReactNode;
+}
+
+interface CloudComponentProps extends ComponentProps {
+  // 组件资源地址
+  from: string;
+  // 是否需要初始化更新settings和dataSource
+  initialize?: boolean;
+  // 组件唯一key
+  componentKey: string;
+  // 组件的额外Props
+  componentProps?: {};
+  // 组件开始加载
+  onLoadStart?: () => void;
+  // 组件结束加载
+  onLoadEnd?: () => void;
+  // 组件销毁
+  onDestroy?: () => void;
+  // 组件已挂载
+  onMounted?: (key: string, ref: {
+    // 组件输出的表单配置
+    formItems?: {},
+    // 组件更新
+    updateData?: (settings?: {}, dataSource?: any) => void;
+  }) => void;
+  // 组件已更新
+  onUpdated?: (key: string, ref: {
+    settings?: {},
+    dataSource?: any
+  }) => void;
+}
+
+interface CloudComponentFc extends React.FC<CloudComponentProps> {
+}
+
+declare const CloudComponent: CloudComponentFc;
+export default CloudComponent;

package/cloud-component.js

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { tools } from '@cqsjjb/jjb-common-lib';
+
+import ImportCloudComponent from './import-cloud-component';
+
+function unMountCloudComponentStyle(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 default function CloudComponent(props) {
+  let styleId;
+  const [ Component, setComponent ] = React.useState(null);
+  const {
+    from,
+    initialize,
+    componentKey,
+    componentProps,
+    onLoadStart,
+    onLoadEnd,
+    onDestroy,
+    onMounted,
+    onUpdated
+  } = props;
+
+  React.useEffect(() => {
+    async function load() {
+      onLoadStart && onLoadStart();
+      const {
+        module,
+        styleId: _styleId
+      } = await ImportCloudComponent({ from });
+
+      styleId = _styleId;
+
+      setComponent(() => {
+        onLoadEnd && onLoadEnd();
+        return module.default();
+      });
+    }
+
+    load().then(() => null);
+
+    return () => {
+      unMountCloudComponentStyle(styleId);
+      onDestroy && onDestroy();
+    };
+  }, []);
+
+  return Component && (
+    <Component
+      initialize={initialize}
+      {...{
+        detail: { componentKey },
+        ...tools.toObject(componentProps)
+      }}
+      onMounted={onMounted}
+      onUpdated={onUpdated}
+    />
+  );
+}

package/import-cloud-component.d.ts

@@ -0,0 +1,32 @@
+// @ts-ignore
+import React from 'react';
+
+declare function ImportCloudComponent (options: {
+  // 组件依赖库变量
+  lib?: string;
+  // 组件地址
+  from: string;
+}): {
+  styleId: string;
+  module: {
+    // 组件信息
+    info: {
+      // 组件名称
+      name: string;
+      // 组件说明
+      remark: string;
+      // 组件版本
+      version: string;
+      // 组件描述
+      description: string;
+      // 组件环境
+      environment: {};
+      // 组件依赖
+      dependencies?: { [ p: string ]: string }
+    },
+    // 组件本体
+    default: () => React.Component
+  }
+}
+
+export default ImportCloudComponent;

package/import-cloud-component.js

@@ -0,0 +1,143 @@
+import { tools } from '@cqsjjb/jjb-common-lib';
+
+/**
+ * @description 优化依赖变量
+ * @param name {string} 依赖变量名
+ * @return {*|string}
+ */
+function ansLibField(name) {
+  return name.indexOf('.') !== -1
+    ? 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({
+  lib,
+  from
+}, code) {
+  const styleId = tools.createOnlyKey();
+  return {
+    styleId,
+    useModule: new Function(`
+    /* cloud-component-assets: ${from} */
+    const module = { exports: null };
+    const exports = {};
+    const require = function (id) {
+      return window${ansLibField(lib)}[ id ];
+    };
+    /* cloud-component-code */
+    ${code.replace(/\{cloudComponentStyleId\}/g, styleId)}
+    /* cloud-component-code */
+    return Object.assign(module.exports, exports);
+  `)
+  };
+}
+
+function print(msg) {
+  return `[ImportCloudComponent]: ${msg}`;
+}
+
+/**
+ * @description 宿主环境依赖检测
+ * @param lib {string} 依赖变量
+ * @param name {string} 依赖名称
+ * @return {boolean}
+ */
+function checkDependence(lib, name) {
+  return tools.isUndefined(window[ lib ][ name ]);
+}
+
+/**
+ * @description 依赖检测
+ * @param lib {string}
+ * @param dependencies {string[]}
+ * @param isProxy {boolean}
+ * @return {Array<{ name: string, check: boolean }>}
+ */
+function checkDependencies(lib, dependencies, isProxy) {
+  return Object.keys(dependencies).map(name => {
+    return {
+      name,
+      check: checkDependence(lib, name, isProxy)
+    };
+  }).filter(i => i.check);
+}
+
+/**
+ * @description 手动加载模块
+ * @param options {{ from: string, lib: string }}
+ * @example
+ *  Import({
+ *    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 = options.lib || '__coreLib';
+  const from = options.from;
+
+  if (!from) {
+    throw Error(print('云组件资源访问地址不能为空!'));
+  }
+
+  return fetch(fromURL(from))
+    .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}中提供此依赖!`));
+        }
+      }
+
+      console.log(print(`${module.info.name} 加载完成!`));
+
+      // 返回组件CSJ模块
+      return {
+        module,
+        styleId
+      };
+    });
+}

package/index.js

@@ -0,0 +1,7 @@
+import CloudComponent from './cloud-component';
+import ImportCloudComponent from './import-cloud-component';
+
+export {
+  CloudComponent,
+  ImportCloudComponent
+};

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@cqsjjb/jjb-cloud-component",
+  "version": "0.0.1",
+  "description": "前端-云组件",
+  "main": "index.js",
+  "scripts": {
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "typings": "index.d.ts",
+  "author": "jiaoxiwei",
+  "license": "MIT",
+  "dependencies": {
+
+  }
+}