2.0.0, 2.1.0: manifest v3 support

Core change: Alpine.js can't run in the panel (manifest v3 disallows unsafe eval), rebuild that application with solidjs
Other changes: minor API changes, use of TypeScript.
Note: background.js doesn't need to change much.

- package v2 extension
- detector injection
- detector -> background <-> panel messaging
- manifest v3 main config options
- strip back panel.html + path forward with State instance
- duplicate shell-chrome for v3 support
- setup solidjs with state outside of the app
- component list display
- select a component, component data display
- array/object display
- editing disabled
- hide future features
- show detected alpine version
- implement resize/breakpoint
- fix editing mode
- implement split-grid, fix lg layout
- reformat all the things
- tidy up typecheck

Author: HugoDF

.github/workflows/build.yml

@@ -5,6 +5,7 @@ on:
   push:
     branches:
       - master
+      - devtools-early-access
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -29,20 +30,23 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - name: install
-      run: npm ci
+      run: npm ci && npm --prefix=packages/shell-chrome-v3 ci
       env:
         CYPRESS_INSTALL_BINARY: "0"
     - name: build
+      # need npm run because we have shell commands inside this script
       run: npm run package
     - name: Archive production artifacts
       uses: actions/upload-artifact@v4
       with:
         name: alpine-devtools
         path: dist
     - name: unit tests
-      run: npm t
+      run: node --run test
+    - name: typecheck
+      run: node --run typecheck
     - name: check formatting
-      run: npm run format
+      run: node --run format
     - name: Commit changes
       uses: stefanzweifel/git-auto-commit-action@v5
       with:
@@ -59,8 +63,16 @@ jobs:
         key: cypress-cache-v1-${{ runner.os }}-${{ hashFiles('**/package.json') }}
     # install Cypress binary
     - run: npx cypress install && npx cypress cache list
-    - uses: cypress-io/github-action@v6
+    # - name: Devtools@v2 E2E
+    #   uses: cypress-io/github-action@v6
+    #   with:
+    #     start: node --run start
+    #     command: node --run cy:run
+    #     working-directory: packages/shell-chrome-v3
+    #     install: false
+    - name: Devtools@v1 E2E
+      uses: cypress-io/github-action@v6
       with:
-        start: npm run start:ci
-        command: npm run cy:run
+        start: node --run start:ci
+        command: node --run cy:run
         install: false

package-lock.json

@@ -5,19 +5,22 @@
     "description": "DevTools extension for debugging Alpine.js applications.",
     "homepage": "https://github.com/alpine-collective/alpinejs-devtools",
     "scripts": {
+        "bootstrap": "npm i && npm --prefix=packages/shell-chrome-v3 i",
         "start": "rollup -c -w",
         "dev": "npm start",
         "start:ci": "ROLLUP_SERVE=true rollup -c",
         "build:dev": "rollup -c",
-        "build": "NODE_ENV=production rollup -c",
+        "build": "NODE_ENV=production rollup -c && npm --prefix packages/shell-chrome-v3 run build",
         "watch": "npm start",
         "test": "node --test tests/*",
         "cy:run": "cypress run",
         "cy:open": "cypress open",
-        "format": "prettier './{packages/**/,cypress/**/*,lib/}*.{js,html,css}' --write",
-        "check:format": "prettier './{packages/**/,cypress/**/*,}*.{js,html,css}' -c",
+        "format": "prettier './{packages/**/,cypress/**/*,lib/}*.{js,ts,tsx,html,css}' --write",
+        "check:format": "prettier './{packages/**/,cypress/**/*,}*.{js,ts,tsx,html,css}' -c",
+        "typecheck": "npm --prefix packages/shell-chrome-v3 run typecheck",
         "prepackage": "npm run build",
-        "package": "cd ./dist/chrome && zip -r ../alpine-devtools-$npm_package_version.zip . && rm -rf ../chrome"
+        "package": "cd ./dist/chrome && zip -r ../alpine-devtools-$npm_package_version.zip .",
+        "postpackage": "cd ./dist/shell-chrome-v3 && zip -r ../alpine-devtools-v2.zip ."
     },
     "license": "MIT",
     "devDependencies": {
@@ -47,6 +50,6 @@
         }
     },
     "lint-staged": {
-        "*.{js,css,md,html}": "prettier --write"
+        "*.{js,ts,tsx,css,md,html,json}": "prettier --write"
     }
 }

package.json

@@ -12,13 +12,15 @@ export function watch({ assetsDir, viewsDir, outputDir }) {
         }
     })
 
-    fs.watch(viewsDir, { recursive: true }, (_event, filename) => {
-        try {
-            console.info(`View "${filename}" updated. Rendering panel to ${outputDir}`)
+    if (viewsDir) {
+        fs.watch(viewsDir, { recursive: true }, (_event, filename) => {
+            try {
+                console.info(`View "${filename}" updated. Rendering panel to ${outputDir}`)
 
-            renderPanel()
-        } catch (e) {
-            console.error(e)
-        }
-    })
+                renderPanel()
+            } catch (e) {
+                console.error(e)
+            }
+        })
+    }
 }

packages/build/watch.js

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/shell-chrome-v3/.gitignore

@@ -0,0 +1,7 @@
+export default {
+  semi: true,
+  printWidth: 120,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+};

packages/shell-chrome-v3/.prettierrc.js

@@ -0,0 +1,39 @@
+# Manifest v3 compatible devtools
+
+Todo:
+
+- [x] switch to Preact or other signal-supporting system ~~(Vue?)~~ Solid
+  - [x] update build pipeline
+- [x] setup manifest.json v3
+- [x] get a simulator running
+- [x] messaging
+- [x] detector -> content
+  - [x] content -> background (service_worker)
+  - [x] panel -> background connection
+- [ ] select 1 Cypress scenario and get it working
+  - content runs on page and has access to Chrome Ext APIs, it injects detector
+  - background = service worker
+- [x] detection popup
+- [ ] disable things that aren't implemented (eg. warnings tab, "latest version" loading)
+- [ ] Tab links/switching between tabs (components vs warnings, stores)
+
+Using [Solid](https://solidjs.com) since Alpine.js is disallowed (unsafe eval is not allowed in panels in Manifest v3).
+
+```bash
+$ npm install
+```
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the roo `dist` folder.

packages/shell-chrome-v3/README.md

@@ -0,0 +1,2 @@
+<meta charset="utf-8" />
+<script src="./devtools-background.js"></script>