From e91bd296c3c93a5cb96486bb811d41465f83f038 Mon Sep 17 00:00:00 2001 From: stone Date: Fri, 6 Sep 2024 11:49:20 +0800 Subject: [PATCH 1/8] feat: add script analyze docs size --- packages/docs/next.config.js | 10 ++++++++++ packages/docs/package.json | 1 + 2 files changed, 11 insertions(+) diff --git a/packages/docs/next.config.js b/packages/docs/next.config.js index 89a0e5c2a..8e24ced15 100644 --- a/packages/docs/next.config.js +++ b/packages/docs/next.config.js @@ -1,3 +1,5 @@ +const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); + const withNextra = require('nextra')({ theme: 'nextra-theme-docs', themeConfig: './theme.config.tsx', @@ -23,6 +25,14 @@ module.exports = { }); baseConfig.ignoreWarnings = [/Failed to parse source map/]; } + if (!context.isServer) { + config.plugins.push(new BundleAnalyzerPlugin({ + analyzerMode: 'static', + analyzerPort: context.isServer ? 8888 : 8889, + reportFilename: './analyze/server.html', + openAnalyzer: process.env.ANALYZER === 'true', + })); + } baseConfig.devServer = { ...baseConfig.devServer, diff --git a/packages/docs/package.json b/packages/docs/package.json index d6128d9c2..77e368e8d 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -6,6 +6,7 @@ "dev": "next dev", "build": "next build", "start": "next start", + "analyze": "ANALYZE=true next build", "watch:server": "nodemon -x 'node --experimental-default-type=module ./servers/full.js'" }, "repository": { From a7b89fb0693a6d563d2e35d2381c8da77dfd5e1c Mon Sep 17 00:00:00 2001 From: stone Date: Fri, 6 Sep 2024 15:24:05 +0800 Subject: [PATCH 2/8] feat: remove bootSync method --- packages/core/src/Application.ts | 16 +-------- packages/core/src/core.ts | 2 +- packages/docs/components/Playground.tsx | 2 +- .../docs/components/demos/ObserversDemo.tsx | 2 +- .../docs/components/demos/VisualizeDemo.tsx | 33 +++++++++---------- .../clients/WorkspaceApiJSClient.tsx | 2 +- 6 files changed, 20 insertions(+), 37 deletions(-) diff --git a/packages/core/src/Application.ts b/packages/core/src/Application.ts index f06951fda..057915a4c 100644 --- a/packages/core/src/Application.ts +++ b/packages/core/src/Application.ts @@ -29,21 +29,7 @@ export class Application { return this; } - /** - * - * @deprecated Use boot instead - */ - bootSync() { - this.providers.forEach(provider => { - provider.boot(this); - }); - - this.hasBooted = true; - - return this; - } - - async boot() { + boot() { this.providers.forEach(provider => { provider.boot(this); }); diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts index bb1bc0a44..b31965c51 100644 --- 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 index 94293f09a..a69c6edb7 100644 --- a/packages/docs/components/Playground.tsx +++ b/packages/docs/components/Playground.tsx @@ -9,7 +9,7 @@ export default Playground; const app = new Application() .register(coreNodeProvider) - .bootSync(); + .boot(); function Playground({ mode }: {mode?: 'js' | 'node'}) { const client = useMemo(() => { diff --git a/packages/docs/components/demos/ObserversDemo.tsx b/packages/docs/components/demos/ObserversDemo.tsx index 1ecca12c1..e4703d8d1 100644 --- a/packages/docs/components/demos/ObserversDemo.tsx +++ b/packages/docs/components/demos/ObserversDemo.tsx @@ -11,7 +11,7 @@ export default ({ mode, observers }: }) => { const app = new Application() .register(coreNodeProvider) - .bootSync(); + .boot(); const { Signal, Table } = nodes; const diagram = core.getDiagramBuilder() diff --git a/packages/docs/components/demos/VisualizeDemo.tsx b/packages/docs/components/demos/VisualizeDemo.tsx index 415d4cbb9..ccf372b9d 100644 --- a/packages/docs/components/demos/VisualizeDemo.tsx +++ b/packages/docs/components/demos/VisualizeDemo.tsx @@ -40,26 +40,23 @@ export const options = { }, }; -export default () => { - const [points, setPoints] = React.useState([]); +const app = new Application() + .register(coreNodeProvider) + .boot(); + +const { Signal, Table, Map, Create, Request, ConsoleLog } = nodes; - const app = useMemo(() => { - return new Application() - .register(coreNodeProvider) - .bootSync(); - }, [Application]); - const { Signal, Table, Map, Create, Request, ConsoleLog } = nodes; +const diagram = core.getDiagramBuilder() + .add(Signal, { + period: 100, + count: 100, + expression: '{ x: ${i} }' }) + .add(Map, { json: '{ y: Math.cos(${x}/4) }' }) + .add(Table) + .get(); - const diagram = useMemo(() => { - return core.getDiagramBuilder() - .add(Signal, { - period: 100, - count: 100, - expression: '{ x: ${i} }' }) - .add(Map, { json: '{ y: Math.cos(${x}/4) }' }) - .add(Table) - .get(); - }, [core]); +export default () => { + const [points, setPoints] = React.useState([]); const client = useMemo(() => new MockJSClient(diagram), [diagram]); diff --git a/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx b/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx index ead23eef1..73a7c11b4 100644 --- a/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx +++ b/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx @@ -79,7 +79,7 @@ export class WorkspaceApiJSClient implements WorkspaceApiClient { private app: Application constructor(app?: Application) { - this.app = app || new Application().register(coreNodeProvider).bootSync(); + this.app = app || new Application().register(coreNodeProvider).boot(); } run = ( From 3925a7b7c5f000b752dbb174b7ddcbfe3945eafa Mon Sep 17 00:00:00 2001 From: stone Date: Fri, 6 Sep 2024 18:19:14 +0800 Subject: [PATCH 3/8] feat: remove the `app` property from `ServerConfig` --- packages/docs/components/demos/DocsFlow.tsx | 2 +- packages/docs/components/demos/NodeDemo.tsx | 2 +- packages/docs/components/demos/ObserversDemo.tsx | 3 +-- packages/docs/components/demos/TinkerDemo.tsx | 2 +- packages/docs/components/demos/Tree/AddNodeDescription.tsx | 2 +- packages/docs/components/demos/Tree/CustomActivityBar.tsx | 2 +- packages/docs/components/demos/Tree/Empty.tsx | 2 +- packages/docs/components/demos/Tree/Loading.tsx | 2 +- packages/docs/components/demos/Tree/MultipleDiagram.tsx | 2 +- packages/docs/components/demos/Tree/SingleDiagram.tsx | 2 +- packages/docs/components/demos/UnfoldingDemo.tsx | 6 +++--- packages/docs/components/demos/VisualizeDemo.tsx | 2 +- packages/docs/components/splash/MockJSClient.tsx | 2 +- .../ui/src/components/DataStory/clients/ServerConfig.ts | 3 +-- 14 files changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/docs/components/demos/DocsFlow.tsx b/packages/docs/components/demos/DocsFlow.tsx index 4ee923b89..ed46959d2 100644 --- a/packages/docs/components/demos/DocsFlow.tsx +++ b/packages/docs/components/demos/DocsFlow.tsx @@ -29,7 +29,7 @@ export default () => { return (
options.run()} hideControls={true} diff --git a/packages/docs/components/demos/NodeDemo.tsx b/packages/docs/components/demos/NodeDemo.tsx index ceafd3477..8cbab5bf6 100644 --- a/packages/docs/components/demos/NodeDemo.tsx +++ b/packages/docs/components/demos/NodeDemo.tsx @@ -17,7 +17,7 @@ export default ({ nodeName }: { nodeName: string}) => { return (
); diff --git a/packages/docs/components/demos/TinkerDemo.tsx b/packages/docs/components/demos/TinkerDemo.tsx index 9f3dc8fe3..74398f010 100644 --- a/packages/docs/components/demos/TinkerDemo.tsx +++ b/packages/docs/components/demos/TinkerDemo.tsx @@ -26,7 +26,7 @@ export default () => { return (
diff --git a/packages/docs/components/demos/Tree/AddNodeDescription.tsx b/packages/docs/components/demos/Tree/AddNodeDescription.tsx index dda2d75f2..a0cfb219a 100644 --- a/packages/docs/components/demos/Tree/AddNodeDescription.tsx +++ b/packages/docs/components/demos/Tree/AddNodeDescription.tsx @@ -25,7 +25,7 @@ export default () => {
diff --git a/packages/docs/components/demos/Tree/CustomActivityBar.tsx b/packages/docs/components/demos/Tree/CustomActivityBar.tsx index 2f2e80f16..dbaff80cb 100644 --- a/packages/docs/components/demos/Tree/CustomActivityBar.tsx +++ b/packages/docs/components/demos/Tree/CustomActivityBar.tsx @@ -23,7 +23,7 @@ export default () => {
{
options.run()} hideControls={true} /> diff --git a/packages/docs/components/demos/Tree/Loading.tsx b/packages/docs/components/demos/Tree/Loading.tsx index cd44a7d92..b9546ecc5 100644 --- a/packages/docs/components/demos/Tree/Loading.tsx +++ b/packages/docs/components/demos/Tree/Loading.tsx @@ -18,7 +18,7 @@ export default () => {
options.run()} hideControls={true} /> diff --git a/packages/docs/components/demos/Tree/MultipleDiagram.tsx b/packages/docs/components/demos/Tree/MultipleDiagram.tsx index fb5cbcdf7..06a9eaf09 100644 --- a/packages/docs/components/demos/Tree/MultipleDiagram.tsx +++ b/packages/docs/components/demos/Tree/MultipleDiagram.tsx @@ -15,7 +15,7 @@ export default () => {
); diff --git a/packages/docs/components/demos/Tree/SingleDiagram.tsx b/packages/docs/components/demos/Tree/SingleDiagram.tsx index c3e2dca35..211760086 100644 --- a/packages/docs/components/demos/Tree/SingleDiagram.tsx +++ b/packages/docs/components/demos/Tree/SingleDiagram.tsx @@ -23,7 +23,7 @@ export default () => {
return (
{part === 'MAIN' && run()} client={mainClient} />} {part === 'NESTED_NODE' && } {part === 'MAIN_UNFOLDED' && }
diff --git a/packages/docs/components/demos/VisualizeDemo.tsx b/packages/docs/components/demos/VisualizeDemo.tsx index ccf372b9d..0868ae7d1 100644 --- a/packages/docs/components/demos/VisualizeDemo.tsx +++ b/packages/docs/components/demos/VisualizeDemo.tsx @@ -114,7 +114,7 @@ export default () => { ].slice(-100)) }, }} - server={{ type: 'JS', app }} + server={{ type: 'JS'}} />
diff --git a/packages/docs/components/splash/MockJSClient.tsx b/packages/docs/components/splash/MockJSClient.tsx index 693856a5b..ea7132bf1 100644 --- a/packages/docs/components/splash/MockJSClient.tsx +++ b/packages/docs/components/splash/MockJSClient.tsx @@ -1,4 +1,4 @@ -import { Application, Diagram, NodeDescription, Tree } from '@data-story/core'; +import { Application, coreNodeProvider, Diagram, NodeDescription, Tree } from '@data-story/core'; import { WorkspaceApiJSClient } from '@data-story/ui'; export class MockJSClient extends WorkspaceApiJSClient { diff --git a/packages/ui/src/components/DataStory/clients/ServerConfig.ts b/packages/ui/src/components/DataStory/clients/ServerConfig.ts index 4e58e763c..9534ce997 100644 --- a/packages/ui/src/components/DataStory/clients/ServerConfig.ts +++ b/packages/ui/src/components/DataStory/clients/ServerConfig.ts @@ -7,7 +7,6 @@ export type WebSocketServerConfig = { export type JsServerConfig = { type: 'JS'; - app: Application; } -export type ServerConfig = WebSocketServerConfig | JsServerConfig \ No newline at end of file +export type ServerConfig = WebSocketServerConfig | JsServerConfig From 37a46eed8b110f264de6c417aff14a89d18c588f Mon Sep 17 00:00:00 2001 From: stone Date: Sun, 8 Sep 2024 10:36:36 +0800 Subject: [PATCH 4/8] fix: resolve import useRequest error related to issue 2254 --- packages/docs/components/Playground.tsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/docs/components/Playground.tsx b/packages/docs/components/Playground.tsx index a69c6edb7..a580056db 100644 --- a/packages/docs/components/Playground.tsx +++ b/packages/docs/components/Playground.tsx @@ -1,22 +1,26 @@ -'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) - .boot(); - function Playground({ mode }: {mode?: 'js' | 'node'}) { + const appAsync = new Application() + .register(coreNodeProvider) + .boot(); + + const {data: app, loading} = useRequest(async () => appAsync, { + manual: false, + }, []); + console.log('11111111', app, loading); + const client = useMemo(() => { if (mode === 'node') return new WorkspaceSocketClient(); - - return new WorkspaceApiJSClient(app) - }, [mode]); + if (loading) return null; + return new WorkspaceApiJSClient(app); + }, [mode, app, loading]); return (
, ]} - server={{ type: 'JS', app: null }} + server={{ type: 'JS' }} initSidebarKey="explorer" />
From b1bfc6d82c9404815ff244824fdf259c5d959254 Mon Sep 17 00:00:00 2001 From: stone Date: Sun, 8 Sep 2024 10:48:25 +0800 Subject: [PATCH 5/8] feat: add mockDelayPromise in boot method --- packages/core/src/Application.ts | 12 +++++++++++- packages/docs/components/Playground.tsx | 18 ++++++++---------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/core/src/Application.ts b/packages/core/src/Application.ts index 057915a4c..84a39c80d 100644 --- a/packages/core/src/Application.ts +++ b/packages/core/src/Application.ts @@ -29,13 +29,23 @@ export class Application { return this; } - boot() { + async boot() { this.providers.forEach(provider => { provider.boot(this); }); + const mockDelayPromise = new Promise((resolve) => { + setTimeout(() => { + console.log('mock delay'); + resolve(1); + }, 1000); + }); + + const num = await mockDelayPromise; + this.hasBooted = true; + console.log('booted get resolved num:', num, 'start to return this'); return this; } diff --git a/packages/docs/components/Playground.tsx b/packages/docs/components/Playground.tsx index a580056db..d3265bdcf 100644 --- a/packages/docs/components/Playground.tsx +++ b/packages/docs/components/Playground.tsx @@ -6,21 +6,19 @@ import useRequest from 'ahooks/lib/useRequest'; export default Playground; -function Playground({ mode }: {mode?: 'js' | 'node'}) { - const appAsync = new Application() - .register(coreNodeProvider) - .boot(); +const appAsync = new Application() + .register(coreNodeProvider) + .boot(); - const {data: app, loading} = useRequest(async () => appAsync, { - manual: false, - }, []); - console.log('11111111', app, loading); +function Playground({ mode }: {mode?: 'js' | 'node'}) { + const {data: app, loading} = useRequest(async () => appAsync); const client = useMemo(() => { if (mode === 'node') return new WorkspaceSocketClient(); - if (loading) return null; - return new WorkspaceApiJSClient(app); + if (!loading) return new WorkspaceApiJSClient(app); + return null; }, [mode, app, loading]); + return (
Date: Sun, 8 Sep 2024 11:23:05 +0800 Subject: [PATCH 6/8] fix: resolve issue where analyze script couldn't read environment variable --- packages/docs/next.config.js | 5 +++-- packages/docs/package.json | 3 ++- yarn.lock | 15 ++++++++++++++- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/packages/docs/next.config.js b/packages/docs/next.config.js index 8e24ced15..9f57b58ca 100644 --- a/packages/docs/next.config.js +++ b/packages/docs/next.config.js @@ -25,12 +25,13 @@ module.exports = { }); baseConfig.ignoreWarnings = [/Failed to parse source map/]; } - if (!context.isServer) { + + if (!context.isServer && process.env.ANALYZE_ENV === 'true') { config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static', analyzerPort: context.isServer ? 8888 : 8889, reportFilename: './analyze/server.html', - openAnalyzer: process.env.ANALYZER === 'true', + openAnalyzer: process.env.ANALYZE_ENV === 'true', })); } diff --git a/packages/docs/package.json b/packages/docs/package.json index 77e368e8d..1c736edf2 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -6,7 +6,7 @@ "dev": "next dev", "build": "next build", "start": "next start", - "analyze": "ANALYZE=true next build", + "analyze": "cross-env ANALYZE_ENV=true next build", "watch:server": "nodemon -x 'node --experimental-default-type=module ./servers/full.js'" }, "repository": { @@ -38,6 +38,7 @@ "@types/node": "*", "@types/react": "*", "autoprefixer": "^10.4.16", + "cross-env": "^7.0.3", "nodemon": "^3.0.2", "postcss": "^8.4.31", "source-map-loader": "^4.0.1", diff --git a/yarn.lock b/yarn.lock index 341664f63..43212bc3d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -255,6 +255,7 @@ __metadata: ahooks: "npm:^3.8.1" autoprefixer: "npm:^10.4.16" chart.js: "npm:^4.4.2" + cross-env: "npm:^7.0.3" next: "npm:^13.0.6" nextra: "npm:latest" nextra-theme-docs: "npm:latest" @@ -3888,6 +3889,18 @@ __metadata: languageName: node linkType: hard +"cross-env@npm:^7.0.3": + version: 7.0.3 + resolution: "cross-env@npm:7.0.3" + dependencies: + cross-spawn: "npm:^7.0.1" + bin: + cross-env: src/bin/cross-env.js + cross-env-shell: src/bin/cross-env-shell.js + checksum: 10/e99911f0d31c20e990fd92d6fd001f4b01668a303221227cc5cb42ed155f086351b1b3bd2699b200e527ab13011b032801f8ce638e6f09f854bdf744095e604c + languageName: node + linkType: hard + "cross-spawn@npm:^5.0.1": version: 5.1.0 resolution: "cross-spawn@npm:5.1.0" @@ -3899,7 +3912,7 @@ __metadata: languageName: node linkType: hard -"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3": +"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3": version: 7.0.3 resolution: "cross-spawn@npm:7.0.3" dependencies: From ae7209c1048b3a902357023efcc94fe5fe5d9265 Mon Sep 17 00:00:00 2001 From: stone Date: Sun, 8 Sep 2024 15:34:46 +0800 Subject: [PATCH 7/8] feat: implement asynchronous get application --- .../clients/WorkspaceApiJSClient.tsx | 68 ++++++++++++++++--- 1 file changed, 58 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx b/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx index 73a7c11b4..e007e9d0d 100644 --- a/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx +++ b/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx @@ -76,10 +76,25 @@ const loadTrees = (key: string): Tree[] => { export class WorkspaceApiJSClient implements WorkspaceApiClient { private executor: Executor | undefined - private app: Application + private app?: Application; + private appInitialized = new ManualPromise(); constructor(app?: Application) { - this.app = app || new Application().register(coreNodeProvider).boot(); + this.initApp(app) + } + + initApp = async(application?: Application) => { + if (application) { + this.app = application; + this.appInitialized.complete(); + return + } + + const app = new Application() + .register(coreNodeProvider) + await app.boot(); + this.app = app; + this.appInitialized.complete(); } run = ( @@ -89,7 +104,6 @@ export class WorkspaceApiJSClient implements WorkspaceApiClient { type: DataStoryEvents.RUN_START }); - const storage = new InMemoryStorage(); const notifyObservers$: Subject<{items: ItemValue[], inputObservers: InputObserver[]}> = new Subject(); notifyObservers$.pipe( @@ -108,13 +122,31 @@ export class WorkspaceApiJSClient implements WorkspaceApiClient { } ); - this.executor = this.app.getExecutor({ + this.executionDiagram({ + updateEdgeCounts, + diagram, + inputObserverController + }); + }; + + private async executionDiagram({ + updateEdgeCounts, + diagram, + inputObserverController + }: Pick & { + inputObserverController: InputObserverController + } + ) { + const storage = new InMemoryStorage(); + await this.appInitialized.promise; + + this.executor = this.app!.getExecutor({ diagram, storage, inputObserverController }) - const execution = this.executor.execute(); + const execution = this.executor?.execute(); // For each update run this function const handleUpdates = (iterator: AsyncIterator) => { @@ -126,7 +158,7 @@ export class WorkspaceApiJSClient implements WorkspaceApiClient { if (hook.type === 'CONSOLE_LOG') { console.log(...hook.args) } else { - const userHook = this.app.hooks.get(hook.type) + const userHook = this.app!.hooks.get(hook.type) if (userHook) { userHook(...hook.args) @@ -153,15 +185,16 @@ export class WorkspaceApiJSClient implements WorkspaceApiClient { } // Start the updates - handleUpdates(execution[Symbol.asyncIterator]()); - }; + handleUpdates(execution![Symbol.asyncIterator]()); + } getNodeDescriptions = async({ path }): Promise => { - const nodeDescriptions = this.app.descriptions(); + await this.appInitialized.promise; + const nodeDescriptions = this.app!.descriptions(); return new Promise((resolve) => { setTimeout(() => { - resolve(nodeDescriptions); + resolve(nodeDescriptions!); }, 1000); }); }; @@ -225,3 +258,18 @@ export class WorkspaceApiJSClient implements WorkspaceApiClient { return [] as Tree[] } } + +class ManualPromise { + readonly promise: Promise; + private resolve!: () => void; + + constructor() { + this.promise = new Promise((resolve) => { + this.resolve = resolve; + }); + } + + complete() { + this.resolve(); + } +} From 627d108661d59520e4314fcd8a004e264aac30e1 Mon Sep 17 00:00:00 2001 From: stone Date: Sun, 8 Sep 2024 15:55:17 +0800 Subject: [PATCH 8/8] docs: remove unnecessary code and adapt to new async boot process --- packages/core/src/Application.ts | 6 +-- packages/docs/components/Playground.tsx | 8 ++- packages/docs/components/demos/DocsFlow.tsx | 26 ++++----- packages/docs/components/demos/HeroFlow.tsx | 34 ++++-------- packages/docs/components/demos/NodeDemo.tsx | 10 +--- .../docs/components/demos/ObserversDemo.tsx | 5 +- packages/docs/components/demos/TinkerDemo.tsx | 9 +--- .../demos/Tree/AddNodeDescription.tsx | 18 +++++-- .../demos/Tree/CustomActivityBar.tsx | 12 ++--- packages/docs/components/demos/Tree/Empty.tsx | 5 -- .../docs/components/demos/Tree/Loading.tsx | 5 -- .../components/demos/Tree/MultipleDiagram.tsx | 5 -- .../components/demos/Tree/SingleDiagram.tsx | 12 ++--- .../docs/components/demos/UnfoldingDemo.tsx | 54 ++++++++++--------- .../docs/components/demos/VisualizeDemo.tsx | 27 +++++----- .../clients/WorkspaceApiJSClient.tsx | 39 ++++++-------- .../DataStory/clients/parseDiagramTreeInfo.ts | 5 +- packages/ui/src/components/DataStory/types.ts | 7 +++ 18 files changed, 117 insertions(+), 170 deletions(-) diff --git a/packages/core/src/Application.ts b/packages/core/src/Application.ts index 84a39c80d..fb1c3da7e 100644 --- a/packages/core/src/Application.ts +++ b/packages/core/src/Application.ts @@ -36,16 +36,14 @@ export class Application { const mockDelayPromise = new Promise((resolve) => { setTimeout(() => { - console.log('mock delay'); resolve(1); - }, 1000); + }, 100); }); - const num = await mockDelayPromise; + await mockDelayPromise; this.hasBooted = true; - console.log('booted get resolved num:', num, 'start to return this'); return this; } diff --git a/packages/docs/components/Playground.tsx b/packages/docs/components/Playground.tsx index d3265bdcf..ff4fae99d 100644 --- a/packages/docs/components/Playground.tsx +++ b/packages/docs/components/Playground.tsx @@ -6,12 +6,10 @@ import useRequest from 'ahooks/lib/useRequest'; export default Playground; -const appAsync = new Application() - .register(coreNodeProvider) - .boot(); - function Playground({ mode }: {mode?: 'js' | 'node'}) { - const {data: app, loading} = useRequest(async () => appAsync); + const {data: app, loading} = useRequest(async () => new Application() + .register(coreNodeProvider) + .boot()); const client = useMemo(() => { if (mode === 'node') return new WorkspaceSocketClient(); diff --git a/packages/docs/components/demos/DocsFlow.tsx b/packages/docs/components/demos/DocsFlow.tsx index ed46959d2..7105b7bc1 100644 --- a/packages/docs/components/demos/DocsFlow.tsx +++ b/packages/docs/components/demos/DocsFlow.tsx @@ -1,27 +1,23 @@ 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); diff --git a/packages/docs/components/demos/HeroFlow.tsx b/packages/docs/components/demos/HeroFlow.tsx index 98f2af928..17c06eaaf 100644 --- 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 (
options.run()} diff --git a/packages/docs/components/demos/NodeDemo.tsx b/packages/docs/components/demos/NodeDemo.tsx index 8cbab5bf6..d9184e44b 100644 --- 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() diff --git a/packages/docs/components/demos/ObserversDemo.tsx b/packages/docs/components/demos/ObserversDemo.tsx index 74f577312..8d98257e7 100644 --- a/packages/docs/components/demos/ObserversDemo.tsx +++ b/packages/docs/components/demos/ObserversDemo.tsx @@ -1,4 +1,4 @@ -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 { MockJSClient } from '../splash/MockJSClient'; @@ -8,9 +8,6 @@ export default ({ mode, observers }: mode?: 'js' | 'node', observers?: DataStoryObservers }) => { - const app = new Application() - .register(coreNodeProvider) - .boot(); const { Signal, Table } = nodes; const diagram = core.getDiagramBuilder() diff --git a/packages/docs/components/demos/TinkerDemo.tsx b/packages/docs/components/demos/TinkerDemo.tsx index 74398f010..9a0ff696c 100644 --- 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() diff --git a/packages/docs/components/demos/Tree/AddNodeDescription.tsx b/packages/docs/components/demos/Tree/AddNodeDescription.tsx index a0cfb219a..9b1aa9b0e 100644 --- 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,7 +27,7 @@ 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 (
diff --git a/packages/docs/components/demos/Tree/CustomActivityBar.tsx b/packages/docs/components/demos/Tree/CustomActivityBar.tsx index dbaff80cb..9bb3a6fbf 100644 --- 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); diff --git a/packages/docs/components/demos/Tree/Empty.tsx b/packages/docs/components/demos/Tree/Empty.tsx index c227d7d9b..db920c5f5 100644 --- 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,10 +9,6 @@ export default () => { return Promise.resolve(null); }; - const app = new Application(); - app.register(coreNodeProvider); - app.boot(); - return (
{ @@ -10,10 +9,6 @@ export default () => { // Please ensure that this request is never terminated. }) - const app = new Application(); - app.register(coreNodeProvider); - app.boot(); - return (
{ - const app = new Application(); - app.register(coreNodeProvider); - app.boot(); - const client = useMemo(() => new WorkspaceApiJSClient(), []); return ( diff --git a/packages/docs/components/demos/Tree/SingleDiagram.tsx b/packages/docs/components/demos/Tree/SingleDiagram.tsx index 211760086..e56f7265b 100644 --- a/packages/docs/components/demos/Tree/SingleDiagram.tsx +++ b/packages/docs/components/demos/Tree/SingleDiagram.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:'### Single Diagram 🔥'}) + .add({ ...Signal, label: 'DataSource' }, { period: 200, count: 100 }) + .add({ ...Ignore, label: 'Storage' }) + .above('Signal.1').add(Comment, { content: '### Single Diagram 🔥' }) .get(); const client = new MockJSClient(diagram); diff --git a/packages/docs/components/demos/UnfoldingDemo.tsx b/packages/docs/components/demos/UnfoldingDemo.tsx index b29a8a4cc..7de8768d7 100644 --- a/packages/docs/components/demos/UnfoldingDemo.tsx +++ b/packages/docs/components/demos/UnfoldingDemo.tsx @@ -1,16 +1,9 @@ import { DataStory } from '@data-story/ui' -import { - Application, - DiagramBuilder, - coreNodeProvider, - nodes, - UnfoldedDiagramFactory, - str, - core, -} from '@data-story/core'; +import { Application, core, coreNodeProvider, nodes, str, UnfoldedDiagramFactory, } from '@data-story/core'; import { MockJSClient } from '../splash/MockJSClient'; +import useRequest from 'ahooks/lib/useRequest'; -export default ({ part }: { part: 'MAIN' | 'NESTED_NODE' | 'MAIN_UNFOLDED'}) => { +export default ({ part }: {part: 'MAIN' | 'NESTED_NODE' | 'MAIN_UNFOLDED'}) => { const { Create, Table, Input, Map, Output, ConsoleLog } = nodes; // ************************************* @@ -20,34 +13,43 @@ export default ({ part }: { part: 'MAIN' | 'NESTED_NODE' | 'MAIN_UNFOLDED'}) => .withParams([ str({ name: 'stamp', - value: 'foo'} + value: 'foo' + } ) ]) - .add(nodes.Input, { port_name: 'input'}) - .add(nodes.Map, { json: JSON.stringify({ - foo: 'bar', - global_param_access: 'The foo stamp was >>>@{stamp}<<<', - })}) - .add(nodes.Output, { port_name: 'stamped'}) + .add(nodes.Input, { port_name: 'input' }) + .add(nodes.Map, { + json: JSON.stringify({ + foo: 'bar', + global_param_access: 'The foo stamp was >>>@{stamp}<<<', + }) + }) + .add(nodes.Output, { port_name: 'stamped' }) .get() // ************************************* // Make app, register nested node // ************************************* - const app = new Application(); - app.register(coreNodeProvider); - app.addNestedNode('FooBarStamper', nestedNode); - app.boot(); + + const { data: app, loading } = useRequest(async() => { + const app = new Application(); + app.register(coreNodeProvider); + app.addNestedNode('FooBarStamper', nestedNode); + app.boot(); + return app; + }); // ************************************* // Build main diagram, use the nested node // ************************************* const diagram = core.getDiagramBuilder() - .add({ ...Create, label: 'Users'}, { data: JSON.stringify([ - { name: 'Alice', age: 23 }, - { name: 'Bob', age: 34 }, - { name: 'Charlie', age: 45 }, - ]) }) + .add({ ...Create, label: 'Users' }, { + data: JSON.stringify([ + { name: 'Alice', age: 23 }, + { name: 'Bob', age: 34 }, + { name: 'Charlie', age: 45 }, + ]) + }) .addNestedNode('FooBarStamper', nestedNode) .add(Table) .get() diff --git a/packages/docs/components/demos/VisualizeDemo.tsx b/packages/docs/components/demos/VisualizeDemo.tsx index 0868ae7d1..d5fc196a7 100644 --- a/packages/docs/components/demos/VisualizeDemo.tsx +++ b/packages/docs/components/demos/VisualizeDemo.tsx @@ -1,15 +1,15 @@ -import { Application, core, coreNodeProvider, nodes } from '@data-story/core'; +import { core, nodes } from '@data-story/core'; import React, { useMemo } from 'react'; -import { DataStory } from '@data-story/ui'; +import { DataStory } from '@data-story/ui'; import { - Chart as ChartJS, CategoryScale, + Chart as ChartJS, + Legend, LinearScale, - PointElement, LineElement, + PointElement, Title, Tooltip, - Legend, } from 'chart.js'; import { Line } from 'react-chartjs-2'; import { MockJSClient } from '../splash/MockJSClient'; @@ -40,17 +40,14 @@ export const options = { }, }; -const app = new Application() - .register(coreNodeProvider) - .boot(); - const { Signal, Table, Map, Create, Request, ConsoleLog } = nodes; -const diagram = core.getDiagramBuilder() +const diagram = core.getDiagramBuilder() .add(Signal, { period: 100, count: 100, - expression: '{ x: ${i} }' }) + expression: '{ x: ${i} }' + }) .add(Map, { json: '{ y: Math.cos(${x}/4) }' }) .add(Table) .get(); @@ -58,7 +55,7 @@ const diagram = core.getDiagramBuilder() export default () => { const [points, setPoints] = React.useState([]); - const client = useMemo(() => new MockJSClient(diagram), [diagram]); + const client = useMemo(() => new MockJSClient(diagram), [diagram]); const mapNode = diagram.nodes.find(n => n.type === 'Map'); const jsonParam = mapNode.params.find(p => p.name === 'json') as any; @@ -97,7 +94,7 @@ export default () => { backgroundColor: 'blue', }, ], - }} /> + }}/>
{ @@ -106,7 +103,7 @@ export default () => { }} client={client} observers={{ - inputObservers: [{ nodeId: 'Table.1', portId: 'input'}], + inputObservers: [{ nodeId: 'Table.1', portId: 'input' }], onDataChange: (items) => { setPoints([ ...points, @@ -114,7 +111,7 @@ export default () => { ].slice(-100)) }, }} - server={{ type: 'JS'}} + server={{ type: 'JS' }} />
diff --git a/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx b/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx index e007e9d0d..8f5065083 100644 --- a/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx +++ b/packages/ui/src/components/DataStory/clients/WorkspaceApiJSClient.tsx @@ -12,7 +12,7 @@ import { nodes, Tree } from '@data-story/core'; -import { ClientRunParams } from '../types'; +import { ClientRunParams, LocalTree } from '../types'; import { eventManager } from '../events/eventManager'; import { DataStoryEvents } from '../events/dataStoryEventType'; import { Subject } from 'rxjs'; @@ -32,13 +32,6 @@ export const createDiagram = (content = 'Diagram') => { return diagram; } -export interface LocalTree { - type: 'load' | 'save'; - version: string; - name: string; - trees: Tree[]; -} - const getCoreVersion = () => { const { version } = require('@data-story/core/package.json'); return version; @@ -74,6 +67,21 @@ const loadTrees = (key: string): Tree[] => { return parseDiagramTreeInfo(localStorage?.getItem(key) || ''); } +class ManualPromise { + readonly promise: Promise; + private resolve!: () => void; + + constructor() { + this.promise = new Promise((resolve) => { + this.resolve = resolve; + }); + } + + complete() { + this.resolve(); + } +} + export class WorkspaceApiJSClient implements WorkspaceApiClient { private executor: Executor | undefined private app?: Application; @@ -258,18 +266,3 @@ export class WorkspaceApiJSClient implements WorkspaceApiClient { return [] as Tree[] } } - -class ManualPromise { - readonly promise: Promise; - private resolve!: () => void; - - constructor() { - this.promise = new Promise((resolve) => { - this.resolve = resolve; - }); - } - - complete() { - this.resolve(); - } -} diff --git a/packages/ui/src/components/DataStory/clients/parseDiagramTreeInfo.ts b/packages/ui/src/components/DataStory/clients/parseDiagramTreeInfo.ts index afb917b5b..c2e797fbd 100644 --- a/packages/ui/src/components/DataStory/clients/parseDiagramTreeInfo.ts +++ b/packages/ui/src/components/DataStory/clients/parseDiagramTreeInfo.ts @@ -1,6 +1,5 @@ -import { Diagram, Diagrammable } from '@data-story/core'; -import { Tree } from '@data-story/core'; -import { LocalTree } from './WorkspaceApiJSClient'; +import { Diagram, Diagrammable, Tree } from '@data-story/core'; +import { LocalTree } from '../types'; const hydrateTreeNode = (tree: Tree): Tree => { if (tree.content) { diff --git a/packages/ui/src/components/DataStory/types.ts b/packages/ui/src/components/DataStory/types.ts index 6eba27a59..204a183b2 100644 --- a/packages/ui/src/components/DataStory/types.ts +++ b/packages/ui/src/components/DataStory/types.ts @@ -208,3 +208,10 @@ export type DescribeResponse = { export type TreeMessage = GetTreeMessage export type TreeResponse = GetTreeResponse | DescribeResponse + +export interface LocalTree { + type: 'load'|'save'; + version: string; + name: string; + trees: Tree[]; +}