@easy-editor/react-renderer 0.0.1

package/dist/renderer-core/adapter/index.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType } from 'react';
+import type { BaseRenderComponent } from '../types';
+export interface RendererModules {
+    BaseRenderer?: BaseRenderComponent;
+    PageRenderer: BaseRenderComponent;
+    ComponentRenderer: BaseRenderComponent;
+}
+declare class Adapter {
+    renderers: RendererModules;
+    setRenderers(renderers: RendererModules): void;
+    setBaseRenderer(BaseRenderer: BaseRenderComponent): void;
+    setPageRenderer(PageRenderer: BaseRenderComponent): void;
+    setComponentRenderer(ComponentRenderer: BaseRenderComponent): void;
+    getRenderers(): Record<string, ComponentType<any>>;
+}
+export declare const adapter: Adapter;
+export {};

package/dist/renderer-core/base.d.ts

@@ -0,0 +1,11 @@
+import { type NodeSchema, type RootSchema } from '@easy-editor/core';
+import type { BaseRenderComponent } from './types';
+/**
+ * execute method in schema.lifeCycles with context
+ */
+export declare function executeLifeCycleMethod(context: any, schema: RootSchema, method: string, args: any, thisRequiredInJSE: boolean | undefined): any;
+/**
+ * get children from a node schema
+ */
+export declare function getSchemaChildren(schema: NodeSchema | undefined): NodeSchema[] | undefined;
+export declare function baseRendererFactory(): BaseRenderComponent;

package/dist/renderer-core/component.d.ts

@@ -0,0 +1,2 @@
+import type { BaseRenderComponent } from './types';
+export declare function componentRendererFactory(): BaseRenderComponent;

package/dist/renderer-core/components/FaultComponent.d.ts

@@ -0,0 +1,7 @@
+import type { NodeSchema } from '@easy-editor/core';
+import type { FC } from 'react';
+export interface FaultComponentProps extends NodeSchema {
+    error?: Error | string;
+}
+declare const FaultComponent: FC<FaultComponentProps>;
+export default FaultComponent;

package/dist/renderer-core/components/NotFoundComponent.d.ts

@@ -0,0 +1,7 @@
+import type { NodeSchema } from '@easy-editor/core';
+import type { FC } from 'react';
+export interface NotFoundComponentProps extends NodeSchema {
+    enableStrictNotFoundMode?: boolean;
+}
+declare const NotFoundComponent: FC<NotFoundComponentProps>;
+export default NotFoundComponent;

package/dist/renderer-core/context.d.ts

@@ -0,0 +1,6 @@
+export interface RendererContext {
+    [extra: string]: any;
+}
+export declare const RendererContext: import("react").Context<RendererContext>;
+export declare const useRendererContext: () => RendererContext;
+export declare function contextFactory(): any;

package/dist/renderer-core/hoc/comp.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentConstruct } from './leaf';
+export declare const compWrapper: ComponentConstruct;

package/dist/renderer-core/hoc/index.d.ts

@@ -0,0 +1,2 @@
+export * from './comp';
+export * from './leaf';

package/dist/renderer-core/hoc/leaf.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentType } from 'react';
+import type { BaseRendererInstance, Schema } from '../types';
+export interface ComponentHocInfo {
+    schema: Schema;
+    baseRenderer: BaseRendererInstance;
+    componentInfo: any;
+    scope: any;
+}
+export type ComponentConstruct = (Comp: ComponentType, info: ComponentHocInfo) => ComponentType;
+export interface ComponentHocProps {
+    __tag: any;
+    componentId: any;
+    _leaf: any;
+    forwardedRef?: any;
+    children?: any | undefined;
+}
+export interface ComponentHocState {
+    childrenInState: boolean;
+    nodeChildren: any;
+    nodeCacheProps: any;
+    /** 控制是否显示隐藏 */
+    visible: boolean;
+    /** 控制是否渲染 */
+    condition: boolean;
+    nodeProps: any;
+}
+export declare const leafWrapper: ComponentConstruct;

package/dist/renderer-core/index.d.ts

@@ -0,0 +1,9 @@
+export * from './adapter';
+export * from './base';
+export * from './component';
+export * from './context';
+export * from './hoc';
+export * from './page';
+export * from './renderer';
+export * from './types';
+export * from './utils';

package/dist/renderer-core/page.d.ts

@@ -0,0 +1,2 @@
+import type { BaseRenderComponent } from './types';
+export declare function pageRendererFactory(): BaseRenderComponent;

package/dist/renderer-core/renderer.d.ts

@@ -0,0 +1,2 @@
+import type { RenderComponent } from './types';
+export declare function rendererFactory(): RenderComponent;

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

@@ -0,0 +1,187 @@
+import type { DesignMode, JSONObject, Node, NodeSchema, RootSchema, Simulator, SimulatorRenderer } from '@easy-editor/core';
+import type { Component } from 'react';
+import type { FaultComponentProps } from './components/FaultComponent';
+import type { NotFoundComponentProps } from './components/NotFoundComponent';
+export type Schema = NodeSchema | RootSchema;
+export interface RendererState {
+    engineRenderError?: boolean;
+    error?: Error;
+}
+export interface RendererProps {
+    /** 符合低代码搭建协议的数据 */
+    schema: RootSchema | NodeSchema;
+    /** 组件依赖的实例 */
+    components: Record<string, React.ComponentType<any>>;
+    /** CSS 类名 */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 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?: React.ComponentType<NotFoundComponentProps>;
+    /** 当组件渲染异常时，显示的组件 */
+    faultComponent?: React.ComponentType<FaultComponentProps>;
+    /** 设备信息 */
+    device?: 'default' | 'pc' | 'mobile' | string;
+    /**
+     * @default true
+     * JSExpression 是否只支持使用 this 来访问上下文变量
+     */
+    thisRequiredInJSE?: boolean;
+    /**
+     * @default false
+     * 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件
+     */
+    enableStrictNotFoundMode?: boolean;
+    /** 获取节点的方法 */
+    getNode?: (id: string) => Node;
+    /** 渲染模块的 host */
+    __host?: Simulator;
+    /** 渲染模块的 container */
+    __container?: SimulatorRenderer;
+}
+export interface RenderComponent {
+    displayName: string;
+    defaultProps: RendererProps;
+    new (props: RendererProps): Component<RendererProps, RendererState> & {
+        [x: string]: any;
+        __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(SetComponent: any): any;
+        createElement(SetComponent: any, props: any, children?: any): any;
+        getNotFoundComponent(): any;
+        getFaultComponent(): any;
+    };
+}
+export interface RendererAppHelper {
+    /** 全局公共函数 */
+    utils?: Record<string, any>;
+    /** 全局常量 */
+    constants?: Record<string, any>;
+    /** @experimental 内部使用 */
+    requestHandlersMap?: Record<string, any>;
+}
+export interface NodeInfo {
+    schema?: NodeSchema;
+    Comp: any;
+    componentInfo?: any;
+    componentChildren?: any;
+}
+export interface JSExpression {
+    type: string;
+    value: string;
+}
+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 {
+    __appHelper?: RendererAppHelper;
+    __components: Record<string, React.ComponentType>;
+    __ctx?: Record<string, any>;
+    __schema: RootSchema;
+    __designMode?: DesignMode;
+    __host?: Simulator;
+    __container?: SimulatorRenderer;
+    config?: Record<string, any>;
+    designMode?: DesignMode;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string | number;
+    getSchemaChangedSymbol?: () => boolean;
+    setSchemaChangedSymbol?: (symbol: boolean) => void;
+    thisRequiredInJSE?: boolean;
+    documentId?: string;
+    getNode?: any;
+    /**
+     * 设备类型，默认值：'default'
+     */
+    device?: 'default' | 'pc' | 'mobile' | string;
+    componentName?: string;
+}
+export interface BaseRendererContext {
+    appHelper: RendererAppHelper;
+    components: Record<string, React.ComponentType>;
+    engine: Record<string, any>;
+    pageContext?: BaseRenderComponent;
+    compContext?: BaseRenderComponent;
+}
+export type BaseRendererInstance = Component<BaseRendererProps, Record<string, any>, any> & {
+    reloadDataSource(): Promise<any>;
+    __beforeInit(props: BaseRendererProps): void;
+    __init(props: BaseRendererProps): void;
+    __afterInit(props: BaseRendererProps): void;
+    __executeLifeCycleMethod(method: string, args?: any[]): void;
+    __getComponentView(): React.ComponentType | 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;
+    __designModeIsDesign?: boolean;
+};
+export interface BaseRenderComponent {
+    new (props: BaseRendererProps): BaseRendererInstance;
+}

package/dist/renderer-core/utils/classnames.d.ts

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

package/dist/renderer-core/utils/common.d.ts

@@ -0,0 +1,54 @@
+import { type NodeSchema } from '@easy-editor/core';
+import { type ComponentClass, type ComponentType } from 'react';
+export declare function inSameDomain(): boolean;
+/**
+ * get css styled name from schema`s fileName
+ * FileName -> lce-file-name
+ * @returns string
+ */
+export declare function 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 function transformArrayToMap(arr: any[], key: string, overwrite?: boolean): any;
+interface IParseOptions {
+    thisRequiredInJSE?: boolean;
+    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 function 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 function 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 function 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 function isString(str: any): boolean;
+/**
+ * capitalize first letter
+ * @param word string to be proccessed
+ * @returns string capitalized string
+ */
+export declare function capitalizeFirstLetter(word: string): string;
+export declare const isReactClass: (obj: any) => obj is ComponentClass<any>;
+export declare function isReactComponent(obj: any): obj is ComponentType<any>;

package/dist/renderer-core/utils/hoc.d.ts

@@ -0,0 +1,2 @@
+export declare const cloneEnumerableProperty: (target: any, origin: any, excludes?: string[]) => any;
+export declare const createForwardRefHocElement: (Wrapper: any, Comp: any) => any;

package/dist/renderer-core/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './classnames';
+export * from './common';
+export * from './hoc';
+export * from './logger';

package/dist/renderer-core/utils/logger.d.ts

@@ -0,0 +1,5 @@
+export declare const logger: {
+    log: (message?: any, ...optionalParams: any[]) => void;
+    error: (message?: any, ...optionalParams: any[]) => void;
+    warn: (message?: any, ...optionalParams: any[]) => void;
+};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@easy-editor/react-renderer",
+  "version": "0.0.1",
+  "description": "React Renderer package for EasyEditor.",
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "LICENSE",
+    "CHANGELOG.md",
+    "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",
+    "dashboard",
+    "react",
+    "renderer"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Easy-Editor/EasyEditor"
+  },
+  "bugs": {
+    "url": "https://github.com/Easy-Editor/EasyEditor/issues"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@easy-editor/core": "0.0.2"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21",
+    "mobx-react": "^9.2.0",
+    "prop-types": "^15.8.1",
+    "react-is": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/prop-types": "^15.7.14",
+    "@types/react-is": "^18.3.0"
+  },
+  "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"
+  },
+  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}