@chamn/render 0.0.9 → 0.0.10

package/.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
+    node: true,
   },
   extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
   parser: '@typescript-eslint/parser',

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.10](https://github.com/ByteCrazy/chameleon/compare/v0.0.9...v0.0.10) (2023-04-17)
+
+**Note:** Version bump only for package @chamn/render
+
 ## [0.0.9](https://github.com/ByteCrazy/chameleon/compare/v0.0.8...v0.0.9) (2023-04-17)
 
 ### ✨ Features | 新功能

package/build.config.ts

@@ -1,4 +1,5 @@
-/* eslint-disable no-undef */
+import dts from 'vite-plugin-dts';
+import path from 'path';
 // 开发模式默认读取 index.html 作为开发模式入口
 // entry 作为打包库入口
 export default {
@@ -16,5 +17,13 @@ export default {
     define: {
       // 'process.env.NODE_ENV': JSON.stringify('production'),
     },
+    plugins: [
+      dts({
+        entryRoot: path.resolve('./src'),
+        compilerOptions: {
+          skipDefaultLibCheck: false,
+        },
+      }),
+    ],
   },
 };

package/dist/commonComponent/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const InnerComponent: {
+    CContainer: ({ children, $$attributes, afterMount, beforeDestroy, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>;
+    CVideo: ({ children, $$attributes, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>;
+    CAudio: ({ children, $$attributes, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>;
+    CBlock: ({ children, width, height, $$attributes, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>;
+    CImage: ({ children, $$attributes, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>;
+    CText: ({ children, $$attributes, content, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>;
+    CCanvas: ({ children, $$attributes, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>;
+    CNativeTag: ({ children, $$attributes, htmlTag, ...props }: any) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    RootContainer: ({ children }: any) => any;
+};

package/dist/const/index.d.ts

@@ -0,0 +1,2 @@
+export declare const DYNAMIC_COMPONENT_TYPE = "DYNAMIC";
+export declare const InnerPropList: string[];

package/dist/core/ReactErrorBoundary.d.ts

@@ -0,0 +1,26 @@
+import { CNode, CRootNode } from '@chamn/model';
+import React from 'react';
+type Props = {
+    node: CNode | CRootNode;
+    targetComponent: any;
+    onError?: (error: React.ErrorInfo) => void;
+    children?: React.ReactNode | React.ReactNode[];
+};
+declare class ErrorBoundary extends React.Component<Props, {
+    error: any;
+    hasError: boolean;
+}> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: any): {
+        hasError: boolean;
+        error: any;
+    };
+    componentDidCatch(_: Error, errorInfo: React.ErrorInfo): void;
+    onDoubleClick: () => void;
+    render(): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.CElement<{
+        onlyRenderChild: boolean;
+    }, React.Component<{
+        onlyRenderChild: boolean;
+    }, any, any>> | null | undefined;
+}
+export default ErrorBoundary;

package/dist/core/adapter.d.ts

@@ -0,0 +1,64 @@
+import { CPage, CNode, CRootNode } from '@chamn/model';
+import { ReactInstance } from 'react';
+import { RefManager } from './refManager';
+import { RenderInstance } from './type';
+export type ContextType = {
+    params?: Record<any, any>;
+    globalState?: Record<any, any>;
+    updateGlobalState?: (newState: any) => void;
+    staticState?: Record<string | number, any>;
+    state?: Record<any, any>;
+    updateState?: (newState: any) => void;
+    refs?: RefManager;
+    loopData?: Record<any, any>;
+    stateManager?: Record<string, any>;
+    methods?: Record<string, (...arg: any) => any>;
+    thirdLibs?: Record<string, any>;
+};
+export type RuntimeRenderHelper = {
+    renderComponent: (node: CNode | CRootNode, options: {
+        $$context: ContextType;
+        idx?: number;
+    }) => any;
+};
+export type ComponentsType = Record<any, any>;
+export type AdapterOptionType = {
+    libs: Record<string, any>;
+    components: ComponentsType;
+    $$context: ContextType;
+    onGetRef?: (ref: React.RefObject<React.ReactInstance>, nodeMode: CNode | CRootNode, instance: RenderInstance) => void;
+    onGetComponent?: (component: (...args: any) => any, currentNode: CNode | CRootNode) => void;
+    onComponentMount?: (instance: ReactInstance, node: CNode | CRootNode) => void;
+    onComponentDestroy?: (instance: ReactInstance, node: CNode | CRootNode) => void;
+    processNodeConfigHook?: (config: {
+        condition: boolean;
+        props: Record<string, any>;
+    }, node: CNode) => {
+        condition: boolean;
+        props: Record<string, any>;
+    };
+    renderMode?: 'design' | 'normal';
+};
+export interface AdapterType {
+    renderMode?: AdapterOptionType['renderMode'];
+    customPageRootRender?: (pageModel: CPage, options: AdapterOptionType) => any;
+    pageRender: (pageModel: CPage, options: AdapterOptionType) => any;
+    convertModelToComponent: (originalComponent: any, nodeModal: CNode | CRootNode, options: {
+        pageModel: CPage;
+        idx?: number;
+    } & AdapterOptionType) => any;
+    render: (originalComponent: any, props?: Record<any, any>, ...children: any[]) => any;
+    getComponent: (currentNode: CNode | CRootNode, components: ComponentsType) => void;
+    getContext: (data: Record<any, any>, ctx: ContextType | null) => ContextType;
+    getUtils: () => void;
+    getDataLink: () => void;
+    createDataLink: () => void;
+    transformProps: (originalProps: Record<any, any>, options: {
+        $$context: Record<any, any>;
+    }) => Record<any, any>;
+    transformData: () => void;
+    transformGlobalData: () => void;
+    errorCatch: () => void;
+    clear: () => void;
+}
+export declare const getAdapter: (defineAdapter: Partial<AdapterType>) => AdapterType;

package/dist/core/adapterReact.d.ts

@@ -0,0 +1,108 @@
+import React from 'react';
+import { CNode, CPage, CRootNode } from '@chamn/model';
+import { AdapterOptionType, ContextType } from './adapter';
+import { StoreApi } from 'zustand/vanilla';
+import { StoreManager } from './storeManager';
+export declare class DefineReactAdapter {
+    renderMode: AdapterOptionType['renderMode'];
+    components: AdapterOptionType['components'];
+    storeManager: StoreManager;
+    runtimeComponentCache: Map<any, any>;
+    onGetRef?: AdapterOptionType['onGetRef'];
+    onGetComponent: AdapterOptionType['onGetComponent'];
+    onComponentMount: AdapterOptionType['onComponentMount'];
+    onComponentDestroy: AdapterOptionType['onComponentDestroy'];
+    processNodeConfigHook?: AdapterOptionType['processNodeConfigHook'];
+    getComponent(currentNode: CNode | CRootNode): any;
+    getContext(data?: ContextType, ctx?: ContextType | null): ContextType;
+    pageRender(pageModel: CPage, { components, onGetRef, $$context, onGetComponent, onComponentMount, onComponentDestroy, renderMode, processNodeConfigHook, }: AdapterOptionType): string | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    transformProps(originalProps: Record<string, any> | undefined, { $$context: parentContext, }: {
+        $$context: ContextType;
+    }): Record<string, any>;
+    collectSpecialProps(originalProps: Record<string, unknown> | undefined, isValidate: (val: unknown) => boolean): {
+        keyPath: string[];
+        val: any;
+    }[];
+    convertModelToComponent(originalComponent: any, nodeModel: CNode | CRootNode): {
+        new (props: {
+            $$context: ContextType;
+            $$nodeModel: CNode | CRootNode;
+        }): {
+            _CONDITION: boolean;
+            _DESIGN_BOX: boolean;
+            _NODE_MODEL: CNode | CRootNode;
+            _NODE_ID: string;
+            UNIQUE_ID: string;
+            targetComponentRef: React.MutableRefObject<any>;
+            listenerHandle: (() => void)[];
+            storeState: StoreApi<any>;
+            staticState: Record<string, any>;
+            storeListenDisposeLint: (() => void)[];
+            domHeader: HTMLHeadElement | undefined;
+            mediaStyleDomMap: Record<string, HTMLStyleElement>;
+            updateState: (newState: any) => void;
+            connectStore(): void;
+            getStyleDomById: (id: string) => HTMLStyleElement;
+            addMediaCSS: () => void;
+            removeMediaCSS: () => void;
+            componentDidMount(): void;
+            rebuildNode: () => void;
+            componentWillUnmount(): void;
+            render(): React.ReactNode;
+            context: unknown;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{
+                $$context: ContextType;
+                $$nodeModel: CNode | CRootNode;
+            }>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<{
+                $$context: ContextType;
+                $$nodeModel: CNode | CRootNode;
+            }>;
+            state: Readonly<{}>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            shouldComponentUpdate?(nextProps: Readonly<{
+                $$context: ContextType;
+                $$nodeModel: CNode | CRootNode;
+            }>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<{
+                $$context: ContextType;
+                $$nodeModel: CNode | CRootNode;
+            }>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<{
+                $$context: ContextType;
+                $$nodeModel: CNode | CRootNode;
+            }>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<{
+                $$context: ContextType;
+                $$nodeModel: CNode | CRootNode;
+            }>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
+                $$context: ContextType;
+                $$nodeModel: CNode | CRootNode;
+            }>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<{
+                $$context: ContextType;
+                $$nodeModel: CNode | CRootNode;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<{
+                $$context: ContextType;
+                $$nodeModel: CNode | CRootNode;
+            }>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        __CP_TYPE__: string;
+        contextType?: React.Context<any> | undefined;
+    };
+    buildComponent(node: CNode | CRootNode | string, { $$context, }: {
+        $$context: ContextType;
+        idx?: number;
+    }): string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    render(originalComponent: React.ComponentClass<any> | React.FunctionComponent | string, props?: Record<any, any>, ...children: React.ReactNode[]): string | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    clear(): void;
+}
+export declare const ReactAdapter: import("./adapter").AdapterType;

package/dist/core/designReactRender.d.ts

@@ -0,0 +1,47 @@
+import { CNode, CPage, CPageDataType, CRootNode } from '@chamn/model';
+import React from 'react';
+import { RenderPropsType, Render, UseRenderReturnType } from './render';
+import { RenderInstance } from './type';
+export declare class ComponentInstanceManager {
+    private instanceMap;
+    get(id: string): RenderInstance[] | undefined;
+    add(id: string, handle: any): void;
+    remove(id: string, val?: any): void;
+    destroy(): void;
+}
+export type DesignRenderProp = Omit<RenderPropsType, 'ref' | 'render'> & {
+    ref?: React.MutableRefObject<DesignRender | null>;
+    render?: UseDesignRenderReturnType;
+    onMount?: (instance: DesignRender) => void;
+    dropPlaceholder?: React.ComponentClass<{
+        node: CNode | CRootNode;
+    }> | React.FunctionComponent<{
+        node: CNode | CRootNode;
+    }> | string;
+};
+export declare const DefaultDropPlaceholder: React.FC<{
+    node: CNode | CRootNode;
+}>;
+export declare class DesignRender extends React.Component<DesignRenderProp> {
+    instanceManager: ComponentInstanceManager;
+    renderRef: React.MutableRefObject<Render | null>;
+    dropPlaceholder: Required<DesignRenderProp>['dropPlaceholder'];
+    constructor(props: DesignRenderProp);
+    componentDidMount(): void;
+    getPageModel(): CPage | undefined;
+    onGetComponent: (comp: any, node: CNode | CRootNode) => React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+    rerender(newPage?: CPageDataType | CPage): void | undefined;
+    getInstancesById(id: string, uniqueId?: string): RenderInstance[];
+    getInstanceByDom(el: HTMLHtmlElement | Element): RenderInstance | null;
+    getDomsById(id: string, selector?: string): HTMLElement[];
+    getDomRectById(id: string, selector?: string): DOMRect[];
+    render(): React.CElement<RenderPropsType, Render>;
+}
+export type UseDesignRenderReturnType = Pick<UseRenderReturnType, 'rerender'> & {
+    ref: React.MutableRefObject<DesignRender | null>;
+    getInstancesById: (id: string, uid?: string) => RenderInstance[];
+    getInstanceByDom: (dom: HTMLHtmlElement | Element) => RenderInstance | null;
+    getDomsById: (id: string, selector?: string) => HTMLElement[];
+    getDomRectById: (id: string, selector?: string) => DOMRect | DOMRect[];
+};
+export declare const useDesignRender: () => UseDesignRenderReturnType;

package/dist/core/refManager.d.ts

@@ -0,0 +1,7 @@
+export declare class RefManager {
+    private refMap;
+    get(id: string): any;
+    add(id: string, handle: any): void;
+    remove(id: string): void;
+    destroy(): void;
+}

package/dist/core/render.d.ts

@@ -0,0 +1,32 @@
+import { CPage, CPageDataType } from '@chamn/model';
+import React from 'react';
+import { AdapterOptionType, AdapterType } from './adapter';
+import { RefManager } from './refManager';
+import { RenderInstance } from './type';
+export type RenderPropsType = {
+    page?: CPageDataType;
+    pageModel?: CPage;
+    adapter: AdapterType;
+    render?: UseRenderReturnType;
+    ref?: React.MutableRefObject<Render | null>;
+    renderMode?: 'design' | 'normal';
+} & Partial<AdapterOptionType>;
+export declare class Render extends React.Component<RenderPropsType, {
+    pageModel: CPage;
+}> {
+    refManager: RefManager;
+    dynamicComponentInstanceMap: Map<string, RenderInstance>;
+    constructor(props: RenderPropsType);
+    getPageModel(): CPage;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onGetRef: AdapterOptionType['onGetRef'];
+    render(): any;
+    rerender: (newPage?: CPageDataType | CPage) => void;
+}
+export type UseRenderReturnType = {
+    ref: React.MutableRefObject<Render | null>;
+    rerender: (newPage: CPageDataType) => void;
+};
+export declare const useRender: () => UseRenderReturnType;
+export * from './type';

package/dist/core/storeManager.d.ts

@@ -0,0 +1,11 @@
+import { StateCreator, StoreApi } from 'zustand/vanilla';
+export declare class StoreManager {
+    storeMap: Map<string, StoreApi<any>>;
+    addStore(storeName: string, storeState: StateCreator<any>): StoreApi<any>;
+    setStore(storeName: string, store: StoreApi<any>): void;
+    removeStore(storeName: string): void;
+    getStore(storeName: string): StoreApi<any> | undefined;
+    connect<T extends Record<any, any> = any>(name: string, cb: (newState: T) => void): () => void;
+    getStateSnapshot(): Record<string, any>;
+    destroy(): void;
+}

package/dist/core/type.d.ts

@@ -0,0 +1,9 @@
+import { CNode, CRootNode } from '@chamn/model';
+export type RenderInstance = React.ReactInstance & {
+    _DESIGN_BOX: boolean;
+    _NODE_MODEL: CNode | CRootNode;
+    _NODE_ID: string;
+    _UNIQUE_ID: string;
+    _STATUS?: 'DESTROY';
+    _CONDITION?: boolean;
+};