@chamn/engine 0.0.7 → 0.0.9

package/src/index.tsx

@@ -5,6 +5,7 @@ import i18n from './i18n/index';
 import { CPlugin, PluginManager } from './core/pluginManager';
 import mitt, { Emitter } from 'mitt';
 import { AssetPackage, CMaterialType, CNode, CPage, CPageDataType, CRootNode, EmptyPage } from '@chamn/model';
+import { defaultRender, beforeInitRender } from './utils/defaultEngineConfig';
 
 export type EnginContext = {
   pluginManager: PluginManager;
@@ -15,10 +16,11 @@ export type EngineProps = {
   plugins: CPlugin[];
   schema: CPageDataType;
   material?: CMaterialType[];
-  assets?: AssetPackage[];
   assetPackagesList?: AssetPackage[];
   beforePluginRun?: (options: { pluginManager: PluginManager }) => void;
   onReady?: (ctx: EnginContext) => void;
+  /** 渲染器 umd 格式 js 地址, 默认 ./render.umd.js */
+  renderJSUrl?: string;
 };
 
 export class Engine extends React.Component<EngineProps> {
@@ -60,15 +62,21 @@ export class Engine extends React.Component<EngineProps> {
   async componentDidMount() {
     (window as any).__C_ENGINE__ = this;
     const plugins = this.props.plugins;
-    this.pluginManager = new PluginManager({
+    const pluginManager = new PluginManager({
       engine: this,
       getWorkbench: () => this.workbenchRef.current!,
       emitter: this.emitter,
       pageModel: this.pageModel,
       i18n,
-      assets: this.props.assets || [],
+      assets: this.props.assetPackagesList || [],
+    });
+    this.pluginManager = pluginManager;
+    // 使用默认的渲染策略
+    pluginManager.customPlugin('Designer', (pluginInstance) => {
+      pluginInstance.ctx.config.beforeInitRender = beforeInitRender;
+      pluginInstance.ctx.config.customRender = defaultRender;
+      return pluginInstance;
     });
-
     this.props.beforePluginRun?.({
       pluginManager: this.pluginManager,
     });

package/src/plugins/Designer/util.ts

@@ -1,6 +1,6 @@
 import { CNode, CPage, CProp, CRootNode, CSlot, isNodeModel } from '@chamn/model';
 
-export const getCloseNodeList = (node: CNode | CRootNode, level = 5) => {
+export const getClosestNodeList = (node: CNode | CRootNode, level = 5) => {
   const res = [];
   let count = 0;
   let currentNode: CNode | CRootNode | CSlot | CProp | CPage | null = node;

package/src/plugins/Designer/view.tsx

@@ -5,7 +5,7 @@ import { CPluginCtx } from '../../core/pluginManager';
 import localize from './localize';
 import { PLUGIN_NAME } from './config';
 import { DefaultSelectToolBar } from './components/DefaultSelectToolBar';
-import { getCloseNodeList } from './util';
+import { getClosestNodeList } from './util';
 import { GhostView } from './components/GhostView';
 
 import styles from './style.module.scss';
@@ -128,7 +128,7 @@ export class Designer extends React.Component<DesignerPropsType, DesignerStateTy
     const { pluginCtx } = this.props;
     pluginCtx.engine.updateCurrentSelectNode(node);
     const pageModel = this.props.pluginCtx.pageModel;
-    const list = getCloseNodeList(node, 5);
+    const list = getClosestNodeList(node, 5);
     const { layoutRef } = this;
     this.setState({
       selectToolBar: (
@@ -200,13 +200,15 @@ export class Designer extends React.Component<DesignerPropsType, DesignerStateTy
   render() {
     const { layoutRef, props, onSelectNode, onDragStart, onHoverNode } = this;
     const { pageModel, hoverToolBar, selectToolBar, ghostView, assets } = this.state;
+    const { pluginCtx } = props;
+    const renderJSUrl = pluginCtx.engine.props.renderJSUrl || './render.umd.js';
     return (
       <Layout
         beforeInitRender={props.pluginCtx.config.beforeInitRender}
         customRender={props.pluginCtx.config.customRender}
         ref={layoutRef}
         pageModel={pageModel}
-        renderScriptPath={'./render.umd.js'}
+        renderJSUrl={renderJSUrl}
         {...props}
         hoverToolBar={hoverToolBar}
         selectToolBar={selectToolBar}

package/src/utils/defaultEngineConfig.tsx

@@ -0,0 +1,55 @@
+import { LayoutPropsType, collectVariable, flatObject } from '@chamn/layout';
+
+/** 默认使用 react 18 模式渲染 */
+export const beforeInitRender: LayoutPropsType['beforeInitRender'] = async ({ iframe }) => {
+  const subWin = iframe.getWindow();
+  if (!subWin) {
+    return;
+  }
+  (subWin as any).React = window.React;
+  (subWin as any).ReactDOM = window.ReactDOM;
+  (subWin as any).ReactDOMClient = (window as any).ReactDOMClient;
+};
+
+/** 默认使用 react 18 模式渲染 */
+export const defaultRender: LayoutPropsType['customRender'] = async ({
+  iframe: iframeContainer,
+  assets,
+  page,
+  pageModel,
+  ready,
+  renderJSUrl,
+}) => {
+  await iframeContainer.injectJS(renderJSUrl || '');
+  const iframeWindow = iframeContainer.getWindow()!;
+  const iframeDoc = iframeContainer.getDocument()!;
+  const IframeReact = iframeWindow.React!;
+  const IframeReactDOM = iframeWindow.ReactDOMClient!;
+  const CRender = iframeWindow.CRender!;
+
+  // 注入组件物料资源
+  const assetLoader = new CRender.AssetLoader(assets, {
+    window: iframeContainer.getWindow()!,
+  });
+  assetLoader
+    .onSuccess(() => {
+      // 从子窗口获取物料对象
+      const componentCollection = collectVariable(assets, iframeWindow);
+      const components = flatObject(componentCollection);
+
+      const App = IframeReact?.createElement(CRender.DesignRender, {
+        adapter: CRender?.ReactAdapter,
+        page: page,
+        pageModel: pageModel,
+        components,
+        onMount: (designRenderInstance) => {
+          ready(designRenderInstance);
+        },
+      });
+      IframeReactDOM.createRoot(iframeDoc.getElementById('app')!).render(App);
+    })
+    .onError(() => {
+      console.log('资源加载出粗');
+    })
+    .load();
+};

package/dist/Engine.module.scss.d.ts

@@ -1,5 +0,0 @@
-import globalClassNames from './style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly engineContainer: 'engineContainer';
-};
-export = classNames;

package/dist/component/CSSEditor/index.d.ts

@@ -1,16 +0,0 @@
-import { MutableRefObject } from 'react';
-declare const DOM_CSS_STATUS: ("normal" | "hover" | "focus" | "focus-within" | "focus-visible" | "checked" | "disable" | "active")[];
-type DomCSSStatusType = typeof DOM_CSS_STATUS[number];
-export type CSSVal = Partial<Record<DomCSSStatusType, Record<
-/** media query key */
-string, Record<string, string>>>>;
-export type CSSEditorRef = {
-    setValue: (val: CSSVal) => void;
-};
-export type CSSEditorProps = {
-    onValueChange?: (val: CSSVal) => void;
-    initialValue?: CSSVal;
-    handler?: MutableRefObject<CSSEditorRef | null>;
-};
-export declare const CSSEditor: (props: CSSEditorProps) => JSX.Element;
-export {};

package/dist/component/CSSEditor/style.module.scss.d.ts

@@ -1,6 +0,0 @@
-import globalClassNames from '../../style.d';
-declare const classNames: typeof globalClassNames & {
-  readonly stateTag: 'stateTag';
-  readonly stateTagClose: 'stateTagClose';
-};
-export = classNames;