@chamn/engine 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chamn/engine",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -31,9 +31,9 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.8.0",
-    "@chamn/layout": "0.0.8",
-    "@chamn/model": "0.0.8",
-    "@chamn/render": "0.0.8",
+    "@chamn/layout": "0.0.9",
+    "@chamn/model": "0.0.9",
+    "@chamn/render": "0.0.9",
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
@@ -52,8 +52,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
-    "@chamn/build-script": "0.0.8",
-    "@chamn/demo-page": "0.0.8",
+    "@chamn/build-script": "0.0.9",
+    "@chamn/demo-page": "0.0.9",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -75,5 +75,5 @@
     "vite-plugin-monaco-editor": "^1.1.0"
   },
   "config": {},
-  "gitHead": "9437e0937841d2b99709a6e95f6c1a07445bcf2e"
+  "gitHead": "f073439ea704830a6f62146c916c2f0348c2e531"
 }

package/src/_dev_/page/Preview/index.tsx

@@ -1,24 +1,56 @@
+import React from 'react';
 import { useEffect, useState } from 'react';
-import { ReactAdapter, Render, useRender } from '@chamn/render';
-import * as components from 'antd';
+import { ReactAdapter, Render, useRender, AssetLoader, collectVariable, flatObject } from '@chamn/render';
+import { AssetPackage, CPageDataType } from '@chamn/model';
+
+const loadAssets = async (assets: AssetPackage[]) => {
+  // 注入组件物料资源
+  const assetLoader = new AssetLoader(assets);
+  try {
+    await assetLoader.load();
+    // 从子窗口获取物料对象
+    const componentCollection = collectVariable(assets, window);
+    const components = flatObject(componentCollection);
+    return components;
+  } catch (e) {
+    return null;
+  }
+};
 
 export const Preview = () => {
-  const [page, setPage] = useState();
+  const [page, setPage] = useState<CPageDataType>();
   const renderHandle = useRender();
   const [loading, setLoading] = useState(true);
+  const [pageComponents, setPageComponents] = useState({});
+  const loadPageAssets = async (assets: AssetPackage[]) => {
+    const components = await loadAssets(assets);
+    if (components) {
+      setPageComponents(components);
+      setLoading(false);
+    }
+  };
   useEffect(() => {
     const localPage = localStorage.getItem('pageSchema');
     if (localPage) {
-      setPage(JSON.parse(localPage));
-      setLoading(false);
+      const page: CPageDataType = JSON.parse(localPage);
+      setPage(page);
+      loadPageAssets(page.assets || []);
     }
   }, []);
+
   if (loading) {
     return <>Not find page info on local, please ensure you save it on editor</>;
   }
   return (
     <div className="App" style={{ overflow: 'auto', height: '100%' }}>
-      <Render page={page} components={components} render={renderHandle as any} adapter={ReactAdapter} />
+      <Render
+        page={page}
+        components={{
+          ...pageComponents,
+        }}
+        render={renderHandle}
+        adapter={ReactAdapter}
+      />
     </div>
   );
 };

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;