Merge pull request #283 from stone-lyl/feat-add-node

feat: remove bootSync method
ajthinking · Sep 11, 2024 · 99b110e · 99b110e
2 parents 6612190 + 627d108
commit 99b110e
Show file tree

Hide file tree

Showing 24 changed files with 223 additions and 209 deletions.
diff --git a/packages/core/src/Application.ts b/packages/core/src/Application.ts
@@ -29,25 +29,19 @@ export class Application {
     return this;
   }
 
-  /**
-   *
-   * @deprecated Use boot instead
-   */
-  bootSync() {
+  async boot() {
     this.providers.forEach(provider => {
       provider.boot(this);
     });
 
-    this.hasBooted = true;
-
-    return this;
-  }
-
-  async boot() {
-    this.providers.forEach(provider => {
-      provider.boot(this);
+    const mockDelayPromise = new Promise<number>((resolve) => {
+      setTimeout(() => {
+        resolve(1);
+      }, 100);
     });
 
+    await mockDelayPromise;
+
     this.hasBooted = true;
 
     return this;

diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
@@ -8,6 +8,6 @@ core.register([
   coreNodeProvider,
 ]);
 
-core.bootSync();
+core.boot();
 
 export { core };
diff --git a/packages/docs/components/Playground.tsx b/packages/docs/components/Playground.tsx
@@ -1,30 +1,30 @@
-'use client'
-
 import { Application, coreNodeProvider } from '@data-story/core';
 import React, { useMemo } from 'react';
 import { DataStory, WorkspaceApiJSClient, WorkspaceSocketClient } from '@data-story/ui';
 import { SaveComponent } from './Save';
+import useRequest from 'ahooks/lib/useRequest';
 
 export default Playground;
 
-const app = new Application()
-  .register(coreNodeProvider)
-  .bootSync();
-
 function Playground({ mode }: {mode?: 'js' | 'node'}) {
+  const {data: app, loading} = useRequest(async () => new Application()
+    .register(coreNodeProvider)
+    .boot());
+
   const client = useMemo(() => {
     if (mode === 'node') return new WorkspaceSocketClient();
+    if (!loading) return new WorkspaceApiJSClient(app);
+    return null;
+  }, [mode, app, loading]);
 
-    return new WorkspaceApiJSClient(app)
-  }, [mode]);
   return (
     <div className="w-full" style={{ height: 'calc(100vh - 72px)' }} data-cy="playground">
       <DataStory
         client={client}
         slotComponents={[
           <SaveComponent/>,
         ]}
-        server={{ type: 'JS', app: null }}
+        server={{ type: 'JS' }}
         initSidebarKey="explorer"
       />
     </div>

diff --git a/packages/docs/components/demos/DocsFlow.tsx b/packages/docs/components/demos/DocsFlow.tsx
@@ -1,35 +1,31 @@
 import { DataStory } from '@data-story/ui'
-import { Application, core, coreNodeProvider, multiline, nodes, } from '@data-story/core';
+import { core, multiline, nodes, } from '@data-story/core';
 import { MockJSClient } from '../splash/MockJSClient';
 
 export default () => {
-  const app = new Application();
-
-  app.register(coreNodeProvider);
-
-  app.boot();
-
   const { Signal, Pass, Comment, Ignore } = nodes;
 
   const diagram = core.getDiagramBuilder()
-    .add({...Signal, label: 'DataSource'}, { period: 20, count: 100000})
-    .add({...Pass, label: 'Transforms'})
-    .add({...Ignore, label: 'Actions'})
-    .from('Pass.1.output').below('Ignore.1').add({...Pass, label: 'APIs'})
-    .add({...Ignore, label: 'Storage'})
-    .jiggle({x: 60, y: 25})
-    .above('Signal.1').add(Comment, { content: multiline`
+    .add({ ...Signal, label: 'DataSource' }, { period: 20, count: 100000 })
+    .add({ ...Pass, label: 'Transforms' })
+    .add({ ...Ignore, label: 'Actions' })
+    .from('Pass.1.output').below('Ignore.1').add({ ...Pass, label: 'APIs' })
+    .add({ ...Ignore, label: 'Storage' })
+    .jiggle({ x: 60, y: 25 })
+    .above('Signal.1').add(Comment, {
+      content: multiline`
       ### DataStory 🔥
       Combine data sources, transforms, actions, APIs, storage and more. Create custom nodes for your business logic.
-    `})
+    `
+    })
     .get()
 
   const client = new MockJSClient(diagram);
 
   return (
     <div className="w-full h-1/6">
       <DataStory
-        server={{ type: 'JS', app }}
+        server={{ type: 'JS' }}
         client={client}
         onInitialize={(options) => options.run()}
         hideControls={true}

diff --git a/packages/docs/components/demos/HeroFlow.tsx b/packages/docs/components/demos/HeroFlow.tsx
@@ -1,21 +1,9 @@
 import { DataStory } from '@data-story/ui'
-import {
-  Application,
-  coreNodeProvider,
-  nodes,
-  multiline,
-  core,
-} from '@data-story/core';
+import { core, multiline, nodes, } from '@data-story/core';
 import useWindowDimensions from '../../hooks/useWindowDimensions';
 import { MockJSClient } from '../splash/MockJSClient';
 import { useMemo } from 'react';
 
-const app = new Application();
-
-app.register(coreNodeProvider);
-
-app.boot();
-
 const { Signal, Pass, Comment, Ignore } = nodes;
 
 const welcomeMarkdown = multiline`
@@ -26,27 +14,27 @@ const welcomeMarkdown = multiline`
 
 // Good for computers
 const bigDiagram = core.getDiagramBuilder()
-  .add({...Signal, label: 'Realtime'}, { period: 20, count: 100000})
-  .add({...Pass, label: 'Automation'})
-  .add({...Ignore, label: 'for React & NodeJS'})
-  .above('Signal.1').add(Comment, { content: welcomeMarkdown})
+  .add({ ...Signal, label: 'Realtime' }, { period: 20, count: 100000 })
+  .add({ ...Pass, label: 'Automation' })
+  .add({ ...Ignore, label: 'for React & NodeJS' })
+  .above('Signal.1').add(Comment, { content: welcomeMarkdown })
   .from('Signal.1.output').below('Pass.1').add({
     ...Ignore,
     label: 'in Your App',
   })
-  .jiggle({x: 60, y: 25})
+  .jiggle({ x: 60, y: 25 })
   .get()
 
 // Good for mobile
 const smallDiagram = core.getDiagramBuilder()
-  .add({...Signal, label: 'Realtime'}, { period: 20, count: 100000})
-  .add({...Ignore, label: 'Automation'})
-  .above('Signal.1').add(Comment, { content: welcomeMarkdown})
+  .add({ ...Signal, label: 'Realtime' }, { period: 20, count: 100000 })
+  .add({ ...Ignore, label: 'Automation' })
+  .above('Signal.1').add(Comment, { content: welcomeMarkdown })
   .from('Signal.1.output').below('Ignore.1').add({
     ...Ignore,
     label: 'in Your App',
   })
-  .jiggle({x: 60, y: 25})
+  .jiggle({ x: 60, y: 25 })
   .get()
 
 export default () => {
@@ -60,7 +48,7 @@ export default () => {
   return (
     <div className="w-full h-1/2 sm:h-screen">
       <DataStory
-        server={{ type: 'JS', app }}
+        server={{ type: 'JS' }}
         client={client}
         initDiagram={isSmallScreen ? smallDiagram : bigDiagram}
         onInitialize={(options) => options.run()}

diff --git a/packages/docs/components/demos/NodeDemo.tsx b/packages/docs/components/demos/NodeDemo.tsx
@@ -1,14 +1,8 @@
 import { DataStory } from '@data-story/ui'
-import { Application, nodes, coreNodeProvider, core } from '@data-story/core';
+import { core, nodes } from '@data-story/core';
 import { MockJSClient } from '../splash/MockJSClient';
 
-export default ({ nodeName }: { nodeName: string}) => {
-  const app = new Application();
-
-  app.register(coreNodeProvider);
-
-  app.boot();
-
+export default ({ nodeName }: {nodeName: string}) => {
   const diagram = core.getDiagramBuilder()
     .add(nodes[nodeName])
     .get()
@@ -17,7 +11,7 @@ export default ({ nodeName }: { nodeName: string}) => {
   return (<div>
     <div className="w-full" style={{ height: '36vh' }}>
       <DataStory
-        server={{ type: 'JS', app }}
+        server={{ type: 'JS' }}
         client={client}
         initDiagram={diagram}
         hideControls={true}

diff --git a/packages/docs/components/demos/ObserversDemo.tsx b/packages/docs/components/demos/ObserversDemo.tsx
@@ -1,17 +1,13 @@
-import { Application, core, coreNodeProvider, nodes } from '@data-story/core';
+import { core, nodes } from '@data-story/core';
 import React from 'react';
 import { DataStory, type DataStoryObservers } from '@data-story/ui';
-import { ServerRequest } from '../../const';
 import { MockJSClient } from '../splash/MockJSClient';
 
 export default ({ mode, observers }:
 {
   mode?: 'js' | 'node',
   observers?: DataStoryObservers
 }) => {
-  const app = new Application()
-    .register(coreNodeProvider)
-    .bootSync();
   const { Signal, Table } = nodes;
 
   const diagram = core.getDiagramBuilder()
@@ -25,7 +21,7 @@ export default ({ mode, observers }:
       <DataStory
         client={client}
         observers={observers}
-        server={{ type: 'JS', app }}
+        server={{ type: 'JS' }}
       />
     </div>
   );

diff --git a/packages/docs/components/demos/TinkerDemo.tsx b/packages/docs/components/demos/TinkerDemo.tsx
@@ -1,16 +1,9 @@
 import { DataStory } from '@data-story/ui'
-import { Application, core, coreNodeProvider, nodes, str, } from '@data-story/core';
+import { core, str, } from '@data-story/core';
 import { MockJSClient } from '../splash/MockJSClient';
 
 // This component is just a place to sketch
 export default () => {
-  const { Create, Table, Input, Map, Output, ConsoleLog } = nodes;
-
-  const app = new Application();
-  app.register(coreNodeProvider);
-
-  app.boot();
-
   const diagram = core.getDiagramBuilderV3()
     .add('Create')
     .get()
@@ -26,7 +19,7 @@ export default () => {
   return (
     <div className="w-full h-1/2">
       <DataStory
-        server={{ type: 'JS', app }}
+        server={{ type: 'JS' }}
         client={client}
       />
     </div>

diff --git a/packages/docs/components/demos/Tree/AddNodeDescription.tsx b/packages/docs/components/demos/Tree/AddNodeDescription.tsx
@@ -3,13 +3,21 @@
 import { DataStory } from '@data-story/ui';
 import { Application, core, coreNodeProvider, nodes } from '@data-story/core';
 import { MockJSClient } from '../../splash/MockJSClient';
+import useRequest from 'ahooks/lib/useRequest';
+import { useMemo } from 'react';
 
 export default () => {
   const customNodeDescription = ['Comment', 'Ignore', 'Signal', 'ConsoleLog', 'Input'];
-  const app = new Application();
-  app.register(coreNodeProvider);
-  app.boot();
-  const nodeDescriptions = app.descriptions().filter((node) => customNodeDescription.includes(node.name));
+  const {data: app, loading} = useRequest(async () => new Application()
+    .register(coreNodeProvider)
+    .boot());
+
+  const nodeDescriptions = useMemo(() => {
+    if (!loading) {
+      return app.descriptions().filter((node) => customNodeDescription.includes(node.name));
+    }
+    return [];
+  }, [app, loading]);
 
   const { Signal, Comment, Ignore } = nodes;
 
@@ -19,13 +27,13 @@ export default () => {
     .above('Signal.1').add(Comment, { content:'### Add Node Description 🔥'})
     .get();
 
-  const client = new MockJSClient(diagram, undefined, nodeDescriptions);
+  const client = useMemo(() => new MockJSClient(diagram, app, nodeDescriptions), [diagram, app, nodeDescriptions]);
 
   return (
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
-        server={{ type: 'JS', app }}
+        server={{ type: 'JS' }}
         hideActivityBar={true}
       />
     </div>

diff --git a/packages/docs/components/demos/Tree/CustomActivityBar.tsx b/packages/docs/components/demos/Tree/CustomActivityBar.tsx
@@ -1,20 +1,16 @@
 'use client'
 
 import { DataStory } from '@data-story/ui';
-import { Application, core, coreNodeProvider, nodes } from '@data-story/core';
+import { core, nodes } from '@data-story/core';
 import { MockJSClient } from '../../splash/MockJSClient';
 
 export default () => {
-  const app = new Application();
-  app.register(coreNodeProvider);
-  app.boot();
-
   const { Signal, Comment, Ignore } = nodes;
 
   const diagram = core.getDiagramBuilder()
-    .add({...Signal, label: 'DataSource'}, { period: 200, count: 100})
-    .add({...Ignore, label: 'Storage'})
-    .above('Signal.1').add(Comment, { content:'### Custom Config Activity Bar 🔥'})
+    .add({ ...Signal, label: 'DataSource' }, { period: 200, count: 100 })
+    .add({ ...Ignore, label: 'Storage' })
+    .above('Signal.1').add(Comment, { content: '### Custom Config Activity Bar 🔥' })
     .get();
 
   const client = new MockJSClient(diagram);
@@ -23,7 +19,7 @@ export default () => {
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
-        server={{ type: 'JS', app }}
+        server={{ type: 'JS' }}
         hideControls={true}
         hideSidebar={true}
         hideActivityBar={['settings', 'explorer']}

diff --git a/packages/docs/components/demos/Tree/Empty.tsx b/packages/docs/components/demos/Tree/Empty.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { DataStory } from '@data-story/ui';
-import { Application, coreNodeProvider } from '@data-story/core';
 import { MockJSClient } from '../../splash/MockJSClient';
 
 export default () => {
@@ -10,15 +9,11 @@ export default () => {
     return Promise.resolve(null);
   };
 
-  const app = new Application();
-  app.register(coreNodeProvider);
-  app.boot();
-
   return (
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
-        server={{ type: 'JS', app }}
+        server={{ type: 'JS' }}
         onInitialize={(options) => options.run()}
         hideControls={true}
       />