Merge pull request #90 from VictorS67/encre-studio-revised

Update Encre Core for Encre Studio imports

.github/workflows/ci.yml

@@ -45,7 +45,5 @@ jobs:
           cache: "yarn"
       - name: Install dependencies
         run: yarn install --unsafe-perm --immutable --network-timeout 500000
-      - name: Install sharp
-        run: yarn workspace @encrejs/core add sharp --ignore-engines && yarn workspace @encrejs/api add sharp --ignore-engines
       - name: Test
-        run: yarn workspace @encrejs/core run test && yarn workspace @encrejs/api run test
+        run: yarn workspace @encrejs/core run test

packages/app/.env

@@ -1,2 +1,2 @@
 REACT_APP_ENV=local
-ELECTRON_START_URL='http://localhost:3000'
+ELECTRON_START_URL='http://localhost:8080'

packages/app/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

packages/app/config-overrides.cjs

@@ -0,0 +1,41 @@
+const webpack = require("webpack");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+
+module.exports = function override(config) {
+  const fallback = config.resolve.fallback || {};
+  Object.assign(fallback, {
+    perf_hooks: false,
+    child_process: false,
+    fs: false,
+    tls: false,
+    net: false,
+    path: require.resolve("path-browserify"),
+    util: require.resolve("util/"),
+    crypto: require.resolve("crypto-browserify"),
+    stream: require.resolve("stream-browserify"),
+    // "stream/web": false,
+    assert: require.resolve("assert"),
+    http: require.resolve("stream-http"),
+    https: require.resolve("https-browserify"),
+    os: require.resolve("os-browserify"),
+    url: require.resolve("url"),
+    "process/browser": require.resolve("process/browser"),
+    process: require.resolve("process/browser"), // Ensures process is available
+  });
+  config.resolve.fallback = fallback;
+  config.plugins = (config.plugins || []).concat([
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^node:/, // Regular expression to match all node: prefixed modules
+    }),
+    new webpack.IgnorePlugin({
+      resourceRegExp: /^stream\/web/, // Regular expression to match all node: prefixed modules
+    }),
+    new NodePolyfillPlugin(),
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ]);
+  // config.resolve.extensions = [".js", ".json", ".jsx", ".mjs"]; // Make sure to include '.mjs' if you're dealing with ES Modules
+  return config;
+};

packages/app/electron/electron.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from "electron";
+import { app, BrowserWindow, ipcMain } from "electron";
 import path from "path";
 import url from "url";
 
@@ -26,7 +26,22 @@ function createWindow() {
   //   );
   // }
 
-  mainWindow.loadURL(process.env.ELECTRON_START_URL || "http://localhost:3000");
+  mainWindow.loadURL(process.env.ELECTRON_START_URL || "http://localhost:8080");
+  // mainWindow.loadFile(path.join(__dirname, "public", "index.html"));
+
+  // ipcMain.handle("globalNodeRegistry", async (event, arg) => {
+  //   const encre = await import("@encrejs/core");
+
+  //   return encre.globalNodeRegistry;
+  // });
+
+  mainWindow.webContents.on("before-input-event", (_, input) => {
+    if (input.type === "keyDown" && input.key === "F12") {
+      mainWindow?.webContents.isDevToolsOpened()
+        ? mainWindow?.webContents.closeDevTools()
+        : mainWindow?.webContents.openDevTools({ mode: "left" });
+    }
+  });
 
   mainWindow.on("closed", () => {
     mainWindow = null;

packages/app/electron/tsconfig.json

@@ -2,12 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "../build/electron",
+    "outDir": "../dist/main",
     "rootDir": ".",
-    "module": "commonjs"
-    // "module": "ESNext",
-    // "moduleResolution": "node",
-    // "target": "ESNext"
+    "target": "ESNEXT",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true
   },
-  "include": ["./**/*.ts"]
+  "include": ["electron.ts"]
 }

packages/app/package.json

@@ -5,9 +5,9 @@
   "author": "Encre",
   "license": "MIT",
   "private": true,
-  "type": "commonjs",
-  "packageManager": "[email protected].21",
-  "main": "build/electron/electron.js",
+  "type": "module",
+  "packageManager": "[email protected].19",
+  "main": "dist/main/electron.js",
   "devDependencies": {
     "@atlaskit/eslint-plugin-design-system": "^4.11.2",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -25,7 +25,8 @@
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "concurrently": "^8.2.1",
-    "electron": "^26.3.0",
+    "css-loader": "^7.1.2",
+    "electron": "^28.0.0",
     "eslint": "^8.49.0",
     "eslint-cjs-to-esm": "^2.2.0",
     "eslint-config-prettier": "^9.0.0",
@@ -35,17 +36,24 @@
     "eslint-plugin-n": "^16.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
+    "esm": "^3.2.25",
+    "node-polyfill-webpack-plugin": "^4.0.0",
     "prettier": "^3.0.3",
+    "react-app-rewired": "^2.2.1",
     "react-scripts": "5.0.1",
     "recoil-persist": "^5.1.0",
-    "wait-on": "^7.0.1"
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "wait-on": "^7.0.1",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@atlaskit/css-reset": "^6.5.4",
     "@atlaskit/tokens": "^1.43.0",
     "@dnd-kit/core": "^6.0.8",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@encrejs/core": "workspace:^",
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
     "@floating-ui/react": "^0.26.0",
@@ -57,15 +65,14 @@
     "ahooks": "^3.7.8",
     "clsx": "^2.0.0",
     "immer": "^10.0.3",
-    "langchain": "^0.0.149",
     "lodash-es": "^4.17.21",
     "marked": "^9.0.0",
     "monaco-editor": "^0.45.0",
-    "openai": "^4.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",
     "react-redux": "^8.1.2",
+    "react-transition-group": "^4.4.5",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
     "ts-dedent": "^2.2.0",
@@ -77,13 +84,21 @@
     "ws": "^8.14.1",
     "yaml": "^2.3.2"
   },
+  "imports": {
+    "@encrejs/core": "./node_modules/@encrejs/core/*.js"
+  },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint src/**/*.{ts,tsx} --quiet --fix",
     "lint-fix": "eslint --fix src/**/*.{ts,tsx} src/**/**/*.{ts,tsx}",
+    "build:react": "webpack --config webpack.config.cjs",
+    "build:electron": "tsc -p electron/tsconfig.json",
+    "start:dev": "concurrently \"yarn start:react\" \"wait-on http://localhost:8000 && yarn start:electron\"",
+    "start:react": "webpack serve --config webpack.config.cjs --mode development",
+    "start:electron": "electron .",
     "electron-build": "tsc -p electron/tsconfig.json",
     "electron-start": "yarn electron-build && electron .",
     "electron-dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && yarn electron-start\""
@@ -106,4 +121,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

packages/app/public/index.html

@@ -2,19 +2,19 @@
 <html lang="en" data-theme="dark:dark light:light" data-color-mode="dark">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="./logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="./manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="bundle.js"></script>
   </body>
 </html>

packages/app/src/components/NodeCanvas.tsx

@@ -63,7 +63,12 @@ import { draggingWireClosestPortState } from '../state/wire';
 import { NodeCanvasProps, type CanvasPosition } from '../types/canvas.type';
 import { type ContextMenuConfigContextData } from '../types/contextmenu.type';
 import { HighlightedPort } from '../types/port.type';
-import { GraphComment, Node, NodeConnection } from '../types/studio.type';
+import {
+  GraphComment,
+  Node,
+  NodeConnection,
+  RecordId,
+} from '../types/studio.type';
 
 const styles = css`
   position: relative;
@@ -651,7 +656,7 @@ export const NodeCanvas: FC<NodeCanvasProps> = ({
   );
 
   const onNodeMouseOver = useStableCallback(
-    (event: React.MouseEvent, nodeId: string) => {
+    (event: React.MouseEvent, nodeId: RecordId) => {
       setHoveringNodeId(nodeId);
     },
   );

packages/app/src/components/NodeContentBody.tsx

@@ -3,9 +3,11 @@ import React, { FC, memo, useState } from 'react';
 import styled from '@emotion/styled';
 import { useQuery } from '@tanstack/react-query';
 import { useAsyncEffect } from 'ahooks';
+import { useRecoilValue } from 'recoil';
 
 import { useStableCallback } from '../hooks/useStableCallback';
 import { useUIContextDescriptors } from '../hooks/useUIContextDescriptors';
+import { nodeInstanceState } from '../state/node';
 import {
   KnownNodeContentBodyProps,
   NodeContentBodyProps,
@@ -33,14 +35,16 @@ const NodeContentBodyWrapper = styled.div<{
 
 export const NodeContentBody: FC<NodeContentBodyProps> = memo(
   ({ node }: NodeContentBodyProps) => {
+    const nodeInstance = useRecoilValue(nodeInstanceState(node.id));
+
     const {
       isPending,
       error,
       data: body,
       isFetching,
     } = useQuery({
       queryKey: ['nodeBody', node.id],
-      queryFn: () => node.getBody(),
+      queryFn: () => nodeInstance?.getBody(),
     });
 
     if (isPending) return <></>;

packages/app/src/components/NodeGraphBuilder.tsx

@@ -11,7 +11,7 @@ import { commentsState, selectingCommentIdsState } from '../state/comment';
 import { nodesState, selectingNodeIdsState } from '../state/node';
 import { connectionsState } from '../state/nodeconnection';
 import { selectingWireIdsState } from '../state/wire';
-import { GraphComment, Node } from '../types/studio.type';
+import { GraphComment, Node, RecordId } from '../types/studio.type';
 
 export const NodeGraphBuilder: FC = () => {
   const [nodes, setNodes] = useRecoilState(nodesState);
@@ -33,7 +33,7 @@ export const NodeGraphBuilder: FC = () => {
   const onNodesSelect = useStableCallback(
     (newNodes: Node[], isMulti?: boolean) => {
       if (isMulti) {
-        setSelectingNodeIds((nodeIds: string[]) => [
+        setSelectingNodeIds((nodeIds: RecordId[]) => [
           ...new Set([...nodeIds, ...newNodes.map((n) => n.id)]),
         ]);
       } else {

packages/app/src/components/WireLayer.tsx

@@ -24,7 +24,7 @@ import {
   isSelectingMultiWiresState,
   selectingWireIdsState,
 } from '../state/wire';
-import { NodeInputPortDef } from '../types/studio.type';
+import { NodeInputPortDef, RecordId } from '../types/studio.type';
 import { WireLayerProps } from '../types/wire.type';
 
 const WireLayerContainer = styled.svg`
@@ -188,7 +188,7 @@ export const WireLayer: FC<WireLayerProps> = ({
           })[0] as HTMLElement;
 
           const nodeId = closestHoverEl!.parentElement!.dataset.nodeid as
-            | string
+            | RecordId
             | undefined;
           const portName = closestHoverEl!.parentElement!.dataset.portname as
             | string

packages/app/src/hooks/useAudioRecorder.ts

@@ -69,7 +69,6 @@ export function useAudioRecorder(
         });
       })
       .catch((err: DOMException) => {
-        console.log(err.name, err.message, err.cause);
         onNotAllowedOrFound?.(err);
       });
   }, [

packages/app/src/hooks/useChangeNodeVisualContent.ts

@@ -6,6 +6,7 @@ import {
   nodeVisualContentDataMapState,
   updateNodeVisualContentDataState,
 } from '../state/node';
+import { RecordId } from '../types/studio.type';
 
 export function useChangeNodeVisualContent() {
   const nodeVisualContentDataMap = useRecoilValue(
@@ -16,7 +17,7 @@ export function useChangeNodeVisualContent() {
   );
 
   const updateNodeColor = useCallback(
-    (nodeId: string, color: string) => {
+    (nodeId: RecordId, color: string) => {
       const nodeVisualContentData = nodeVisualContentDataMap[nodeId];
 
       updateNodeVisualContentData({

packages/app/src/hooks/useContextMenu.ts

@@ -6,6 +6,7 @@ import { showContextMenuState } from '../state/contextmenu';
 import { selectingNodeIdsState } from '../state/node';
 import { selectingWireIdsState } from '../state/wire';
 import { ContextMenuData, ContextMenu } from '../types/contextmenu.type';
+import { RecordId } from '../types/studio.type';
 
 /**
  * `useContextMenu` hook
@@ -128,8 +129,8 @@ export function useContextMenu() {
       setContextMenu({ x: event.clientX, y: event.clientY, data });
 
       if (data?.type.startsWith('node-')) {
-        const nodeId: string = data.element.dataset.nodeid as string;
-        setSelectingNodeIds((nodeIds: string[]) => [
+        const nodeId: RecordId = data.element.dataset.nodeid as RecordId;
+        setSelectingNodeIds((nodeIds: RecordId[]) => [
           ...new Set([...nodeIds, nodeId]),
         ]);
       } else if (data?.type.startsWith('wire-')) {

packages/app/src/hooks/useContextMenuConfigContexts.ts

@@ -14,6 +14,7 @@ import { useContextMenuMoveToNodeConfigContexts } from './useContextMenuMoveToNo
 import { useHotKeyDisplay } from './useHotKeyDisplay';
 import { ContextMenuConfigContexts } from '../types/contextmenu.type';
 import { HOTKEY } from '../types/hotkey.type';
+import { RecordId } from '../types/studio.type';
 import { typeOf } from '../utils/safeTypes';
 
 export function useContextMenuConfigContexts(): ContextMenuConfigContexts {
@@ -132,7 +133,7 @@ export function useContextMenuConfigContexts(): ContextMenuConfigContexts {
       },
       node: {
         contextType: typeOf<{
-          nodeId: string;
+          nodeId: RecordId;
           nodeType: string;
           nodeSubType: string;
           registerArgs?: Record<string, unknown>;

packages/app/src/hooks/useContextMenuMoveToNodeConfigContexts.ts

@@ -7,7 +7,7 @@ export function useContextMenuMoveToNodeConfigContexts() {
 
   return nodes.map((node) => ({
     id: `move-to-node:${node.id}`,
-    name: node.title,
+    name: node.title ?? (node.data._id[node.data._id.length - 1] as string),
     data: {
       nodeId: node.id,
     },