@cqsjjb/jjb-cloud-component 0.0.6 → 0.0.7-experimental

package/README.md

@@ -1,78 +1,222 @@
-# ImportCloudComponent
+# @cqsjjb/jjb-cloud-component
 
-手动导入云组件
+前端云组件库，支持动态加载远程React组件。
 
-## 何时使用
+## 特性
 
-需要提前预加载、批量加载云组件等场景时使用
+- 🚀 动态加载远程云组件
+- 🔧 支持组件依赖管理
+- 🎨 样式隔离和自动清理
+- 📦 CommonJS模块支持
+- 🔄 完整的生命周期钩子
+- 💪 TypeScript支持
 
-## 代码演示
+## 安装
+
+```bash
+npm install @cqsjjb/jjb-cloud-component
+```
+
+## 快速开始
+
+### 基础用法
 
 ```jsx
-import { useEffect } from 'react';
-import { ImportCloudComponent } from '@cqsjjb/jjb-cloud-component';
+import React from 'react';
+import { CloudComponent } from '@cqsjjb/jjb-cloud-component';
 
 function App() {
-  useEffect(() => {
-    ImportCloudComponent({
-      lib: '__coreLib',
-      from: 'https://xxx.xxx.xx/index.js'
-    }).then(m => {
-      // m
-    });
-  }, []);
+  return (
+    <CloudComponent
+      from="https://example.com/my-component.js"
+      componentKey="my-component"
+      componentProps={{
+        title: "Hello World",
+        count: 42
+      }}
+      onLoadStart={() => console.log('开始加载')}
+      onLoadEnd={() => console.log('加载完成')}
+      onMounted={(key, ref) => {
+        console.log('组件已挂载', key);
+        // 可以调用组件方法
+        ref.updateData?.({ theme: 'dark' });
+      }}
+    />
+  );
+}
+```
+
+### 高级用法
+
+```jsx
+import React from 'react';
+import { CloudComponent } from '@cqsjjb/jjb-cloud-component';
+
+function App() {
+  return (
+    <CloudComponent
+      from="https://cdn.example.com/advanced-component.js"
+      componentKey="advanced-component"
+      dependencies={{
+        'react': React,
+        'lodash': require('lodash'),
+        'moment': require('moment')
+      }}
+      cache="force-cache"
+      headers={{
+        'Authorization': 'Bearer token'
+      }}
+      initialize={true}
+      componentProps={{
+        config: { theme: 'dark' },
+        data: { items: [] }
+      }}
+      onLoadStart={() => console.log('开始加载云组件')}
+      onLoadEnd={() => console.log('云组件加载完成')}
+      onMounted={(key, ref) => {
+        console.log(`组件 ${key} 已挂载`);
+        // 获取组件配置
+        console.log('表单配置:', ref.formItems);
+        // 更新组件数据
+        ref.updateData?.({ 
+          settings: { theme: 'light' },
+          dataSource: { items: [1, 2, 3] }
+        });
+      }}
+      onUpdated={(key, ref) => {
+        console.log(`组件 ${key} 已更新`, ref);
+      }}
+      onDestroy={() => console.log('组件已销毁')}
+    />
+  );
+}
+```
+
+## API 文档
+
+### CloudComponent Props
+
+| 属性 | 类型 | 必需 | 描述 |
+|------|------|------|------|
+| `from` | `string` | ✅ | 云组件资源地址 |
+| `componentKey` | `string` | ✅ | 组件唯一标识 |
+| `dependencies` | `Record<string, unknown>` | ❌ | 组件依赖 |
+| `cache` | `CacheStrategy` | ❌ | 缓存策略 |
+| `headers` | `Record<string, string>` | ❌ | 请求头 |
+| `initialize` | `boolean` | ❌ | 是否需要初始化 |
+| `componentProps` | `Record<string, unknown>` | ❌ | 组件额外属性 |
+| `onLoadStart` | `() => void` | ❌ | 开始加载回调 |
+| `onLoadEnd` | `() => void` | ❌ | 加载完成回调 |
+| `onMounted` | `(key: string, ref: ComponentRef) => void` | ❌ | 组件挂载回调 |
+| `onUpdated` | `(key: string, ref: UpdateRef) => void` | ❌ | 组件更新回调 |
+| `onDestroy` | `() => void` | ❌ | 组件销毁回调 |
+
+### 类型定义
+
+```typescript
+type CacheStrategy = 'default' | 'force-cache' | 'no-cache' | 'no-store' | 'only-if-cached' | 'reload';
+
+interface ComponentRef {
+  formItems?: Record<string, unknown>;
+  updateData?: (settings?: Record<string, unknown>, dataSource?: unknown) => void;
+}
+
+interface UpdateRef {
+  settings?: Record<string, unknown>;
+  dataSource?: unknown;
+}
+```
+
+### 工具函数
+
+#### useUnMountCloudComponentStyle
+
+手动卸载云组件样式。
+
+```typescript
+import { useUnMountCloudComponentStyle } from '@cqsjjb/jjb-cloud-component';
+
+// 卸载指定样式的云组件
+useUnMountCloudComponentStyle('style-id-123');
+```
+
+#### ImportCloudComponent
+
+手动导入云组件模块。
+
+```typescript
+import { ImportCloudComponent } from '@cqsjjb/jjb-cloud-component';
+
+const { module, styleId, isNewVersion } = await ImportCloudComponent({
+  from: 'https://example.com/component.js',
+  dependencies: { react: React },
+  cache: 'force-cache'
+});
+```
+
+## 云组件开发
+
+### 组件结构
+
+云组件需要导出以下结构：
+
+```javascript
+// 组件信息（可选，用于版本检测）
+const info = {
+  name: 'MyComponent',
+  version: '1.0.0',
+  description: '我的云组件',
+  remark: '这是一个示例组件',
+  environment: {},
+  dependencies: {}
+};
+
+// 组件样式（可选）
+const style = `
+  .my-component { 
+    color: blue; 
+  }
+`;
+
+// 组件实现
+function MyComponent(props) {
+  return React.createElement('div', { 
+    className: 'my-component',
+    'data-cloud-component-style-id': '{cloudComponentStyleId}'
+  }, props.title);
 }
+
+// 导出
+module.exports = {
+  info,
+  default: MyComponent
+};
 ```
 
-## 参数
-
-| 属性      | 说明        |                                   类型                                    |       默认值 |
-|---------|:----------|:-----------------------------------------------------------------------:|----------:|
-| 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')
-    }
-    ```
+### 样式处理
+
+云组件中的样式会自动注入到页面中，使用 `{cloudComponentStyleId}` 占位符会被替换为实际的样式ID。
+
+```javascript
+const style = `
+  .my-component-{cloudComponentStyleId} {
+    color: red;
+  }
+`;
+```
+
+## 注意事项
+
+1. **网络请求**: 确保云组件地址可访问
+2. **依赖管理**: 正确配置组件所需的依赖
+3. **样式隔离**: 使用样式ID避免样式冲突
+4. **错误处理**: 实现适当的错误处理机制
+5. **版本兼容**: 注意新旧版本云组件的兼容性
+
+## 许可证
+
+MIT
+
+## 作者
+
+jiaoxiwei

package/cloud-component.d.ts

@@ -1,8 +1,7 @@
-// @ts-ignore
 import * as React from 'react';
 
 interface ComponentProps {
-  ref?: React.Ref<{ [ p: string ]: any }>;
+  ref?: React.Ref<Record<string, unknown>>;
   children?: React.ReactNode;
 }
 
@@ -13,8 +12,8 @@ interface ComponentProps {
 export function useUnMountCloudComponentStyle (styleId: string): void;
 
 interface CloudComponentProps extends ComponentProps {
-  // 云组件依赖库变量
-  lib?: string;
+  // 组件依赖
+  dependencies?: { [ p: string ]: string }
   // 组件资源地址
   from: string;
   // 缓存
@@ -26,7 +25,7 @@ interface CloudComponentProps extends ComponentProps {
   // 组件唯一key
   componentKey: string;
   // 组件的额外Props
-  componentProps?: {};
+  componentProps?: Record<string, unknown>;
   // 组件开始加载
   onLoadStart?: () => void;
   // 组件结束加载
@@ -36,14 +35,14 @@ interface CloudComponentProps extends ComponentProps {
   // 组件已挂载
   onMounted?: (key: string, ref: {
     // 组件输出的表单配置
-    formItems?: {},
+    formItems?: Record<string, unknown>;
     // 组件更新
-    updateData?: (settings?: {}, dataSource?: any) => void;
+    updateData?: (settings?: Record<string, unknown>, dataSource?: unknown) => void;
   }) => void;
   // 组件已更新
   onUpdated?: (key: string, ref: {
-    settings?: {},
-    dataSource?: any
+    settings?: Record<string, unknown>;
+    dataSource?: unknown;
   }) => void;
 }
 

package/cloud-component.js

@@ -24,10 +24,10 @@ export default function CloudComponent(props) {
   let styleId;
   const [ Component, setComponent ] = React.useState(null);
   const {
-    lib,
     from,
     cache,
     headers,
+    dependencies = [],
     initialize,
     componentKey,
     componentProps,
@@ -40,35 +40,46 @@ export default function CloudComponent(props) {
 
   React.useEffect(() => {
     async function load() {
-      onLoadStart && onLoadStart();
-      const {
-        module,
-        styleId: _styleId,
-        isNewVersion
-      } = await ImportCloudComponent({
-        lib,
-        from,
-        cache,
-        headers
-      });
+      try {
+        onLoadStart && onLoadStart();
+        const {
+          module,
+          styleId: _styleId,
+          isNewVersion
+        } = await ImportCloudComponent({
+          from,
+          cache,
+          headers,
+          dependencies
+        });
 
-      styleId = _styleId;
+        styleId = _styleId;
 
-      setComponent(() => {
+        setComponent(() => {
+          onLoadEnd && onLoadEnd();
+          return isNewVersion
+            ? module.default()
+            : module.default;
+        });
+      } catch (error) {
+        console.error('云组件加载失败:', error);
         onLoadEnd && onLoadEnd();
-        return isNewVersion
-          ? module.default()
-          : module.default;
-      });
+        // 可以设置一个错误组件或显示错误信息
+        setComponent(() => () => React.createElement('div', { 
+          style: { color: 'red', padding: '10px' } 
+        }, `组件加载失败: ${error.message}`));
+      }
     }
 
     load().then(() => null);
 
     return () => {
-      useUnMountCloudComponentStyle(styleId);
+      if (styleId) {
+        useUnMountCloudComponentStyle(styleId);
+      }
       onDestroy && onDestroy();
     };
-  }, []);
+  }, [from, cache, headers, dependencies]);
 
   return Component && (
     <Component

package/import-cloud-component.d.ts

@@ -1,10 +1,27 @@
-// @ts-ignore
 import React from 'react';
 
+/**
+ * @description 云组件信息
+ */
+interface CloudComponentInfo {
+  // 组件名称
+  name: string;
+  // 组件说明
+  remark: string;
+  // 组件版本
+  version: string;
+  // 组件描述
+  description: string;
+  // 组件环境
+  environment: Record<string, unknown>;
+  // 组件依赖
+  dependencies?: Record<string, string>;
+}
+
 /**
  * @description 云组件模块
  */
-type CloudModule = {
+interface CloudModule {
   // 样式id
   styleId: string;
   // 是否是新版云组件
@@ -12,69 +29,49 @@ type CloudModule = {
   // 组件模块
   module: {
     // 组件信息
-    info: {
-      // 组件名称
-      name: string;
-      // 组件说明
-      remark: string;
-      // 组件版本
-      version: string;
-      // 组件描述
-      description: string;
-      // 组件环境
-      environment: {};
-      // 组件依赖
-      dependencies?: { [ p: string ]: string }
-    },
+    info?: CloudComponentInfo;
     // 组件本体
-    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 }>
+    default: React.ComponentType | (() => React.ComponentType);
+  };
+}
 
 /**
  * @description 生成CJS运行环境
- * @param options {string} 依赖变量
- * @param code {string} 依赖名称
- * @return {CloudModule}
+ * @param options 云组件地址配置
+ * @param code 云组件代码
+ * @return CJS运行环境
  */
-declare function genCommonJSRuntime (options: { lib: string, from: string }, code: string): CloudModule;
+declare function genCommonJSRuntime(
+  options: { from: string }, 
+  code: string
+): {
+  styleId: string;
+  useModule: (dependencies: Record<string, unknown>) => CloudModule['module'];
+};
 
 /**
- * @description 导入云组件
- * @param options {string} 依赖变量
- * @return {Promise<CloudModule>}
+ * @description 导入云组件选项
  */
-declare function ImportCloudComponent (options: {
-  // 组件依赖库变量
-  lib?: string;
+interface ImportCloudComponentOptions {
+  // 组件依赖
+  dependencies?: Record<string, unknown>;
   // 组件地址
   from: string;
   // 缓存
   cache?: 'default' | 'force-cache' | 'no-cache' | 'no-store' | 'only-if-cached' | 'reload';
   // 请求头
-  headers?: {}
-}): Promise<CloudModule>
+  headers?: Record<string, string>;
+}
+
+/**
+ * @description 导入云组件
+ * @param options 导入选项
+ * @return Promise<CloudModule>
+ */
+declare function ImportCloudComponent(options: ImportCloudComponentOptions): Promise<CloudModule>;
 
 export default ImportCloudComponent;
 
 export {
-  checkDependence,
-  checkDependencies,
   genCommonJSRuntime
 };

package/import-cloud-component.js

@@ -1,28 +1,11 @@
 import { tools } from '@cqsjjb/jjb-common-lib';
 
-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('.');
-}
-
 /**
  * @description 生成CJS运行环境
- * @param {string} lib 云组件依赖变量
  * @param {string} from 云组件地址
  * @param {string} code 注入云组件代码
  */
 export function genCommonJSRuntime({
-  lib,
   from
 }, code) {
   const styleId = tools.createOnlyKey();
@@ -32,12 +15,11 @@ export function genCommonJSRuntime({
     /* cloud-component-assets: ${from} */
     const module = { exports: null };
     const exports = {};
-    const require = function (id) {
-      const find = ${resolveLib(lib)}[ id ];
-      if (find) {
-        return find;
-      } else {
-        throw Error('云组件使用依赖失败，请确认"['+ id +']"是否在${resolveLib(lib)}中？');
+    const require = id => {
+      try {
+        return arguments[0][id];
+      } catch (error) {
+        throw new Error("云组件依赖[" + id + "]不存在！请检查dependencies配置！");
       }
     };
     /* cloud-component-code */
@@ -48,35 +30,9 @@ export function genCommonJSRuntime({
   };
 }
 
-/**
- * @description 宿主环境依赖检测
- * @param lib {string} 依赖变量
- * @param name {string} 依赖名称
- * @return {boolean}
- */
-export function checkDependence(lib, name) {
-  const dependencies = new Function(`return ${resolveLib(lib)}`)();
-  return tools.isUndefined(dependencies[ name ]);
-}
-
-/**
- * @description 依赖检测
- * @param lib {string}
- * @param dependencies {string[]}
- * @return {Array<{ name: string, check: boolean }>}
- */
-export function checkDependencies(lib, dependencies) {
-  return Object.keys(dependencies).map(name => {
-    return {
-      name,
-      check: checkDependence(lib, name)
-    };
-  }).filter(i => i.check);
-}
-
 /**
  * @description 手动加载模块
- * @param options {{ from: string, lib: string, cache: string, headers: {} }}
+ * @param options {{ from: string, cache: string, headers: {} }}
  * @example
  *  ImportCloudComponent({
  *    from: 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js'
@@ -86,9 +42,8 @@ export function checkDependencies(lib, dependencies) {
  * @return {Promise<{ module: { info: {}, default:() => React.Component }, styleId: string }>}
  */
 export default async function ImportCloudComponent(options) {
-  const lib = options.lib || '__coreLib';
   const from = options.from;
-
+  const dependencies = options.dependencies || {};
   const cache = options.cache || 'force-cache';
   const headers = tools.toObject(options.headers);
 
@@ -98,44 +53,63 @@ export default async function ImportCloudComponent(options) {
     throw Error('云组件资源访问地址不能为空！');
   }
 
-  const response = await fetch(from, {
-    cache,
-    headers
+  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 __require = {};
+
+  Object.entries(dependencies).forEach(([key, value]) => {
+    __require[key] = value;
   });
-  const responseText = await response.text();
 
-  const {
-    styleId,
-    useModule
-  } = genCommonJSRuntime({
-    lib,
-    from
-  }, responseText);
-  // 获取云组件导出CJS模块
-  const module = useModule();
+  let module;
+  let styleId;
+  let useModule;
+  
+  try {
+    const runtime = genCommonJSRuntime({
+      from
+    }, responseText);
+    
+    styleId = runtime.styleId;
+    useModule = runtime.useModule;
+    
+    // 获取云组件导出CJS模块
+    module = useModule(__require);
+    
+    if (!module || typeof module !== 'object') {
+      throw new Error('云组件模块格式错误');
+    }
+  } catch (error) {
+    throw new Error(`云组件解析失败: ${error.message}`);
+  }
+  
   // 获取云组件info变量
   const { info } = module;
   // 判断当前云组件是否导出了info变量
   if (tools.isUndefined(info)) {
-    window[ 'console' ][ 'warn' ](`组件 "${from}" 不存在"info"配置，疑似旧版云组件或配置错误`);
+    if (process.env.NODE_ENV === 'development') {
+      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)}"中提供此依赖！`);
-      }
+    if (process.env.NODE_ENV === 'development') {
+      console.log(`云组件 [${info.name}] 加载完成！`);
     }
-
-    window[ 'console' ][ 'log' ](`云组件 [${info.name}] 加载完成！`);
   }
 
   // 返回组件CSJ模块

package/index.d.ts

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

package/index.js

@@ -1,2 +1,2 @@
 export { default as CloudComponent, useUnMountCloudComponentStyle } from './cloud-component';
-export { default as ImportCloudComponent, checkDependence, checkDependencies, genCommonJSRuntime } from './import-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.6",
+  "version": "0.0.7-experimental",
   "description": "前端-云组件",
   "main": "index.js",
   "scripts": {
@@ -11,7 +11,5 @@
   "typings": "index.d.ts",
   "author": "jiaoxiwei",
   "license": "MIT",
-  "dependencies": {
-
-  }
+  "dependencies": {}
 }