Set Up dev 'watch' for aiconfig-editor declarations HMR

Author: Ryan Holinshead

python/src/aiconfig/editor/client/aiconfig-editor/package.json

@@ -17,7 +17,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "npx tsc && vite build",
+    "build": "yarn clean && vite build",
+    "dev": "yarn clean && vite build --config vite.config.dev.ts",
     "clean": "rm -rf dist",
     "lint": "eslint . --max-warnings=0"
   },

python/src/aiconfig/editor/client/aiconfig-editor/vite.config.dev.ts

@@ -0,0 +1,19 @@
+import { PROD_CONFIG } from "./vite.config";
+import { LibraryOptions, defineConfig } from "vite";
+
+// vite build --watch expects a watch/index.html entrypoing even for library builds.
+// But setting 'watch' in build config is an alternate way to watch changes to files,
+// so use this dev config for dev builds.
+export default defineConfig({
+  ...PROD_CONFIG,
+  build: {
+    ...PROD_CONFIG.build,
+    lib: {
+      ...(PROD_CONFIG.build!.lib as LibraryOptions),
+      formats: ["es"], // LocalEditor only needs uses ES module format
+    },
+    watch: {
+      include: "src/**", // Watches the specified files for changes.
+    },
+  },
+});

python/src/aiconfig/editor/client/aiconfig-editor/vite.config.ts

@@ -1,19 +1,23 @@
-import { defineConfig } from "vite";
+import { resolve } from "path";
+import { UserConfig, defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 
-export default defineConfig({
+export const PROD_CONFIG: UserConfig = {
   build: {
     lib: {
-      entry: "./src/index.ts", // Specifies the entry point for building the library.
+      entry: resolve(__dirname, "/src/index.ts"), // Specifies the entry point for building the library.
       name: "aiconfig-editor", // Sets the name of the generated library.
       fileName: (format) => `index.${format}.js`, // Generates the output file name based on the format.
       formats: ["cjs", "es"], // Specifies the output formats (CommonJS and ES modules).
     },
     rollupOptions: {
       external: ["react", "react-dom"], // Defines external dependencies for Rollup bundling.
+      input: resolve(__dirname, "src/index.ts"), // Specifies the entry point for Rollup bundling.
     },
     sourcemap: true, // Generates source maps for debugging.
     emptyOutDir: true, // Clears the output directory before building.
   },
   plugins: [dts()], // Uses the 'vite-plugin-dts' plugin for generating TypeScript declaration files (d.ts).
-});
+};
+
+export default defineConfig(PROD_CONFIG);

python/src/aiconfig/editor/client/config-overrides.js

@@ -2,4 +2,37 @@ const { alias, configPaths } = require("react-app-rewire-alias");
 
 const aliasMap = configPaths("./tsconfig.paths.json");
 
-module.exports = alias(aliasMap);
+module.exports = {
+  webpack: function (config) {
+    const webpackConfig = alias(aliasMap)(config);
+    return {
+      ...webpackConfig,
+      watchOptions: {
+        ...webpackConfig.watchOptions,
+        followSymlinks: true,
+      },
+      resolve: {
+        ...webpackConfig.resolve,
+        symlinks: false,
+      },
+    };
+  },
+  devServer: function (configFunction) {
+    return function (proxy, allowedHost) {
+      const devConfig = configFunction(proxy, allowedHost);
+      return {
+        ...devConfig,
+        watchFiles: {
+          paths: [
+            "src/**/*",
+            "node_modules/aiconfig-editor/**/*",
+            "node_modules/@lastmileai/aiconfig-editor/**/*",
+          ],
+          options: {
+            followSymlinks: true,
+          },
+        },
+      };
+    };
+  },
+};

python/src/aiconfig/editor/client/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
+    "build": "cd aiconfig-editor && yarn clean && yarn build && cd .. && react-app-rewired build",
     "postbuild": "node postbuild.js",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@datadog/browser-logs": "^5.7.0",
+    "@lastmileai/aiconfig-editor": "./aiconfig-editor",
     "@mantine/core": "^6.0.7",
     "aiconfig": "../../../../../typescript",
     "aiconfig-editor": "./aiconfig-editor",

python/src/aiconfig/editor/client/src/LocalEditor.tsx

@@ -6,7 +6,7 @@ import {
   RunPromptStreamCallback,
   RunPromptStreamErrorCallback,
   RunPromptStreamErrorEvent,
-} from "aiconfig-editor";
+} from "@lastmileai/aiconfig-editor";
 import { Flex, Loader, Image, createStyles } from "@mantine/core";
 import {
   AIConfig,

python/src/aiconfig/editor/client/tsconfig.paths.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "aiconfig-editor/*": ["aiconfig-editor/src/*"]
+      "aiconfig-editor/*": ["aiconfig-editor/src/*"],
+      "@lastmileai/aiconfig-editor/*": ["aiconfig-editor/src/*"]
     }
   }
 }

python/src/aiconfig/editor/client/yarn.lock

@@ -1780,6 +1780,29 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@lastmileai/aiconfig-editor@./aiconfig-editor":
+  version "0.1.4"
+  dependencies:
+    "@emotion/react" "^11.11.1"
+    "@mantine/carousel" "^6.0.7"
+    "@mantine/core" "^6.0.7"
+    "@mantine/dates" "^6.0.16"
+    "@mantine/dropzone" "^6.0.7"
+    "@mantine/form" "^6.0.7"
+    "@mantine/hooks" "^6.0.7"
+    "@mantine/modals" "^6.0.7"
+    "@mantine/notifications" "^6.0.7"
+    "@mantine/prism" "^6.0.7"
+    "@monaco-editor/react" "^4.6.0"
+    "@tabler/icons-react" "^2.44.0"
+    aiconfig "^1.1.3"
+    lodash "^4.17.21"
+    node-fetch "^3.3.2"
+    react-error-boundary "^4.0.12"
+    react-markdown "^8.0.6"
+    remark-gfm "^3.0.1"
+    uuid "^9.0.1"
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -3179,8 +3202,27 @@ aiconfig-editor@./aiconfig-editor:
     remark-gfm "^3.0.1"
     uuid "^9.0.1"
 
-aiconfig@../../../../../typescript, aiconfig@^1.1.3:
+aiconfig@../../../../../typescript:
+  version "1.1.5"
+  dependencies:
+    "@google-ai/generativelanguage" "^1.1.0"
+    "@huggingface/inference" "^2.6.4"
+    axios "^1.5.1"
+    google-auth-library "^9.1.0"
+    gpt-3-encoder "^1.1.4"
+    handlebars "^4.7.8"
+    js-yaml "^4.1.0"
+    lodash "^4.17.21"
+    node-fetch "^3.3.2"
+    openai "4.11.1"
+    typescript-json-schema "^0.60.0"
+    uuid "^9.0.1"
+    winston "^3.11.0"
+
+aiconfig@^1.1.3:
   version "1.1.5"
+  resolved "https://registry.yarnpkg.com/aiconfig/-/aiconfig-1.1.5.tgz#9bc9a608f0b6e4dfda2fefc4da4a97feb0ea45d7"
+  integrity sha512-b/UbUE504w+5wc90JhvJd/f0lnolbwkcVcK2VuP2+mv1ryBmNW71AxDanf1v+sh8iuRkhPH7pShkUcvncVUxSA==
   dependencies:
     "@google-ai/generativelanguage" "^1.1.0"
     "@huggingface/inference" "^2.6.4"

python/src/aiconfig/editor/server/static/asset-manifest.json

@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "/static/js/main.19541bdf.js",
+    "main.js": "/static/js/main.e40a27c0.js",
     "index.html": "/index.html",
-    "main.19541bdf.js.map": "/static/js/main.19541bdf.js.map"
+    "main.e40a27c0.js.map": "/static/js/main.e40a27c0.js.map"
   },
   "entrypoints": [
-    "static/js/main.19541bdf.js"
+    "static/js/main.e40a27c0.js"
   ]
 }

python/src/aiconfig/editor/server/static/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><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="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>AIConfig Editor</title><script defer="defer" src="/static/js/main.19541bdf.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><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="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>AIConfig Editor</title><script defer="defer" src="/static/js/main.e40a27c0.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>