Fix studio-web build issues (#17)

* Add plugins for `wasm` and `top-level-await` to Vite config
* Avoid bundling dependencies
* Add external dependencies to project-level `package.json` manifests

framework/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@storyteller/framework",
   "version": "0.0.1",
-  "dependencies": {},
+  "dependencies": {
+    "@storyteller/utility": "0.0.1",
+    "lit": "^2.8.0"
+  },
   "main": "./index.js",
   "module": "./index.mjs",
   "typings": "./index.d.ts"

framework/vite.config.ts

@@ -35,7 +35,10 @@ export default defineConfig({
 		},
 		rollupOptions: {
 			// External packages that should not be bundled into your library.
-			external: [],
+			external: [
+				"@storyteller/utility",
+				"lit",
+			],
 		},
 	},
 

package.json

@@ -2,7 +2,9 @@
   "name": "@storyteller/source",
   "version": "0.0.0",
   "license": "MIT",
-  "scripts": {},
+  "scripts": {
+    "link-packages": "node ./scripts/link-packages.cjs"
+  },
   "private": true,
   "devDependencies": {
     "@nx/js": "16.9.1",

scripts/link-packages.cjs

@@ -0,0 +1,89 @@
+const cp = require("child_process");
+const path = require("path");
+const util = require("util");
+let chalk;
+
+const WS_ROOT = path.resolve(__dirname, "..");
+
+async function main() {
+	chalk = (await import("chalk")).default;
+
+	try {
+		await run("npm", ["link"], { cwd: path.join(WS_ROOT, "dist/studio") });
+		await run("npm", ["link"], { cwd: path.join(WS_ROOT, "dist/utility") });
+
+		await run("npm", ["link", "@storyteller/utility"], { cwd: path.join(WS_ROOT, "dist/framework") });
+		await run("npm", ["link"], { cwd: path.join(WS_ROOT, "dist/framework") });
+
+		await run("npm", ["link", "@storyteller/studio", "@storyteller/framework"], {
+			cwd: path.join(WS_ROOT, "dist/studio-web")
+		});
+		await run("npm", ["link"], { cwd: path.join(WS_ROOT, "dist/studio-web") });
+	} catch (err) {
+		handleError(err);
+	}
+}
+
+/**
+ * @param {string} command
+ * @param {readonly string[]} args
+ * @param {import("node:child_process").SpawnOptions} options
+ *
+ * @returns {Promise<void>}
+ */
+async function run(command, args, options) {
+	options.shell = true;
+
+	const prompt = !!options.cwd && typeof options.cwd === "string" && options.cwd !== WS_ROOT
+		? `[${path.relative(WS_ROOT, options.cwd)}] >`
+		: `>`;
+
+	console.log(chalk.dim(`${prompt} ${command} ${args.join(" ")}`));
+
+	return new Promise((resolve, reject) => {
+		cp.spawn(command, args, options)
+			.on("exit", code => {
+				if (code) reject(code)
+				else resolve();
+			})
+			.on("close", code => {
+				if (code) reject(code)
+				else resolve();
+			})
+			.on("error", reject);
+	});
+}
+
+/**
+ * @param {any} err
+ * @returns {never}
+ */
+function handleError(err) {
+	if (typeof err === "number") {
+		console.log(`${
+			chalk.bold.redBright.inverse(" ERROR ")
+		} Child process exited with code ${err}`);
+
+		process.exit(err);
+	}
+
+	if (err != null && err instanceof Error) {
+		console.log(`${
+			chalk.bold.redBright.inverse(" ERROR ")
+		} ${err.message}`);
+
+		if (err.stack)
+			console.log(chalk.dim(err.stack));
+
+		process.exit(1);
+	}
+
+	console.log(`${
+		chalk.bold.redBright.inverse(" ERROR ")
+	} Child process threw an exception: ${util.inspect(err)}`);
+
+	process.exit(1);
+}
+
+
+main();

studio-web/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@storyteller/studio-web",
   "version": "0.0.1",
-  "dependencies": {},
+  "dependencies": {
+    "@storyteller/framework": "0.0.1",
+    "@storyteller/studio": "0.0.1",
+    "lit": "^2.8.0"
+  },
   "main": "./index.js",
   "module": "./index.mjs",
-  "typings": "./index.d.ts",
-  "exports": {
-    "./canvas-provider": "./canvas-provider.element.js",
-    "./viewer": "./viewer.element.js"
-  }
+  "typings": "./index.d.ts"
 }

studio-web/project.json

@@ -7,6 +7,12 @@
     "build": {
       "executor": "@nx/vite:build",
       "outputs": ["{options.outputPath}"],
+      "dependsOn": [
+        {
+          "projects": ["studio"],
+          "target": "build:web"
+        }
+      ],
       "options": {
         "outputPath": "dist/studio-web"
       }

studio-web/src/index.ts

@@ -1 +1,2 @@
+export * from "./lib/canvas-provider.element";
 export * from "./lib/viewer.element";

studio-web/vite.config.ts

@@ -1,50 +1,58 @@
 /// <reference types='vitest' />
+import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
+import wasm from "vite-plugin-wasm";
+import topLevelAwait from "vite-plugin-top-level-await";
 import * as path from "path";
-import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
 
 export default defineConfig({
-  cacheDir: "../node_modules/.vite/studio-web",
+	cacheDir: "../node_modules/.vite/studio-web",
 
-  plugins: [
-    nxViteTsPaths(),
-    dts({
-      entryRoot: "src",
-      tsConfigFilePath: path.join(__dirname, "tsconfig.lib.json"),
-      skipDiagnostics: true,
-    }),
-  ],
+	plugins: [
+		nxViteTsPaths(),
+		wasm(),
+		topLevelAwait(),
+		dts({
+			entryRoot: "src",
+			tsConfigFilePath: path.join(__dirname, "tsconfig.lib.json"),
+			skipDiagnostics: true,
+		}),
+	],
 
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
+	// Uncomment this if you are using workers.
+	// worker: {
+	//  plugins: [ nxViteTsPaths() ],
+	// },
 
-  // Configuration for building your library.
-  // See: https://vitejs.dev/guide/build.html#library-mode
-  build: {
-    lib: {
-      // Could also be a dictionary or array of multiple entry points.
-      entry: "src/index.ts",
-      name: "studio-web",
-      fileName: "index",
-      // Change this to the formats you want to support.
-      // Don't forget to update your package.json as well.
-      formats: ["es", "cjs"],
-    },
-    rollupOptions: {
-      // External packages that should not be bundled into your library.
-      external: [],
-    },
-  },
+	// Configuration for building your library.
+	// See: https://vitejs.dev/guide/build.html#library-mode
+	build: {
+		lib: {
+			// Could also be a dictionary or array of multiple entry points.
+			entry: "src/index.ts",
+			name: "studio-web",
+			fileName: "index",
+			// Change this to the formats you want to support.
+			// Don't forget to update your package.json as well.
+			formats: ["es", "cjs"],
+		},
+		rollupOptions: {
+			// External packages that should not be bundled into your library.
+			external: [
+				"lit",
+				"@storyteller/framework",
+				"@storyteller/studio",
+			],
+		},
+	},
 
-  test: {
-    globals: true,
-    cache: {
-      dir: "../node_modules/.vitest",
-    },
-    environment: "jsdom",
-    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-  },
+	test: {
+		globals: true,
+		cache: {
+			dir: "../node_modules/.vitest",
+		},
+		environment: "jsdom",
+		include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+	},
 });

studio/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@storyteller/studio",
-	"version": "0.1.0",
+	"version": "0.0.1",
 	"files": [
 		"studio_bg.wasm",
 		"studio.js",