devfty

devfty

低代码「开发者工厂」的浏览器运行时库。

链路：后端按 billno 下发视图元数据 JSON → builder.render(meta) 渲染成组件树 → 各 adapter 把第三方控件包成「受模型驱动、状态可被外部 setState / getState 读写」的受控组件。

安装

npm install devfty

外部依赖由宿主提供，不打进产物（见 peerDependencies）：

• React 侧：react / react-dom / classnames
• Vue 侧：vue >= 3（仅支持 Vue 3，适配层使用 defineComponent / reactive / h）

开发与构建

产物清单

dist/ 与 lib/ 是构建产物，已移出版本控制，不要手改；改完源码重新构建。

运行时契约

React / Vue 适配层从运行时读取 builder 与 models。两种初始化方式：

// 方式一：包引入，会自动挂载 window.devfty
import devfty from 'devfty'

// 方式二：页面里按顺序引脚本（require 与 define 由 requirejs.js 单独提供）
// <script src=".../lib/requirejs.js"></script>
// <script src=".../lib/devfty.js"></script>

运行时未就绪时使用适配层会抛出明确错误，而不是让调用方拿到 undefined 再二次崩溃：

import devfty, { hasRuntime, getRuntime } from 'devfty'

hasRuntime() // false：还没挂载
getRuntime() // 抛错：[devfty] 运行时未初始化：请先加载 devfty 核心...

React 用法

import React from 'react'
import devfty from 'devfty'
import ModelAdapter from 'devfty/dist/react/adapter/model/modelAdapter'

const { builder } = devfty

// 1. 注册控件：把元数据里的 component 名映射到实际组件
builder.initComponent({
    Input: ModelAdapter(Input),
})

// 2. 告诉 builder 如何把节点变成 React 元素（必须由宿主提供）
builder.initRenderFactory(({ node, props }) =>
    React.createElement(node.component || 'div', { key: node.key, ...props, vm }, props.children)
)

// 3. 用后端下发的元数据渲染
const nodes = builder.render(meta)

ModelAdapter(Com) 包出来的组件在挂载时会把实例交给 SimpleModel 托管：

• model.setValue('x') / setVisible(false) / setDisabled(true) 会推给控件；
• 控件的 setState('value', v) 会回写模型值；
• 组件以 name 登记进 vm，父级 vm.getData() 才能收集到这个字段；
• 传 ctrlName 可做定向通知，只推给指定控件。

Vue 3 用法

import { defineClassComponent, defineFunctionComponent } from 'devfty/dist/vue/vue3-adapter'
// 只提供 CJS / ESM，模块引用即可；不产出 UMD，也不会挂到 window

class 心智模型（this.$el / $refs / $nextTick 在所有钩子与 render 中行为一致）：

export default defineClassComponent(
    class Counter {
        state = { n: 0 }

        componentDidMount() {
            console.log(this.$el)
        }

        render(h) {
            return h('div', { onClick: () => this.setState({ n: this.state.n + 1 }) }, String(this.state.n))
        }
    }
)

函数组件 + Hooks 心智模型（h 由第三个参数注入，Hooks 按索引复用状态）：

import { defineFunctionComponent, useState } from 'devfty/dist/vue/vue3-adapter'

export default defineFunctionComponent((props, ctx, h) => {
    const [n, setN] = useState(0)
    return h('div', { onClick: () => setN(n.value + 1) }, String(n.value))
})

可用 Hooks：useState、useRef、useMemo、useCallback、useEffect、useLayoutEffect、useReducer、useContext、useProvide。

已知约束

• Vue 适配层仅支持 Vue 3，产物文件名带 vue3 即用于标明这条边界；如需兼容 Vue 2，需要另写适配层。
• 类型声明集中在 dist/types/**，深路径引用（如 devfty/dist/vue/vue3-adapter）不会自动命中 .d.ts，需要显式指向 devfty/dist/types/vue/vue-adapter/index.d.ts。
• builder 是模块级单例（isInit / components / renderFactory 均在模块作用域），一个页面只能存在一份运行时，微前端或多实例场景需要额外隔离。