decouple preview modal

packages/editor/src/components/Editor.tsx

@@ -7,7 +7,6 @@ import { StructureTree } from './StructureTree';
 import { eventBus } from '../eventBus';
 import { ComponentList } from './ComponentsList';
 import { EditorHeader } from './EditorHeader';
-import { PreviewModal } from './PreviewModal';
 import { KeyboardEventWrapper } from './KeyboardEventWrapper';
 import { ComponentWrapper } from './ComponentWrapper';
 import { StateEditor, SchemaEditor } from './CodeEditor';
@@ -16,6 +15,7 @@ import { editorStore } from '../EditorStore';
 import { genOperation } from '../operations';
 import { ComponentForm } from './ComponentForm';
 import ErrorBoundary from './ErrorBoundary';
+import { PreviewModal } from './PreviewModal';
 
 type ReturnOfInit = ReturnType<typeof initSunmaoUI>;
 
@@ -26,7 +26,7 @@ type Props = {
 };
 
 export const Editor: React.FC<Props> = observer(({ App, registry, stateStore }) => {
-  const { components, selectedComponentId } = editorStore;
+  const { components, selectedComponentId, modules } = editorStore;
 
   const [scale, setScale] = useState(100);
   const [preview, setPreview] = useState(false);
@@ -209,15 +209,7 @@ export const Editor: React.FC<Props> = observer(({ App, registry, stateStore })
         </Box>
       </Box>
       {preview && (
-        <PreviewModal onClose={() => setPreview(false)}>
-          <Box width="100%" height="100%">
-            <App
-              options={JSON.parse(JSON.stringify(app))}
-              debugEvent={false}
-              debugStore={false}
-            />
-          </Box>
-        </PreviewModal>
+        <PreviewModal onClose={() => setPreview(false)} app={app} modules={modules} />
       )}
     </KeyboardEventWrapper>
   );

packages/editor/src/components/GeneralModal.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalHeader,
+  ModalContent,
+  ModalCloseButton,
+  ModalBody,
+} from '@chakra-ui/react';
+
+export const GeneralModal: React.FC<{ onClose: () => void, title: string }> = ({
+  title,
+  onClose,
+  children,
+  
+}) => {
+  return (
+    <Modal onClose={onClose} size="full" isOpen>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{title}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>{children}</ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};

packages/editor/src/components/PreviewModal/PreviewModal.tsx

@@ -1,25 +1,27 @@
+import { Box } from '@chakra-ui/react';
+import { Application } from '@sunmao-ui/core';
+import { ImplementedRuntimeModule, initSunmaoUI } from '@sunmao-ui/runtime';
 import React from 'react';
-import {
-  Modal,
-  ModalOverlay,
-  ModalHeader,
-  ModalContent,
-  ModalCloseButton,
-  ModalBody,
-} from '@chakra-ui/react';
+import ErrorBoundary from '../ErrorBoundary';
+import { GeneralModal } from '../GeneralModal';
+
+type Props = {
+  app: Application;
+  modules: ImplementedRuntimeModule[];
+  onClose: () => void;
+};
+
+export const PreviewModal: React.FC<Props> = ({ app, modules, onClose }) => {
+  const { App, registry } = initSunmaoUI();
+  modules.forEach(m => registry.registerModule(m));
 
-export const PreviewModal: React.FC<{ onClose: () => void }> = ({
-  onClose,
-  children,
-}) => {
   return (
-    <Modal onClose={onClose} size="full" isOpen>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Preview App</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>{children}</ModalBody>
-      </ModalContent>
-    </Modal>
+    <GeneralModal onClose={onClose} title="Preview Modal">
+      <Box width="full" height="full">
+        <ErrorBoundary>
+          <App options={app} debugEvent={false} debugStore={false} />
+        </ErrorBoundary>
+      </Box>
+    </GeneralModal>
   );
 };