From e0cf0efc7a8a33baf72080ef24d3807280abd186 Mon Sep 17 00:00:00 2001 From: Danny McGee Date: Wed, 27 Dec 2023 17:45:07 -0500 Subject: [PATCH] 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 | 5 ++- framework/vite.config.ts | 5 ++- package.json | 4 +- scripts/link-packages.cjs | 89 +++++++++++++++++++++++++++++++++++++++ studio-web/package.json | 12 +++--- studio-web/project.json | 6 +++ studio-web/src/index.ts | 1 + studio-web/vite.config.ts | 86 ++++++++++++++++++++----------------- studio/package.json | 2 +- 9 files changed, 161 insertions(+), 49 deletions(-) create mode 100644 scripts/link-packages.cjs diff --git a/framework/package.json b/framework/package.json index 652e700..70e88bb 100644 --- a/framework/package.json +++ b/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" diff --git a/framework/vite.config.ts b/framework/vite.config.ts index 1dacfb5..650f72e 100644 --- a/framework/vite.config.ts +++ b/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", + ], }, }, diff --git a/package.json b/package.json index 7eb7b00..b1c0857 100644 --- a/package.json +++ b/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", diff --git a/scripts/link-packages.cjs b/scripts/link-packages.cjs new file mode 100644 index 0000000..a112c76 --- /dev/null +++ b/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} + */ +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(); diff --git a/studio-web/package.json b/studio-web/package.json index c9dd07d..2b55d35 100644 --- a/studio-web/package.json +++ b/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" } diff --git a/studio-web/project.json b/studio-web/project.json index 6f29b37..cc6f2c8 100644 --- a/studio-web/project.json +++ b/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" } diff --git a/studio-web/src/index.ts b/studio-web/src/index.ts index 65788a5..d51e81e 100644 --- a/studio-web/src/index.ts +++ b/studio-web/src/index.ts @@ -1 +1,2 @@ +export * from "./lib/canvas-provider.element"; export * from "./lib/viewer.element"; diff --git a/studio-web/vite.config.ts b/studio-web/vite.config.ts index 1e2e7f9..40b5394 100644 --- a/studio-web/vite.config.ts +++ b/studio-web/vite.config.ts @@ -1,50 +1,58 @@ /// +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}"], + }, }); diff --git a/studio/package.json b/studio/package.json index 1e6e7db..0804219 100644 --- a/studio/package.json +++ b/studio/package.json @@ -1,6 +1,6 @@ { "name": "@storyteller/studio", - "version": "0.1.0", + "version": "0.0.1", "files": [ "studio_bg.wasm", "studio.js",