Restructuring for Multi-Platform Extensions (Phase 1)

.github/workflows/build-and-lint-extension.yml

@@ -18,4 +18,4 @@ jobs:
           cache: "npm"
           cache-dependency-path: ./extension/package-lock.json
       - working-directory: extension
-        run: npm install && npm run lint && npm run format:check && npm run package:production
+        run: npm install && npm run lint && npm run format:check && npm run package:chrome:production

extension/.eslintrc.js

@@ -60,4 +60,5 @@ module.exports = {
     project: "./tsconfig.json",
     tsconfigRootDir: __dirname,
   },
+  ignorePatterns: [".eslintrc.js", "config/"],
 };

extension/.gitignore

@@ -2,5 +2,5 @@
 .idea/
 
 node_modules/
-build/*
 packages/*
+platforms/chrome/build/*

extension/config/tailwind.config.js

@@ -420,7 +420,7 @@ module.exports = {
     require("tailwind-scrollbar-hide"),
     require("tailwindcss-animate"),
   ],
-  content: ["./app/**/*.tsx"],
+  content: ["./ui/**/*.tsx"],
   safelist: [
     {
       pattern: /^bg-/,

extension/package.json

@@ -4,22 +4,24 @@
   "description": "Dust Chrome Extension",
   "scripts": {
     "clean": "rm -rf build/*",
-    "dev": "npm run clean && tsx run/watch.ts --mode=development",
-    "package:production": "tsx run/build.ts",
-    "package:release": "tsx run/build.ts --release",
-    "analyze": "tsx run/build.ts --analyze",
-    "lint": "eslint app",
+    "dev:chrome": "npm run clean && tsx run/watch.ts --platform=chrome --mode=development",
+    "package:chrome:production": "tsx run/build.ts --platform=chrome",
+    "package:chrome:release": "tsx run/build.ts --platform=chrome --release",
+    "analyze:chrome": "tsx run/build.ts --platform=chrome --analyze",
+    "lint": "eslint .",
     "format": "prettier --write .",
     "format:check": "prettier --check ."
   },
   "author": "@dust-tt",
   "license": "ISC",
   "devDependencies": {
     "@types/chrome": "^0.0.276",
+    "@types/dotenv-webpack": "^7.0.8",
     "@types/event-source-polyfill": "^1.0.5",
     "@types/node": "^22.7.4",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
+    "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/zip-webpack-plugin": "^3.0.6",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.8.1",

extension/app/background.ts → extension/platforms/chrome/background.ts

@@ -1,12 +1,9 @@
-import type { PendingUpdate } from "@extension/lib/storage";
-import { getStoredUser, savePendingUpdate } from "@extension/lib/storage";
-
 import {
   AUTH0_CLIENT_DOMAIN,
   AUTH0_CLIENT_ID,
   DUST_API_AUDIENCE,
-} from "./src/lib/config";
-import { extractPage } from "./src/lib/extraction";
+} from "@app/shared/lib/config";
+import { extractPage } from "@app/shared/lib/extraction";
 import type {
   Auth0AuthorizeResponse,
   AuthBackgroundMessage,
@@ -16,8 +13,10 @@ import type {
   GetActiveTabBackgroundMessage,
   GetActiveTabBackgroundResponse,
   InputBarStatusMessage,
-} from "./src/lib/messages";
-import { generatePKCE } from "./src/lib/utils";
+} from "@app/shared/lib/messages";
+import type { PendingUpdate } from "@app/shared/lib/storage";
+import { getStoredUser, savePendingUpdate } from "@app/shared/lib/storage";
+import { generatePKCE } from "@app/shared/lib/utils";
 
 const log = console.error;
 

extension/platforms/chrome/index.ts

@@ -0,0 +1,5 @@
+import type { PlatformService } from "shared/services/platform";
+
+export const chromePlatform: PlatformService = {
+  platform: "chrome",
+};