@ticatec/uniface-flexi-module 0.0.2 → 0.0.8

package/MODULE_LOADER_CN.md

@@ -19,7 +19,7 @@
 
 ## 概述
 
-`ModuleLoader` 采用 **单例模式 + 依赖注入** 设计，通过外部传入的 `loadModule` 函数实现模块的实际加载逻辑，内部使用 `Map` 实现高效缓存。可以配合`Sandbox`一起使用，实现动态代码的加载和实现。
+`ModuleLoader` 采用 **单例模式 + 依赖注入** 设计，通过外部传入的 `loadModule` 函数实现模块的实际加载逻辑，内部使用 `Map` 实现高效缓存。可以配合`@ticatec/dyna-js`一起使用，实现动态代码的加载和实现。
 
 ```ts
 export type LoadModule = (params: any) => Promise<any>;
@@ -84,7 +84,7 @@ async load(key: string, params: any): Promise<any>
 
 ```ts
 import ModuleLoader, {LoadModule} from '@ticatec/uniface-flexi-module/ModuleLoader';
-import Sandbox from "@ticatec/uniface-flexi-module/Sandbox";
+import { initializeDynaJs, getDynaJs } from '@ticatec/dyna-js';
 import axios from "axios";
 
 // 定义模块加载函数（例如使用 import() 动态导入）
@@ -94,7 +94,15 @@ const loadModule: LoadModule = async (params: any) => {
 
 // 初始化 ModuleLoader
 ModuleLoader.initialize(loadModule);
-Sandbox.initialize({AppModule}, [''])
+
+// 初始化 DynaJs
+initializeDynaJs({
+  defaultImports: {AppModule},
+  defaultInjectedKeys: ['Dialog', 'MessageBox'],
+  useProxyByDefault: true,
+  allowBrowserAPIs: false,
+  validateCode: true
+});
 
 // 使用示例
 async function loadComponents() {

package/README.md

@@ -15,9 +15,11 @@ A flexible form framework for Svelte applications with dynamic field types, crit
 ## Installation
 
 ```bash
-npm install @ticatec/uniface-flexi-form
+npm install @ticatec/uniface-flexi-form @ticatec/dyna-js
 ```
 
+> **Note**: `@ticatec/dyna-js` is required for dynamic code execution features used internally by some components.
+
 ## Quick Start
 
 ```typescript
@@ -242,6 +244,7 @@ import {
   FlexiForm, 
   FlexiCard, 
   FlexiField, 
+  FlexiComposite,
   FlexiFormPage, 
   FlexiFormDialog,
   ComponentBuilder,

package/README_CN.md

@@ -32,7 +32,6 @@ npm install @ticatec/uniface-flexi-form
 
 - `FlexiContext` [详情](./FLEXI_CONTEXT_GUIDE_CN.md)
 - `ModuleLoader` [详情](./MODULE_LOADER_CN.md)
-- `Sandbox` [详情](./SANDBOX_CN.md)
 - 动态表单 `FlexiForm` [详情](./FLEXIFORM_GUIDE_CN.md)
 - 条件面板 `FlexiCriteriaSet` [详情](./FLEXICRITERIASET_GUIDE_CN.md)
 - 动态数据表 `FlexiDataTable` [详情](./FLEXIDATATABLE_GUIDE_CN.md)

package/dist/flexi-datatable/index.d.ts

@@ -1,2 +1,4 @@
 import FlexiDataTable from "./FlexiDataTable";
+import type { FlexiDataTableSchema, FlexiDataTableColumnSchema, IndicatorColumnSchema, ActionsColumnSchema } from "./FlexiDataTable";
 export default FlexiDataTable;
+export type { FlexiDataTableSchema, FlexiDataTableColumnSchema, IndicatorColumnSchema, ActionsColumnSchema };

package/dist/flexi-form/flexi_form/FlexiFormPanel.svelte

@@ -3,14 +3,16 @@ import { onMount } from "svelte";
 import FlexiCardPanel from "../flexi_card/FlexiCardPanel.svelte";
 let className = '';
 export { className as class };
-export let actions;
+export let actions = null;
 export let readonly = false;
 export let form;
+export let onFormInvalidate = null;
 let style = form.style;
 let blocks;
 onMount(async () => {
     form.setInvalidateHandler(() => {
         refreshCards();
+        onFormInvalidate?.();
     });
     refreshCards();
 });

package/dist/flexi-form/flexi_form/FlexiFormPanel.svelte.d.ts

@@ -15,9 +15,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const FlexiFormPanel: $$__sveltets_2_IsomorphicComponent<{
     class?: string;
-    actions: ButtonActions;
+    actions?: ButtonActions | null;
     readonly?: boolean;
     form: FlexiForm;
+    onFormInvalidate?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/flexi-form/index.d.ts

@@ -1,11 +1,12 @@
 import FlexiForm from "./flexi_form/FlexiForm";
 import FlexiCard from "./flexi_card/FlexiCard";
 import FlexiField from "./flexi_field/FlexiField";
+import FlexiComposite from "./flexi_composite/FlexiComposite";
 import FlexiFormPage from "./FlexiFormPage.svelte";
 import FlexiFormDialog from "./FlexiFormDialog.svelte";
 import ComponentBuilder from "./lib/ComponentBuilder";
 import FlexiFormPanel from "./flexi_form/FlexiFormPanel.svelte";
 import { registerFormFieldBuilder } from "./components/CellFieldBuilder";
-export { FlexiForm, FlexiCard, FlexiField, FlexiFormPage, FlexiFormDialog, FlexiFormPanel };
+export { FlexiForm, FlexiCard, FlexiField, FlexiComposite, FlexiFormPage, FlexiFormDialog, FlexiFormPanel };
 export { ComponentBuilder };
 export { registerFormFieldBuilder };

package/dist/flexi-form/index.js

@@ -1,11 +1,12 @@
 import FlexiForm from "./flexi_form/FlexiForm";
 import FlexiCard from "./flexi_card/FlexiCard";
 import FlexiField from "./flexi_field/FlexiField";
+import FlexiComposite from "./flexi_composite/FlexiComposite";
 import FlexiFormPage from "./FlexiFormPage.svelte";
 import FlexiFormDialog from "./FlexiFormDialog.svelte";
 import ComponentBuilder from "./lib/ComponentBuilder";
 import FlexiFormPanel from "./flexi_form/FlexiFormPanel.svelte";
 import { registerFormFieldBuilder } from "./components/CellFieldBuilder";
-export { FlexiForm, FlexiCard, FlexiField, FlexiFormPage, FlexiFormDialog, FlexiFormPanel };
+export { FlexiForm, FlexiCard, FlexiField, FlexiComposite, FlexiFormPage, FlexiFormDialog, FlexiFormPanel };
 export { ComponentBuilder };
 export { registerFormFieldBuilder };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import FlexiContext from "./FlexiContext";
 import ModuleLoader from "./ModuleLoader";
-import Sandbox from "./Sandbox";
 export default FlexiContext;
-export { ModuleLoader, Sandbox };
+export { ModuleLoader };

package/dist/index.js

@@ -1,5 +1,4 @@
 import FlexiContext from "./FlexiContext";
 import ModuleLoader from "./ModuleLoader";
-import Sandbox from "./Sandbox";
 export default FlexiContext;
-export { ModuleLoader, Sandbox };
+export { ModuleLoader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-flexi-module",
-  "version": "0.0.2",
+  "version": "0.0.8",
   "description": "A flexible form framework for Svelte applications with dynamic field types, criteria panels, and modular components",
   "keywords": [
     "svelte",
@@ -43,7 +43,7 @@
     "package": "svelte-kit sync && svelte-package && publint",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "publish:public": "npm publish --access public"
+    "publish:public": "npm run build && npm publish --access public"
   },
   "exports": {
     ".": {
@@ -89,7 +89,7 @@
       "types": "./dist/criteria-panel/index.d.ts",
       "import": "./dist/criteria-panel/index.js"
     },
-    "./FlexiDataTable": {
+    "./flexi-datatable": {
       "types": "./dist/flexi-datatable/index.d.ts",
       "import": "./dist/flexi-datatable/index.js"
     },
@@ -105,13 +105,13 @@
     "@sveltejs/vite-plugin-svelte": "^6.1.1",
     "@ticatec/app-data-manager": "^1.2.4",
     "@ticatec/app-data-service": "^1.1.3",
-    "@ticatec/uniface-filter-panel": "^0.1.0",
     "@ticatec/enhanced-utils": "^1.0.1",
     "@ticatec/i18n": "^0.2.2",
     "@ticatec/restful_service_api": "^0.1.7",
     "@ticatec/uniface-app-component": "^0.2.2",
     "@ticatec/uniface-dev-shell": "^0.0.6",
     "@ticatec/uniface-element": "^0.3.4",
+    "@ticatec/uniface-filter-panel": "^0.1.0",
     "@ticatec/uniface-google-material-icons": "^0.1.2",
     "@ticatec/uniface-micro-frame": "^0.0.1",
     "@ticatec/web-bean-validator": "^0.1.9",
@@ -127,7 +127,8 @@
     "vite": "^6.3.5"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.0.0",
+    "@ticatec/dyna-js": "^0.0.2"
   },
   "author": "Henry Feng",
   "license": "MIT",

package/SANDBOX_CN.md

@@ -1,201 +0,0 @@
-# Sandbox 类文档
-
-`Sandbox` 是一个**单例沙盒执行环境**，用于在隔离的上下文中**安全执行动态 JavaScript 代码**（如用户生成的表单逻辑、插件脚本等）。  
-通过 `Proxy` 代理与 `with` 语句结合，提供受控的变量访问，防止污染全局作用域。
-
----
-
-## 目录
-- [概述](#概述)
-- [核心机制](#核心机制)
-- [静态方法](#静态方法)
-    - [`initialize`](#initialize)
-- [实例方法](#实例方法)
-    - [`createFormClass`](#createformclass)
-- [使用示例](#使用示例)
-- [安全机制说明](#安全机制说明)
-- [高级用法](#高级用法)
-- [注意事项](#注意事项)
-
----
-
-## 概述
-
-`Sandbox` 设计目标：
-- 安全执行不受信任的代码
-- 注入指定上下文变量
-- 防止访问未授权的全局对象
-- 提供友好的变量访问体验（类似全局可用）
-
-```ts
-export default class Sandbox { ... }
-```
-
-> 典型应用：动态表单引擎、插件系统、用户自定义逻辑、微前端脚本隔离。
-
----
-
-## 核心机制
-
-| 机制 | 说明 |
-|------|------|
-| **单例模式** | 全局唯一沙盒实例 |
-| **依赖注入** | 通过 `injectedKeys` 指定可访问变量 |
-| **Proxy 代理** | 控制 `in` 和 `get` 访问行为 |
-| **with + const 解构** | 让注入变量在代码中像全局变量一样使用 |
-| **双重上下文来源** | 支持 `ctx` 和 `ctx.window` 两个来源 |
-
----
-
-## 静态方法
-
-### `initialize`
-
-初始化 `Sandbox` 单例实例。
-
-```ts
-static initialize(ctx: any, injectedKeys: Array<string>): Sandbox
-```
-
-**参数：**
-- `ctx`: `any` - 基础上下文对象（通常包含工具函数、API 等）
-- `injectedKeys`: `string[]` - 允许注入到沙盒的变量名列表
-
-**返回值：** `Sandbox` 实例
-
-> 必须先调用 `initialize`，否则无法使用 `createFormClass`。
-
----
-
-## 实例方法
-
-### `createFormClass`
-
-在沙盒中执行代码字符串，生成表单类逻辑。
-
-```ts
-createFormClass(code: string): any
-```
-
-**参数：**
-- `code`: `string` - 要执行的 JS 代码（支持 `return` 一个类或对象）
-
-**返回值：** 代码执行结果（通常是一个类构造函数或配置对象）
-
-**执行流程：**
-1. 提取 `injectedKeys` 中存在的变量 → 注入 `injected`
-2. 合并 `ctx` + `injected` → 形成 `sandboxContext`
-3. 创建 `Proxy` 代理，控制变量访问
-4. 使用 `with (sandbox) { const xxx = sandbox.xxx; ...code }`
-5. 通过 `new Function` 执行包装后的代码
-
----
-
-## 使用示例
-
-### 1. 基础使用：执行表单验证逻辑
-
-```ts
-import Sandbox from './Sandbox';
-
-// 准备上下文
-const context = {
-    utils: {
-        isEmail: (str) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str),
-        required: (val) => val != null && val !== ''
-    },
-    api: {
-        submitForm: async (data) => {
-            console.log('提交表单:', data);
-            return { success: true };
-        }
-    },
-    window: window // 允许访问部分全局对象（如 console, Math）
-};
-
-// 定义可注入的变量
-const injectedKeys = ['utils', 'api', 'console', 'Math', 'Date'];
-
-// 初始化沙盒
-Sandbox.initialize(context, injectedKeys);
-
-const sandbox = Sandbox.initialize(context, injectedKeys);
-
-// 用户编写的动态代码
-const userCode = `
-    class UserForm {
-        constructor(data) {
-            this.data = data;
-        }
-
-        validate() {
-            if (!utils.required(this.data.email)) return '邮箱必填';
-            if (!utils.isEmail(this.data.email)) return '邮箱格式错误';
-            return null;
-        }
-
-        async submit() {
-            const error = this.validate();
-            if (error) throw new Error(error);
-            return await api.submitForm(this.data);
-        }
-    }
-
-    return UserForm;
-`;
-
-// 执行并获取类
-const UserFormClass = sandbox.createFormClass(userCode);
-
-// 使用
-const form = new UserFormClass({ email: 'test@example.com' });
-form.submit().then(console.log).catch(console.error);
-```
-
----
-
-## 安全机制说明
-
-| 机制 | 效果 |
-|------|------|
-| `injectedKeys` 白名单 | 仅允许显式声明的变量可访问 |
-| `Proxy.has` 控制 | `key in sandbox` 行为受控 |
-| `Proxy.get` 警告 | 访问未定义变量时 `console.warn` |
-| 无 `window` 直接暴露 | 必须通过 `injectedKeys` 授权 |
-| `with` + `const` 解构 | 避免 `with` 污染外部作用域 |
-
-> 注意：`new Function` 本身不解析词法作用域，天然隔离外部变量。
-
----
-
-### 动态注入运行时变量
-
-```ts
-const dynamicCtx = { currentUser: null };
-Sandbox.initialize({ ...context, dynamicCtx }, [...injectedKeys, 'currentUser']);
-
-// 后续更新
-dynamicCtx.currentUser = { id: 1, name: 'Alice' };
-```
-
----
-
-## 注意事项
-
-| 项目 | 说明 |
-|------|------|
-| **必须初始化** | 未调用 `initialize` 将导致 `instance` 为 `undefined` |
-| **injectedKeys 必须精确** | 多注入风险，少注入功能缺失 |
-| **避免注入危险对象** | 如 `eval`, `Function`, `window.fetch`（视需求） |
-| **性能注意** | `new Function` 有编译开销，建议缓存编译结果 |
-| **不支持 ES6 import** | 动态代码中无法使用 `import`，需通过注入提供 |
-| **调试建议** | 开发时可临时注入 `console` 便于调试 |
-
----
-
-## API 汇总
-
-| 方法 | 类型 | 描述 |
-|------|------|------|
-| `initialize` | `static` | 初始化沙盒上下文 |
-| `createFormClass` | `instance` | 执行动态代码 |

package/dist/Sandbox.d.ts

@@ -1,33 +0,0 @@
-/**
- * 单例沙盒类，用于在隔离环境中安全执行代码
- * 提供上下文注入和代理机制来控制代码执行环境
- */
-export default class Sandbox {
-    #private;
-    /**
-     * Sandbox的单例实例
-     */
-    private static instance;
-    /**
-     * 私有构造函数，用于强制单例模式
-     * @param ctx - 沙盒执行上下文
-     * @param injectedKeys - 需要注入的变量键名数组
-     */
-    private constructor();
-    /**
-     * 初始化单例Sandbox实例
-     * @param ctx - 沙盒执行上下文
-     * @param injectedKeys - 需要注入的变量键名数组
-     * @returns Sandbox的单例实例
-     */
-    static initialize(ctx: any, injectedKeys: Array<string>): Sandbox;
-    /**
-     * 在沙盒环境中创建并执行表单类代码
-     * 使用代理模式控制变量访问，确保代码在安全的上下文中执行
-     * @param code - 要执行的JavaScript代码字符串
-     * @param ctx
-     * @param keys
-     * @returns 代码执行结果
-     */
-    createFormClass(code: string, ctx?: any, keys?: Array<string>): any;
-}

package/dist/Sandbox.js

@@ -1,101 +0,0 @@
-import FlexiContext from "./FlexiContext";
-import { ModuleLoader } from "./index";
-import FlexiForm from "./flexi-form/flexi_form/FlexiForm";
-import FlexiCard from "./flexi-form/flexi_card/FlexiCard";
-import FlexiComposite from "./flexi-form/flexi_composite/FlexiComposite";
-import FlexiCriteriaSet from "./criteria-panel/lib/FlexiCriteriaSet";
-import FlexiDataTable from "./flexi-datatable/FlexiDataTable";
-import { Visibility } from "./flexi-form/lib";
-import { FlexiFormDialog } from "./flexi-form";
-import { FlexiFormPage } from "./flexi-form";
-/**
- * 单例沙盒类，用于在隔离环境中安全执行代码
- * 提供上下文注入和代理机制来控制代码执行环境
- */
-export default class Sandbox {
-    /**
-     * 私有上下文对象，包含沙盒执行环境
-     */
-    #ctx;
-    /**
-     * 私有注入键数组，定义需要注入到沙盒的变量名
-     */
-    #injectedKeys;
-    /**
-     * Sandbox的单例实例
-     */
-    static instance;
-    /**
-     * 私有构造函数，用于强制单例模式
-     * @param ctx - 沙盒执行上下文
-     * @param injectedKeys - 需要注入的变量键名数组
-     */
-    constructor(ctx, injectedKeys) {
-        this.#ctx = { ...ctx, Visibility, FlexiContext, ModuleLoader, FlexiForm, FlexiCard, FlexiComposite, FlexiCriteriaSet, FlexiDataTable, FlexiFormPage, FlexiFormDialog };
-        this.#injectedKeys = [...injectedKeys, 'Dialog', 'MessageBox', 'Indicator', 'Toast'];
-    }
-    /**
-     * 初始化单例Sandbox实例
-     * @param ctx - 沙盒执行上下文
-     * @param injectedKeys - 需要注入的变量键名数组
-     * @returns Sandbox的单例实例
-     */
-    static initialize(ctx, injectedKeys) {
-        if (Sandbox.instance == null) {
-            Sandbox.instance = new Sandbox(ctx, injectedKeys);
-        }
-        return Sandbox.instance;
-    }
-    /**
-     * 在沙盒环境中创建并执行表单类代码
-     * 使用代理模式控制变量访问，确保代码在安全的上下文中执行
-     * @param code - 要执行的JavaScript代码字符串
-     * @param ctx
-     * @param keys
-     * @returns 代码执行结果
-     */
-    createFormClass(code, ctx = {}, keys = []) {
-        const injected = {};
-        ctx = { ...this.#ctx, ...ctx };
-        keys = [...new Set([...this.#injectedKeys, ...keys])];
-        for (const key of keys) {
-            if (ctx.window && key in ctx.window) {
-                injected[key] = ctx.window[key];
-            }
-            else if (key in ctx) {
-                injected[key] = ctx[key];
-            }
-        }
-        // 组合最终上下文
-        const sandboxContext = { ...this.#ctx, ...injected };
-        const self = this;
-        const sandbox = new Proxy(sandboxContext, {
-            has(target, key) {
-                // 如果在 sandboxContext 或 window 中存在
-                if (key in target)
-                    return true;
-                if (self.#ctx.window && key in self.#ctx.window)
-                    return true;
-                return false; // 不存在就返回 false
-            },
-            get(target, key) {
-                if (key in target)
-                    return target[key];
-                if (self.#ctx.window && key in self.#ctx.window)
-                    return self.#ctx.window[key];
-                console.warn(`Sandbox: ${String(key)} not found`);
-                return undefined;
-            }
-        });
-        const wrappedCode = `
-    with (sandbox) {
-        ${Object.keys(sandbox).map(k => `const ${k} = sandbox.${k};`).join('\n')}
-        
-        ${code}
-    }
-  `;
-        console.log('sandbox code: ', wrappedCode);
-        const fn = new Function('sandbox', wrappedCode);
-        return fn(sandbox);
-    }
-}