Internal: add prepack command to studio-base to create module (#1463)

packages/studio-base/package.json

@@ -13,14 +13,19 @@
     "email": "support@foxglove.dev"
   },
   "homepage": "https://foxglove.dev/",
-  "main": "src/index.ts",
+  "browser": "assets/index.js",
+  "main": "src/index",
   "files": [
-    "dist",
-    "src"
+    "assets",
+    "src/**/*.js",
+    "src/**/*.d.ts"
   ],
   "scripts": {
+    "prepack": "yarn build:webpack && yarn build:tsc",
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name storybook:build --exit-once-uploaded",
-    "storybook:build": "cross-env NODE_OPTIONS='--max-old-space-size=6144' TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' build-storybook --config-dir src/.storybook"
+    "storybook:build": "cross-env NODE_OPTIONS='--max-old-space-size=6144' TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' build-storybook --config-dir src/.storybook",
+    "build:tsc": "ttsc --module es2020 --project tsconfig.json",
+    "build:webpack": "cross-env TS_NODE_PROJECT=\"tsconfig.cli.json\" NODE_OPTIONS='--max-old-space-size=6144' webpack --mode production --progress"
   },
   "devDependencies": {
     "@fluentui/react": "8.23.2",
@@ -175,14 +180,18 @@
     "three": "0.130.1",
     "tinycolor2": "1.4.2",
     "ts-loader": "9.2.3",
+    "tsconfig-paths": "3.10.1",
+    "ttypescript": "1.5.12",
     "typescript": "4.3.5",
     "typescript-plugin-styled-components": "2.0.0",
+    "typescript-transform-paths": "3.1.0",
     "urdf-loader": "0.10.2",
     "url-search-params": "1.1.0",
     "use-debounce": "7.0.0",
     "use-pan-and-zoom": "0.6.2",
     "uuid": "8.3.2",
     "wasm-lz4": "2.0.0",
+    "webpack": "5.44.0",
     "xacro-parser": "0.3.1"
   }
 }

packages/studio-base/src/App.tsx

@@ -25,7 +25,7 @@ import PanelCatalogProvider from "@foxglove/studio-base/providers/PanelCatalogPr
 import ConsoleApi from "@foxglove/studio-base/services/ConsoleApi";
 import URDFAssetLoader from "@foxglove/studio-base/services/URDFAssetLoader";
 
-import "@foxglove/studio-base/styles/global.scss";
+import "./styles/global.scss";
 
 type AppProps = {
   availableSources: PlayerSourceDefinition[];

packages/studio-base/src/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@foxglove/tsconfig/base",
+  "include": ["./src/**/*", "./src/**/*.json", "./src/.storybook/**/*", "../package.json"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "es2020", "webworker"],
+    "paths": {
+      "@foxglove/studio-base/*": ["./*"]
+    }
+  }
+}

packages/studio-base/tsconfig.cli.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@foxglove/tsconfig/base",
+  "include": ["*.ts"],
+  "compilerOptions": {
+    "rootDir": ".",
+    "module": "commonjs",
+    "lib": ["es2020"]
+  }
+}

packages/studio-base/tsconfig.json

@@ -3,11 +3,17 @@
   "include": ["./src/**/*", "./src/**/*.json", "./src/.storybook/**/*", "../package.json"],
   "compilerOptions": {
     "rootDir": "./src",
-    "outDir": "./dist",
+    "baseUrl": "./src",
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "es2020", "webworker"],
+    "declarationMap": false,
+    "sourceMap": false,
     "paths": {
-      "@foxglove/studio-base/*": ["./src/*"]
-    }
+      "@foxglove/studio-base/*": ["./*"]
+    },
+    "plugins": [
+      { "transform": "typescript-transform-paths" },
+      { "transform": "typescript-transform-paths", "afterDeclarations": true }
+    ]
   }
 }

packages/studio-base/webpack.config.ts

@@ -0,0 +1,54 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+/* eslint-disable filenames/match-exported */
+
+import { CleanWebpackPlugin } from "clean-webpack-plugin";
+import path from "path";
+import { Configuration } from "webpack";
+
+import { WebpackArgv } from "@foxglove/studio-base/WebpackArgv";
+import { makeConfig } from "@foxglove/studio-base/webpack";
+
+const mainConfig = (env: unknown, argv: WebpackArgv): Configuration => {
+  const isDev = argv.mode === "development";
+  const allowUnusedVariables = isDev;
+
+  const appWebpackConfig = makeConfig(env, argv, { allowUnusedVariables });
+
+  const config: Configuration = {
+    ...appWebpackConfig,
+
+    target: "web",
+    context: path.resolve(__dirname, "src"),
+    entry: "./index.ts",
+    devtool: isDev ? "eval-cheap-module-source-map" : "inline-source-map",
+
+    // There should only be one version of react (and react-dom) in a component tree
+    // We expect the user to provide their version of react
+    externals: {
+      react: "react",
+      "react-dom": "react-dom",
+    },
+
+    optimization: {
+      minimize: false,
+    },
+
+    output: {
+      publicPath: "",
+      filename: "index.js",
+      path: path.resolve(__dirname, "assets"),
+      library: {
+        type: "umd",
+      },
+    },
+
+    plugins: [new CleanWebpackPlugin(), ...(appWebpackConfig.plugins ?? [])],
+  };
+
+  return config;
+};
+
+export default mainConfig;

yarn.lock

@@ -2428,14 +2428,18 @@ __metadata:
     three: 0.130.1
     tinycolor2: 1.4.2
     ts-loader: 9.2.3
+    tsconfig-paths: 3.10.1
+    ttypescript: 1.5.12
     typescript: 4.3.5
     typescript-plugin-styled-components: 2.0.0
+    typescript-transform-paths: 3.1.0
     urdf-loader: 0.10.2
     url-search-params: 1.1.0
     use-debounce: 7.0.0
     use-pan-and-zoom: 0.6.2
     uuid: 8.3.2
     wasm-lz4: 2.0.0
+    webpack: 5.44.0
     xacro-parser: 0.3.1
   languageName: unknown
   linkType: soft
@@ -5237,13 +5241,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json5@npm:^0.0.29":
-  version: 0.0.29
-  resolution: "@types/json5@npm:0.0.29"
-  checksum: e60b153664572116dfea673c5bda7778dbff150498f44f998e34b5886d8afc47f16799280e4b6e241c0472aef1bc36add771c569c68fc5125fc2ae519a3eb9ac
-  languageName: node
-  linkType: hard
-
 "@types/keyv@npm:^3.1.1":
   version: 3.1.1
   resolution: "@types/keyv@npm:3.1.1"
@@ -21914,7 +21911,7 @@ react-use@17.2.4:
   languageName: node
   linkType: hard
 
-"resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.9.0":
+"resolve@>=1.9.0, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.9.0":
   version: 1.20.0
   resolution: "resolve@npm:1.20.0"
   dependencies:
@@ -21934,7 +21931,7 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.13.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.9.0#~builtin<compat/resolve>":
+"resolve@patch:resolve@>=1.9.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.13.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.9.0#~builtin<compat/resolve>":
   version: 1.20.0
   resolution: "resolve@patch:resolve@npm%3A1.20.0#~builtin<compat/resolve>::version=1.20.0&hash=00b1ff"
   dependencies:
@@ -24401,15 +24398,14 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"tsconfig-paths@npm:^3.9.0":
-  version: 3.9.0
-  resolution: "tsconfig-paths@npm:3.9.0"
+"tsconfig-paths@npm:3.10.1, tsconfig-paths@npm:^3.9.0":
+  version: 3.10.1
+  resolution: "tsconfig-paths@npm:3.10.1"
   dependencies:
-    "@types/json5": ^0.0.29
-    json5: ^1.0.1
+    json5: ^2.2.0
     minimist: ^1.2.0
     strip-bom: ^3.0.0
-  checksum: 243b3b098c76a4ca90ea0431683f3755a4ff175c6123bcba5f7b4bd80fe2ef8fa9bdc8f4d525148a1e71ade7f3e037e7c0313ae177fd12398ab68f05c2c7f25d
+  checksum: 014ec869276114031d3bd6d2d9ce07c32c96ca6912f32285f46eeb4ca5270bd4c5e4de1353b838c66282157f089dedc8c3377c4e72e2f3d910e706c7b9ac5e6d
   languageName: node
   linkType: hard
 
@@ -24452,6 +24448,21 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"ttypescript@npm:1.5.12":
+  version: 1.5.12
+  resolution: "ttypescript@npm:1.5.12"
+  dependencies:
+    resolve: ">=1.9.0"
+  peerDependencies:
+    ts-node: ">=8.0.2"
+    typescript: ">=3.2.2"
+  bin:
+    ttsc: bin/tsc
+    ttsserver: bin/tsserver
+  checksum: 91b6d113d2ce4c7f93392b97a6df38ad6ce6ad4c80227e3d2e1d6948c53f8664018060a02020d8f28a3e461876232b78b4c38352c546a02f3b543a062147fafa
+  languageName: node
+  linkType: hard
+
 "tunnel-agent@npm:^0.6.0":
   version: 0.6.0
   resolution: "tunnel-agent@npm:0.6.0"
@@ -24614,6 +24625,17 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"typescript-transform-paths@npm:3.1.0":
+  version: 3.1.0
+  resolution: "typescript-transform-paths@npm:3.1.0"
+  dependencies:
+    minimatch: ^3.0.4
+  peerDependencies:
+    typescript: ">=3.6.5"
+  checksum: a80b54793a9cd72ae63c9de93ac59a1f2ef72cef1a3891c95fc3ffd3933e4a20cbc1cd9b9de3dd02179ecb1228dbfa1e3e5e1153f37de02e31161e8af1898560
+  languageName: node
+  linkType: hard
+
 typescript@4.3.5:
   version: 4.3.5
   resolution: "typescript@npm:4.3.5"