@idooel/runtime-context

IDOOEL 低代码引擎的核心运行时状态管理库，基于 Mutix 和 @idooel/expression 构建。它提供了组件级的状态隔离、作用域继承以及响应式的数据模型。

特性

• 组件级隔离：每个模型实例拥有独立的作用域 (ScopeId)，防止组件间状态污染。
• 作用域继承：支持父子级联关系（例如：弹窗访问表格数据），实现数据共享与继承。
• 响应式模型：内置常见 UI 模式的响应式模型：
  • TreeTableModel: 适用于带有分页和选择功能的复杂树形表格。
  • FormModel: 适用于带有校验和脏检查的动态表单。
  • FormGroupModel: 适用于重复的表单组。
  • StepModel: 适用于多步向导。
• 表达式引擎：集成 @idooel/expression，支持安全、动态的逻辑求值（如 visibleOn: "age > 18"）。
• TypeScript 支持：提供完整的类型定义，提升开发体验。
• DevTools 支持：兼容 Redux DevTools，支持时间旅行调试。

安装

pnpm add @idooel/runtime-context

基础使用

1. 全局初始化 (入口处)

在应用启动时，初始化一次全局表达式求值器。

import { setGlobalEvaluator } from '@idooel/runtime-context'
import { parse } from '@idooel/expression'

// 注册表达式引擎
setGlobalEvaluator((expr, ctx) => parse(expr, ctx))

2. 创建模型

import { createFormModel } from '@idooel/runtime-context'

// 创建唯一的作用域 ID (推荐使用 Symbol)
const scopeId = Symbol('my-user-form')

// 初始化模型
const formModel = createFormModel(scopeId, {
  formData: { name: 'Alice', age: 25 }
})

// 订阅变化
const unsubscribe = formModel.subscribe('formData.age', (newAge) => {
  console.log('年龄变更为:', newAge)
})

// 更新数据 (响应式)
formModel.setValue('formData.age', 26) 
// 控制台输出: "年龄变更为: 26"

// 表达式求值
const isAdult = formModel.eval('formData.age >= 18') 
// true

3. 在 Vue 组件中使用

请参阅 @idooel/components 获取 Vue 集成帮助工具，如 bindExpression。

// Vue 组件示例
import { createTreeTableModel } from '@idooel/runtime-context'

export default {
  created() {
    this.model = createTreeTableModel(Symbol('my-table'))
    
    // 批量更新多个字段，只触发一次渲染
    this.model.batch(() => {
      this.model.setLoading(true)
      this.model.setTableData([...])
    })
  }
}

核心概念

ContextManager (上下文管理器)

全局单例，负责管理所有的 Store 实例。它维护 ScopeId 到实际 Mutix Store 的映射，并处理作用域的销毁。

BaseModel (基类模型)

所有领域模型的基类，提供以下核心能力：

• getValue(path) / setValue(path, val): 支持路径访问的数据读写。
• subscribe(path, callback): 响应式订阅。
• eval(expression): 动态逻辑求值。
• batch(fn): 原子化批量更新。

Scope Inheritance (作用域继承)

在创建上下文时，可以传入 parentScopeId。

const parentId = Symbol('parent')
const childId = Symbol('child')

createModelContext(parentId, { theme: 'dark' })
createModelContext(childId, { user: 'Bob' }, parentId) // 继承自 parent

const childStore = getStoreByScopeId(childId)
// childStore.get('theme') -> 'dark' (从父级继承)

License

ISC