2.5.1, 2.5.2 firefox compat

Adds a new instruction to AGENTS.md to run `npm run format` as the last step of any plan.
test: add tests for stores in devtools shell-chrome-v3
feat: v2 compatiblity with Firefox
chore: package using web-ext package instead of homebaked zip command
chore: upgrade deps
2.5.2 for FF update testing

Author: HugoDF

AGENTS.md

@@ -0,0 +1,9 @@
+This is a SolidJS application.
+
+The main application to work on is in `packages/shell-chrome-v3`. This is a Chrome extension using Manifest v3.
+
+We want to support Firefox and Safari in the future.
+
+A note on coding style: signals should be left outside of components.
+
+As the last step of any plan, run `npm run format`.

package-lock.json

@@ -11,18 +11,24 @@
         "start:ci": "ROLLUP_SERVE=true rollup -c",
         "build:dev": "rollup -c",
         "build": "NODE_ENV=production rollup -c && VITE_MAINLINE_PUBLISH=true npm --prefix packages/shell-chrome-v3 run build",
-        "early-access": "rm -rf dist && npm --prefix packages/shell-chrome-v3 run build && npm run postpackage",
+        "early-access": "rm -rf dist && npm --prefix packages/shell-chrome-v3 run build && node --run postpackage",
         "ea": "npm run early-access",
         "watch": "npm start",
         "test": "node --test tests/* && node --experimental-strip-types --test **/*.test.ts",
         "cy:run": "cypress run",
         "cy:open": "cypress open",
+        "archive:v3": "git archive -o ./dist/alpine-devtools-source-archive-v2.zip HEAD:packages/shell-chrome-v3",
         "format": "prettier './{packages/**/,cypress/**/*,lib/}*.{js,ts,tsx,html,css}' --write",
         "check:format": "prettier './{packages/**/,cypress/**/*,}*.{js,ts,tsx,html,css}' -c",
+        "check:firefox": "npm run ea && web-ext lint --source-dir=dist/firefox-ext",
         "typecheck": "npm --prefix packages/shell-chrome-v3 run typecheck",
         "prepackage": "rm -rf dist && npm run build",
+        "sa": "npm run package",
         "package": "cd ./dist/chrome && zip -r ../alpine-devtools-$npm_package_version.zip .",
-        "postpackage": "cd ./dist/shell-chrome-v3 && zip -r ../alpine-devtools-v2.zip ."
+        "pkg:chrome": "web-ext build --source-dir=dist/shell-chrome-v3 --artifacts-dir=./dist/chrome-v2",
+        "pkg:firefox": "web-ext build --source-dir=dist/firefox-ext --artifacts-dir=./dist/firefox-v2",
+        "postpackage": "node --run pkg:chrome && node --run pkg:firefox",
+        "ff:open": "web-ext run -s=./dist/firefox-ext"
     },
     "license": "MIT",
     "devDependencies": {
@@ -31,20 +37,21 @@
         "@tailwindcss/forms": "^0.3.3",
         "@tailwindcss/jit": "^0.1.18",
         "alpinejs": "^2.8.2",
-        "cypress": "14.3.2",
+        "cypress": "14.5.4",
         "cypress-iframe": "^1.0.1",
         "edge.js": "^5.3.3",
         "husky": "9.1.7",
-        "linkedom": "0.18.10",
-        "lint-staged": "15.5.1",
-        "prettier": "3.5.3",
+        "linkedom": "0.18.11",
+        "lint-staged": "16.1.4",
+        "prettier": "3.6.2",
         "rollup": "^2.70.0",
         "rollup-plugin-copy": "3.5.0",
         "rollup-plugin-filesize": "10.0.0",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-serve": "3.0.0",
         "split-grid": "^1.0.11",
-        "tailwindcss": "^2.1.4"
+        "tailwindcss": "^2.1.4",
+        "web-ext": "8.9.0"
     },
     "husky": {
         "hooks": {

package.json

@@ -56,11 +56,25 @@ async function buildAll() {
     if (process.env.VITE_MAINLINE_PUBLISH === 'true') {
       newManifestJson.name = 'Alpine.js devtools';
     }
+
     await fs.writeFile(
       fileURLToPath(new URL('../../dist/shell-chrome-v3/manifest.json', import.meta.url)),
       JSON.stringify(newManifestJson, null, 2),
     );
 
+    if (process.env.TARGET === 'firefox') {
+      console.log('Overwriting manifest.json with Firefox compatible one.');
+      await fs.writeFile(
+        fileURLToPath(new URL('../../dist/shell-chrome-v3/manifest.json', import.meta.url)),
+        JSON.stringify(convertToFirefoxManifest(newManifestJson), null, 2),
+      );
+    } else {
+      await fs.writeFile(
+        fileURLToPath(new URL('../../dist/shell-chrome-v3/manifest-ff.json', import.meta.url)),
+        JSON.stringify(convertToFirefoxManifest(newManifestJson), null, 2),
+      );
+    }
+
     console.log('manifest.json updates successful');
   } catch (error) {
     console.error('Build failed:', error);
@@ -70,3 +84,25 @@ async function buildAll() {
 
 // Run build process
 buildAll();
+
+function convertToFirefoxManifest(manifest) {
+  const { service_worker, ...rest } = manifest.background;
+  return {
+    ...manifest,
+    background: {
+      ...rest,
+      scripts: [service_worker],
+    },
+    browser_specific_settings: {
+      gecko: {
+        id: '[email protected]',
+        strict_min_version: '112.0',
+        ...(process.env.VITE_MAINLINE_PUBLISH !== 'true'
+          ? {
+              update_url: 'https://alpinedevtools.com/ff-ea-updates.json',
+            }
+          : undefined),
+      },
+    },
+  };
+}

packages/shell-chrome-v3/build.js

@@ -1,7 +1,41 @@
-it.skip('should show "no stores" messages when none detected');
+it('should show "no stores" messages when none detected', () => {
+  cy.visit('/simulator?target=no-stores.html');
+  cy.get('[data-testid=tab-link-stores]').click();
+  cy.contains('No stores found').should('be.visible');
+});
 
-it.skip('should populate stores list when present');
-it.skip(
-  'primitive store - should populate data, allow edits and receive state updates when selected',
-);
-it.skip('object store - should populate data, allow edits and receive state updates when selected');
+it('should populate stores list when present', () => {
+  cy.visit('/simulator?target=v3.html');
+  cy.get('[data-testid=tab-link-stores]').click();
+  cy.get('[data-testid=store-name]').should('have.length', 2);
+  cy.get('[data-testid=store-name]').contains('sampleStore').should('be.visible');
+  cy.get('[data-testid=store-name]').contains('primitiveVal').should('be.visible');
+});
+it('primitive store - should populate data, allow edits and receive state updates when selected', () => {
+  cy.visit('/simulator?target=v3.html');
+  cy.get('[data-testid=tab-link-stores]').click();
+  cy.get('[data-testid=store-name]').contains('primitiveVal').click();
+  cy.get('[data-testid=data-property-value-__root_value]').should('contain.text', 'true');
+  cy.get('[data-testid=data-property-value-__root_value] [type=checkbox]').click({ force: true });
+  cy.get('[data-testid=data-property-value-__root_value]').should('contain.text', 'false');
+  cy.iframe('#target').contains('primitiveVal false');
+  cy.iframe('#target').find('[data-testid=reset-primitive-store]').click();
+  cy.get('[data-testid=data-property-value-__root_value]').should('contain.text', 'false');
+});
+it('object store - should populate data, allow edits and receive state updates when selected', () => {
+  cy.visit('/simulator?target=v3.html');
+  cy.get('[data-testid=tab-link-stores]').click();
+  cy.get('[data-testid=store-name]').contains('sampleStore').click();
+  cy.get('[data-testid=data-property-name-nested]').should('be.visible');
+  cy.get('[data-testid=data-property-value-nested]').should('contain.text', 'Object');
+  cy.get('[data-testid=data-property-value-nested]').click();
+  cy.get('[data-testid=data-property-name-array]').should('be.visible');
+  cy.get('[data-testid=data-property-value-array]').should('contain.text', 'Array[2]');
+  cy.get('[data-testid=data-property-name-on]').should('be.visible');
+  cy.get('[data-testid=data-property-value-on]').should('contain.text', 'false');
+  cy.get('[data-testid=data-property-value-on] [type=checkbox]').click({ force: true });
+  cy.get('[data-testid=data-property-value-on]').should('contain.text', 'true');
+  cy.iframe('#target').contains('sampleStore.on true');
+  cy.iframe('#target').find('[data-testid=reset-nested-store]').click();
+  cy.get('[data-testid=data-property-value-nested]').should('contain.text', 'Array[0]');
+});

packages/shell-chrome-v3/cypress/e2e/stores.cy.js

@@ -1,7 +1,7 @@
 {
   "name": "Alpine.js devtools - Early Access",
   "description": "DevTools extension for debugging Alpine.js applications.",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "manifest_version": 3,
   "icons": {
     "16": "icons/16.png",

packages/shell-chrome-v3/manifest.json

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Alpine.js Devtools v3</title>
+    <script src="/cdn.min.js" defer></script>
+  </head>
+  <body>
+    <div x-data="{ hello: 'world' }">
+      <span x-text="hello"></span>
+    </div>
+  </body>
+</html>