@easy-editor/renderer-core 1.0.0

package/dist/types/components.d.ts

@@ -0,0 +1,22 @@
+import type { NodeSchema } from '@easy-editor/core';
+/**
+ * Minimal framework-agnostic component interface
+ * Contains only essential shared properties across frameworks
+ */
+export interface GeneralComponent<P = Record<string, unknown>, S = Record<string, unknown>, SS = any> {
+    readonly props: Readonly<P> & Readonly<{
+        children?: any | undefined;
+    }>;
+    state: Readonly<S>;
+    refs: Record<string, any>;
+    context: any;
+    setState<K extends keyof S>(state: ((prevState: Readonly<S>, props: Readonly<P>) => Pick<S, K> | S | null) | (Pick<S, K> | S | null), callback?: () => void): void;
+    forceUpdate(callback?: () => void): void;
+    render?(): any;
+}
+export interface FaultComponentProps extends NodeSchema {
+    error?: Error | string;
+}
+export interface NotFoundComponentProps extends NodeSchema {
+    enableStrictNotFoundMode?: boolean;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './renderer';
+export * from './setting-renderer';

package/dist/types/renderer.d.ts

@@ -0,0 +1,220 @@
+import type { ComponentType, DesignMode, JSExpression, JSONObject, Node, NodeSchema, RootSchema, Simulator, SimulatorRenderer } from '@easy-editor/core';
+import type { FaultComponentProps, GeneralComponent, NotFoundComponentProps } from './components';
+export type Schema = NodeSchema | RootSchema;
+export interface RendererState {
+    engineRenderError?: boolean;
+    error?: Error;
+}
+export interface RendererProps {
+    /** 符合低代码搭建协议的数据 */
+    schema: RootSchema | NodeSchema;
+    /** 组件依赖的实例 */
+    components: Record<string, ComponentType<any>>;
+    /** CSS 类名 */
+    className?: string;
+    /** style */
+    style?: Record<string, any>;
+    /** id */
+    id?: string | number;
+    /** 当前文档的 id */
+    documentId?: string;
+    /** 主要用于设置渲染模块的全局上下文，里面定义的内容可以在低代码中通过 this 来访问，比如 this.utils */
+    appHelper?: RendererAppHelper;
+    /**
+     * 配置规范参见《低代码搭建组件描述协议》https://lowcode-engine.cn/lowcode
+     * 主要在搭建场景中使用，用于提升用户搭建体验。
+     *
+     * > 在生产环境下不需要设置
+     */
+    componentsMap?: Record<string, any>;
+    /** 设计模式，可选值：live、design */
+    designMode?: DesignMode;
+    /** 渲染模块是否挂起，当设置为 true 时，渲染模块最外层容器的 shouldComponentUpdate 将始终返回false，在下钻编辑或者多引擎渲染的场景会用到该参数。 */
+    suspended?: boolean;
+    /** 组件获取 ref 时触发的钩子 */
+    onCompGetRef?: (schema: NodeSchema, ref: any) => void;
+    /** 组件 ctx 更新回调 */
+    onCompGetCtx?: (schema: NodeSchema, ref: any) => void;
+    /** 传入的 schema 是否有变更 */
+    getSchemaChangedSymbol?: () => boolean;
+    /** 设置 schema 是否有变更 */
+    setSchemaChangedSymbol?: (symbol: boolean) => void;
+    /** 自定义创建 element 的钩子 */
+    customCreateElement?: (Component: any, props: any, children: any) => any;
+    /** 渲染类型，标识当前模块是以什么类型进行渲染的 */
+    rendererName?: 'LowCodeRenderer' | 'PageRenderer' | string;
+    /** 当找不到组件时，显示的组件 */
+    notFoundComponent?: ComponentType<NotFoundComponentProps>;
+    /** 当组件渲染异常时，显示的组件 */
+    faultComponent?: ComponentType<FaultComponentProps>;
+    /** 设备信息 */
+    device?: 'default' | 'pc' | 'mobile' | string;
+    /**
+     * 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件
+     * @default false
+     */
+    enableStrictNotFoundMode?: boolean;
+    /** 获取节点的方法 */
+    getNode?: (id: string) => Node;
+    /** 渲染模块的 host */
+    __host?: Simulator;
+    /** 渲染模块的 container */
+    __container?: SimulatorRenderer;
+    /**
+     * 是否在设计模式下执行生命周期方法
+     * @default false
+     */
+    excuteLifeCycleInDesignMode?: boolean;
+}
+export interface RendererComponent<C = GeneralComponent<RendererProps, RendererState>> {
+    displayName: string;
+    defaultProps: RendererProps;
+    new (props: RendererProps): RendererComponentInstance<C>;
+}
+export type RendererComponentInstance<C = GeneralComponent<RendererProps, RendererState>> = C & {
+    __getRef: (ref: any) => void;
+    componentDidMount(): Promise<void> | void;
+    componentDidUpdate(): Promise<void> | void;
+    componentWillUnmount(): Promise<void> | void;
+    componentDidCatch(e: any): Promise<void> | void;
+    shouldComponentUpdate(nextProps: RendererProps): boolean;
+    isValidComponent(Component: any): boolean;
+    createElement(Component: any, props: any, children?: any): any;
+    getNotFoundComponent(): any;
+    getFaultComponent(): any;
+};
+/**
+ * duck-typed History
+ *
+ * @see https://github.com/ReactTraining/history/tree/master/docs/api-reference.md
+ */
+interface HistoryLike {
+    readonly action: any;
+    readonly location: LocationLike;
+    createHref: (to: any) => string;
+    push: (to: any, state?: any) => void;
+    replace: (to: any, state?: any) => void;
+    go: (delta: any) => void;
+    back: () => void;
+    forward: () => void;
+    listen: (listener: any) => () => void;
+    block: (blocker: any) => () => void;
+}
+/**
+ * duck-typed History.Location
+ *
+ * @see https://github.com/remix-run/history/blob/dev/docs/api-reference.md#location
+ */
+export interface LocationLike {
+    pathname: any;
+    search: any;
+    state: any;
+    hash: any;
+    key?: any;
+}
+export interface RendererAppHelper {
+    /** 全局公共函数 */
+    utils?: Record<string, any>;
+    /** 全局常量 */
+    constants?: Record<string, any>;
+    /** react-router 的 location 实例 */
+    location?: LocationLike;
+    /** react-router 的 history 实例 */
+    history?: HistoryLike;
+    /** 数据源引擎 */
+    dataSourceEngine?: {
+        createDataSourceEngine: (dataSource: DataSource, engine: any) => {
+            dataSourceMap: Record<string, any>;
+            reloadDataSource: () => Promise<void>;
+        };
+        [key: string]: any;
+    };
+}
+export interface NodeInfo {
+    schema?: NodeSchema;
+    Comp: any;
+    componentInfo?: any;
+    componentChildren?: any;
+}
+export interface DataSourceItem {
+    id: string;
+    isInit?: boolean | JSExpression;
+    type?: string;
+    options?: {
+        uri: string | JSExpression;
+        params?: JSONObject | JSExpression;
+        method?: string | JSExpression;
+        shouldFetch?: string;
+        willFetch?: string;
+        fit?: string;
+        didFetch?: string;
+    };
+    dataHandler?: JSExpression;
+}
+export interface DataSource {
+    list?: DataSourceItem[];
+    dataHandler?: JSExpression;
+}
+export interface BaseRendererProps extends RendererProps {
+    __appHelper?: RendererAppHelper;
+    __components: Record<string, ComponentType<any>>;
+    __ctx?: Record<string, any>;
+    __schema: RootSchema;
+    __designMode?: DesignMode;
+    __host?: Simulator;
+    __container?: SimulatorRenderer;
+    config?: Record<string, any>;
+    designMode?: DesignMode;
+    className?: string;
+    style?: Record<string, any>;
+    id?: string | number;
+    getSchemaChangedSymbol?: () => boolean;
+    setSchemaChangedSymbol?: (symbol: boolean) => void;
+    documentId?: string;
+    getNode?: any;
+    /**
+     * 设备类型，默认值：'default'
+     */
+    device?: 'default' | 'pc' | 'mobile' | string;
+    componentName?: string;
+}
+export interface BaseRendererContext<C = GeneralComponent<BaseRendererProps, Record<string, any>, any>> {
+    appHelper: RendererAppHelper;
+    components: Record<string, ComponentType<any>>;
+    engine: RendererComponentInstance<C>;
+    pageContext?: BaseRendererComponent<C>;
+    compContext?: BaseRendererComponent<C>;
+}
+export type BaseRendererInstance<C = GeneralComponent<BaseRendererProps, Record<string, any>, any>> = C & {
+    reloadDataSource(): Promise<any>;
+    __beforeInit(props: BaseRendererProps): void;
+    __init(props: BaseRendererProps): void;
+    __afterInit(props: BaseRendererProps): void;
+    __executeLifeCycleMethod(method: string, args?: any[]): void;
+    __getComponentView(): ComponentType<any> | undefined;
+    __bindCustomMethods(props: BaseRendererProps): void;
+    __generateCtx(ctx: Record<string, any>): void;
+    __parseData(data: any, ctx?: any): any;
+    __initDataSource(props: BaseRendererProps): void;
+    __writeCss(props: BaseRendererProps): void;
+    __render(): void;
+    __getRef(ref: any): void;
+    __getSchemaChildrenVirtualDom(schema: NodeSchema | undefined, Comp: any, nodeChildrenMap?: any): any;
+    __getComponentProps(schema: NodeSchema | undefined, scope: any, Comp: any, componentInfo?: any): any;
+    __createDom(): any;
+    __createVirtualDom(schema: any, self: any, parentInfo: NodeInfo, idx: string | number): any;
+    __createLoopVirtualDom(schema: any, self: any, parentInfo: NodeInfo, idx: number | string): any;
+    __parseProps(props: any, self: any, path: string, info: NodeInfo): any;
+    __renderContextProvider(customProps?: object, children?: any): any;
+    __renderContextConsumer(children: any): any;
+    __renderContent(children: any): any;
+    __checkSchema(schema: NodeSchema | undefined, extraComponents?: string | string[]): any;
+    __renderComp(Comp: any, ctxProps: object): any;
+    $(id: string, instance?: any): any;
+    context: BaseRendererContext<C>;
+    __designModeIsDesign?: boolean;
+};
+export interface BaseRendererComponent<C = GeneralComponent<BaseRendererProps, Record<string, any>, any>> {
+    new (props: BaseRendererProps): BaseRendererInstance<C>;
+}
+export {};

package/dist/types/setting-renderer.d.ts

@@ -0,0 +1,9 @@
+import type { Component, Designer, SettingField } from '@easy-editor/core';
+export interface SettingRendererProps {
+    designer: Designer;
+    /** 自定义渲染 Field Item */
+    customFieldItem?: (field: SettingField, setter: Component) => Component;
+    /** 自定义渲染 Field Group */
+    customFieldGroup?: (field: SettingField, setters: Component) => Component;
+    [extra: string]: any;
+}

package/dist/utils/classnames.d.ts

@@ -0,0 +1 @@
+export declare const classnames: (...args: any[]) => string;

package/dist/utils/common.d.ts

@@ -0,0 +1,56 @@
+import { type NodeSchema } from '@easy-editor/core';
+export declare const inSameDomain: () => boolean;
+/**
+ * get css styled name from schema`s fileName
+ * FileName -> lce-file-name
+ * @returns string
+ */
+export declare const getFileCssName: (fileName: string) => string | undefined;
+export declare const isSchema: (schema: any) => schema is NodeSchema;
+export declare const getValue: (obj: any, path: string, defaultValue?: {}) => any;
+export declare const transformArrayToMap: (arr: any[], key: string, overwrite?: boolean) => any;
+interface IParseOptions {
+    logScope?: string;
+}
+export declare const parseData: (schema: unknown, self: any, options?: IParseOptions) => any;
+export declare const isUseLoop: (loop: null | any[], isDesignMode: boolean) => boolean;
+export declare const checkPropTypes: (value: any, name: string, rule: any, componentName: string) => boolean;
+/**
+ * transform string to a function
+ * @param str function in string form
+ * @returns funtion
+ */
+export declare const transformStringToFunction: (str: string) => any;
+/**
+ * 对象类型JSExpression，支持省略this
+ * @param str expression in string form
+ * @param self scope object
+ * @returns funtion
+ */
+declare function parseExpression(options: {
+    str: any;
+    self: any;
+    thisRequired?: boolean;
+    logScope?: string;
+}): any;
+declare function parseExpression(str: any, self: any, thisRequired?: boolean): any;
+export { parseExpression };
+export declare const parseThisRequiredExpression: (str: any, self: any) => any;
+/**
+ * check str passed in is a string type of not
+ * @param str obj to be checked
+ * @returns boolean
+ */
+export declare const isString: (str: any) => boolean;
+/**
+ * capitalize first letter
+ * @param word string to be proccessed
+ * @returns string capitalized string
+ */
+export declare const capitalizeFirstLetter: (word: string) => string;
+/**
+ * process params for using in a url query
+ * @param obj params to be processed
+ * @returns string
+ */
+export declare const serializeParams: (obj: any) => any;

package/dist/utils/data-helper.d.ts

@@ -0,0 +1,83 @@
+import { type DataSource } from '@easy-editor/core';
+import type { RendererAppHelper } from '../types';
+type DataSourceType = 'fetch';
+/**
+ * do request for standard DataSourceType
+ * @param {DataSourceType} type type of DataSourceItem
+ * @param {any} options
+ */
+export declare const doRequest: (type: DataSourceType, options: any) => Promise<unknown> | undefined;
+export declare class DataHelper {
+    /**
+     * host object that will be "this" object when excuting dataHandler
+     *
+     * @type {*}
+     * @memberof DataHelper
+     */
+    host: any;
+    /**
+     * data source config
+     *
+     * @type {DataSource}
+     * @memberof DataHelper
+     */
+    config: DataSource;
+    /**
+     * a parser function which will be called to process config data
+     * which eventually will call common/utils.processData() to process data
+     * (originalConfig) => parsedConfig
+     * @type {*}
+     * @memberof DataHelper
+     */
+    parser: any;
+    /**
+     * config.list
+     *
+     * @type {any[]}
+     * @memberof DataHelper
+     */
+    ajaxList: any[];
+    /**
+     * dataHandler
+     *
+     * @type {*}
+     * @memberof DataHelper
+     */
+    dataHandler: any;
+    ajaxMap: any;
+    dataSourceMap: any;
+    appHelper: RendererAppHelper;
+    constructor(comp: any, config: DataSource, appHelper: RendererAppHelper, parser: any);
+    updateConfig(config?: {}): any;
+    generateDataSourceMap(): any;
+    updateDataSourceMap(id: string, data: any, error: any): void;
+    /**
+     * get all dataSourceItems which marked as isInit === true
+     * @private
+     * @returns
+     * @memberof DataHelper
+     */
+    getInitDataSourseConfigs(): any;
+    /**
+     * process all dataSourceItems which marked as isInit === true, and get dataSource request results.
+     * @public
+     * @returns
+     * @memberof DataHelper
+     */
+    getInitData(): Promise<any>;
+    reloadDataSource(): Promise<void>;
+    getDataSource(id: string, params: any, otherOptions: any, callback: any): Promise<any> | undefined;
+    asyncDataHandler(asyncDataList: any[]): Promise<unknown>;
+    /**
+     * process data using dataHandler
+     *
+     * @param {(string | null)} id request id, will be used in error message, can be null
+     * @param {*} dataHandler
+     * @param {*} data
+     * @param {*} error
+     * @returns
+     * @memberof DataHelper
+     */
+    handleData(id: string | null, dataHandler: any, data: any, error: any): any;
+}
+export {};

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './classnames';
+export * from './common';
+export * from './data-helper';
+export * from './logger';
+export * from './request';

package/dist/utils/logger.d.ts

@@ -0,0 +1 @@
+export declare const logger: import("@easy-editor/core").Logger;

package/dist/utils/request.d.ts

@@ -0,0 +1,43 @@
+/**
+ * this is a private method, export for testing purposes only.
+ *
+ * @export
+ * @param {*} dataAPI
+ * @param {*} params
+ * @returns
+ */
+export declare const buildUrl: (dataAPI: any, params: any) => any;
+/**
+ * do Get request
+ *
+ * @export
+ * @param {*} dataAPI
+ * @param {*} [params={}]
+ * @param {*} [headers={}]
+ * @param {*} [otherProps={}]
+ * @returns
+ */
+export declare const get: (dataAPI: any, params?: {}, headers?: {}, otherProps?: {}) => Promise<unknown>;
+/**
+ * do Post request
+ *
+ * @export
+ * @param {*} dataAPI
+ * @param {*} [params={}]
+ * @param {*} [headers={}]
+ * @param {*} [otherProps={}]
+ * @returns
+ */
+export declare const post: (dataAPI: any, params?: {}, headers?: any, otherProps?: {}) => Promise<unknown>;
+/**
+ * do request
+ *
+ * @export
+ * @param {*} dataAPI
+ * @param {string} [method='GET']
+ * @param {*} data
+ * @param {*} [headers={}]
+ * @param {*} [otherProps={}]
+ * @returns
+ */
+export declare const request: (dataAPI: any, method: string | undefined, data: any, headers?: {}, otherProps?: any) => Promise<unknown>;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@easy-editor/renderer-core",
+  "version": "1.0.0",
+  "description": "Renderer Core package for EasyEditor",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/Easy-Editor/EasyEditor",
+  "license": "MIT",
+  "author": "JinSo <kimjinso@qq.com>",
+  "contributors": [
+    {
+      "name": "NoahCodeGG",
+      "email": "noahcodegg@gmail.com",
+      "url": "https://github.com/NoahCodeGG"
+    }
+  ],
+  "keywords": [
+    "@easy-editor",
+    "easyeditor",
+    "low-code",
+    "editor",
+    "engine",
+    "renderer"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Easy-Editor/EasyEditor"
+  },
+  "bugs": {
+    "url": "https://github.com/Easy-Editor/EasyEditor/issues"
+  },
+  "peerDependencies": {
+    "@easy-editor/core": "^1.0.0"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12"
+  },
+  "scripts": {
+    "dev": "deno run --watch ./src/index.ts",
+    "format": "biome format --write .",
+    "lint": "biome check .",
+    "build": "npm-run-all -nl build:*",
+    "build:clean": "rimraf dist/",
+    "build:js": "rollup -c",
+    "types": "npm-run-all -nl types:*",
+    "types:src": "tsc --project tsconfig.build.json",
+    "test-types": "tsc --project tsconfig.test.json"
+  },
+  "module": "dist/index.js",
+  "unpkg": "dist/index.js"
+}