neo-register 1.0.0

package/README.md

@@ -0,0 +1,129 @@
+# neo-register
+> neo 组件注册器（支持 react 和 vue2.0 技术栈）；
+- 提供注册 neo自定义组件 和 neo-editor自定义组件模型 的方法；
+- 目前支持的技术栈：vue2.0、react。
+
+### 提供的方法
+- registerNeoCmp: 根据 cmpType 注册 neo自定义组件
+- registerNeoEditorModel: 注册 neo-editor 自定义组件模型
+
+## 快速使用
+
+```
+npm install --save neo-register
+```
+
+## 注册 neo 自定义组件
+```tsx
+import { registerNeoCmp } from 'neo-register';
+
+class MyReactSelect extends React.PureComponent {
+  constructor() {
+    super();
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    // 调用neo onToggle 方法，变更选择器表单项值
+    const {onToggle, options} = this.props;
+    const option = options.find(o => o.value === event.target.value);
+    if (onToggle) {
+      onToggle(option);
+    }
+  }
+
+  render() {
+    // 获取表单项 value 和 options 属性
+    const {label, options, title} = this.props;
+
+    return (
+      <div className="react-select">
+        <span>
+          {label}：
+        </span>
+        <select onChange={this.handleChange} title={title}>
+          {options.map(option => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+}
+
+// 注册 neo 自定义组件
+registerNeoCmp(MyReactSelect, 'react-select');
+
+export default MyReactSelect;
+```
+
+## 注册 neo-editor 自定义组件模型
+```tsx
+import { registerNeoEditorModel } from 'neo-register';
+
+class ReactSelectPlugin {
+  cmpType = 'react-select'; // 自定义组件名称，用于标识组件的唯一性
+  label = 'select 自定义组件'; // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  description = 'react-select 自定义组件'; // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  tags = ['自定义组件']; // 自定义组件分类
+  iconSrc = 'https://neo-widgets.bj.bcebos.com/custom-widget.svg'; // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  defaultComProps = { // 初次插入页面的默认属性数据
+    label: 'select 自定义组件',
+    name: 'customSelect',
+    options: [
+      {
+        label: 'A',
+        value: 'a'
+      },
+      {
+        label: 'B',
+        value: 'b'
+      },
+      {
+        label: 'C',
+        value: 'c'
+      }
+    ]
+  };
+  previewComProps = { // 设计器端预览时展示的默认数据
+    label: 'select 自定义组件',
+    options: [
+      {
+        label: 'A',
+        value: 'a'
+      },
+      {
+        label: 'B',
+        value: 'b'
+      },
+      {
+        label: 'C',
+        value: 'c'
+      }
+    ]
+  };
+  propsSchema = [ // 组件面板配置，用于生成编辑器右侧属性配置面板内容
+    {
+      type: 'text',
+      name: 'label',
+      label: 'label',
+      value: 'react-select'
+    },
+    {
+      type: 'textarea',
+      name: 'title',
+      label: 'hover title',
+      value: '点击下拉选择数值'
+    }
+  ];
+}
+// 注册一个 neo-editor 自定义组件模型（仅页面设计器需要，会在组件面板中展示）
+registerNeoEditorModel(ReactSelectPlugin);
+
+export default ReactSelectPlugin;
+```
+
+## 自定义组件配置项设置说明
+- propsSchema 中可用的配置项类型 请见 [当前可用表单项](./docs/FormItemType.md)。

package/dist/function/registerNeoCmp.d.ts

@@ -0,0 +1,39 @@
+/**
+ * neo-editor 自定义组件模型配置项
+ */
+export interface NeoRendererOption {
+    /**
+     * 渲染器名称
+     * 备注：渲染过程中用于查找对应的渲染器
+     */
+    cmpType: string;
+    /**
+     * 要注册的neo渲染器类型
+     * neo普通渲染器、neo表单渲染器、neo表单控件渲染器
+     * 备注：默认为neo普通渲染器
+     */
+    usage?: string;
+    /**
+     * 自定义组件权重
+     * 备注：值越低越优先命中
+     */
+    weight?: number;
+    /**
+     * 自定义组件技术栈类型
+     * 备注：默认为react
+     */
+    framework?: string;
+}
+/**
+ * registerNeoCmp: 根据type类型注册 neo 自定义组件
+ *【方法参数说明】
+ * newRenderer: 自定义组件,
+ * rendererOption: {
+ *   cmpType: 自定义组件的type类型，比如：input、text-area、select-user等
+ *   usage?: neo普通渲染器、neo表单渲染器，默认值为 neo普通渲染器
+ *   weight?: 自定义组件权重
+ *   framework?: 技术栈类型，默认为 react 技术栈，可选技术栈：vue2、react
+ * }
+ * 备注：暂不支持 vue3.0 技术栈
+ */
+export declare function registerNeoCmp(newRenderer: any, rendererOption: string | NeoRendererOption): void;

package/dist/function/registerNeoEditorModel.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 自定义组件模型 配置项
+ */
+export interface PluginOption {
+    /**
+     * 关联的渲染器
+     * 备注：可以关联当前的自定义组件，也可以关联平台预置组件和其他自定义组件
+     */
+    cmpType: string;
+    /**
+     * 自定义组件名称
+     * 在「页面设计器」物料面板中显示
+     */
+    label: string;
+    /**
+     * 自定义组件描述
+     * hover 自定义组件时展示
+     */
+    description?: string;
+    /**
+     * 自定义组件分类
+     * 指定当前自定义组件模型在「页面设计器」自定义组件面板中哪个分类下展示
+     */
+    tags: string | Array<string>;
+    /**
+     * 自定义组件icon
+     */
+    iconSrc?: string;
+    /**
+     * 自定义组件排序
+     * 指定当前自定义组件模型在「页面设计器」自定义组件面板中的展示次序
+     */
+    order?: number;
+    /**
+     * 自定义组件显隐
+     * 备注：设置为false时则不展示
+     */
+    exposedToDesigner?: boolean;
+    /**
+     * 初次插入页面的默认属性数据
+     */
+    defaultComProps?: boolean;
+    /**
+     * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+     */
+    propsSchema?: boolean;
+}
+/**
+ * registerNeoEditorModel: 注册 neo-editor 自定义组件模型
+ */
+export declare function registerNeoEditorModel(curEditorModel: any, cmpType?: string): void;

package/dist/index.esm.js

@@ -0,0 +1,424 @@
+import React from 'react';
+import Vue from 'vue';
+
+// 方便取值的时候能够把上层的取到，但是获取的时候不会全部把所有的数据获取到。
+function cloneObject(target, persistOwnProps = true) {
+    const obj = target && target.__super
+        ? Object.create(target.__super, {
+            __super: {
+                value: target.__super,
+                writable: false,
+                enumerable: false,
+            },
+        })
+        : Object.create(Object.prototype);
+    persistOwnProps &&
+        target &&
+        Object.keys(target).forEach((key) => (obj[key] = target[key]));
+    return obj;
+}
+function extendObject(target, src, persistOwnProps = true) {
+    const obj = cloneObject(target, persistOwnProps);
+    src && Object.keys(src).forEach((key) => (obj[key] = src[key]));
+    return obj;
+}
+
+const consoleTag = '[neo-register]'; // 输出标记
+/**
+ * 获取技术栈标识
+ * 目的：兼容用户非标准写法
+ */
+function getFramework(_framework) {
+    let defaultFramework = Framework.react;
+    if (!_framework) {
+        return defaultFramework;
+    }
+    let curFramework = _framework.toLowerCase().trim();
+    switch (curFramework) {
+        case 'jquery':
+        case 'jq':
+            curFramework = Framework.jquery;
+            break;
+        case 'vue2':
+        case 'vue 2':
+        case 'vue2.0':
+        case 'vue 2.0':
+            curFramework = Framework.vue2;
+            break;
+        case 'vue':
+        case 'vue3':
+        case 'vue 3':
+        case 'vue3.0':
+        case 'vue 3.0':
+            curFramework = Framework.vue3;
+            console.error(`${consoleTag} 暂不支持 vue3.0 技术栈。`);
+            break;
+        default:
+            curFramework = Framework.react;
+    }
+    return curFramework;
+}
+/**
+ * 识别自定义组件技术栈类型
+ * react 编译后是 一个函数组件
+ * vue 编译后是 一个类对象: { render: ƒ, __file: 'xx/xx.vue', __compiled: true, ... }
+ */
+function getFrameworkByCmp(component) {
+    if (isVueComponent(component)) {
+        return 'vue2';
+    }
+    return 'react';
+}
+function isVueComponent(component) {
+    return (typeof component === 'object' &&
+        ((component._compiled && component.components) ||
+            (component.__file && component.__file.endsWith('.vue'))));
+}
+var Usage;
+(function (Usage) {
+    Usage["renderer"] = "renderer";
+    Usage["formitem"] = "formitem";
+})(Usage || (Usage = {}));
+/**
+ * 获取neo渲染器类型标识
+ * 目的：兼容用户非标准写法
+ */
+function getUsage(_usage) {
+    let defaultUsage = Usage.renderer;
+    if (!_usage) {
+        return defaultUsage;
+    }
+    let curUsage = _usage.toLowerCase().trim();
+    switch (curUsage) {
+        case 'renderer':
+        case 'renderers':
+            curUsage = Usage.renderer;
+            break;
+        case 'formitem':
+        case 'form-item':
+        case 'form item':
+            curUsage = Usage.formitem;
+            break;
+        default:
+            curUsage = Usage.renderer;
+    }
+    return curUsage;
+}
+/**
+ * 当前 neo-register 支持的技术栈
+ * 备注：vue2 和 vue3 不能同时存在
+ */
+var Framework;
+(function (Framework) {
+    Framework["react"] = "react";
+    Framework["vue2"] = "vue2";
+    Framework["vue3"] = "vue3";
+    Framework["jquery"] = "jquery";
+})(Framework || (Framework = {}));
+// 判断是否缺失 editor 自定义组件模型关键字段
+function isEditorModel(EditorModelClass) {
+    let _isEditorModel = false;
+    if (!EditorModelClass) {
+        return false;
+    }
+    const _editorPluginObj = new EditorModelClass();
+    if (!_editorPluginObj.cmpType) {
+        console.error(`${consoleTag} / registerNeoEditorModel: 自定义组件注册失败，cmpType 不能为空。`);
+    }
+    else if (!_editorPluginObj.label) {
+        console.error(`${consoleTag} / registerNeoEditorModel: 自定义组件注册失败，名称（label）不能为空。`);
+    }
+    else if (!_editorPluginObj.tags) {
+        console.error(`${consoleTag} / registerNeoEditorModel: 自定义组件注册失败，组件分类（tags）不能为空。`);
+    }
+    else if (!Array.isArray(_editorPluginObj.tags)) {
+        console.error(`${consoleTag} / registerNeoEditorModel: 自定义组件注册失败，组件分类（tags）格式异常。`);
+    }
+    else {
+        // 1.设置一个默认 icon
+        if (!_editorPluginObj.icon) {
+            Object.assign(EditorModelClass.prototype, {
+                icon: 'https://neo-widgets.bj.bcebos.com/custom-widget.svg',
+            });
+        }
+        _isEditorModel = true;
+    }
+    return _isEditorModel;
+}
+// 判断是否是字符串类型
+function isString(str) {
+    return Object.prototype.toString.call(str).slice(8, -1) === 'String';
+}
+function isProxy(obj) {
+    if (!obj) {
+        return false;
+    }
+    const hasMSTProperties = !!(obj.$treenode ||
+        obj.$mstObservable ||
+        obj.$modelType ||
+        obj.$modelId);
+    return (hasMSTProperties || Object.prototype.toString.call(obj) === '[object Proxy]');
+}
+
+/**
+ * registerNeoEditorModel: 注册 neo-editor 自定义组件模型
+ */
+function registerNeoEditorModel(curEditorModel, cmpType) {
+    if (curEditorModel && isEditorModel(curEditorModel)) {
+        const curCmpType = cmpType || new curEditorModel().cmpType;
+        const curEditorModelObj = new curEditorModel();
+        Object.assign(curEditorModel.prototype, {
+            custom: true,
+            exposedToDesigner: curEditorModelObj.exposedToDesigner ?? true,
+            namespace: curEditorModelObj.namespace ?? 'neo-cmp-cli',
+            cmpType: curCmpType,
+        });
+        // registerEditorModel(curEditorModel); // 不直接注册为 neo-editor 插件
+        // 通过 postMessage 告知 neo-editor 注册一个新的插件
+        if (window && window.postMessage) {
+            const newComponentType = AddCustomEditorModel(curCmpType, curEditorModel);
+            if (newComponentType) {
+                console.info(`${consoleTag}触发注册自定义组件模型(${curCmpType})事件`);
+                window.postMessage({
+                    type: 'neo-model-register-event',
+                    eventMsg: `${consoleTag}注册一个 neo-editor 自定义组件模型`,
+                    cmpType: curCmpType,
+                }, '*');
+            }
+        }
+    }
+}
+function AddCustomEditorModel(cmpType, model) {
+    if (window && !window.NEOEditorCustomModels) {
+        window.NEOEditorCustomModels = {};
+    }
+    if (!window.NEOEditorCustomModels[cmpType]) {
+        window.NEOEditorCustomModels[cmpType] = model;
+        return cmpType;
+    }
+    else {
+        console.error(`${consoleTag}注册自定义组件模型失败，已存在重名插件(${cmpType})。`);
+    }
+    return null;
+}
+
+/**
+ * 将 vue2.0 自定义组件包裹成一个 react组件
+ */
+function createVue2Component(vueObj) {
+    if (!vueObj || (typeof vueObj !== 'function' && typeof vueObj !== 'object')) {
+        return;
+    }
+    class VueFactory extends React.Component {
+        domRef;
+        vm;
+        isUnmount;
+        // 指定 contextType 读取当前的 scope context。
+        // React 会往上找到最近的 scope Provider，然后使用它的值。
+        // static contextType = ScopedContext; // 待支持
+        constructor(props, context) {
+            super(props);
+            this.domRef = React.createRef();
+            this.isUnmount = false;
+            /*
+            // 待支持（自定义组件支持事件动作）
+            const scoped = context;
+            scoped.registerComponent(this);
+            */
+            this.resolveNeoProps = this.resolveNeoProps.bind(this);
+        }
+        componentDidMount() {
+            const { neoData, neoMSTData, neoFunc } = this.resolveNeoProps();
+            const { data, ...rest } = (vueObj =
+                typeof vueObj === 'function' ? new vueObj() : vueObj);
+            const vueData = typeof data === 'function' ? data() : data;
+            const curVueData = extendObject(vueData, neoData);
+            // 传入的Vue属性
+            this.vm = new Vue({
+                ...rest,
+                data: () => curVueData,
+                props: extendObject(neoFunc, {
+                    ...(rest.props || {}),
+                    ...neoMSTData,
+                }),
+            });
+            Object.keys(neoFunc).forEach((key) => {
+                this.vm.$props[key] = neoFunc[key];
+            });
+            if (this.domRef.current) {
+                this.domRef.current.appendChild(this.vm.$mount().$el);
+            }
+        }
+        componentDidUpdate() {
+            if (!this.isUnmount) {
+                const { neoData } = this.resolveNeoProps();
+                if (this.vm) {
+                    Object.keys(neoData).forEach((key) => {
+                        this.vm[key] = neoData[key];
+                    });
+                    this.vm.$forceUpdate();
+                }
+            }
+        }
+        componentWillUnmount() {
+            this.isUnmount = true;
+            /*
+            // 待支持
+            const scoped = this.context;
+            scoped.unRegisterComponent(this);
+            */
+            if (this.vm) {
+                this.vm.$destroy();
+            }
+        }
+        resolveNeoProps() {
+            let neoFunc = {};
+            let neoData = {};
+            let neoMSTData = {};
+            Object.keys(this.props).forEach((key) => {
+                const value = this.props[key];
+                if (typeof value === 'function') {
+                    neoFunc[key] = value;
+                }
+                else if (isProxy(value)) {
+                    neoMSTData[key] = value;
+                }
+                else {
+                    neoData[key] = value;
+                }
+            });
+            return { neoData, neoMSTData, neoFunc };
+        }
+        /**
+         * reload动作处理
+         */
+        reload() {
+            if (this.vm && this.vm.reload) {
+                this.vm.reload();
+            }
+            else {
+                console.warn('自定义组件暂不支持reload动作。');
+            }
+        }
+        /**
+         * 事件动作处理:
+         * 在这里设置自定义组件对外暴露的动作，其他组件可以通过组件动作触发自定义组件的对应动作
+         */
+        doAction(action, args) {
+            if (this.vm && this.vm.doAction) {
+                this.vm.doAction(action, args);
+            }
+            else {
+                console.warn('自定义组件中不存在 doAction。');
+            }
+        }
+        render() {
+            return React.createElement("div", { ref: this.domRef });
+        }
+    }
+    return VueFactory;
+}
+
+/**
+ * registerNeoCmp: 根据type类型注册 neo 自定义组件
+ *【方法参数说明】
+ * newRenderer: 自定义组件,
+ * rendererOption: {
+ *   cmpType: 自定义组件的type类型，比如：input、text-area、select-user等
+ *   usage?: neo普通渲染器、neo表单渲染器，默认值为 neo普通渲染器
+ *   weight?: 自定义组件权重
+ *   framework?: 技术栈类型，默认为 react 技术栈，可选技术栈：vue2、react
+ * }
+ * 备注：暂不支持 vue3.0 技术栈
+ */
+function registerNeoCmp(newRenderer, rendererOption) {
+    if (!newRenderer) {
+        return;
+    }
+    // 1.默认注册配置参数
+    const curRendererOption = {
+        cmpType: '',
+        usage: Usage.renderer,
+        weight: 0,
+        // framework: Framework.react, // 默认为 react 技术栈
+    };
+    // 2.获取相关配置参数
+    if (rendererOption && isString(rendererOption)) {
+        // rendererOption为字符串则将其设置为type
+        Object.assign(curRendererOption, {
+            cmpType: rendererOption,
+        });
+    }
+    else {
+        Object.assign(curRendererOption, rendererOption);
+    }
+    if (curRendererOption && !curRendererOption.cmpType) {
+        console.error(`${consoleTag} / registerNeoCmp: 自定义组件注册失败，cmpType 不能为空。`);
+    }
+    else {
+        // 根据组件结构自动识别组件技术栈
+        curRendererOption.framework = curRendererOption.framework
+            ? getFramework(curRendererOption.framework)
+            : getFrameworkByCmp(newRenderer);
+        // 修正usage数值
+        curRendererOption.usage = getUsage(curRendererOption.usage);
+        // 当前支持注册的渲染器类型
+        const registerMap = {
+            renderer: () => { },
+            formitem: () => { }, // FormItem
+        };
+        // 当前支持的技术栈类型
+        const resolverMap = {
+            react: (i) => i,
+            vue2: createVue2Component,
+            vue3: createVue2Component, // createVue3Component,
+        };
+        // 支持多技术栈
+        const curRendererComponent = resolverMap[curRendererOption.framework](newRenderer);
+        // 注册neo渲染器
+        if (!registerMap[curRendererOption.usage]) {
+            console.error(`${consoleTag} / registerNeoCmp: 自定义组件注册失败，暂不支持 ${curRendererOption.usage} 组件类型。`);
+        }
+        else {
+            // 通过 postMessage 告知 neo 注册一个新的渲染器
+            if (window && window.postMessage) {
+                const newComponentType = AddNeoCustomModel(curRendererOption.cmpType, {
+                    cmpType: curRendererOption.cmpType,
+                    weight: curRendererOption.weight,
+                    usage: curRendererOption.usage,
+                    framework: curRendererOption.framework,
+                    component: curRendererComponent,
+                    config: curRendererOption,
+                });
+                if (newComponentType) {
+                    console.info(`${consoleTag}触发注册自定义组件(${newComponentType})事件`);
+                    window.postMessage({
+                        type: 'neo-cmp-register-event',
+                        eventMsg: `${consoleTag}注册一个自定义组件`,
+                        neoRenderer: {
+                            cmpType: newComponentType,
+                            weight: curRendererOption.weight,
+                            usage: curRendererOption.usage,
+                            config: curRendererOption,
+                        },
+                    }, '*');
+                }
+            }
+        }
+    }
+}
+function AddNeoCustomModel(componentType, rendererData) {
+    if (window && !window.NeoCustomCmps) {
+        window.NeoCustomCmps = {};
+    }
+    if (!window.NeoCustomCmps[componentType]) {
+        window.NeoCustomCmps[componentType] = rendererData;
+        return componentType;
+    }
+    else {
+        console.error(`${consoleTag} / registerNeoCmp: 自定义组件注册失败，已存在重名渲染器(${componentType})。`);
+    }
+    return null;
+}
+
+export { createVue2Component, registerNeoCmp, registerNeoEditorModel };

package/dist/index.esm.min.js

@@ -0,0 +1 @@
+import e from"react";import o from"vue";function t(e,o,t=!0){const r=function(e,o=!0){const t=e&&e.__super?Object.create(e.__super,{__super:{value:e.__super,writable:!1,enumerable:!1}}):Object.create(Object.prototype);return o&&e&&Object.keys(e).forEach(o=>t[o]=e[o]),t}(e,t);return o&&Object.keys(o).forEach(e=>r[e]=o[e]),r}const r="[neo-register]";var s,n;function i(e,o){if(e&&function(e){let o=!1;if(!e)return!1;const t=new e;return t.cmpType?t.label?t.tags?Array.isArray(t.tags)?(t.icon||Object.assign(e.prototype,{icon:"https://neo-widgets.bj.bcebos.com/custom-widget.svg"}),o=!0):console.error(`${r} / registerNeoEditorModel: 自定义组件注册失败，组件分类（tags）格式异常。`):console.error(`${r} / registerNeoEditorModel: 自定义组件注册失败，组件分类（tags）不能为空。`):console.error(`${r} / registerNeoEditorModel: 自定义组件注册失败，名称（label）不能为空。`):console.error(`${r} / registerNeoEditorModel: 自定义组件注册失败，cmpType 不能为空。`),o}(e)){const t=o||(new e).cmpType,s=new e;if(Object.assign(e.prototype,{custom:!0,exposedToDesigner:s.exposedToDesigner??!0,namespace:s.namespace??"neo-cmp-cli",cmpType:t}),window&&window.postMessage){const o=function(e,o){window&&!window.NEOEditorCustomModels&&(window.NEOEditorCustomModels={});if(!window.NEOEditorCustomModels[e])return window.NEOEditorCustomModels[e]=o,e;console.error(`${r}注册自定义组件模型失败，已存在重名插件(${e})。`);return null}(t,e);o&&(console.info(`${r}触发注册自定义组件模型(${t})事件`),window.postMessage({type:"neo-model-register-event",eventMsg:`${r}注册一个 neo-editor 自定义组件模型`,cmpType:t},"*"))}}}function c(r){if(r&&("function"==typeof r||"object"==typeof r)){class s extends e.Component{domRef;vm;isUnmount;constructor(o,t){super(o),this.domRef=e.createRef(),this.isUnmount=!1,this.resolveNeoProps=this.resolveNeoProps.bind(this)}componentDidMount(){const{neoData:e,neoMSTData:s,neoFunc:n}=this.resolveNeoProps(),{data:i,...c}=r="function"==typeof r?new r:r,a=t("function"==typeof i?i():i,e);this.vm=new o({...c,data:()=>a,props:t(n,{...c.props||{},...s})}),Object.keys(n).forEach(e=>{this.vm.$props[e]=n[e]}),this.domRef.current&&this.domRef.current.appendChild(this.vm.$mount().$el)}componentDidUpdate(){if(!this.isUnmount){const{neoData:e}=this.resolveNeoProps();this.vm&&(Object.keys(e).forEach(o=>{this.vm[o]=e[o]}),this.vm.$forceUpdate())}}componentWillUnmount(){this.isUnmount=!0,this.vm&&this.vm.$destroy()}resolveNeoProps(){let e={},o={},t={};return Object.keys(this.props).forEach(r=>{const s=this.props[r];var n;"function"==typeof s?e[r]=s:(n=s)&&(n.$treenode||n.$mstObservable||n.$modelType||n.$modelId||"[object Proxy]"===Object.prototype.toString.call(n))?t[r]=s:o[r]=s}),{neoData:o,neoMSTData:t,neoFunc:e}}reload(){this.vm&&this.vm.reload?this.vm.reload():console.warn("自定义组件暂不支持reload动作。")}doAction(e,o){this.vm&&this.vm.doAction?this.vm.doAction(e,o):console.warn("自定义组件中不存在 doAction。")}render(){return e.createElement("div",{ref:this.domRef})}}return s}}function a(e,o){if(!e)return;const t={cmpType:"",usage:s.renderer,weight:0};var i;if(o&&(i=o,"String"===Object.prototype.toString.call(i).slice(8,-1))?Object.assign(t,{cmpType:o}):Object.assign(t,o),t&&!t.cmpType)console.error(`${r} / registerNeoCmp: 自定义组件注册失败，cmpType 不能为空。`);else{t.framework=t.framework?function(e){let o=n.react;if(!e)return o;let t=e.toLowerCase().trim();switch(t){case"jquery":case"jq":t=n.jquery;break;case"vue2":case"vue 2":case"vue2.0":case"vue 2.0":t=n.vue2;break;case"vue":case"vue3":case"vue 3":case"vue3.0":case"vue 3.0":t=n.vue3,console.error(`${r} 暂不支持 vue3.0 技术栈。`);break;default:t=n.react}return t}(t.framework):function(e){return"object"==typeof e&&(e._compiled&&e.components||e.__file&&e.__file.endsWith(".vue"))}(e)?"vue2":"react",t.usage=function(e){let o=s.renderer;if(!e)return o;let t=e.toLowerCase().trim();switch(t){case"renderer":case"renderers":default:t=s.renderer;break;case"formitem":case"form-item":case"form item":t=s.formitem}return t}(t.usage);const o={renderer:()=>{},formitem:()=>{}},i={react:e=>e,vue2:c,vue3:c}[t.framework](e);if(o[t.usage]){if(window&&window.postMessage){const e=function(e,o){window&&!window.NeoCustomCmps&&(window.NeoCustomCmps={});if(!window.NeoCustomCmps[e])return window.NeoCustomCmps[e]=o,e;console.error(`${r} / registerNeoCmp: 自定义组件注册失败，已存在重名渲染器(${e})。`);return null}(t.cmpType,{cmpType:t.cmpType,weight:t.weight,usage:t.usage,framework:t.framework,component:i,config:t});e&&(console.info(`${r}触发注册自定义组件(${e})事件`),window.postMessage({type:"neo-cmp-register-event",eventMsg:`${r}注册一个自定义组件`,neoRenderer:{cmpType:e,weight:t.weight,usage:t.usage,config:t}},"*"))}}else console.error(`${r} / registerNeoCmp: 自定义组件注册失败，暂不支持 ${t.usage} 组件类型。`)}}!function(e){e.renderer="renderer",e.formitem="formitem"}(s||(s={})),function(e){e.react="react",e.vue2="vue2",e.vue3="vue3",e.jquery="jquery"}(n||(n={}));export{c as createVue2Component,a as registerNeoCmp,i as registerNeoEditorModel};

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+/*! For license information please see index.umd.js.LICENSE.txt */
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.neoRegister=o():e.neoRegister=o()}(this,function(){return function(){"use strict";var e={n:function(o){var r=o&&o.__esModule?function(){return o.default}:function(){return o};return e.d(r,{a:r}),r},d:function(o,r){for(var t in r)e.o(r,t)&&!e.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:r[t]})},o:function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},o={};e.r(o),e.d(o,{createVue2Component:function(){return y},registerNeoCmp:function(){return b},registerNeoEditorModel:function(){return u}});var r=require("@babel/runtime/helpers/extends"),t=e.n(r);function n(e,o,r){void 0===r&&(r=!0);var t=function(e,o){void 0===o&&(o=!0);var r=e&&e.__super?Object.create(e.__super,{__super:{value:e.__super,writable:!1,enumerable:!1}}):Object.create(Object.prototype);return o&&e&&Object.keys(e).forEach(function(o){return r[o]=e[o]}),r}(e,r);return o&&Object.keys(o).forEach(function(e){return t[e]=o[e]}),t}var i,s,c="[neo-register]";function u(e,o){if(e&&function(e){var o=!1;if(!e)return!1;var r=new e;return r.cmpType?r.label?r.tags?Array.isArray(r.tags)?(r.icon||Object.assign(e.prototype,{icon:"https://neo-widgets.bj.bcebos.com/custom-widget.svg"}),o=!0):console.error(c+" / registerNeoEditorModel: 自定义组件注册失败，组件分类（tags）格式异常。"):console.error(c+" / registerNeoEditorModel: 自定义组件注册失败，组件分类（tags）不能为空。"):console.error(c+" / registerNeoEditorModel: 自定义组件注册失败，名称（label）不能为空。"):console.error(c+" / registerNeoEditorModel: 自定义组件注册失败，cmpType 不能为空。"),o}(e)){var r,t,n=o||(new e).cmpType,i=new e;if(Object.assign(e.prototype,{custom:!0,exposedToDesigner:null==(r=i.exposedToDesigner)||r,namespace:null!=(t=i.namespace)?t:"neo-cmp-cli",cmpType:n}),window&&window.postMessage){var s=function(e,o){return window&&!window.NEOEditorCustomModels&&(window.NEOEditorCustomModels={}),window.NEOEditorCustomModels[e]?(console.error(c+"注册自定义组件模型失败，已存在重名插件("+e+")。"),null):(window.NEOEditorCustomModels[e]=o,e)}(n,e);s&&(console.info(c+"触发注册自定义组件模型("+n+")事件"),window.postMessage({type:"neo-model-register-event",eventMsg:c+"注册一个 neo-editor 自定义组件模型",cmpType:n},"*"))}}}!function(e){e.renderer="renderer",e.formitem="formitem"}(i||(i={})),function(e){e.react="react",e.vue2="vue2",e.vue3="vue3",e.jquery="jquery"}(s||(s={}));var a=require("@babel/runtime/helpers/objectWithoutPropertiesLoose"),p=e.n(a),f=require("@babel/runtime/helpers/inheritsLoose"),m=e.n(f),d=require("react"),l=e.n(d),v=require("vue"),w=e.n(v),g=["data"];function y(e){if(e&&("function"==typeof e||"object"==typeof e))return function(o){function r(e,r){var t;return(t=o.call(this,e)||this).domRef=void 0,t.vm=void 0,t.isUnmount=void 0,t.domRef=l().createRef(),t.isUnmount=!1,t.resolveNeoProps=t.resolveNeoProps.bind(t),t}m()(r,o);var i=r.prototype;return i.componentDidMount=function(){var o=this,r=this.resolveNeoProps(),i=r.neoData,s=r.neoMSTData,c=r.neoFunc,u=e="function"==typeof e?new e:e,a=u.data,f=p()(u,g),m=n("function"==typeof a?a():a,i);this.vm=new(w())(t()({},f,{data:function(){return m},props:n(c,t()({},f.props||{},s))})),Object.keys(c).forEach(function(e){o.vm.$props[e]=c[e]}),this.domRef.current&&this.domRef.current.appendChild(this.vm.$mount().$el)},i.componentDidUpdate=function(){var e=this;if(!this.isUnmount){var o=this.resolveNeoProps().neoData;this.vm&&(Object.keys(o).forEach(function(r){e.vm[r]=o[r]}),this.vm.$forceUpdate())}},i.componentWillUnmount=function(){this.isUnmount=!0,this.vm&&this.vm.$destroy()},i.resolveNeoProps=function(){var e=this,o={},r={},t={};return Object.keys(this.props).forEach(function(n){var i,s=e.props[n];"function"==typeof s?o[n]=s:(i=s)&&(i.$treenode||i.$mstObservable||i.$modelType||i.$modelId||"[object Proxy]"===Object.prototype.toString.call(i))?t[n]=s:r[n]=s}),{neoData:r,neoMSTData:t,neoFunc:o}},i.reload=function(){this.vm&&this.vm.reload?this.vm.reload():console.warn("自定义组件暂不支持reload动作。")},i.doAction=function(e,o){this.vm&&this.vm.doAction?this.vm.doAction(e,o):console.warn("自定义组件中不存在 doAction。")},i.render=function(){return l().createElement("div",{ref:this.domRef})},r}(l().Component)}function b(e,o){if(e){var r,t={cmpType:"",usage:i.renderer,weight:0};if(o&&(r=o,"String"===Object.prototype.toString.call(r).slice(8,-1))?Object.assign(t,{cmpType:o}):Object.assign(t,o),t&&!t.cmpType)console.error(c+" / registerNeoCmp: 自定义组件注册失败，cmpType 不能为空。");else{t.framework=t.framework?function(e){var o=s.react;if(!e)return o;var r=e.toLowerCase().trim();switch(r){case"jquery":case"jq":r=s.jquery;break;case"vue2":case"vue 2":case"vue2.0":case"vue 2.0":r=s.vue2;break;case"vue":case"vue3":case"vue 3":case"vue3.0":case"vue 3.0":r=s.vue3,console.error(c+" 暂不支持 vue3.0 技术栈。");break;default:r=s.react}return r}(t.framework):"object"==typeof(f=e)&&(f._compiled&&f.components||f.__file&&f.__file.endsWith(".vue"))?"vue2":"react",t.usage=function(e){var o=i.renderer;if(!e)return o;var r=e.toLowerCase().trim();switch(r){case"renderer":case"renderers":default:r=i.renderer;break;case"formitem":case"form-item":case"form item":r=i.formitem}return r}(t.usage);var n={react:function(e){return e},vue2:y,vue3:y}[t.framework](e);if({renderer:function(){},formitem:function(){}}[t.usage]){if(window&&window.postMessage){var u=(a=t.cmpType,p={cmpType:t.cmpType,weight:t.weight,usage:t.usage,framework:t.framework,component:n,config:t},window&&!window.NeoCustomCmps&&(window.NeoCustomCmps={}),window.NeoCustomCmps[a]?(console.error(c+" / registerNeoCmp: 自定义组件注册失败，已存在重名渲染器("+a+")。"),null):(window.NeoCustomCmps[a]=p,a));u&&(console.info(c+"触发注册自定义组件("+u+")事件"),window.postMessage({type:"neo-cmp-register-event",eventMsg:c+"注册一个自定义组件",neoRenderer:{cmpType:u,weight:t.weight,usage:t.usage,config:t}},"*"))}}else console.error(c+" / registerNeoCmp: 自定义组件注册失败，暂不支持 "+t.usage+" 组件类型。")}}var a,p,f}return o}()});

package/dist/index.umd.js.LICENSE.txt

@@ -0,0 +1,7 @@
+/*!
+ * neo-register v1.0.0
+ * author: wibetter
+ * build tool: AKFun
+ * build time: Wed Sep 10 2025 13:41:28 GMT+0800 (中国标准时间)
+ * build tool info: https://github.com/wibetter/akfun
+ */

package/dist/main.d.ts

@@ -0,0 +1,10 @@
+/**
+ * neo-register: 组件注册器
+ *
+ * 【提供的工具方法清单】
+ * registerNeoCmp: 根据 cmpType 注册 neo 自定义组件
+ * registerNeoEditorModel: 注册 neo-editor 自定义组件模型
+ */
+export { registerNeoEditorModel } from './function/registerNeoEditorModel';
+export { registerNeoCmp } from './function/registerNeoCmp';
+export { createVue2Component } from './frameworkFactory/vueFactory';

package/dist/utils/index.d.ts

@@ -0,0 +1,38 @@
+export declare const consoleTag = "[neo-register]";
+export * from './object';
+/**
+ * 获取技术栈标识
+ * 目的：兼容用户非标准写法
+ */
+export declare function getFramework(_framework?: string): string;
+/**
+ * 识别自定义组件技术栈类型
+ * react 编译后是 一个函数组件
+ * vue 编译后是 一个类对象: { render: ƒ, __file: 'xx/xx.vue', __compiled: true, ... }
+ */
+export declare function getFrameworkByCmp(component: any): string;
+export declare function isReactComponent(component: any): boolean;
+export declare function isVueComponent(component: any): boolean;
+export declare enum Usage {
+    renderer = "renderer",
+    formitem = "formitem"
+}
+/**
+ * 获取neo渲染器类型标识
+ * 目的：兼容用户非标准写法
+ */
+export declare function getUsage(_usage?: string): string;
+/**
+ * 当前 neo-register 支持的技术栈
+ * 备注：vue2 和 vue3 不能同时存在
+ */
+export declare enum Framework {
+    react = "react",
+    vue2 = "vue2",
+    vue3 = "vue3",
+    jquery = "jquery"
+}
+export declare function isEditorModel(EditorModelClass: any): boolean;
+export declare function isString(str: any): boolean;
+export declare function isObject(obj: any): boolean;
+export declare function isProxy(obj: any): boolean;

package/dist/utils/object.d.ts

@@ -0,0 +1,8 @@
+export declare function createObject(superProps?: {
+    [propName: string]: any;
+}, props?: {
+    [propName: string]: any;
+}, properties?: any): object;
+export declare function cloneObject(target: any, persistOwnProps?: boolean): any;
+export declare function extendObject(target: any, src?: any, persistOwnProps?: boolean): any;
+export declare function isObject(obj: any): any;

package/docs/FormItemType.md

@@ -0,0 +1,159 @@
+## 可作为自定义配置项的表单项组件
+
+### 1. 基础输入类
+
+#### 文本输入
+- **text** - 文本输入框
+- **password** - 密码输入框  
+- **email** - 邮箱输入框
+- **url** - URL输入框
+- **native-date** - 原生日期输入
+- **native-time** - 原生时间输入
+- **native-number** - 原生数字输入
+
+#### 多行文本
+- **textarea** - 多行文本输入框
+
+#### 数字输入
+- **number** - 数字输入框
+
+#### 日期时间
+- **date** - 日期选择器
+- **datetime** - 日期时间选择器
+- **time** - 时间选择器
+- **month** - 月份选择器
+- **quarter** - 季度选择器
+- **year** - 年份选择器
+- **date-range** - 日期范围选择器
+- **datetime-range** - 日期时间范围选择器
+
+### 2. 选择类
+
+#### 单选/多选
+- **select** - 下拉选择框
+- **multi-select** - 多选下拉框
+- **radios** - 单选框组
+- **checkboxes** - 复选框组
+- **checkbox** - 单个复选框
+
+#### 树形选择
+- **tree-select** - 树形选择器
+- **nested-select** - 嵌套选择器
+
+#### 级联选择
+- **chained-select** - 级联选择器
+
+#### 穿梭框
+- **transfer** - 穿梭框组件
+
+#### 其他选择
+- **picker** - 选择器
+- **tabs-transfer** - 标签页穿梭框
+
+### 3. 特殊输入类
+
+#### 开关
+- **switch** - 开关组件
+
+#### 滑块
+- **range** - 范围滑块
+
+#### 评分
+- **rating** - 评分组件（待完善）
+
+#### 颜色
+- **color** - 颜色选择器
+
+#### 图标
+- **icon-picker** - 图标选择器
+
+#### 城市
+- **city** - 城市选择器
+
+#### 位置
+- **location** - 位置选择器 
+
+### 4. 文件上传类
+
+#### 文件上传
+- **file** - 文件上传组件 
+
+#### 图片上传
+- **image** - 图片上传组件
+
+### 5. 富文本编辑类
+
+#### 编辑器
+- **js-editor** - JavaScript 编辑器
+- **ts-editor** - TypeScript 编辑器
+- **rich-text** - 富文本编辑器
+- **editor** - 通用编辑器 
+- **diff-editor** - 差异编辑器 
+
+### 6. 布局容器类
+
+#### 容器
+- **container** - 容器组件
+- **hbox** - 水平盒子布局
+- **grid** - 网格布局 
+
+#### 分组
+- **field-set** - 字段集
+- **group** - 分组组件
+
+#### 标签页
+- **tabs** - 标签页组件
+
+### 7. 复合组件类
+
+#### 组合
+- **combo** - 组合组件
+- **array** - 数组组件 
+- **repeat** - 重复组件 
+
+#### 子表单
+- **form** - 子表单
+
+#### 表格
+- **table** - 表格组件 
+
+### 8. 特殊功能类
+
+#### 隐藏字段
+- **hidden** - 隐藏字段
+
+#### 静态显示
+- **static** - 静态文本显示
+
+#### 按钮
+- **button** - 按钮组件
+- **submit** - 提交按钮
+- **reset** - 重置按钮
+- **button-toolbar** - 按钮工具栏
+
+#### 输入组合
+- **input-group** - 输入组合组件
+
+#### 服务
+- **service** - 服务组件
+
+#### 公式
+- **formula** - 公式组件 
+
+#### 条件构建器
+- **condition-builder** - 条件构建器 
+
+#### 矩阵
+- **matrix** - 矩阵组件 
+
+#### UUID
+- **uuid** - UUID 生成器 
+
+#### 月份范围
+- **month-range** - 月份范围选择器 
+
+
+## 使用说明
+
+- 以上表单项为 amis 表单项（基于amis 1.1.5私有化版本）
+- 相关表单项使用说明请见 [amis 使用文档](https://aisuda.bce.baidu.com/amis/zh-CN/components/form/index)

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "neo-register",
+  "version": "1.0.0",
+  "description": "neo自定义组件注册器（支持 react 和 vue2.0 技术栈），主要用于注册 neo 自定义组件、neo-editor 自定义组件模型。",
+  "keywords": [
+    "neo自定义组件注册器",
+    "neo自定义组件",
+    "neo-editor自定义组件模型"
+  ],
+  "author": "wibetter",
+  "license": "MIT",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "scripts": {
+    "linkDebug": "neo linkDebug",
+    "build2lib": "neo build2lib",
+    "build2esm": "neo build2esm",
+    "format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\""
+  },
+  "files": [
+    "dist/*",
+    "docs/*"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}": [
+      "prettier --write"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git@github.com:wibetter/neo-register.git"
+  },
+  "bugs": {
+    "url": "https://github.com/wibetter/neo-register/issues"
+  },
+  "dependencies": {
+    "vue": "^2.6.14"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^9.1.1",
+    "@types/react": "^16.14.66",
+    "@types/react-dom": "^16.9.25",
+    "@types/vue": "^1.0.31",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.9",
+    "neo-cmp-cli": "^1.0.0",
+    "prettier": "^2.0.5",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "engines": {
+    "node": ">= 10.13.0",
+    "npm": ">= 6.4.1"
+  }
+}