Update config

.vscode/launch.json

@@ -18,7 +18,7 @@
       "request": "launch",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "args": ["--runInBand"],
-      "cwd": "${workspaceFolder}/app",
+      "cwd": "${workspaceFolder}",
       "env": {
         "NODE_OPTIONS": "--require ts-node/register"
       },

desktop/main/StudioWindow.ts

@@ -16,7 +16,7 @@ import {
 import path from "path";
 
 import Logger from "@foxglove/log";
-import colors from "@foxglove/studio-base/styles/colors.module.scss";
+import colors from "@foxglove/studio-base/src/styles/colors.module.scss";
 
 import pkgInfo from "../../package.json";
 import getDevModeIcon from "./getDevModeIcon";

desktop/main/telemetry.ts

@@ -6,7 +6,7 @@ import { app } from "electron";
 import fs from "fs";
 import path from "path";
 
-import { AppSetting } from "@foxglove/studio-base/AppSetting";
+import { AppSetting } from "@foxglove/studio-base/src/AppSetting";
 
 function getTelemetrySettings(): [crashReportingEnabled: boolean, telemetryEnabled: boolean] {
   const datastoreDir = path.join(app.getPath("userData"), "studio-datastores", "settings");

desktop/package.json

@@ -2,7 +2,7 @@
   "name": "desktop",
   "private": true,
   "dependencies": {
-    "@foxglove/studio-base": "workspace:app",
+    "@foxglove/studio-base": "workspace:packages/studio-base",
     "@foxglove/studio-firebase": "workspace:packages/@foxglove/studio-firebase"
   }
 }

desktop/preload/index.ts

@@ -10,7 +10,7 @@ import { join as pathJoin } from "path";
 
 import { PreloaderSockets } from "@foxglove/electron-socket/preloader";
 import Logger from "@foxglove/log";
-import { NetworkInterface, OsContext } from "@foxglove/studio-base/OsContext";
+import { NetworkInterface, OsContext } from "@foxglove/studio-base/src/OsContext";
 
 import pkgInfo from "../../package.json";
 import { Desktop, ForwardedMenuEvent, NativeMenuBridge, Storage } from "../common/types";

docs/fluentui-quickstart.md

@@ -38,7 +38,7 @@ Intellisense/autocomplete and the "header" documentation in .d.ts files is prett
 
 ## Theme
 
-Our theme is configured in [theme/index.ts](../app/theme/index.ts) and provided to components via [ThemeProvider](../app/theme/ThemeProvider.tsx). It has a `palette` of colors as well as some "slots" for [semantic colors](https://docs.microsoft.com/en-us/javascript/api/theme/isemanticcolors?view=office-ui-fabric-react-latest) (such as `buttonBackground`) to customize certain components. You can also configure fonts, spacing, effects, and more in the theme object.
+Our theme is configured in [theme/index.ts](../packages/studio-base/theme/index.ts) and provided to components via [ThemeProvider](../packages/studio-base/theme/ThemeProvider.tsx). It has a `palette` of colors as well as some "slots" for [semantic colors](https://docs.microsoft.com/en-us/javascript/api/theme/isemanticcolors?view=office-ui-fabric-react-latest) (such as `buttonBackground`) to customize certain components. You can also configure fonts, spacing, effects, and more in the theme object.
 
 There's a Theme Designer tool at https://aka.ms/themedesigner. It has limited customization capabilities, but helps you get a feel for what theme colors will look like.
 
@@ -89,11 +89,11 @@ The list of icons can be found at: https://developer.microsoft.com/en-us/fluentu
 
 ### Using a new icon
 
-Since we only import the SVG icons we need, icons must be registered before they are used. This is done in the [ThemeProvider](../app/theme/ThemeProvider.tsx), and there is a corresponding type definition tracking the `RegisteredIconNames` at [fluentui.d.ts](../typings/fluentui.d.ts). The TypeScript compiler will prompt you to update both of these places before you can use a new icon.
+Since we only import the SVG icons we need, icons must be registered before they are used. This is done in the [ThemeProvider](../packages/studio-base/theme/ThemeProvider.tsx), and there is a corresponding type definition tracking the `RegisteredIconNames` at [fluentui.d.ts](../typings/fluentui.d.ts). The TypeScript compiler will prompt you to update both of these places before you can use a new icon.
 
 ### Custom SVG icons
 
-You can make a custom SVG icon conform to the Fluent UI theme by using `createSvgIcon()`. See [RosIcon.tsx](../app/components/RosIcon.tsx) for an example.
+You can make a custom SVG icon conform to the Fluent UI theme by using `createSvgIcon()`. See [RosIcon.tsx](../packages/studio-base/components/RosIcon.tsx) for an example.
 
 ```tsx
 import { createSvgIcon } from "@fluentui/react-icons-mdl2";

jest.config.json

@@ -1,7 +1,6 @@
 {
   "//": "Our top level jest config to reference all the projects under our monorepo. We exclude the desktop test since it involves performing a webpack build and doesn't support 'watch' or 'debug' in the same way",
   "projects": [
-    "<rootDir>/app/jest.config.json",
     "<rootDir>/ci/jest.config.json",
     "<rootDir>/packages/*/jest.config.json",
     "<rootDir>/packages/@foxglove/*/jest.config.json"

package.json

@@ -16,7 +16,7 @@
   },
   "homepage": "https://foxglove.dev/",
   "scripts": {
-    "clean": "tsc --build --clean packages/*/tsconfig.json && rimraf .webpack dist app/storybook-screenshots app/storybook-static",
+    "clean": "tsc --build --clean packages/*/tsconfig.json && rimraf .webpack dist packages/studio-base/storybook-screenshots packages/studio-base/storybook-static",
     "clean:package": "yarn && yarn clean && yarn build:prod && yarn package",
     "start": "electron desktop/.webpack",
     "build:packages": "tsc --build --verbose packages/**/tsconfig.json",
@@ -40,7 +40,6 @@
   },
   "workspaces": {
     "packages": [
-      "app",
       "desktop",
       "packages/**",
       "web"

packages/@foxglove/studio-firebase/package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@foxglove/log": "workspace:packages/log",
-    "@foxglove/studio-base": "workspace:app",
+    "@foxglove/studio-base": "workspace:packages/studio-base",
     "firebase": "9.0.0-beta.1"
   }
 }

packages/@foxglove/studio-firebase/tsconfig.json

@@ -6,5 +6,6 @@
     "outDir": "./dist",
     "lib": ["dom", "dom.iterable", "es2020"],
     "jsx": "react-jsx"
-  }
+  },
+  "references": [{ "path": "../../studio-base" }]
 }

packages/studio-base/jest.config.json

@@ -1,21 +1,26 @@
 {
   "//": "Note: we use babel-jest rather than ts-jest for performance reasons.",
   "transform": {
-    "\\.tsx?$": "<rootDir>/test/transformers/typescriptTransformerWithRawImports.js",
-    "\\.ne$": "<rootDir>/test/transformers/neTransformer.js",
-    "\\.(bin|template|wasm)$": "<rootDir>/test/transformers/rawTransformer.js"
+    "\\.tsx?$": "<rootDir>/src/test/transformers/typescriptTransformerWithRawImports.js",
+    "\\.ne$": "<rootDir>/src/test/transformers/neTransformer.js",
+    "\\.(bin|template|wasm)$": "<rootDir>/src/test/transformers/rawTransformer.js"
   },
   "globals": {
     "ReactNull": null
   },
-  "setupFiles": ["<rootDir>/test/setup.ts", "<rootDir>/test/setupEnzyme.ts", "jest-canvas-mock"],
-  "setupFilesAfterEnv": ["<rootDir>/test/setupTestFramework.ts"],
+  "setupFiles": [
+    "<rootDir>/src/test/setup.ts",
+    "<rootDir>/src/test/setupEnzyme.ts",
+    "jest-canvas-mock"
+  ],
+  "setupFilesAfterEnv": ["<rootDir>/src/test/setupTestFramework.ts"],
   "restoreMocks": true,
   "moduleNameMapper": {
-    "\\.svg$": "<rootDir>/test/mocks/MockSvg.tsx",
-    "react-monaco-editor": "<rootDir>/test/stubs/MonacoEditor.tsx",
-    "\\.(glb|md|png)$": "<rootDir>/test/mocks/fileMock.ts",
-    "\\.(css|scss)$": "<rootDir>/test/mocks/styleMock.ts"
+    "\\.svg$": "<rootDir>/src/test/mocks/MockSvg.tsx",
+    "react-monaco-editor": "<rootDir>/src/test/stubs/MonacoEditor.tsx",
+    "\\.(glb|md|png)$": "<rootDir>/src/test/mocks/fileMock.ts",
+    "\\.(css|scss)$": "<rootDir>/src/test/mocks/styleMock.ts",
+    "@foxglove/studio-base/(.*)": "<rootDir>/src/$1"
   },
   "testRunner": "jest-circus/runner",
   "//": "Native find is slow because it does not exclude files: https://github.com/facebook/jest/pull/11264#issuecomment-825377579",

packages/studio-base/package.json

@@ -1,6 +1,23 @@
 {
   "name": "@foxglove/studio-base",
+  "version": "0.0.1",
+  "description": "Core components of Foxglove Studio",
+  "license": "MPL-2.0",
   "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/foxglove/studio.git"
+  },
+  "author": {
+    "name": "Foxglove Technologies",
+    "email": "support@foxglove.dev"
+  },
+  "homepage": "https://foxglove.dev/",
+  "main": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name storybook:build --exit-once-uploaded",
     "storybook:build": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' build-storybook"

packages/studio-base/src/players/UserNodePlayer/nodeTransformerWorker/typescript/rawUserUtils.ts

@@ -2,12 +2,12 @@
 // 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/
 
-import markers from "@foxglove/studio-base/players/UserNodePlayer/nodeTransformerWorker/typescript/userUtils/markers.ts?raw";
-import pointClouds from "@foxglove/studio-base/players/UserNodePlayer/nodeTransformerWorker/typescript/userUtils/pointClouds.ts?raw";
-import readers from "@foxglove/studio-base/players/UserNodePlayer/nodeTransformerWorker/typescript/userUtils/readers.ts?raw";
-import time from "@foxglove/studio-base/players/UserNodePlayer/nodeTransformerWorker/typescript/userUtils/time.ts?raw";
-import types from "@foxglove/studio-base/players/UserNodePlayer/nodeTransformerWorker/typescript/userUtils/types.ts?raw";
-import vectors from "@foxglove/studio-base/players/UserNodePlayer/nodeTransformerWorker/typescript/userUtils/vectors.ts?raw";
+import markers from "./userUtils/markers.ts?raw";
+import pointClouds from "./userUtils/pointClouds.ts?raw";
+import readers from "./userUtils/readers.ts?raw";
+import time from "./userUtils/time.ts?raw";
+import types from "./userUtils/types.ts?raw";
+import vectors from "./userUtils/vectors.ts?raw";
 
 export default [
   { fileName: "pointClouds.ts", sourceCode: pointClouds },

packages/studio-base/src/test/transformers/typescriptTransformerWithRawImports.js

@@ -5,25 +5,24 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const babelJest = require("babel-jest").default;
 const fs = require("fs");
+const path = require("path");
 
 // look for `?raw` import statements
 // re-write these into `const variable = "string source";`;
 const importRegEx = /^import (.*) from "(.*)\?raw";$/gm;
-const importReplacer = (_, p1, p2) => {
-  const resolved = require.resolve(p2);
-  const rawFile = fs.readFileSync(resolved, { encoding: "utf-8" });
-  return `const ${p1} = ${JSON.stringify(rawFile.toString())};`;
-};
-
-function rewriteSource(source) {
-  return source.replace(importRegEx, importReplacer);
+function rewriteSource(source, sourcePath) {
+  return source.replace(importRegEx, (_, p1, p2) => {
+    const resolved = require.resolve(p2, { paths: [path.dirname(sourcePath)] });
+    const rawFile = fs.readFileSync(resolved, { encoding: "utf-8" });
+    return `const ${p1} = ${JSON.stringify(rawFile.toString())};`;
+  });
 }
 
 module.exports = {
-  process(sourceText, ...args) {
-    return babelJest.process(rewriteSource(sourceText), ...args);
+  process(sourceText, sourcePath, opt) {
+    return babelJest.process(rewriteSource(sourceText, sourcePath), sourcePath, opt);
   },
-  getCacheKey(sourceText, ...args) {
-    return babelJest.getCacheKey(rewriteSource(sourceText), ...args);
+  getCacheKey(sourceText, sourcePath, opt) {
+    return babelJest.getCacheKey(rewriteSource(sourceText, sourcePath), sourcePath, opt);
   },
 };

packages/studio-base/tsconfig.json

@@ -2,13 +2,12 @@
   "extends": "@foxglove/tsconfig/tsconfig.base.json",
   "include": ["./**/*", "./**/*.json", "./.storybook/**/*", "../package.json"],
   "compilerOptions": {
-    "noEmit": true,
     "rootDir": "../",
+    "outDir": "./dist",
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "es2020"],
     "paths": {
-      // This is only needed for vscode import suggestions
-      "@foxglove/studio-base/*": ["./*"]
+      "@foxglove/studio-base/*": ["./src/*"]
     }
   }
 }

packages/studio-base/webpack.ts

@@ -43,6 +43,7 @@ export function makeConfig(
     resolve: {
       extensions: [".js", ".ts", ".jsx", ".tsx"],
       alias: {
+        "@foxglove/studio-base": path.resolve(__dirname, "src"),
         "react-dnd": require.resolve("react-dnd"),
         "styled-components": require.resolve("styled-components"),
       },
@@ -218,6 +219,9 @@ export function makeConfig(
             compilerOptions: {
               noUnusedLocals: !allowUnusedVariables,
               noUnusedParameters: !allowUnusedVariables,
+              paths: {
+                "@foxglove/studio-base/*": [path.join(__dirname, "src/*")],
+              },
             },
           },
         },

web/package.json

@@ -7,7 +7,7 @@
     "build:prod": "webpack --mode production --progress"
   },
   "dependencies": {
-    "@foxglove/studio-base": "workspace:app",
+    "@foxglove/studio-base": "workspace:packages/studio-base",
     "@foxglove/studio-firebase": "workspace:packages/@foxglove/studio-firebase"
   },
   "devDependencies": {

yarn.lock

@@ -2653,9 +2653,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@foxglove/studio-base@workspace:app":
+"@foxglove/studio-base@workspace:packages/studio-base":
   version: 0.0.0-use.local
-  resolution: "@foxglove/studio-base@workspace:app"
+  resolution: "@foxglove/studio-base@workspace:packages/studio-base"
   dependencies:
     "@fluentui/react": 8.16.0
     "@fluentui/react-icons-mdl2": 1.1.1
@@ -2799,7 +2799,7 @@ __metadata:
   resolution: "@foxglove/studio-firebase@workspace:packages/@foxglove/studio-firebase"
   dependencies:
     "@foxglove/log": "workspace:packages/log"
-    "@foxglove/studio-base": "workspace:app"
+    "@foxglove/studio-base": "workspace:packages/studio-base"
     firebase: 9.0.0-beta.1
     typescript: 4.3.2
   languageName: unknown
@@ -10796,7 +10796,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "desktop@workspace:desktop"
   dependencies:
-    "@foxglove/studio-base": "workspace:app"
+    "@foxglove/studio-base": "workspace:packages/studio-base"
     "@foxglove/studio-firebase": "workspace:packages/@foxglove/studio-firebase"
   languageName: unknown
   linkType: soft
@@ -26350,7 +26350,7 @@ typescript@4.3.2:
   version: 0.0.0-use.local
   resolution: "web@workspace:web"
   dependencies:
-    "@foxglove/studio-base": "workspace:app"
+    "@foxglove/studio-base": "workspace:packages/studio-base"
     "@foxglove/studio-firebase": "workspace:packages/@foxglove/studio-firebase"
     "@types/copy-webpack-plugin": 8.0.0
     copy-webpack-plugin: 9.0.0