Merge pull request #318 from stone-lyl/main

feat: decoupe data exchange from business logic

packages/core/src/types/ExecutionFailure.ts

@@ -2,4 +2,5 @@ export type ExecutionFailure = {
   type: 'ExecutionFailure'
   message: string
   history: string[]
-}
+  msgId?: string;
+}

packages/docs/components/Playground.tsx

@@ -1,27 +1,37 @@
-import React, { useMemo } from 'react';
-import { DataStory, WorkspaceApiJSClient, WorkspaceSocketClient } from '@data-story/ui';
+import React, { useEffect, useState } from 'react';
+import { createJSClient, createSocketClient, DataStory } from '@data-story/ui';
 import { useRequestApp } from './hooks/useRequestApp';
 import { ToastComponent } from './Toast';
 
 export default Playground;
 
 function Playground({ mode }: {mode?: 'js' | 'node'}) {
   const { app, loading } = useRequestApp();
+  const [client, setClient] = useState(null);
 
-  const client = useMemo(() => {
-    if (mode === 'node') return new WorkspaceSocketClient();
-    if (!loading) return new WorkspaceApiJSClient(app);
-    return null;
+  useEffect(() => {
+    if (mode === 'node') {
+      const { client, dispose } = createSocketClient();
+      setClient(client);
+      return dispose;
+    }
+  }, [mode]);
+
+  useEffect(() => {
+    if (mode !== 'node' && !loading) {
+      const client = createJSClient(app);
+      setClient(client);
+    }
   }, [mode, app, loading]);
 
-  if(loading || !client) return null;
+  if (loading || !client) return null;
 
   return (
     <div className="w-full" style={{ height: 'calc(100vh - 72px)' }} data-cy="playground">
       <DataStory
         client={client}
       >
-        <ToastComponent />
+        <ToastComponent/>
       </DataStory>
     </div>
   );

packages/docs/components/demos/DocsFlow.tsx

@@ -1,6 +1,6 @@
 import { DataStory } from '@data-story/ui'
 import { core, multiline, nodes, } from '@data-story/core';
-import { MockJSClient } from '../splash/MockJSClient';
+import { CustomizeJSClient } from '../splash/CustomizeJSClient';
 import { useRequestApp } from '../hooks/useRequestApp';
 
 export default () => {
@@ -22,7 +22,7 @@ export default () => {
     .get()
 
   const { app, loading } = useRequestApp();
-  const client = new MockJSClient({ diagram: diagram, app });
+  const client = new CustomizeJSClient({ diagram: diagram, app });
 
   if (loading || !client) return null;
 

packages/docs/components/demos/HeroFlow.tsx

@@ -1,7 +1,7 @@
 import { DataStory } from '@data-story/ui'
 import { core, multiline, nodes, } from '@data-story/core';
 import useWindowDimensions from '../../hooks/useWindowDimensions';
-import { MockJSClient } from '../splash/MockJSClient';
+import { CustomizeJSClient } from '../splash/CustomizeJSClient';
 import { useMemo } from 'react';
 import { useRequestApp } from '../hooks/useRequestApp';
 
@@ -45,7 +45,7 @@ export default () => {
   const isSmallScreen = useMemo(() => width < 768, [width]);
 
   const client = useMemo(() =>
-    isSmallScreen ? new MockJSClient({ diagram: smallDiagram, app }) : new MockJSClient({ diagram: bigDiagram, app }),
+    isSmallScreen ? new CustomizeJSClient({ diagram: smallDiagram, app }) : new CustomizeJSClient({ diagram: bigDiagram, app }),
   [isSmallScreen, bigDiagram, smallDiagram, app]);
 
   if (loading || !client) return null;

packages/docs/components/demos/NodeDemo.tsx

@@ -1,6 +1,6 @@
 import { DataStory } from '@data-story/ui'
 import { core, nodes } from '@data-story/core';
-import { MockJSClient } from '../splash/MockJSClient';
+import { CustomizeJSClient } from '../splash/CustomizeJSClient';
 import { useRequestApp } from '../hooks/useRequestApp';
 
 export default ({ nodeName }: {nodeName: string}) => {
@@ -9,7 +9,7 @@ export default ({ nodeName }: {nodeName: string}) => {
     .get()
 
   const { app, loading } = useRequestApp();
-  const client = new MockJSClient({ diagram: diagram, app });
+  const client = new CustomizeJSClient({ diagram: diagram, app });
 
   if (loading || !client) return null;
   return (<div>

packages/docs/components/demos/ObserversDemo.tsx

@@ -1,7 +1,7 @@
 import { core, nodes } from '@data-story/core';
 import React from 'react';
 import { DataStory, type DataStoryObservers } from '@data-story/ui';
-import { MockJSClient } from '../splash/MockJSClient';
+import { CustomizeJSClient } from '../splash/CustomizeJSClient';
 import { useRequestApp } from '../hooks/useRequestApp';
 
 export default ({ mode, observers }:
@@ -16,7 +16,7 @@ export default ({ mode, observers }:
     .get();
 
   const { app, loading } = useRequestApp();
-  const client = new MockJSClient({ diagram: diagram, app });
+  const client = new CustomizeJSClient({ diagram: diagram, app });
 
   if (loading || !client) return null;
   return (

packages/docs/components/demos/TinkerDemo.tsx

@@ -1,6 +1,6 @@
 import { DataStory } from '@data-story/ui'
 import { core, str, } from '@data-story/core';
-import { MockJSClient } from '../splash/MockJSClient';
+import { CustomizeJSClient } from '../splash/CustomizeJSClient';
 import { useRequestApp } from '../hooks/useRequestApp';
 import useRequest from 'ahooks/lib/useRequest';
 
@@ -23,7 +23,7 @@ export default () => {
     return diagram;
   });
 
-  const client = new MockJSClient({ diagram, app });
+  const client = new CustomizeJSClient({ diagram, app });
 
   if (appLoading || !client || diagramLoading) return null;
   return (

packages/docs/components/demos/Tree/AddNodeDescription.tsx

@@ -2,7 +2,7 @@
 
 import { DataStory } from '@data-story/ui';
 import { core, nodes } from '@data-story/core';
-import { MockJSClient } from '../../splash/MockJSClient';
+import { CustomizeJSClient } from '../../splash/CustomizeJSClient';
 import { useMemo } from 'react';
 import { useRequestApp } from '../../hooks/useRequestApp';
 
@@ -26,7 +26,7 @@ export default () => {
     .get();
 
   const client = useMemo(() => {
-    return new MockJSClient({ diagram, app, nodeDescriptions });
+    return new CustomizeJSClient({ diagram, app, nodeDescriptions });
   }, [diagram, app, nodeDescriptions]);
 
   if (!client) return null;

packages/docs/components/demos/Tree/CustomActivityBar.tsx

@@ -2,7 +2,7 @@
 
 import { DataStory } from '@data-story/ui';
 import { core, nodes } from '@data-story/core';
-import { MockJSClient } from '../../splash/MockJSClient';
+import { CustomizeJSClient } from '../../splash/CustomizeJSClient';
 import { useRequestApp } from '../../hooks/useRequestApp';
 
 export default () => {
@@ -14,7 +14,7 @@ export default () => {
     .above('Signal.1').add(Comment, { content: '### Custom Config Activity Bar 🔥' })
     .get();
   const { app } = useRequestApp();
-  const client = new MockJSClient({ diagram: diagram, app });
+  const client = new CustomizeJSClient({ diagram: diagram, app });
 
   if (!client) return null;
 

packages/docs/components/demos/Tree/Empty.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import { DataStory } from '@data-story/ui';
-import { MockJSClient } from '../../splash/MockJSClient';
+import { CustomizeJSClient } from '../../splash/CustomizeJSClient';
 import { useRequestApp } from '../../hooks/useRequestApp';
 
 export default () => {
   const { app, loading } = useRequestApp();
 
-  const client: MockJSClient | null = new MockJSClient({ app });
+  const client: CustomizeJSClient | null = new CustomizeJSClient({ app });
 
   if (loading || !client) return null;
 

packages/docs/components/demos/Tree/Loading.tsx

@@ -1,14 +1,14 @@
 'use client'
 
 import { DataStory } from '@data-story/ui';
-import { MockJSClient } from '../../splash/MockJSClient';
+import { CustomizeJSClient } from '../../splash/CustomizeJSClient';
 import { useRequestApp } from '../../hooks/useRequestApp';
 
 export default () => {
   const { app, loading } = useRequestApp();
   if(loading) return null;
 
-  const client = new MockJSClient({app});
+  const client = new CustomizeJSClient({app});
 
   return (
     <div className="w-full h-80 border-gray-400 border-4">

packages/docs/components/demos/Tree/MultipleDiagram.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { DataStory, WorkspaceApiJSClient } from '@data-story/ui';
+import { createJSClient, DataStory } from '@data-story/ui';
 import { useMemo } from 'react';
 import { useRequestApp } from '../../hooks/useRequestApp';
 
 export default () => {
   const { app, loading } = useRequestApp();
   const client = useMemo(() =>  {
-    if (!loading) return new WorkspaceApiJSClient(app);
+    if (!loading) return createJSClient(app);
     return null;
   }, [app, loading]);
 

packages/docs/components/demos/Tree/SingleDiagram.tsx

@@ -2,7 +2,7 @@
 
 import { DataStory } from '@data-story/ui';
 import { core, nodes } from '@data-story/core';
-import { MockJSClient } from '../../splash/MockJSClient';
+import { CustomizeJSClient } from '../../splash/CustomizeJSClient';
 import { useRequestApp } from '../../hooks/useRequestApp';
 
 export default () => {
@@ -15,7 +15,7 @@ export default () => {
     .above('Signal.1').add(Comment, { content: '### Single Diagram 🔥' })
     .get();
 
-  const client = new MockJSClient({ diagram: diagram, app });
+  const client = new CustomizeJSClient({ diagram: diagram, app });
 
   if(!client) return null;
 

packages/docs/components/demos/UnfoldingDemo.tsx

@@ -1,6 +1,6 @@
 import { DataStory } from '@data-story/ui'
 import { Application, core, coreNodeProvider, nodes, str, UnfoldedDiagramFactory, } from '@data-story/core';
-import { MockJSClient } from '../splash/MockJSClient';
+import { CustomizeJSClient } from '../splash/CustomizeJSClient';
 import useRequest from 'ahooks/lib/useRequest';
 
 export default ({ part }: {part: 'MAIN' | 'NESTED_NODE' | 'MAIN_UNFOLDED'}) => {
@@ -66,9 +66,9 @@ export default ({ part }: {part: 'MAIN' | 'NESTED_NODE' | 'MAIN_UNFOLDED'}) => {
     nestedNodes
   ).unfold();
 
-  const mainClient = new MockJSClient({ diagram: diagram, app: app });
-  const mainUnfoldedClient = new MockJSClient({ diagram: unfolded.diagram, app: app });
-  const nestedNodeClient = new MockJSClient({ diagram: nestedNode, app: app });
+  const mainClient = new CustomizeJSClient({ diagram: diagram, app: app });
+  const mainUnfoldedClient = new CustomizeJSClient({ diagram: unfolded.diagram, app: app });
+  const nestedNodeClient = new CustomizeJSClient({ diagram: nestedNode, app: app });
 
   if (loading || !mainClient) return null;
   // *************************************

packages/docs/components/demos/VisualizeDemo.tsx

@@ -12,7 +12,7 @@ import {
   Tooltip,
 } from 'chart.js';
 import { Line } from 'react-chartjs-2';
-import { MockJSClient } from '../splash/MockJSClient';
+import { CustomizeJSClient } from '../splash/CustomizeJSClient';
 import { useRequestApp } from '../hooks/useRequestApp';
 
 ChartJS.register(
@@ -57,7 +57,7 @@ export default () => {
   const [points, setPoints] = React.useState([]);
   const { app, loading } = useRequestApp();
 
-  const client = useMemo(() => new MockJSClient({ diagram, app }), [diagram, app]);
+  const client = useMemo(() => new CustomizeJSClient({ diagram, app }), [diagram, app]);
 
   const mapNode = diagram.nodes.find(n => n.type === 'Map');
   const jsonParam = mapNode.params.find(p => p.name === 'json') as any;

packages/docs/components/splash/CustomizeJSClient.tsx

@@ -0,0 +1,26 @@
+import { Application, Diagram, NodeDescription } from '@data-story/core';
+import { ClientRunParams, createJSClient, WorkspaceApiClient, WorkspaceApiClientBase } from '@data-story/ui';
+
+export class CustomizeJSClient implements WorkspaceApiClient {
+  private nodeDescriptions: NodeDescription[];
+  private app: Application;
+
+  constructor({ diagram, app, nodeDescriptions }: {
+    app: Application,
+    diagram?: Diagram,
+    nodeDescriptions?: NodeDescription[]
+  }) {
+    this.nodeDescriptions = nodeDescriptions || [];
+    this.app = app;
+  }
+
+  getNodeDescriptions = async({ path }) => {
+    return this.nodeDescriptions;
+  };
+
+  run = (params:  ClientRunParams) => {
+    const jsClient = createJSClient(this.app);
+    jsClient.run(params);
+  };
+
+}

packages/ds-ext/package.json

@@ -122,6 +122,7 @@
     "@data-story/ui": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "rxjs": "^7.8.1",
     "ts-loader": "^9.5.1"
   },
   "repository": {

packages/ds-ext/src/app/App.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { debounce, Diagram } from '@data-story/core';
 import { DataStory } from '@data-story/ui';
-import { fileUri, VsCodeClient } from './VsCodeClient';
 import { VsCodeToast } from './VsCodeToast';
 import { onDrop } from './onDrop';
+import { createVsCodeClient } from './createVsCodeClient';
+
+export const fileUri = window.initialData.fileUri;
 
 export default function App() {
   const [diagram, setDiagram] = useState<Diagram | undefined>();
@@ -50,6 +52,7 @@ export default function App() {
     [fileUri]
   );
 
+  const client = createVsCodeClient(window.vscode);
   // Only render DataStory if diagramData is available
   if (!diagram) {
     return <div>Loading diagram...</div>;
@@ -58,8 +61,7 @@ export default function App() {
   return (
     <div style={{ width: '100%', height: '100vh' }}>
       <DataStory
-        client={new VsCodeClient(window.vscode)}
-        onInitialize={() => {}}
+        client={client}
         hideSidebar={false}
         hideActivityBar={true}
         initSidebarKey={undefined}
@@ -68,7 +70,7 @@ export default function App() {
         onChange={handleChange}
         onDrop={onDrop}
       />
-      <VsCodeToast postMessage={window.vscode.postMessage}/>
+      <VsCodeToast postMessage={window.vscode.postMessage} />
     </div>
   );
 }