@ticatec/dyna-js 0.0.2

package/README_CN.md

@@ -0,0 +1,426 @@
+# @ticatec/dyna-js
+
+[![npm version](https://badge.fury.io/js/@ticatec%2Fdyna-js.svg)](https://badge.fury.io/js/@ticatec%2Fdyna-js)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![Node.js](https://img.shields.io/badge/Node.js-14%2B-green.svg)](https://nodejs.org/)
+
+[English Documentation](README.md)
+
+一个使用 `new Function()` 进行安全动态代码执行的 TypeScript 库，同时支持 Node.js 和浏览器环境。
+
+## 功能特性
+
+✅ **通用兼容性** - 同时支持 Node.js 和浏览器环境  
+✅ **TypeScript 支持** - 完整的类型安全和类型定义  
+✅ **单例模式** - 一次初始化，全局使用  
+✅ **模块导入** - 为动态代码预定义类和函数  
+✅ **基于代理的沙盒** - 使用代理机制的安全变量访问控制  
+✅ **可配置安全性** - 对允许的 API 和操作进行细粒度控制  
+✅ **表单类创建** - 专门用于创建动态表单类的方法  
+✅ **多种构建格式** - 支持 CommonJS 和 ESM  
+✅ **性能监控** - 内置执行时间跟踪  
+
+## 安装
+
+```bash
+npm install @ticatec/dyna-js
+```
+
+## 快速开始
+
+### 1. 一次性初始化（应用启动时）
+
+```typescript
+import { initializeDynaJs } from '@ticatec/dyna-js';
+
+// 使用您的类和函数进行初始化
+initializeDynaJs({
+  defaultImports: {
+    FlexiForm: FlexiFormClass,
+    FlexiCard: FlexiCardClass,
+    Dialog: DialogClass,
+    MessageBox: MessageBoxClass,
+    FlexiContext: FlexiContextClass,
+    ModuleLoader: ModuleLoaderClass
+  },
+  defaultInjectedKeys: ['Dialog', 'MessageBox', 'Indicator', 'Toast'],
+  useProxyByDefault: true,
+  allowBrowserAPIs: false, // 默认安全
+  validateCode: true
+});
+```
+
+### 2. 在任意位置使用
+
+```typescript
+import { getDynaJs } from '@ticatec/dyna-js';
+
+// 获取已初始化的加载器
+const loader = getDynaJs();
+
+// 创建表单类
+const MyFormClass = loader.createFormClass(`
+  class CustomForm extends FlexiForm {
+    constructor() {
+      super();
+      this.dialog = Dialog; // 自动注入
+    }
+    
+    show() {
+      MessageBox.info('表单已就绪！'); // 自动注入
+    }
+    
+    render() {
+      return new FlexiCard({
+        title: '动态表单',
+        content: '动态创建的内容！'
+      });
+    }
+  }
+  return CustomForm;
+`);
+
+// 实例化并使用
+const form = new MyFormClass();
+form.show();
+```
+
+## API 参考
+
+### 核心方法
+
+#### `createFormClass<T>(code: string, context?: object, injectedKeys?: string[]): T`
+
+使用基于代理的沙盒执行创建表单类。
+
+```typescript
+const FormClass = loader.createFormClass(`
+  class MyForm extends FlexiForm {
+    constructor() {
+      super();
+      this.setupDialog();
+    }
+    
+    setupDialog() {
+      this.dialog = new Dialog({
+        title: '动态对话框'
+      });
+    }
+  }
+  return MyForm;
+`, {
+  customData: '附加上下文'
+}, ['extraKey']);
+```
+
+#### `executeSync<T>(code: string, options?: ExecutionOptions): ExecutionResult<T>`
+
+同步执行代码并返回结果和计时信息。
+
+```typescript
+const result = loader.executeSync(`
+  const form = new FlexiForm();
+  form.setTitle('动态表单');
+  return form;
+`);
+
+console.log(result.result); // FlexiForm 实例
+console.log(result.executionTime); // 执行时间（毫秒）
+```
+
+#### `execute<T>(code: string, options?: ExecutionOptions): Promise<ExecutionResult<T>>`
+
+异步执行代码，支持超时控制。
+
+```typescript
+const result = await loader.execute(`
+  return new Promise(resolve => {
+    const form = new FlexiForm();
+    resolve(form);
+  });
+`, {
+  timeout: 3000,
+  context: { customVar: 'value' }
+});
+```
+
+#### `executeWithImports<T>(code: string, imports: object, options?: ExecutionOptions): ExecutionResult<T>`
+
+使用额外的临时导入执行代码。
+
+```typescript
+const result = loader.executeWithImports(`
+  return new CustomComponent({
+    message: '来自动态代码的问候！'
+  });
+`, {
+  CustomComponent: MyCustomComponent,
+  utils: myUtilsLibrary
+});
+```
+
+### 配置选项
+
+```typescript
+interface DynaJsConfig {
+  defaultTimeout?: number;           // 默认：5000ms
+  defaultStrict?: boolean;           // 默认：true
+  allowedGlobals?: string[];         // 允许的全局变量白名单
+  blockedGlobals?: string[];         // 阻止的变量黑名单
+  defaultImports?: object;           // 预导入的类/函数
+  defaultInjectedKeys?: string[];    // 自动注入的变量名
+  useProxyByDefault?: boolean;       // 默认：true
+  allowTimers?: boolean;             // 允许 setTimeout/setInterval（默认：false）
+  allowDynamicImports?: boolean;     // 允许 import()/require()（默认：false）
+  validateCode?: boolean;            // 启用代码验证（默认：true）
+  allowBrowserAPIs?: boolean;        // 允许 window/document 访问（默认：false）
+  allowNodeAPIs?: boolean;           // 允许 process/require 访问（默认：false）
+}
+```
+
+## 安全配置
+
+### 🔒 **严格模式（推荐，默认）**
+
+```typescript
+initializeDynaJs({
+  defaultImports: { FlexiForm, Dialog },
+  allowBrowserAPIs: false,    // 阻止 window、document、localStorage
+  allowNodeAPIs: false,       // 阻止 process、require
+  allowTimers: false,         // 阻止 setTimeout/setInterval
+  validateCode: true          // 启用代码模式验证
+});
+
+// ❌ 这些将被阻止：
+// window.location.href = 'malicious-site.com'
+// localStorage.clear()
+// setTimeout(maliciousFunction, 1000)
+```
+
+### 🟡 **宽松模式**
+
+```typescript
+initializeDynaJs({
+  defaultImports: { FlexiForm, Dialog },
+  allowBrowserAPIs: true,     // ✅ 允许浏览器 API
+  allowTimers: true,          // ✅ 允许定时器
+  allowDynamicImports: true,  // ✅ 允许动态导入
+  validateCode: false         // 禁用验证
+});
+
+// ✅ 现在允许：
+// document.getElementById('myDiv')
+// localStorage.getItem('data')
+// setTimeout(() => {}, 1000)
+```
+
+### 🎯 **平衡模式（推荐用于表单创建）**
+
+```typescript
+initializeDynaJs({
+  defaultImports: {
+    FlexiForm, Dialog, MessageBox,
+    // 提供安全的 DOM 访问
+    safeDOM: {
+      getElementById: (id) => document.getElementById(id),
+      createElement: (tag) => document.createElement(tag)
+    }
+  },
+  allowBrowserAPIs: false,     // 仍然安全
+  allowTimers: false,          // 表单不需要定时器
+  validateCode: true,          // 保持验证
+  defaultInjectedKeys: ['window'] // 只注入 window 引用
+});
+```
+
+## 高级示例
+
+### 创建动态表单组件
+
+```typescript
+const DynamicFormBuilder = loader.createFormClass(`
+  class FormBuilder extends FlexiForm {
+    constructor(config) {
+      super();
+      this.config = config;
+      this.components = [];
+    }
+    
+    addField(fieldConfig) {
+      const field = new FlexiCard({
+        title: fieldConfig.label,
+        content: this.createInput(fieldConfig.type)
+      });
+      this.components.push(field);
+      return this;
+    }
+    
+    createInput(type) {
+      switch(type) {
+        case 'text':
+          return '<input type="text" />';
+        case 'number':
+          return '<input type="number" />';
+        default:
+          return '<input type="text" />';
+      }
+    }
+    
+    build() {
+      return this.components;
+    }
+    
+    show() {
+      const dialog = new Dialog({
+        title: this.config.title,
+        content: this.render()
+      });
+      dialog.show();
+    }
+    
+    render() {
+      return this.components.map(c => c.render()).join('');
+    }
+  }
+  
+  return FormBuilder;
+`);
+
+// 使用动态创建的表单构建器
+const formBuilder = new DynamicFormBuilder({
+  title: '动态联系表单'
+});
+
+formBuilder
+  .addField({ label: '姓名', type: 'text' })
+  .addField({ label: '年龄', type: 'number' })
+  .show();
+```
+
+### 函数创建
+
+```typescript
+const dynamicValidator = loader.createFunction(`
+  return function validateForm(formData) {
+    const errors = [];
+    
+    if (!formData.name) {
+      errors.push('姓名是必填项');
+    }
+    
+    if (!formData.email || !formData.email.includes('@')) {
+      errors.push('需要有效的邮箱地址');
+    }
+    
+    return {
+      isValid: errors.length === 0,
+      errors: errors
+    };
+  };
+`, []);
+
+// 使用动态函数
+const validation = dynamicValidator({
+  name: 'John',
+  email: 'john@example.com'
+});
+```
+
+## 错误处理
+
+```typescript
+try {
+  const result = loader.executeSync(`
+    // 一些可能失败的动态代码
+    return new NonExistentClass();
+  `);
+} catch (error) {
+  console.error('执行失败：', error.message);
+  // 错误包含执行时间和详细的错误信息
+}
+```
+
+## 浏览器支持
+
+- Chrome 51+
+- Firefox 40+
+- Safari 10+
+- Edge 14+
+- Node.js 14+
+
+## TypeScript 支持
+
+具有完整类型定义的 TypeScript 支持：
+
+```typescript
+import { 
+  DynaJs,
+  ExecutionResult,
+  ExecutionOptions,
+  ModuleImports 
+} from '@ticatec/dyna-js';
+```
+
+## 贡献
+
+1. Fork 仓库
+2. 创建您的功能分支 (`git checkout -b feature/amazing-feature`)
+3. 提交您的更改 (`git commit -m 'Add some amazing feature'`)
+4. 推送到分支 (`git push origin feature/amazing-feature`)
+5. 打开一个 Pull Request
+
+## 许可证
+
+MIT 许可证 - 详情请查看 [LICENSE](LICENSE) 文件。
+
+## 安全考虑
+
+⚠️ **重要安全注意事项：**
+
+1. **代码验证**：在生产环境中始终保持 `validateCode: true`
+2. **API 限制**：启用 `allowBrowserAPIs` 或 `allowNodeAPIs` 时要小心
+3. **输入清理**：验证来自外部源的所有动态代码输入
+4. **超时设置**：设置适当的超时以防止无限循环
+5. **最小权限原则**：只导入所需的最少函数和类
+
+## 支持
+
+如有问题和功能请求，请使用 [GitHub Issues](https://github.com/ticatec-auckland/common-web-library/issues) 页面。
+
+---
+
+## 使用场景示例
+
+### 动态表单创建
+```typescript
+// 适合创建各种动态表单组件
+const ContactForm = loader.createFormClass(`...`);
+const SurveyForm = loader.createFormClass(`...`);
+const RegistrationForm = loader.createFormClass(`...`);
+```
+
+### 业务规则执行
+```typescript
+// 动态业务逻辑
+const businessRule = loader.executeSync(`
+  return function(data) {
+    // 复杂的业务逻辑
+    return processBusinessRule(data);
+  };
+`);
+```
+
+### 模板渲染
+```typescript
+// 动态模板处理
+const templateEngine = loader.createFormClass(`
+  class TemplateEngine {
+    render(template, data) {
+      // 模板渲染逻辑
+      return processTemplate(template, data);
+    }
+  }
+  return TemplateEngine;
+`);
+```

package/dist/DynaJs.d.ts

@@ -0,0 +1,20 @@
+import { ExecutionContext, ExecutionOptions, ExecutionResult, DynaJsConfig, ModuleImports } from './types';
+export default class DynaJs {
+    private config;
+    constructor(config?: DynaJsConfig);
+    execute<T = any>(code: string, options?: ExecutionOptions): Promise<ExecutionResult<T>>;
+    executeSync<T = any>(code: string, options?: ExecutionOptions): ExecutionResult<T>;
+    private executeWithTimeout;
+    private executeCode;
+    createFunction<T extends (...args: any[]) => any>(code: string, paramNames?: string[], options?: ExecutionOptions): T;
+    executeWithImports<T = any>(code: string, imports: ModuleImports, options?: ExecutionOptions): ExecutionResult<T>;
+    executeWithImportsAsync<T = any>(code: string, imports: ModuleImports, options?: ExecutionOptions): Promise<ExecutionResult<T>>;
+    createFormClass<T = any>(code: string, context?: ExecutionContext, injectedKeys?: string[]): T;
+    private executeWithProxy;
+    static instance: DynaJs | null;
+    static initialize(config: DynaJsConfig): DynaJs;
+    static getInstance(): DynaJs;
+    static reset(): void;
+    private prepareContext;
+}
+//# sourceMappingURL=DynaJs.d.ts.map

package/dist/DynaJs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynaJs.d.ts","sourceRoot":"","sources":["../src/DynaJs.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,aAAa,EACd,MAAM,SAAS,CAAC;AAGjB,MAAM,CAAC,OAAO,OAAO,MAAM;IACzB,OAAO,CAAC,MAAM,CAAyB;gBAE3B,MAAM,GAAE,YAAiB;IAiB/B,OAAO,CAAC,CAAC,GAAG,GAAG,EACnB,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,gBAAqB,GAC7B,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IA4B9B,WAAW,CAAC,CAAC,GAAG,GAAG,EACjB,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,gBAAqB,GAC7B,eAAe,CAAC,CAAC,CAAC;YA4BP,kBAAkB;IAsBhC,OAAO,CAAC,WAAW;IAenB,cAAc,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAC9C,IAAI,EAAE,MAAM,EACZ,UAAU,GAAE,MAAM,EAAO,EACzB,OAAO,GAAE,gBAAqB,GAC7B,CAAC;IAuBJ,kBAAkB,CAAC,CAAC,GAAG,GAAG,EACxB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,aAAa,EACtB,OAAO,GAAE,gBAAqB,GAC7B,eAAe,CAAC,CAAC,CAAC;IAOf,uBAAuB,CAAC,CAAC,GAAG,GAAG,EACnC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,aAAa,EACtB,OAAO,GAAE,gBAAqB,GAC7B,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAO9B,eAAe,CAAC,CAAC,GAAG,GAAG,EACrB,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,gBAAqB,EAC9B,YAAY,GAAE,MAAM,EAAO,GAC1B,CAAC;IAeJ,OAAO,CAAC,gBAAgB;IA2CxB,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEtC,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM;IAO/C,MAAM,CAAC,WAAW,IAAI,MAAM;IAO5B,MAAM,CAAC,KAAK,IAAI,IAAI;IAIpB,OAAO,CAAC,cAAc;CAwBvB"}

package/dist/DynaJs.esm.js

@@ -0,0 +1,213 @@
+import { createSafeContext, validateCode } from './utils';
+class DynaJs {
+    constructor(config = {}) {
+        this.config = {
+            defaultTimeout: config.defaultTimeout ?? 5000,
+            defaultStrict: config.defaultStrict ?? true,
+            allowedGlobals: config.allowedGlobals ?? [],
+            blockedGlobals: config.blockedGlobals ?? [],
+            defaultImports: config.defaultImports ?? {},
+            defaultInjectedKeys: config.defaultInjectedKeys ?? [],
+            useProxyByDefault: config.useProxyByDefault ?? true,
+            allowTimers: config.allowTimers ?? false,
+            allowDynamicImports: config.allowDynamicImports ?? false,
+            validateCode: config.validateCode ?? true,
+            allowBrowserAPIs: config.allowBrowserAPIs ?? false,
+            allowNodeAPIs: config.allowNodeAPIs ?? false
+        };
+    }
+    async execute(code, options = {}) {
+        const startTime = performance.now();
+        try {
+            if (this.config.validateCode) {
+                validateCode(code, {
+                    allowTimers: this.config.allowTimers,
+                    allowDynamicImports: this.config.allowDynamicImports
+                });
+            }
+            const context = this.prepareContext(options.context, options.imports);
+            const timeout = options.timeout ?? this.config.defaultTimeout;
+            const strict = options.strict ?? this.config.defaultStrict;
+            const result = await this.executeWithTimeout(code, context, timeout, strict);
+            const executionTime = performance.now() - startTime;
+            return {
+                result: result,
+                executionTime
+            };
+        }
+        catch (error) {
+            const executionTime = performance.now() - startTime;
+            throw new Error(`Script execution failed after ${executionTime.toFixed(2)}ms: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    executeSync(code, options = {}) {
+        const startTime = performance.now();
+        try {
+            if (this.config.validateCode) {
+                validateCode(code, {
+                    allowTimers: this.config.allowTimers,
+                    allowDynamicImports: this.config.allowDynamicImports
+                });
+            }
+            const context = this.prepareContext(options.context, options.imports);
+            const strict = options.strict ?? this.config.defaultStrict;
+            const result = this.executeCode(code, context, strict);
+            const executionTime = performance.now() - startTime;
+            return {
+                result: result,
+                executionTime
+            };
+        }
+        catch (error) {
+            const executionTime = performance.now() - startTime;
+            throw new Error(`Script execution failed after ${executionTime.toFixed(2)}ms: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    async executeWithTimeout(code, context, timeout, strict) {
+        return new Promise((resolve, reject) => {
+            const timer = setTimeout(() => {
+                reject(new Error(`Script execution timed out after ${timeout}ms`));
+            }, timeout);
+            try {
+                const result = this.executeCode(code, context, strict);
+                clearTimeout(timer);
+                resolve(result);
+            }
+            catch (error) {
+                clearTimeout(timer);
+                reject(error);
+            }
+        });
+    }
+    executeCode(code, context, strict) {
+        const contextKeys = Object.keys(context);
+        const contextValues = Object.values(context);
+        const strictMode = strict ? '"use strict";' : '';
+        const wrappedCode = `${strictMode}\nreturn (function() {\n${code}\n})();`;
+        try {
+            const func = new Function(...contextKeys, wrappedCode);
+            return func.apply(null, contextValues);
+        }
+        catch (error) {
+            throw new Error(`Code execution error: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    createFunction(code, paramNames = [], options = {}) {
+        const context = this.prepareContext(options.context, options.imports);
+        const strict = options.strict ?? this.config.defaultStrict;
+        const strictMode = strict ? '"use strict";' : '';
+        const wrappedCode = `${strictMode}\n${code}`;
+        try {
+            const contextKeys = Object.keys(context);
+            const contextValues = Object.values(context);
+            const allParams = [...contextKeys, ...paramNames];
+            const func = new Function(...allParams, wrappedCode);
+            return ((...args) => {
+                const allArgs = [...contextValues, ...args];
+                return func.apply(null, allArgs);
+            });
+        }
+        catch (error) {
+            throw new Error(`Function creation error: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    executeWithImports(code, imports, options = {}) {
+        return this.executeSync(code, {
+            ...options,
+            imports: { ...this.config.defaultImports, ...imports }
+        });
+    }
+    async executeWithImportsAsync(code, imports, options = {}) {
+        return this.execute(code, {
+            ...options,
+            imports: { ...this.config.defaultImports, ...imports }
+        });
+    }
+    createFormClass(code, context = {}, injectedKeys = []) {
+        const useProxy = this.config.useProxyByDefault;
+        const mergedContext = { ...context, ...this.config.defaultImports };
+        const mergedKeys = [...this.config.defaultInjectedKeys, ...injectedKeys];
+        if (useProxy) {
+            return this.executeWithProxy(code, mergedContext, mergedKeys);
+        }
+        else {
+            return this.executeSync(code, {
+                context: mergedContext,
+                imports: this.config.defaultImports
+            }).result;
+        }
+    }
+    executeWithProxy(code, context, injectedKeys) {
+        const injected = {};
+        for (const key of injectedKeys) {
+            if (context.window && key in context.window) {
+                injected[key] = context.window[key];
+            }
+            else if (key in context) {
+                injected[key] = context[key];
+            }
+        }
+        const sandboxContext = { ...context, ...injected };
+        const sandbox = new Proxy(sandboxContext, {
+            has(target, key) {
+                if (key in target)
+                    return true;
+                if (context.window && key in context.window)
+                    return true;
+                return false;
+            },
+            get(target, key) {
+                if (key in target)
+                    return target[key];
+                if (context.window && key in context.window)
+                    return context.window[key];
+                console.warn(`DynaJs: ${String(key)} not found`);
+                return undefined;
+            }
+        });
+        const wrappedCode = `
+      with (sandbox) {
+        ${Object.keys(sandbox).map(k => `const ${k} = sandbox.${k};`).join('\n')}
+        
+        ${code}
+      }
+    `;
+        const fn = new Function('sandbox', wrappedCode);
+        return fn(sandbox);
+    }
+    static initialize(config) {
+        if (DynaJs.instance == null) {
+            DynaJs.instance = new DynaJs(config);
+        }
+        return DynaJs.instance;
+    }
+    static getInstance() {
+        if (DynaJs.instance == null) {
+            throw new Error("DynaJs hasn't been initialized. Call DynaJs.initialize() first.");
+        }
+        return DynaJs.instance;
+    }
+    static reset() {
+        DynaJs.instance = null;
+    }
+    prepareContext(userContext = {}, imports = {}) {
+        let context = createSafeContext(userContext, {
+            allowBrowserAPIs: this.config.allowBrowserAPIs,
+            allowNodeAPIs: this.config.allowNodeAPIs,
+            blockedKeys: this.config.blockedGlobals
+        });
+        context = { ...context, ...this.config.defaultImports, ...imports };
+        if (this.config.allowedGlobals.length > 0) {
+            const allowedContext = {};
+            for (const key of this.config.allowedGlobals) {
+                if (key in context) {
+                    allowedContext[key] = context[key];
+                }
+            }
+            context = allowedContext;
+        }
+        return context;
+    }
+}
+DynaJs.instance = null;
+export default DynaJs;