@chamn/engine 0.0.7 → 0.0.8

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();
+};