@chamn/render 0.0.9 → 0.0.11

package/src/core/designReactRender.ts

@@ -1,325 +0,0 @@
-/* eslint-disable react/no-find-dom-node */
-import { CNode, ContainerConfig, CPage, CPageDataType, CRootNode, getRandomStr, InnerComponentNameEnum } from '@chamn/model';
-import { isArray, isPlainObject, merge } from 'lodash-es';
-import React, { useMemo, useRef } from 'react';
-import { RenderPropsType, Render, UseRenderReturnType } from './render';
-import * as ReactDOM from 'react-dom';
-import ErrorBoundary from './ReactErrorBoundary';
-import { RenderInstance } from './type';
-
-export class ComponentInstanceManager {
-  private instanceMap = new Map<string, RenderInstance[]>();
-
-  get(id: string) {
-    return this.instanceMap.get(id);
-  }
-  add(id: string, handle: any) {
-    const val = this.instanceMap.get(id);
-    if (val) {
-      val.push(handle);
-    } else {
-      this.instanceMap.set(id, [handle]);
-    }
-  }
-
-  remove(id: string, val?: any) {
-    const valList = this.instanceMap.get(id);
-    if (val !== undefined && Array.isArray(valList)) {
-      const newList = valList.filter((el) => el !== val);
-      this.instanceMap.set(id, newList);
-    } else {
-      this.instanceMap.delete(id);
-    }
-  }
-
-  destroy() {
-    this.instanceMap.clear();
-  }
-}
-
-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 const DefaultDropPlaceholder: React.FC<{ node: CNode | CRootNode }> = (props) => {
-  const { node } = props;
-  const configInfo = useMemo(() => {
-    const isContainer = node.material?.value?.isContainer;
-    if (isPlainObject(isContainer)) {
-      return isContainer as ContainerConfig;
-    } else {
-      return {
-        placeholder: 'Drag the component to place it',
-        width: '100%',
-        height: '100%',
-        style: {},
-      };
-    }
-  }, [props.node]);
-
-  const { placeholder, height, width, style } = configInfo;
-
-  return React.createElement(
-    'div',
-    {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(200,200,200,0.1)',
-        border: '1px solid rgba(0,0,0,0.1)',
-        borderRadius: '2px',
-        fontSize: '14px',
-        color: 'gray',
-        cursor: 'default',
-        minWidth: '300px',
-        minHeight: '50px',
-        width: width,
-        height: height,
-        ...style,
-      },
-    },
-    placeholder
-  );
-};
-
-export class DesignRender extends React.Component<DesignRenderProp> {
-  instanceManager = new ComponentInstanceManager();
-  renderRef: React.MutableRefObject<Render | null>;
-  dropPlaceholder: Required<DesignRenderProp>['dropPlaceholder'] = DefaultDropPlaceholder;
-
-  constructor(props: DesignRenderProp) {
-    super(props);
-    this.renderRef = React.createRef<Render>();
-    if (props.dropPlaceholder) {
-      this.dropPlaceholder = props.dropPlaceholder;
-    }
-  }
-
-  componentDidMount(): void {
-    this.props.onMount?.(this);
-  }
-  getPageModel() {
-    return this.renderRef.current?.state.pageModel;
-  }
-
-  onGetComponent = (comp: any, node: CNode | CRootNode) => {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this;
-    class DesignWrap extends React.Component<any> {
-      _DESIGN_BOX = true;
-      _NODE_MODEL = node;
-      _NODE_ID = node.id;
-      _UNIQUE_ID = `${node.id}_${getRandomStr()}`;
-      _STATUS?: 'DESTROY';
-
-      componentDidMount(): void {
-        self.instanceManager.add(node.id, this);
-      }
-
-      componentWillUnmount(): void {
-        this._STATUS = 'DESTROY';
-        self.instanceManager.remove(node.id, this);
-      }
-
-      render() {
-        const { children = [], onlyRenderChild, ...restProps } = this.props;
-        let newChildren = children;
-        if (!isArray(children)) {
-          newChildren = [children];
-        }
-
-        const hasChildren = Boolean(newChildren.filter(Boolean).length);
-        if (!hasChildren && (node.material?.value.isContainer || node.value.componentName === InnerComponentNameEnum.ROOT_CONTAINER)) {
-          newChildren.push(
-            React.createElement(self.dropPlaceholder, {
-              node: node,
-            })
-          );
-        }
-        if (onlyRenderChild) {
-          return newChildren;
-        }
-
-        return React.createElement(comp, restProps, ...newChildren);
-      }
-    }
-    return React.forwardRef(function ErrorWrap(props: any, ref) {
-      return React.createElement(
-        ErrorBoundary,
-        {
-          node,
-          targetComponent: DesignWrap,
-        },
-        React.createElement(DesignWrap, {
-          ref,
-          ...props,
-        })
-      );
-    });
-  };
-
-  rerender(newPage?: CPageDataType | CPage) {
-    return this.renderRef.current?.rerender(newPage);
-  }
-
-  getInstancesById(id: string, uniqueId?: string): RenderInstance[] {
-    let res = [...(this.instanceManager.get(id) || [])];
-    if (uniqueId !== undefined) {
-      res = res.filter((el) => {
-        return uniqueId === el?._UNIQUE_ID;
-      });
-    }
-    return res;
-  }
-
-  getInstanceByDom(el: HTMLHtmlElement | Element): RenderInstance | null {
-    const fiberNode = findClosetFiberNode(el);
-    if (!fiberNode) {
-      return null;
-    }
-    const containerFiber = findClosetContainerFiberNode(fiberNode);
-    return containerFiber?.stateNode || null;
-  }
-  getDomsById(id: string, selector?: string) {
-    const instances = this.getInstancesById(id);
-    const doms: HTMLElement[] = [];
-    instances?.forEach((el) => {
-      if (el?._STATUS === 'DESTROY') {
-        return;
-      }
-      const dom = ReactDOM.findDOMNode(el);
-      if (dom && !(dom instanceof Text)) {
-        if (selector) {
-          // 判断是不是数组
-          const list: HTMLElement[] = Array.from(dom.querySelectorAll(selector));
-          doms.push(...list);
-        } else {
-          doms.push(dom as unknown as HTMLElement);
-        }
-      }
-    });
-
-    return doms;
-  }
-  getDomRectById(id: string, selector?: string) {
-    const domList = this.getDomsById(id, selector) as HTMLElement[];
-    // 判断是不是数组
-    const rectList = domList
-      .map((el) => {
-        return el?.getBoundingClientRect();
-      })
-      .filter(Boolean);
-    return rectList;
-  }
-
-  render() {
-    const { props, onGetComponent } = this;
-    const { render, ...renderProps } = props;
-    if (render) {
-      render.ref.current = this;
-    }
-    return React.createElement(Render, {
-      onGetComponent,
-      ...renderProps,
-      // 拦截特殊属性配置, 配合开发模式使用
-      processNodeConfigHook: (config, node) => {
-        if (node.nodeType !== 'NODE') {
-          return config;
-        }
-        const { props, condition } = config;
-        let newProps = { ...props };
-        const tempDevState = node.value.configure?.devState || {};
-        const fixedPropsObj = node.material?.value.fixedProps;
-        if (fixedPropsObj !== undefined) {
-          if (isPlainObject(fixedPropsObj)) {
-            newProps = {
-              ...newProps,
-              ...fixedPropsObj,
-            };
-          } else if (typeof fixedPropsObj === 'function') {
-            const tempProps = fixedPropsObj(newProps);
-            newProps = {
-              ...newProps,
-              ...tempProps,
-            };
-          }
-        }
-        let newCondition = condition;
-        if (tempDevState.condition === false) {
-          newCondition = tempDevState.condition as boolean;
-        }
-        return {
-          props: merge(newProps, tempDevState.props || {}),
-          condition: newCondition,
-        };
-      },
-      // renderMode: 'design',
-      ref: this.renderRef,
-    });
-  }
-}
-
-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[];
-};
-
-const findClosetFiberNode = (el: Element | null): SimpleFiberNodeType | null => {
-  if (!el) {
-    return null;
-  }
-  const REACT_KEY = Object.keys(el).find((key) => key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$')) || '';
-
-  if (REACT_KEY) {
-    return (el as any)[REACT_KEY];
-  } else {
-    return findClosetFiberNode(el.parentElement);
-  }
-};
-
-type SimpleFiberNodeType = {
-  return: SimpleFiberNodeType;
-  stateNode: (Element | HTMLElement) & RenderInstance;
-};
-
-const findClosetContainerFiberNode = (fiberNode: SimpleFiberNodeType): SimpleFiberNodeType | null => {
-  if (!fiberNode) {
-    return null;
-  }
-  if (fiberNode?.stateNode?._DESIGN_BOX) {
-    return fiberNode;
-  } else {
-    return findClosetContainerFiberNode(fiberNode.return);
-  }
-};
-
-export const useDesignRender = (): UseDesignRenderReturnType => {
-  const ref = useRef<DesignRender>(null);
-  return {
-    ref: ref,
-    rerender: function (...args) {
-      if (ref.current) {
-        ref.current.rerender(...args);
-      }
-    },
-    getInstancesById(id, uid) {
-      return ref.current?.getInstancesById(id, uid) || [];
-    },
-    getInstanceByDom(el) {
-      return ref.current?.getInstanceByDom(el) || null;
-    },
-    getDomsById(id: string, selector?: string) {
-      return ref.current?.getDomsById(id, selector) || [];
-    },
-    getDomRectById(id: string, selector?: string) {
-      return ref.current?.getDomRectById(id, selector) || [];
-    },
-  };
-};

package/src/core/refManager.ts

@@ -1,18 +0,0 @@
-export class RefManager {
-  private refMap = new Map();
-
-  get(id: string) {
-    return this.refMap.get(id);
-  }
-  add(id: string, handle: any) {
-    this.refMap.set(id, handle);
-  }
-
-  remove(id: string) {
-    this.refMap.delete(id);
-  }
-
-  destroy() {
-    this.refMap.clear();
-  }
-}

package/src/core/render.ts

@@ -1,123 +0,0 @@
-import { checkPage, CPage, CPageDataType } from '@chamn/model';
-import { isPlainObject } from 'lodash-es';
-import React, { useRef } from 'react';
-import { InnerComponent } from '../commonComponent';
-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 class Render extends React.Component<
-  RenderPropsType,
-  {
-    pageModel: CPage;
-  }
-> {
-  refManager: RefManager;
-  // save component instance
-  dynamicComponentInstanceMap = new Map<string, RenderInstance>();
-  constructor(props: RenderPropsType) {
-    super(props);
-    this.state = {
-      pageModel: props.pageModel || new CPage(props.page!),
-    };
-    this.refManager = new RefManager();
-  }
-
-  getPageModel() {
-    return this.state.pageModel;
-  }
-
-  componentDidMount(): void {
-    const { render } = this.props;
-    if (render) {
-      render.ref.current = this;
-    }
-  }
-
-  componentWillUnmount(): void {
-    this.refManager.destroy();
-  }
-
-  onGetRef: AdapterOptionType['onGetRef'] = (ref, nodeModel, instance) => {
-    this.props.onGetRef?.(ref, nodeModel, instance);
-    this.dynamicComponentInstanceMap.set(nodeModel.id, instance);
-    this.refManager.add(nodeModel.value.refId || nodeModel.id, ref);
-  };
-
-  render() {
-    const { props } = this;
-    const { adapter, onGetComponent, onComponentDestroy, onComponentMount } = props;
-
-    const { pageModel } = this.state;
-    // todo: 加载 page 资源
-    // todo: 收集所有的 第三方库
-    if (!pageModel) {
-      console.warn('pageModel is null');
-      return null;
-    }
-    const finalComponents = {
-      ...InnerComponent,
-      ...props.components,
-    };
-    const PageRoot = adapter.pageRender(pageModel, {
-      libs: {},
-      components: finalComponents,
-      onGetRef: this.onGetRef,
-      onGetComponent,
-      onComponentMount,
-      onComponentDestroy,
-      $$context: {
-        refs: this.refManager,
-      },
-      renderMode: props.renderMode,
-      processNodeConfigHook: props.processNodeConfigHook,
-    });
-
-    return PageRoot;
-  }
-
-  rerender = (newPage?: CPageDataType | CPage) => {
-    this.props.adapter.clear();
-    if ((newPage as CPage)?.nodeType === 'PAGE' && newPage) {
-      this.setState({
-        pageModel: newPage as CPage,
-      });
-    } else if (isPlainObject(newPage) && checkPage(newPage)) {
-      const newP = newPage as CPageDataType;
-      this.setState({
-        pageModel: new CPage(newP, {
-          materials: this.state.pageModel.materialsModel.rawValue,
-        }),
-      });
-    }
-  };
-}
-
-export type UseRenderReturnType = {
-  ref: React.MutableRefObject<Render | null>;
-  rerender: (newPage: CPageDataType) => void;
-};
-
-export const useRender = (): UseRenderReturnType => {
-  const ref = useRef<Render>(null);
-
-  return {
-    ref: ref,
-    rerender: function (...args) {
-      if (ref.current) {
-        ref.current.rerender(...args);
-      }
-    },
-  };
-};
-
-export * from './type';

package/src/core/storeManager.ts

@@ -1,57 +0,0 @@
-import create, { StateCreator, StoreApi } from 'zustand/vanilla';
-
-export class StoreManager {
-  storeMap: Map<string, StoreApi<any>> = new Map();
-
-  addStore(storeName: string, storeState: StateCreator<any>) {
-    const store = create(storeState);
-    this.storeMap.set(storeName, store);
-    (store as any).name = storeName;
-
-    return store;
-  }
-
-  setStore(storeName: string, store: StoreApi<any>) {
-    this.storeMap.set(storeName, store);
-  }
-
-  removeStore(storeName: string) {
-    this.storeMap.delete(storeName);
-  }
-
-  getStore(storeName: string) {
-    return this.storeMap.get(storeName);
-  }
-
-  connect<T extends Record<any, any> = any>(name: string, cb: (newState: T) => void) {
-    const store = this.storeMap.get(name);
-    if (store) {
-      return store.subscribe(cb);
-    } else {
-      console.warn('store not exits');
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return () => {};
-    }
-  }
-
-  // storeManger 赋值以及 获取需要做转换
-  getStateSnapshot() {
-    const res: Record<string, any> = {};
-    this.storeMap.forEach((val, key) => {
-      res[key] = {
-        state: val.getState(),
-        updateState: (newState: any) => {
-          val.setState(newState);
-        },
-      };
-    });
-    return res;
-  }
-
-  destroy() {
-    this.storeMap.forEach((val) => {
-      val.destroy();
-    });
-    this.storeMap = new Map();
-  }
-}

package/src/core/type.ts

@@ -1,10 +0,0 @@
-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;
-};

package/src/util/assetsLoader.ts

@@ -1,73 +0,0 @@
-import { AssetPackage, getRandomStr } from '@chamn/model';
-import loadjs from 'loadjs';
-
-export type Asset = AssetPackage;
-
-export class AssetLoader {
-  assets: Asset[];
-  loadStatus: 'INIT' | 'SUCCESS' | 'ERROR';
-  win: Window = window;
-  private _onSuccessList: (() => void)[] = [];
-  private _onErrorList: ((depsNotFound: string[]) => void)[] = [];
-  constructor(
-    assets: Asset[],
-    options?: {
-      window?: Window;
-    }
-  ) {
-    this.assets = assets;
-    this.loadStatus = 'INIT';
-    if (options?.window) {
-      this.win = options.window;
-    }
-  }
-
-  load() {
-    const assets = this.assets || [];
-    const ids: string[] = [];
-    for (let i = 0; i < assets.length; i++) {
-      const item = assets[i];
-      if (!item.id) {
-        item.id = getRandomStr();
-      }
-      ids.push(item.id);
-      const srcList = item.resources.map((el) => el.src);
-      loadjs(srcList, item.id, {
-        async: false,
-        before: (_path, scriptEl) => {
-          this.win.document.body.appendChild(scriptEl);
-          /* return `false` to bypass default DOM insertion mechanism */
-          return false;
-        },
-      });
-    }
-    if (assets.length === 0) {
-      this._onSuccessList.forEach((el) => el());
-      return;
-    }
-
-    return new Promise((resolve, reject) => {
-      // 在下一个事件循环执行，确保 onSuccess 和 onError 被注册
-      loadjs.ready(ids, {
-        success: () => {
-          this._onSuccessList.forEach((el) => el());
-          resolve('');
-        },
-        error: (depsNotFound) => {
-          this._onErrorList.forEach((el) => el(depsNotFound));
-          reject(depsNotFound);
-        },
-      });
-    });
-  }
-
-  onSuccess(cb: () => void) {
-    this._onSuccessList.push(cb);
-    return this;
-  }
-
-  onError(cb: () => void) {
-    this._onErrorList.push(cb);
-    return this;
-  }
-}