add componentList & structureTree

README.md

@@ -0,0 +1,6 @@
+# How to Run?
+1. `yarn`
+2. `yarn global add lerna`
+3. `lerna run prepublish`
+4. `cd packages/runtime`
+5. `yarn dev`

packages/editor/src/components/ComponentsList/ComponentList.tsx

@@ -0,0 +1,32 @@
+import React, { ReactElement } from 'react';
+import { registry } from '../../metaUI';
+
+export const ComponentList: React.FC = () => {
+  const componentList = React.useMemo(() => {
+    const groups: ReactElement[] = [];
+    registry.components.forEach((componentMap, version) => {
+      const components: ReactElement[] = [];
+      componentMap.forEach(c => {
+        const cEle = (
+          <div key={c.metadata.name}>{`${c.version}/${c.metadata.name}`}</div>
+        );
+
+        components.push(cEle);
+      });
+      const cGroupEle = (
+        <div key={version}>
+          <div>
+            <strong>{version}</strong>
+          </div>
+          {components}
+        </div>
+      );
+
+      groups.push(cGroupEle);
+    });
+
+    return groups;
+  }, []);
+
+  return <div>{componentList}</div>;
+};

packages/editor/src/components/ComponentsList/index.ts

@@ -0,0 +1 @@
+export * from './ComponentList';

packages/editor/src/components/Editor.tsx

@@ -7,6 +7,7 @@ import 'prismjs/components/prism-json';
 import 'prismjs/themes/prism.css';
 import { DialogFormSchema } from '../constants';
 import { App } from '../metaUI';
+import { StructureTree } from './StructureTree';
 
 export const Editor = () => {
   const [code, setCode] = useState(JSON.stringify(DialogFormSchema));
@@ -27,7 +28,10 @@ export const Editor = () => {
 
   return (
     <Box display="flex" height="100vh">
-      <Box flex="1" borderRight="2px solid black">
+      <Box flex="1">
+        <StructureTree app={JSON.parse(code)} />
+      </Box>
+      <Box flex="3" borderRight="2px solid black">
         <App debugStore={false} debugEvent={false} options={app} />
       </Box>
       <Box width="400px">
@@ -40,7 +44,8 @@ export const Editor = () => {
               } catch {
                 return;
               }
-            }}>
+            }}
+          >
             format
           </Button>
         </Box>

packages/editor/src/components/StructureTree/StructureTree.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Application } from '@meta-ui/core';
+
+type ChildrenMap = Map<string, SlotsMap>;
+type SlotsMap = Map<string, Array<Application['spec']['components'][0]>>;
+type Component = Application['spec']['components'][0];
+
+export const StructureTree: React.FC<{ app: Application }> = props => {
+  const { app } = props;
+  const topLevelComponents: Component[] = [];
+  const childrenMap: ChildrenMap = new Map();
+
+  app.spec.components.forEach(c => {
+    const slotTrait = c.traits.find(t => t.type === 'core/v1/slot');
+    if (slotTrait) {
+      const { id: parentId, slot } = slotTrait.properties.container as any;
+      if (!childrenMap.has(parentId)) {
+        childrenMap.set(parentId, new Map());
+      }
+      if (!childrenMap.get(parentId)?.has(slot)) {
+        childrenMap.get(parentId)?.set(slot, []);
+      }
+
+      childrenMap.get(parentId)!.get(slot)!.push(c);
+    } else {
+      topLevelComponents.push(c);
+    }
+  });
+
+  function genTreeItem(component: Component) {
+    const slots = childrenMap.get(component.id);
+    let slotsEle;
+    if (slots) {
+      slotsEle = Array.from(slots.keys()).map(slot => {
+        const children = slots.get(slot)!.map(genTreeItem);
+        return (
+          <div key={slot}>
+            <div>slot: {slot}</div>
+            {children}
+          </div>
+        );
+      });
+    }
+    return (
+      <div key={component.id} style={{ paddingLeft: '16px' }}>
+        <strong>{component.id}</strong>
+        {slotsEle}
+      </div>
+    );
+  }
+
+  const topEles = topLevelComponents.map(genTreeItem);
+
+  return <div>{topEles}</div>;
+};

packages/editor/src/components/StructureTree/index.ts

@@ -0,0 +1 @@
+export * from './StructureTree';

packages/editor/src/main.tsx

@@ -1,12 +1,19 @@
+import { css } from '@emotion/react';
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
+import { ComponentList } from './components/ComponentsList';
 import { Editor } from './components/Editor';
-
 export default function renderApp() {
   ReactDOM.render(
     <StrictMode>
-      <div>Hello, editor</div>
-      <Editor />
+      <div
+        css={css`
+          display: flex;
+        `}
+      >
+        <Editor />
+        <ComponentList />
+      </div>
     </StrictMode>,
     document.getElementById('root')
   );

packages/runtime/src/utils/initStateAndMethod.ts

@@ -8,6 +8,9 @@ export function initStateAndMethod(
   components: RuntimeApplication['spec']['components']
 ) {
   components.forEach(c => {
+    if (stateStore[c.id]) {
+      return false;
+    }
     let state = {};
     c.traits.forEach(t => {
       const tSpec = registry.getTrait(