Move extension builds into a separate package

.github/workflows/build.yml

@@ -104,13 +104,13 @@ jobs:
           cache: pnpm
       - run: pnpm install
       - name: Download panes
-        working-directory: packages/ember-inspector
-        run: node scripts/download-panes.js
+        working-directory: packages/build
+        run: pnpm panes:download
         env:
           EMBER_ENV: production
       - name: Update manifest.json (nightly)
         if: github.event_name == 'schedule'
-        working-directory: packages/ember-inspector
+        working-directory: packages/build
         run: |
           DATE="$(date +"%Y.%-m.%-d")"
           SHA="${GITHUB_SHA:0:7}"
@@ -127,7 +127,7 @@ jobs:
             .version_name = "\($version) (nightly build \($date) / \($sha))"
       - name: Update manifest.json (pull request)
         if: github.event_name == 'pull_request'
-        working-directory: packages/ember-inspector
+        working-directory: packages/build
         run: |
           SHA="${SHA:0:7}"
           CONTENT="$(cat "$FILE")"
@@ -144,7 +144,7 @@ jobs:
           SHA: ${{ github.event.pull_request.head.sha }}
       - name: Update package.json (nightly)
         if: github.event_name == 'schedule'
-        working-directory: packages/ember-inspector
+        working-directory: packages/build
         run: |
           DATE="$(date +"%Y.%-m.%-d")"
           SHA="${GITHUB_SHA:0:7}"
@@ -157,7 +157,7 @@ jobs:
           FILTER: .version += "-alpha.\($date)+\($sha)"
       - name: Update package.json (pull request)
         if: github.event_name == 'pull_request'
-        working-directory: packages/ember-inspector
+        working-directory: packages/build
         run: |
           SHA="${SHA:0:7}"
           CONTENT="$(cat "$FILE")"
@@ -191,22 +191,22 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: bookmarklet
-          path: packages/ember-inspector/dist/bookmarklet
+          path: packages/build/dist/bookmarklet
       - name: Upload artifacts (Chrome)
         uses: actions/upload-artifact@v4
         with:
           name: chrome
-          path: packages/ember-inspector/dist/chrome
+          path: packages/build/dist/chrome
       - name: Upload artifacts (Firefox)
         uses: actions/upload-artifact@v4
         with:
           name: firefox
-          path: packages/ember-inspector/dist/firefox
+          path: packages/build/dist/firefox
       - name: Upload artifacts (npm)
         uses: actions/upload-artifact@v4
         with:
           name: npm
-          path: packages/ember-inspector/dist/npm
+          path: packages/build/dist/npm
 
   publish-chrome:
     name: Publish Chrome extension

README.md

@@ -14,11 +14,11 @@ OR:
 - Clone the repository
 - cd into the repo directory
 - run `pnpm install`
-- run `pnpm build` to build the `dist` directory
+- run `pnpm build:production` to build the `packages/build/dist` directory
 - Visit `chrome://extensions` in Chrome
 - Make sure `Developer mode` is checked
 - Click on 'Load unpacked extension...'
-- Choose the `dist/chrome` folder in the cloned repo
+- Choose the `packages/build/dist/chrome` folder in the cloned repo
 - Close and re-open developer tools if it's already open
 
 ### Firefox
@@ -30,21 +30,21 @@ OR:
 - Clone the repository
 - cd into the repo directory
 - run `pnpm install`
-- run `pnpm build` to build the `dist` directory
+- run `pnpm build:production` to build the `packages/build/dist` directory
 - Visit `about:debugging#/runtime/this-firefox` in Firefox
 - Click on 'Load Temporary Add-on…'
-- Choose the `dist/firefox/manifest.json` file in the cloned repo
+- Choose the `packages/build/dist/firefox/manifest.json` file in the cloned repo
 
 ### Opera
 
 - Clone the repository
 - cd into the repo directory
 - run `pnpm install`
-- run `pnpm build` to build the `dist` directory
+- run `pnpm build:production` to build the `packages/build/dist` directory
 - Visit `chrome://extensions` in Opera
 - Make sure `Developer mode` is checked
 - Click on 'Load unpacked extension...'
-- Choose the `dist/chrome` folder in the cloned repo
+- Choose the `packages/build/dist/chrome` folder in the cloned repo
 - Close and re-open developer tools if it's already open
 
 ### Bookmarklet (All Browsers)

package.json

@@ -7,10 +7,10 @@
     "url": "git@github.com:emberjs/ember-inspector.git"
   },
   "scripts": {
-    "build": "pnpm --filter ember-debug build && pnpm --filter ember-inspector build",
+    "build": "pnpm --filter ember-debug build && pnpm --filter ember-inspector build && pnpm --filter build build",
     "build:ember-debug": "pnpm --filter ember-debug build",
     "build:ember-inspector": "pnpm --filter ember-inspector build",
-    "build:production": "pnpm --filter ember-debug build && pnpm --filter ember-inspector build:production",
+    "build:production": "pnpm --filter ember-debug build && pnpm --filter ember-inspector build:production && pnpm --filter build build:production",
     "lint": "pnpm --parallel -r --aggregate-output lint",
     "lint:fix": "pnpm --parallel -r --aggregate-output lint:fix",
     "serve:bookmarklet": "pnpm --filter ember-inspector serve:bookmarklet",

packages/build/.gitignore

@@ -0,0 +1,2 @@
+/dist_prev
+/node_modules

packages/build/.npmignore

@@ -0,0 +1,5 @@
+# Development tooling — not needed in the published package
+babel.config.js
+ember-cli-build.js
+eslint.config.mjs
+scripts/

packages/build/.prettierignore

@@ -0,0 +1,19 @@
+# unconventional js
+/blueprints/*/files/
+
+# compiled output
+/dist/
+/ember_debug/dist/
+
+# misc
+/coverage/
+!.*
+.*/
+
+# ember-try
+/.node_modules.ember-try/
+
+# vendor
+/vendor/
+
+/skeletons

packages/build/.prettierrc.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  overrides: [
+    {
+      files: '*.{js,gjs,ts,gts,mjs,mts,cjs,cts}',
+      options: {
+        singleQuote: true,
+      },
+    },
+  ],
+};

packages/build/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: [
+    [
+      require('@babel/plugin-proposal-decorators').default,
+      {
+        legacy: true,
+      },
+    ],
+  ],
+};

packages/build/config/targets.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const browsers = [
+  'last 1 Chrome versions',
+  'last 1 Firefox versions',
+  'last 1 Safari versions',
+];
+
+module.exports = {
+  browsers,
+};

packages/build/ember-cli-build.js

@@ -0,0 +1,191 @@
+/* eslint-disable no-undef */
+
+'use strict';
+const mergeTrees = require('broccoli-merge-trees');
+const stew = require('broccoli-stew');
+const writeFile = require('broccoli-file-creator');
+const replace = require('broccoli-string-replace');
+const Funnel = require('broccoli-funnel');
+const { mv, rename, rm } = stew;
+const { dirname, join } = require('path');
+const emberInspectorPackage = require('ember-inspector/package.json');
+
+const {
+  EMBER_VERSIONS_SUPPORTED,
+  PREVIOUS_EMBER_VERSIONS_SUPPORTED,
+} = require('ember-debug/versions');
+
+const emberInspectorDist = join(
+  dirname(require.resolve('ember-inspector/package.json')),
+  'dist',
+);
+
+module.exports = function () {
+  const { EMBER_INSPECTOR_TAB, EMBER_ENV } = process.env;
+  const minimumVersion = EMBER_VERSIONS_SUPPORTED[0].replace(/\./g, '-');
+
+  const emberInspector = new Funnel(join(emberInspectorDist), {
+    destDir: '.',
+  });
+
+  const patterns = [
+    {
+      match: /{{EMBER_INSPECTOR_VERSION}}/g,
+      replacement: emberInspectorPackage.version,
+    },
+    {
+      match: /{{TAB_LABEL}}/,
+      replacement: (() => {
+        if (EMBER_INSPECTOR_TAB) {
+          return `Ember [${EMBER_INSPECTOR_TAB}]`;
+        } else if (EMBER_ENV === 'development') {
+          return `Ember [DEV]`;
+        }
+
+        return 'Ember';
+      })(),
+    },
+    {
+      match: /{{PANE_ROOT}}/g,
+      replacement: `panes-${minimumVersion}`,
+    },
+    {
+      match: /{{PREVIOUS_EMBER_VERSIONS_SUPPORTED}}/g,
+      replacement: JSON.stringify(PREVIOUS_EMBER_VERSIONS_SUPPORTED),
+    },
+    {
+      match: /{{EMBER_VERSIONS_SUPPORTED}}/g,
+      replacement: JSON.stringify(EMBER_VERSIONS_SUPPORTED),
+    },
+  ];
+
+  const firefoxBackgroundServiceReplacement = [
+    {
+      match: /"service_worker": "background.js"/g,
+      replacement: '"scripts": ["background.js"]',
+    },
+  ];
+
+  const skeletonWebExtension = replace('skeletons/web-extension', {
+    files: ['*'],
+    patterns,
+  });
+
+  const skeletonFirefoxWebExtension = replace('skeletons/web-extension', {
+    files: ['*'],
+    patterns: patterns.concat(firefoxBackgroundServiceReplacement),
+  });
+
+  const skeletonBookmarklet = replace('skeletons/bookmarklet', {
+    files: ['*'],
+    patterns,
+  });
+
+  const webExtensionRoot = `panes-${minimumVersion}`;
+
+  let firefox = mergeTrees([
+    mv(emberInspector, webExtensionRoot),
+    skeletonFirefoxWebExtension,
+  ]);
+
+  let chrome = mergeTrees([
+    mv(emberInspector, webExtensionRoot),
+    skeletonWebExtension,
+  ]);
+
+  let bookmarklet = mergeTrees([
+    mv(emberInspector, webExtensionRoot),
+    skeletonBookmarklet,
+  ]);
+
+  PREVIOUS_EMBER_VERSIONS_SUPPORTED.forEach(function (rawVersion) {
+    const version = rawVersion.replace(/\./g, '-');
+
+    if (EMBER_ENV === 'production') {
+      const prevDist = `dist_prev/${EMBER_ENV}`;
+
+      bookmarklet = mergeTrees([
+        mv(`${prevDist}/bookmarklet/panes-${version}`, `panes-${version}`),
+        bookmarklet,
+      ]);
+
+      firefox = mergeTrees([
+        mv(`${prevDist}/firefox/panes-${version}`, `panes-${version}`),
+        firefox,
+      ]);
+
+      chrome = mergeTrees([
+        mv(`${prevDist}/chrome/panes-${version}`, `panes-${version}`),
+        chrome,
+      ]);
+    } else {
+      const file = writeFile(
+        'index.html',
+        'This Ember version is not supported in development environment.',
+      );
+
+      const emberDebugFile = writeFile('ember_debug.js', 'void(0);');
+
+      chrome = mergeTrees([mv(file, `panes-${version}`), chrome]);
+      firefox = mergeTrees([mv(file, `panes-${version}`), firefox]);
+      bookmarklet = mergeTrees([
+        mv(file, `panes-${version}`),
+        mv(emberDebugFile, `panes-${version}`),
+        bookmarklet,
+      ]);
+    }
+  });
+
+  const emberDebug = new Funnel(
+    join(dirname(require.resolve('ember-debug/package.json')), 'dist'),
+  );
+
+  // Pass the current dist to the Ember Inspector app.
+  const dists = {
+    chrome,
+    firefox,
+    bookmarklet,
+    websocket: emberInspector,
+  };
+
+  const debugRoot = {
+    chrome: webExtensionRoot,
+    firefox: webExtensionRoot,
+    bookmarklet: webExtensionRoot,
+    websocket: '.',
+  };
+
+  Object.keys(dists).forEach(function (key) {
+    dists[key] = replace(dists[key], {
+      files: ['**/*.js'],
+      patterns: [
+        {
+          match: /{{EMBER_DIST}}/g,
+          replacement: key,
+        },
+      ],
+    });
+
+    let debug = rename(emberDebug, (relativePath) => {
+      // rename dist specific entrypoint to ember_debug.js
+      if (relativePath === `${key}-debug.js`) {
+        return `ember_debug.js`;
+      }
+
+      return relativePath;
+    });
+
+    // remove other unused entrypoints
+    debug = rm(debug, '*-debug.js');
+    debug = mv(debug, debugRoot[key]);
+
+    dists[key] = mergeTrees([dists[key], debug]);
+  });
+
+  return mergeTrees([
+    mv(dists.bookmarklet, 'bookmarklet'),
+    mv(dists.firefox, 'firefox'),
+    mv(dists.chrome, 'chrome'),
+    mv(dists.websocket, 'websocket'),
+  ]);
+};