@powerhousedao/builder-tools 0.3.2 → 0.3.4

package/dist/connect-studio/helpers.d.ts

@@ -1,4 +1,5 @@
 import { PowerhouseConfig } from "@powerhousedao/config/powerhouse";
+export declare function copyConnect(sourcePath: string, targetPath: string): void;
 export declare function backupIndexHtml(appPath: string, restore?: boolean): void;
 export declare function removeBase64EnvValues(appPath: string): void;
 export declare function readJsonFile(filePath: string): PowerhouseConfig | null;

package/dist/connect-studio/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../connect-studio/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,UAAQ,QAS/D;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,QA+BpD;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAStE"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../connect-studio/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAIpE,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,QAUjE;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,UAAQ,QAS/D;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,QAgCpD;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAStE"}

package/dist/connect-studio/helpers.js

@@ -1,5 +1,16 @@
 import fs from "node:fs";
 import { join, resolve } from "node:path";
+export function copyConnect(sourcePath, targetPath) {
+    try {
+        // Ensure targetPath is removed before copying
+        fs.rmSync(targetPath, { recursive: true, force: true });
+        // Copy everything from sourcePath to targetPath
+        fs.cpSync(sourcePath, targetPath, { recursive: true });
+    }
+    catch (error) {
+        console.error(`❌ Error copying ${sourcePath} to ${targetPath}:`, error);
+    }
+}
 export function backupIndexHtml(appPath, restore = false) {
     const filePath = join(appPath, "index.html");
     const backupPath = join(appPath, "index.html.bak");
@@ -21,6 +32,7 @@ export function removeBase64EnvValues(appPath) {
         const modifiedData = data
             .replace(/"LOCAL_DOCUMENT_MODELS":\s*".*?",/, `"LOCAL_DOCUMENT_MODELS": "",`)
             .replace(/"LOCAL_DOCUMENT_EDITORS":\s*".*?"/, `"LOCAL_DOCUMENT_EDITORS": ""`);
+        console.log("Modified data:", modifiedData);
         // Write the modified content back to the file
         fs.writeFile(filePath, modifiedData, "utf-8", (err) => {
             if (err) {

package/dist/connect-studio/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../connect-studio/server.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAkEhD,wBAAsB,WAAW,CAC/B,OAAO,GAAE,kBAER,iBA8HF"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../connect-studio/server.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAkEhD,wBAAsB,WAAW,CAC/B,OAAO,GAAE,kBAER,iBAmFF"}

package/dist/connect-studio/server.js

@@ -5,7 +5,7 @@ import { createRequire } from "node:module";
 import { join, resolve } from "node:path";
 import { createLogger, createServer } from "vite";
 import { viteEnvs } from "vite-envs";
-import { backupIndexHtml, removeBase64EnvValues } from "./helpers.js";
+import { backupIndexHtml, copyConnect, removeBase64EnvValues, } from "./helpers.js";
 import { getStudioConfig } from "./vite-plugins/base.js";
 import { viteLoadExternalPackages } from "./vite-plugins/external-packages.js";
 import { generateImportMapPlugin } from "./vite-plugins/importmap.js";
@@ -72,8 +72,10 @@ export async function startServer(options = {
     ensureNodeVersion();
     const connectPath = options.connectPath ?? resolveConnect();
     const projectRoot = process.cwd();
+    const studioPath = join(projectRoot, ".ph", "connect-studio");
+    copyConnect(connectPath, studioPath);
     // backups index html if running on windows
-    backupIndexHtml(connectPath, true);
+    backupIndexHtml(studioPath, true);
     const PORT = process.env.PORT ? parseInt(process.env.PORT) : 3000;
     const HOST = process.env.HOST ? process.env.HOST : "0.0.0.0";
     const OPEN_BROWSER = typeof process.env.OPEN_BROWSER === "string"
@@ -81,8 +83,8 @@ export async function startServer(options = {
         : false;
     const studioConfig = getStudioConfig();
     // needed for viteEnvs
-    if (!fs.existsSync(join(connectPath, "src"))) {
-        fs.mkdirSync(join(connectPath, "src"));
+    if (!fs.existsSync(join(studioPath, "src"))) {
+        fs.mkdirSync(join(studioPath, "src"));
     }
     process.env.PH_CONNECT_STUDIO_MODE = "true";
     process.env.PH_CONNECT_CLI_VERSION = options.phCliVersion;
@@ -90,7 +92,7 @@ export async function startServer(options = {
     const config = {
         customLogger: logger,
         configFile: false,
-        root: connectPath,
+        root: studioPath,
         server: {
             port: PORT,
             open: options.open ?? OPEN_BROWSER,
@@ -107,66 +109,26 @@ export async function startServer(options = {
                     find: "react-dom",
                     replacement: join(projectRoot, "node_modules", "react-dom"),
                 },
-                {
-                    find: "@powerhousedao/reactor-browser",
-                    replacement: join(projectRoot, "node_modules", "@powerhousedao", "reactor-browser", "dist/src"),
-                },
             ],
-            // Resolve to the node_modules in the project root
-            // "@powerhousedao/design-system/scalars": join(
-            //   projectRoot,
-            //   "node_modules",
-            //   "@powerhousedao",
-            //   "design-system",
-            //   "dist",
-            //   "scalars",
-            // ),
-            // "@powerhousedao/design-system": join(
-            //   projectRoot,
-            //   "node_modules",
-            //   "@powerhousedao",
-            //   "design-system",
-            // ),
-            // "@powerhousedao/scalars": join(
-            //   projectRoot,
-            //   "node_modules",
-            //   "@powerhousedao",
-            //   "scalars",
-            // ),
-            // "@powerhousedao/reactor-browser/hooks/useUiNodesContext": join(
-            //   projectRoot,
-            //   "node_modules",
-            //   "@powerhousedao",
-            //   "reactor-browser",
-            //   "dist/src/hooks",
-            // ),
-            // react: join(projectRoot, "node_modules", "react"),
-            // "react-dom": join(projectRoot, "node_modules", "react-dom"),
-            // },
         },
         plugins: [
-            viteConnectDevStudioPlugin(true, connectPath),
-            viteLoadExternalPackages(options.packages, true),
+            viteConnectDevStudioPlugin(true, studioPath),
+            viteLoadExternalPackages(options.packages, studioPath, true),
             viteEnvs({
-                declarationFile: join(connectPath, ".env"),
+                declarationFile: join(studioPath, ".env"),
                 computedEnv,
             }),
-            runShellScriptPlugin("vite-envs.sh", connectPath),
+            runShellScriptPlugin("vite-envs.sh", studioPath),
             options.https &&
                 basicSsl({
                     name: "Powerhouse Connect Studio",
                 }),
-            generateImportMapPlugin(connectPath, [
+            generateImportMapPlugin(studioPath, [
                 { name: "react", provider: "esm.sh" },
                 { name: "react-dom", provider: "esm.sh" },
                 "@powerhousedao/reactor-browser",
             ]),
         ],
-        build: {
-            rollupOptions: {
-                input: "index.html",
-            },
-        },
     };
     const server = await createServer(config);
     await server.listen();

package/dist/connect-studio/vite-plugins/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/base.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAuB,MAAM,EAAE,YAAY,EAAiB,MAAM,MAAM,CAAC;AAGhF,eAAO,MAAM,WAAW,UAGvB,CAAC;AAEF,eAAO,MAAM,4BAA4B,0BAA0B,CAAC;AACpE,eAAO,MAAM,6BAA6B,2BAA2B,CAAC;AACtE,eAAO,MAAM,iBAAiB,kBAAkB,CAAC;AAEjD,eAAO,MAAM,cAAc,+EAIjB,CAAC;AAEX,wBAAgB,eAAe,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG;IAC7D,CAAC,4BAA4B,CAAC,CAAC,EAAE,MAAM,CAAC;IACxC,CAAC,6BAA6B,CAAC,CAAC,EAAE,MAAM,CAAC;IACzC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CA8BA;AAKD,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC,EAAE,GACnD,MAAM,CAgER;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC9B,YAAY,CAgDd;AAED,wBAAsB,eAAe,CAAC,WAAW,EAAE,MAAM;iBAsBT,OAAO;;GAOtD"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/base.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAuB,MAAM,EAAE,YAAY,EAAiB,MAAM,MAAM,CAAC;AAGhF,eAAO,MAAM,WAAW,UAIvB,CAAC;AAEF,eAAO,MAAM,4BAA4B,0BAA0B,CAAC;AACpE,eAAO,MAAM,6BAA6B,2BAA2B,CAAC;AACtE,eAAO,MAAM,iBAAiB,kBAAkB,CAAC;AAEjD,eAAO,MAAM,cAAc,+EAIjB,CAAC;AAEX,wBAAgB,eAAe,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG;IAC7D,CAAC,4BAA4B,CAAC,CAAC,EAAE,MAAM,CAAC;IACxC,CAAC,6BAA6B,CAAC,CAAC,EAAE,MAAM,CAAC;IACzC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CA8BA;AAKD,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC,EAAE,GACnD,MAAM,CAgER;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC9B,YAAY,CAgDd;AAED,wBAAsB,eAAe,CAAC,WAAW,EAAE,MAAM;iBAsBT,OAAO;;GAOtD"}

package/dist/connect-studio/vite-plugins/base.js

@@ -7,6 +7,7 @@ import { normalizePath } from "vite";
 export const externalIds = [
     /^react(-dom)?(\/.*)?$/,
     /^@powerhousedao\/reactor-browser(\/.*)?$/,
+    /^node:.*$/,
 ];
 export const LOCAL_DOCUMENT_MODELS_IMPORT = "LOCAL_DOCUMENT_MODELS";
 export const LOCAL_DOCUMENT_EDITORS_IMPORT = "LOCAL_DOCUMENT_EDITORS";

package/dist/connect-studio/vite-plugins/external-packages.d.ts

@@ -1,6 +1,5 @@
 import { PluginOption } from "vite";
 export declare const EXTERNAL_PACKAGES_IMPORT = "PH:EXTERNAL_PACKAGES";
-export declare const IMPORT_SCRIPT_FILE: string;
-export declare function generateImportScript(packages: string[]): string;
-export declare const viteLoadExternalPackages: (packages: string[] | undefined, hmr?: boolean) => PluginOption;
+export declare const IMPORT_SCRIPT_FILE = "external-packages.js";
+export declare const viteLoadExternalPackages: (packages: string[] | undefined, targetDir: string, hmr?: boolean) => PluginOption;
 //# sourceMappingURL=external-packages.d.ts.map

package/dist/connect-studio/vite-plugins/external-packages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"external-packages.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/external-packages.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,YAAY,EAAE,MAAM,MAAM,CAAC;AAOnD,eAAO,MAAM,wBAAwB,yBAAyB,CAAC;AAC/D,eAAO,MAAM,kBAAkB,QAE9B,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,EAAE,UAiCtD;AAED,eAAO,MAAM,wBAAwB,GACnC,UAAU,MAAM,EAAE,GAAG,SAAS,EAC9B,aAAW,KACV,YA4CF,CAAC"}
+{"version":3,"file":"external-packages.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/external-packages.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAOpC,eAAO,MAAM,wBAAwB,yBAAyB,CAAC;AAC/D,eAAO,MAAM,kBAAkB,yBAAyB,CAAC;AAoCzD,eAAO,MAAM,wBAAwB,GACnC,UAAU,MAAM,EAAE,GAAG,SAAS,EAC9B,WAAW,MAAM,EACjB,aAAW,KACV,YA8CF,CAAC"}

package/dist/connect-studio/vite-plugins/external-packages.js

@@ -1,19 +1,18 @@
 import { getConfig } from "@powerhousedao/config/powerhouse";
 import fs from "node:fs";
-import { dirname, join } from "node:path";
-import { normalizePath } from "vite";
+import { join } from "node:path";
 import { viteIgnoreStaticImport, viteReplaceImports } from "./base.js";
 // TODO use config path?
 const __dirname = join(process.cwd(), ".ph/");
 // import.meta.dirname || dirname(fileURLToPath(import.meta.url));
 export const EXTERNAL_PACKAGES_IMPORT = "PH:EXTERNAL_PACKAGES";
-export const IMPORT_SCRIPT_FILE = normalizePath(join(__dirname, "external-packages.js"));
-export function generateImportScript(packages) {
-    const targetDir = dirname(IMPORT_SCRIPT_FILE);
+export const IMPORT_SCRIPT_FILE = "external-packages.js";
+function generateImportScript(packages, targetDir) {
     // create file if it doesn't exist, also create path if it doesn't exist (recursive)
     if (!fs.existsSync(targetDir)) {
         fs.mkdirSync(targetDir, { recursive: true });
     }
+    const scriptPath = join(targetDir, IMPORT_SCRIPT_FILE);
     const imports = [];
     const moduleNames = [];
     let counter = 0;
@@ -32,23 +31,23 @@ export function generateImportScript(packages) {
         .join(",\n")}
     ];`;
     const fileContent = `${imports.join("\n")}\n\n${exportStatement}`;
-    fs.writeFileSync(IMPORT_SCRIPT_FILE, fileContent);
-    return IMPORT_SCRIPT_FILE;
+    fs.writeFileSync(scriptPath, fileContent);
+    return scriptPath;
 }
-export const viteLoadExternalPackages = (packages, hmr = false) => {
+export const viteLoadExternalPackages = (packages, targetDir, hmr = false) => {
     if (!packages?.length && !hmr) {
         return viteIgnoreStaticImport([EXTERNAL_PACKAGES_IMPORT]);
     }
-    generateImportScript(packages ?? []);
+    const importScriptPath = generateImportScript(packages ?? [], targetDir);
     process.env.LOAD_EXTERNAL_PACKAGES = "true";
     return [
-        viteReplaceImports({ [EXTERNAL_PACKAGES_IMPORT]: IMPORT_SCRIPT_FILE }),
+        viteReplaceImports({ [EXTERNAL_PACKAGES_IMPORT]: importScriptPath }),
         hmr && {
             name: "vite-plugin-studio-external-packages",
             handleHotUpdate({ file, server, modules }) {
                 if (file.endsWith("powerhouse.config.json")) {
                     const config = getConfig(file);
-                    generateImportScript(config.packages?.map((p) => p.packageName) ?? []);
+                    generateImportScript(config.packages?.map((p) => p.packageName) ?? [], targetDir);
                     config.packages?.forEach((pkg) => console.log("-> Loading package:", pkg.packageName));
                     const module = server.moduleGraph.getModuleById(IMPORT_SCRIPT_FILE);
                     if (module) {

package/dist/connect-studio/vite-plugins/importmap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"importmap.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/importmap.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAGpC,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,QAAQ,CAAC;AAoOjD;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,CAAC,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC,EAAE,GAC9D,YAAY,CAUd"}
+{"version":3,"file":"importmap.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/importmap.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAGpC,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,QAAQ,CAAC;AAkRjD;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,CAAC,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC,EAAE,GAC9D,YAAY,CA+Bd"}

package/dist/connect-studio/vite-plugins/importmap.js

@@ -101,8 +101,7 @@ function importFromEsmSh(name) {
         [`${name}/`]: `https://esm.sh/${name}/`,
     };
 }
-async function importFromNodeModules(name, modulesDir, importMapDeps) {
-    console.log(`Bundling dependency: ${name}`);
+async function importFromNodeModules(name, modulesDir, importMapDeps, baseUrl) {
     const importMap = {};
     const { packageJson, path: srcPath } = await findPackageJson(name);
     const entries = await getPackageExports(name, packageJson, srcPath);
@@ -113,31 +112,34 @@ async function importFromNodeModules(name, modulesDir, importMapDeps) {
     const fileName = path.basename(entries.get("")?.export || "index", path.extname(indexFile));
     const outputPath = path.join(modulesDir, name);
     // Bundle and tree-shake only dependencies (exclude the actual library code)
-    await build({
-        entryPoints: Array.from(entries.values()).map((value) => path.join(srcPath, value.file)),
-        outdir: outputPath,
-        bundle: true,
-        format: "esm",
-        platform: "browser",
-        target: "esnext",
-        splitting: true,
-        external: nodeModules.concat(Array.from(importMapDeps)), // Exclude dependencies already in import map
-        sourcemap: true,
-        minify: false,
-    });
+    const buildModule = () => {
+        console.log(`Bundling dependency: ${name}`);
+        return build({
+            entryPoints: Array.from(entries.values()).map((value) => path.join(srcPath, value.file)),
+            outdir: outputPath,
+            bundle: true,
+            format: "esm",
+            platform: "browser",
+            target: "esnext",
+            splitting: true,
+            external: nodeModules.concat(Array.from(importMapDeps)), // Exclude dependencies already in import map
+            sourcemap: false,
+            minify: false,
+        });
+    };
     // Add entry to import map
     importMap[name] = `./modules/${name}/${fileName}.js`;
     entries.forEach((entry, key) => {
-        importMap[path.join(name, key)] =
-            `./modules/${path.join(name, entry.export)}`;
+        importMap[path.join(name, key)] = path.join(baseUrl, `./modules/${path.join(name, entry.export)}`);
     });
-    return importMap;
+    return { importMap, buildModule };
 }
-async function generateImportMap(outputDir, dependencies) {
+async function generateImportMap(outputDir, dependencies, baseUrl) {
     const modulesDir = path.join(outputDir, "/modules");
     await fs.mkdir(modulesDir, { recursive: true });
     const importMapDeps = new Set(dependencies.map((dep) => (typeof dep === "string" ? dep : dep.name)));
     let importMap = {};
+    const buildModules = [];
     for (const dependency of dependencies) {
         const name = typeof dependency === "string" ? dependency : dependency.name;
         const provider = typeof dependency === "string" ? "node_modules" : dependency.provider;
@@ -146,19 +148,47 @@ async function generateImportMap(outputDir, dependencies) {
             importMap = { ...importMap, ...imports };
         }
         else if (provider.toString() === "node_modules") {
-            const imports = await importFromNodeModules(name, modulesDir, importMapDeps);
+            const { importMap: imports, buildModule } = await importFromNodeModules(name, modulesDir, importMapDeps, baseUrl);
             importMap = { ...importMap, ...imports };
+            buildModules.push(buildModule);
         }
         else {
             throw new Error(`Unsupported provider: ${provider}`);
         }
     }
-    const indexPath = path.join(outputDir, "index.html");
-    let html = await fs.readFile(indexPath, "utf-8");
-    const importMapScript = `<script type="importmap">${JSON.stringify({ imports: importMap }, null, 2)}</script>`;
-    html = html.replace("</head>", `${importMapScript}\n</head>`);
-    await fs.writeFile(indexPath, html, "utf-8");
-    console.log("✅ Import map added to index.html");
+    return {
+        importMap,
+        buildModules: async () => {
+            await Promise.all(buildModules.map((build) => build()));
+        },
+    };
+}
+async function addImportMapToHTML(importMap, html) {
+    let newHtml = "";
+    // Regex to find existing import map
+    const importMapRegex = /<script type="importmap">(.*?)<\/script>/s;
+    const match = importMapRegex.exec(html);
+    // If an import map exists, merge the imports
+    if (match) {
+        try {
+            const existingImportMap = JSON.parse(match[1]);
+            existingImportMap.imports = {
+                ...existingImportMap.imports,
+                ...importMap,
+            };
+            const mergedImportMapString = JSON.stringify(existingImportMap, null, 2);
+            newHtml = html.replace(importMapRegex, `<script type="importmap">${mergedImportMapString}</script>`);
+        }
+        catch (error) {
+            console.error("⚠️ Error parsing existing import map:", error);
+        }
+    }
+    else {
+        const importMapString = JSON.stringify({ imports: importMap }, null, 2);
+        const importMapScript = `<script type="importmap">${importMapString}</script>`;
+        newHtml = html.replace("</head>", `${importMapScript}\n</head>`);
+    }
+    return newHtml;
 }
 /**
  * Vite plugin to bundle or copy dependencies and inject an import map into `index.html`.
@@ -174,13 +204,30 @@ async function generateImportMap(outputDir, dependencies) {
  * @returns {Plugin} A Vite plugin that processes dependencies and injects an import map.
  */
 export function generateImportMapPlugin(outputDir, dependencies) {
+    let buildModules = undefined;
+    let importMap = {};
     return {
         name: "vite-plugin-importmap",
-        async closeBundle() {
-            await generateImportMap(outputDir, dependencies);
+        enforce: "post",
+        // generates import map according to the base url
+        // and collects build method for each dependency
+        async configResolved(config) {
+            const result = await generateImportMap(outputDir, dependencies, config.base);
+            importMap = result.importMap;
+            buildModules = result.buildModules;
+        },
+        // builds modules when building the bundle
+        closeBundle() {
+            return buildModules?.();
+        },
+        // builds modules when starting the dev server
+        configureServer() {
+            return buildModules?.();
         },
-        async configureServer() {
-            await generateImportMap(outputDir, dependencies);
+        // adds importmap to the html
+        async transformIndexHtml(html) {
+            const newHtml = await addImportMapToHTML(importMap, html);
+            return newHtml || html;
         },
     };
 }

package/dist/connect-studio/vite-plugins/studio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"studio.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/studio.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AAanD,wBAAgB,eAAe,CAC7B,MAAM,EAAE,aAAa,EACrB,kBAAkB,CAAC,EAAE,MAAM,EAC3B,WAAW,CAAC,EAAE,MAAM,QA8DrB;AAED,wBAAgB,0BAA0B,CACxC,OAAO,qBAAQ,EACf,WAAW,EAAE,MAAM,EACnB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,YAAY,EAAE,CAoEhB"}
+{"version":3,"file":"studio.d.ts","sourceRoot":"","sources":["../../../connect-studio/vite-plugins/studio.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AAanD,wBAAgB,eAAe,CAC7B,MAAM,EAAE,aAAa,EACrB,kBAAkB,CAAC,EAAE,MAAM,EAC3B,WAAW,CAAC,EAAE,MAAM,QA8DrB;AAED,wBAAgB,0BAA0B,CACxC,OAAO,qBAAQ,EACf,WAAW,EAAE,MAAM,EACnB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,YAAY,EAAE,CAqEhB"}

package/dist/connect-studio/vite-plugins/studio.js

@@ -65,6 +65,7 @@ export function viteConnectDevStudioPlugin(enabled = false, connectPath, env) {
                 "react",
                 "react-dom",
                 "@powerhousedao/reactor-browser",
+                ...externalIds,
             ]),
         localDocumentModelsPath
             ? viteReplaceImports({