Merge pull request #304 from stone-lyl/feat-table

feat: restore Table observer feature in the vscode extension and socket mode

packages/core/package.json

@@ -4,9 +4,10 @@
   "main": "dist/main/index.js",
   "type": "commonjs",
   "types": "dist/main/index.d.ts",
+  "module": "dist/esm/index.mjs",
   "exports": {
     ".": {
-      "import": "./dist/main/index.js",
+      "import": "./dist/esm/index.mjs",
       "require": "./dist/main/index.js"
     },
     "./test-tools": {
@@ -36,8 +37,9 @@
     "demo": "npx ts-node ./src/V2/old/demo.ts",
     "test": "yarn run -T vitest run",
     "watch:test": "yarn run -T vitest",
+    "build:esm": "vite build --config vite.config.esm.ts",
     "build:cjs": "tsc -p tsconfig.build.json",
-    "build": "yarn build:cjs && yarn build-vite",
+    "build": "yarn build:esm && yarn build:cjs && yarn build-vite",
     "release": "yarn run -T release-it"
   },
   "release-it": {
@@ -60,6 +62,7 @@
     "ts-node": "^10.9.1",
     "typescript": "4.9.5",
     "vite": "^5.0.10",
+    "vite-plugin-externalize-deps": "^0.8.0",
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.4",
     "webpack-shebang-plugin": "^1.1.8"

packages/core/tsconfig.build.esm.json

@@ -0,0 +1,43 @@
+{
+    "compilerOptions": {
+      "target": "ES6",
+      "lib": [
+        "esnext"
+      ],
+      "allowJs": true,
+      "checkJs": false,
+      "skipLibCheck": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true,
+      "outDir": "dist/esm",
+      "esModuleInterop": true,
+      "module": "ESNext",
+      "sourceMap": true,
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "incremental": true,
+      "noImplicitAny": true,
+      "types": [
+        "vitest/globals"
+      ],
+      "declaration": true
+    },
+    "ts-node": {
+      "compilerOptions": {
+        "module": "ESNext"
+      }
+    },
+    "include": [
+      "./src/**/*.ts",
+      "global.d.ts"
+    ],
+    "exclude": [
+      "./node_modules",
+      "./src/**/*.spec.ts",
+      "./src/**/*.test.ts",
+      "./src/**/*.cy.ts",
+      "./src/**/*.d.ts",
+    ]
+  }
+

packages/core/vite.config.esm.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import { externalizeDeps } from 'vite-plugin-externalize-deps';
+
+export default defineConfig({
+  plugins: [
+    externalizeDeps(),
+  ],
+  build: {
+    outDir: 'dist/esm',
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: '@data-story/core',
+      formats: ['es'],
+      fileName: 'index'
+    },
+    sourcemap: true
+  },
+});

packages/nodejs/test-server.ts

@@ -1,6 +1,5 @@
 import { nodeJsProvider, SocketServer } from './src';
 import { Application, coreNodeProvider } from '@data-story/core';
-import * as path from 'node:path';
 import * as dotenv from 'dotenv';
 import { hubspotProvider } from '@data-story/hubspot';
 import { openAiProvider } from '@data-story/openai';

packages/ui/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.93",
   "main": "./dist/bundle.js",
   "types": "./dist/src/index.d.ts",
+  "module": "./dist/bundle.mjs",
   "exports": {
     "./data-story.css": "./dist/data-story.css",
     ".": {

packages/ui/src/components/DataStory/clients/WorkspaceSocketClient.tsx

@@ -1,18 +1,20 @@
 import { createDataStoryId, Hook, NodeDescription } from '@data-story/core';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
-import { Observable, retry } from 'rxjs';
-import { ClientRunParams, DescribeResponse } from '../types';
+import { filter, Observable, retry } from 'rxjs';
+import { ClientRunParams, DescribeResponse, ServerClientObservationConfig } from '../types';
 import { WorkspaceApiClient } from './WorkspaceApiClient';
 import { processWaitingResponse, waitForResponse } from './WebSocketHandleResponseMiddleware';
 import { DataStoryEvents } from '../events/dataStoryEventType';
 import { eventManager } from '../events/eventManager';
+import { clientBuffer } from './ClientBuffer';
 
 export class WorkspaceSocketClient implements WorkspaceApiClient {
   private socket$: WebSocketSubject<any>;
   private wsObservable: Observable<any>;
   private maxReconnectTries = 100;
   private reconnectTimeoutMs = 1000;
   private updateEdgeCounts?: ClientRunParams['updateEdgeCounts'];
+  private observers: ServerClientObservationConfig|undefined;
 
   constructor() {
     this.socket$ = webSocket({
@@ -41,27 +43,33 @@ export class WorkspaceSocketClient implements WorkspaceApiClient {
       error: (err) => console.log('WebSocket error: ', err),
     });
 
-    // this.wsObservable.pipe(
-    //   filter(data => data.type === 'NotifyObservers'),
-    //   clientBuffer()
-    // ).subscribe((data) => {
-    //   this?.observers?.onDataChange(
-    //     data.items,
-    //     data.inputObservers,
-    //   );
-    // });
+    this.wsObservable.pipe(
+      filter(data => data.type === 'NotifyObservers'),
+      clientBuffer()
+    ).subscribe((data) => {
+      console.log('workspaceSocketClient: NotifyObservers', data);
+      this?.observers?.onDataChange(
+        data.items,
+        data.inputObservers,
+      );
+    });
   }
 
   run = (
     { updateEdgeCounts, diagram, observers }: ClientRunParams
   ) => {
+    this.observers = observers;
     this.updateEdgeCounts = updateEdgeCounts;
     const message = {
       type: 'run',
       diagram,
       inputObservers: observers?.inputObservers || [],
     };
 
+    eventManager.emit({
+      type: DataStoryEvents.RUN_START
+    });
+
     this.socketSendMsg(message);
   }
 

packages/ui/src/index.ts

@@ -7,8 +7,9 @@ export { OpenIcon } from './components/DataStory/icons/openIcon'
 export { useDataStoryControls } from './components/DataStory/dataStoryControls';
 export { eventManager, useDataStoryEvent } from './components/DataStory/events/eventManager'
 export { DataStoryEvents, type DataStoryEventType } from './components/DataStory/events/dataStoryEventType'
-export type { DataStoryObservers, DataStoryProps } from './components/DataStory/types'
+export type { DataStoryObservers, DataStoryProps, ClientRunParams, ServerClientObservationConfig } from './components/DataStory/types'
 export { default as NodeComponent } from './components/Node/NodeComponent';
 export { WorkspaceApiJSClient } from './components/DataStory/clients/WorkspaceApiJSClient';
 export { WorkspaceSocketClient } from './components/DataStory/clients/WorkspaceSocketClient';
 export type { DataStoryControlsType } from './components/DataStory/dataStoryControls';
+export type { WorkspaceApiClient } from './components/DataStory/clients/WorkspaceApiClient';

packages/vscode-extension/README.md

@@ -1,6 +1,6 @@
 # Development Installation
 * clone repo
-* in root, also run `yarn`
+* in root, also run `yarn` and `yarn build`
 * open repo with VS Code
 * In "Run and Debug" tab, click "Run Extension"
 * This opens a new instance of VS Code

packages/vscode-extension/package.json

@@ -106,8 +106,8 @@
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@data-story/core": "^0.0.92",
-    "@data-story/ui": "^0.0.92",
+    "@data-story/core": "workspace:*",
+    "@data-story/ui": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "ts-loader": "^9.5.1"

packages/vscode-extension/src/app/VsCodeClient.tsx

@@ -1,14 +1,11 @@
 import { createDataStoryId, Hook } from '@data-story/core';
 import { DataStoryEvents, eventManager } from '@data-story/ui';
-// @ts-ignore
-import { WorkspaceApiClient } from '@data-story/ui/dist/src/components/DataStory/clients/WorkspaceApiClient';
-// @ts-ignore
-import { ClientRunParams } from '@data-story/ui/dist/src/components/DataStory/types';
+import type { WorkspaceApiClient, ClientRunParams, ServerClientObservationConfig } from '@data-story/ui';
 
 export class VsCodeClient implements WorkspaceApiClient {
   updateEdgeCounts: any;
   private vscode: any;
-
+  private observers: ServerClientObservationConfig | undefined;
   constructor(vscode: any) {
     this.vscode = vscode;
 
@@ -22,13 +19,18 @@ export class VsCodeClient implements WorkspaceApiClient {
   }
 
   run = async ({ diagram, updateEdgeCounts, observers }: ClientRunParams): Promise<void> => {
+    this.observers = observers;
     this.updateEdgeCounts = updateEdgeCounts;
     const message = {
       type: 'run',
       diagram,
       inputObservers: observers?.inputObservers || [],
     };
 
+    eventManager.emit({
+      type: DataStoryEvents.RUN_START
+    });
+
     this.sendMessage(message);
   }
 
@@ -83,6 +85,11 @@ export class VsCodeClient implements WorkspaceApiClient {
       return;
     }
 
+    if (data.type === 'NotifyObservers') {
+      this?.observers?.onDataChange(data.items, data.inputObservers);
+      return;
+    }
+
     if (data.type === 'ExecutionResult') {
       console.log('Execution complete 💫')
       eventManager.emit({
@@ -104,7 +111,7 @@ export class VsCodeClient implements WorkspaceApiClient {
       return
     }
 
-    if (data.type === 'UpdateStorage' || data.type === 'NotifyObservers') {
+    if (data.type === 'UpdateStorage') {
       return;
     }
 
@@ -140,4 +147,4 @@ export async function waitForResponse(params: any): Promise<any> {
       }
     }, 10000);
   });
-}
+}

packages/vscode-extension/src/messageHandlers/onRun.ts

@@ -19,11 +19,11 @@ export const onRun: MessageHandler = async ({ event, webviewPanel }) => {
   })
 
   const sendMsg: ReportCallback = (items, inputObservers) => {
-    webviewPanel.webview.postMessage(JSON.stringify({
+    webviewPanel.webview.postMessage({
       type: 'NotifyObservers',
       inputObservers,
       items
-    }))
+    })
   }
 
   const inputObserverController = new InputObserverController(

yarn.lock

@@ -458,19 +458,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@data-story/core@npm:0.0.92, @data-story/core@npm:^0.0.92":
-  version: 0.0.92
-  resolution: "@data-story/core@npm:0.0.92"
-  dependencies:
-    axios: "npm:^1.3.4"
-    dotenv: "npm:^16.0.3"
-    nanoid: "npm:3"
-  peerDependencies:
-    vitest: ^1.6.0
-  checksum: 10/026139c25d8c564cd594e517f16190592e44e5d88a8b08d210a96770a980559ea478ccf8a6d350d22df9304e398ba79673837a13d7d94bd68522e51d0994a510
-  languageName: node
-  linkType: hard
-
 "@data-story/core@workspace:*, @data-story/core@workspace:packages/core":
   version: 0.0.0-use.local
   resolution: "@data-story/core@workspace:packages/core"
@@ -482,6 +469,7 @@ __metadata:
     ts-node: "npm:^10.9.1"
     typescript: "npm:4.9.5"
     vite: "npm:^5.0.10"
+    vite-plugin-externalize-deps: "npm:^0.8.0"
     webpack: "npm:^5.88.1"
     webpack-cli: "npm:^5.1.4"
     webpack-shebang-plugin: "npm:^1.1.8"
@@ -582,35 +570,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@data-story/ui@npm:^0.0.92":
-  version: 0.0.92
-  resolution: "@data-story/ui@npm:0.0.92"
-  dependencies:
-    "@codemirror/autocomplete": "npm:^6.16.2"
-    "@data-story/core": "npm:0.0.92"
-    "@floating-ui/react": "npm:^0.26.10"
-    "@tanstack/react-table": "npm:^8.11.7"
-    "@tanstack/react-virtual": "npm:^3.5.0"
-    "@uiw/react-codemirror": "npm:^4.22.2"
-    "@xyflow/react": "npm:^12.0.2"
-    ahooks: "npm:^3.7.10"
-    allotment: "npm:^1.20.2"
-    clsx: "npm:^2.0.0"
-    codemirror: "npm:^6.0.1"
-    concurrently: "npm:^8.2.1"
-    markdown-it: "npm:^13.0.2"
-    react-arborist: "npm:^3.4.0"
-    react-dnd: "npm:^16.0.1"
-    react-dnd-html5-backend: "npm:^16.0.1"
-    rxjs: "npm:^7.8.1"
-    zustand: "npm:^4.3.9"
-  peerDependencies:
-    react: ^18.2.0
-    react-dom: ^18.2.0
-  checksum: 10/0fc3eb51011b865214149c9f78f5d331bba0f2875a2c28946045554316be704daf32baefc489ddb087372406e00722c3bc61fd5d1f5c6a6d13bedcbccd6553f3
-  languageName: node
-  linkType: hard
-
 "@data-story/ui@workspace:*, @data-story/ui@workspace:packages/ui":
   version: 0.0.0-use.local
   resolution: "@data-story/ui@workspace:packages/ui"
@@ -663,8 +622,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@data-story/vscode-extension@workspace:packages/vscode-extension"
   dependencies:
-    "@data-story/core": "npm:^0.0.92"
-    "@data-story/ui": "npm:^0.0.92"
+    "@data-story/core": "workspace:*"
+    "@data-story/ui": "workspace:*"
     "@types/mocha": "npm:^10.0.7"
     "@types/node": "npm:20.x"
     "@types/react": "npm:^18"
@@ -14974,6 +14933,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-externalize-deps@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "vite-plugin-externalize-deps@npm:0.8.0"
+  peerDependencies:
+    vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+  checksum: 10/a87b7bc44c810e5ef16314d76ccdd442d27018ea3fae531d22fc6bd803c20e0de4268d981bfc5db604ceb382cd9f646804da84df5a77dac98914be8ddc15b6ec
+  languageName: node
+  linkType: hard
+
 "vite@npm:^5.0.0, vite@npm:^5.0.10":
   version: 5.2.11
   resolution: "vite@npm:5.2.11"