fix: capture lynx.getDevtool() once to avoid errors on page close

.github/workflows/nodejs.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Lint
         run: npm run lint
       - name: Unit tests
-        run: npm run test
+        run: npm run test && npm run test:lynx
       - name: Run e2e tests
         run: npm run build:chrome && npm run test:e2e --retries=5
         env:

.github/workflows/publish.yml

@@ -0,0 +1,80 @@
+name: Publish to npm and GitHub Release
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write # Required for OIDC
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Install Deps
+        run: npm i
+
+      - name: Get package version
+        id: package-version
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Get commit hash
+        id: commit-hash
+        run: |
+          SHORT_SHA=$(git rev-parse --short=7 HEAD)
+          echo "sha=$SHORT_SHA" >> $GITHUB_OUTPUT
+
+      - name: Build package version
+        id: build-version
+        run: |
+          # Fixed-width UTC timestamp keeps semver prerelease ordering monotonic across
+          # commits, so tooling like Renovate will always see later releases as newer
+          # (git short-shas alone sort lexicographically and are not monotonic).
+          TIMESTAMP=$(date -u +%Y%m%d%H%M%S)
+          FULL_VERSION="${{ steps.package-version.outputs.version }}-${TIMESTAMP}-${{ steps.commit-hash.outputs.sha }}"
+          echo "full_version=$FULL_VERSION" >> $GITHUB_OUTPUT
+          echo "TAG_NAME=$FULL_VERSION" >> $GITHUB_ENV
+
+      - name: Update package.json version
+        run: |
+          npm version ${{ steps.build-version.outputs.full_version }} --no-git-tag-version
+
+      # https://docs.npmjs.com/trusted-publishers#step-2-configure-your-cicd-workflow
+      # Ensure npm 11.5.1 or later is installed
+      - name: Update npm
+        run: npm install -g npm@latest
+
+      - name: Publish to npm
+        run: npm publish --tag latest
+
+      - name: Generate release notes
+        id: release-notes
+        run: |
+          RELEASE_NOTES=$(git log -1 --pretty=%B)
+          echo "notes<<EOF" >> $GITHUB_OUTPUT
+          echo "## Release ${{ env.TAG_NAME }}" >> $GITHUB_OUTPUT
+          echo "**Commit:** ${{ steps.commit-hash.outputs.sha }}" >> $GITHUB_OUTPUT
+          echo "**Published:** $(date -u)" >> $GITHUB_OUTPUT
+          echo "### Commit Message" >> $GITHUB_OUTPUT
+          echo "$RELEASE_NOTES" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+        shell: bash
+
+      - name: Create GitHub Release
+        uses: actions/create-release@v1
+        with:
+          tag_name: ${{ env.TAG_NAME }}
+          release_name: Release ${{ env.TAG_NAME }}
+          body: ${{ steps.release-notes.outputs.notes }}
+          draft: false
+          prerelease: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -69,7 +69,7 @@ typings/
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 
-/dist/
+dist
 .rts*
 *.pdf
 test-e2e/screenshots
@@ -83,3 +83,4 @@ profiles/chrome/*
 .DS_Store
 
 test-results/
+lib

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

.nvmrc

@@ -0,0 +1 @@
+22

.oxlintrc.json

@@ -16,8 +16,15 @@
 		"it": "readonly"
 	},
 	"rules": {
-		"no-console": "error",
-		"no-unused-vars": ["error", { "caughtErrors": "none" }],
+		"no-console": "warn",
+		"no-unused-vars": [
+			"error",
+			{
+				"caughtErrors": "none",
+				"argsIgnorePattern": "^_",
+				"varsIgnorePattern": "^_"
+			}
+		],
 		"no-unused-expressions": "off",
 		"react/exhaustive-deps": "off",
 		"oxc/only-used-in-recursion": "off",

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 5.0.1
+
+### Features (Lynx)
+
+- Add support for ReactLynx and Lynx Devtool
+
 ## 4.5.0
 
 ### Features

LICENSE

@@ -1,6 +1,7 @@
 The MIT License (MIT)
 
 Copyright (c) 2019-present Marvin Hagemeister
+Copyright (c) 2025 Lynx Authors.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,64 +1,28 @@
-# Preact Devtools
+# Preact Devtools for ReactLynx
 
-Browser extension that allows you to inspect a Preact component hierarchy,
-including props and state.
-
-**Requires Preact >=10.1.0**
-
-![Screenshot of Preact devtools](media/preact-chrome-light.png)
+The [Lynx Devtool](https://github.com/lynx-family/lynx-devtool) Panel that allows you to inspect a ReactLynx component hierarchy, including props and state.
 
 ## Usage
 
-Firstly, we need to import `preact/debug` somewhere to initialize the connection
-to the extension. Make sure that this import is **the first** import in your
+We need to import `@lynx-js/preact-devtools` somewhere to initialize the connection
+to Preact Devtools Panel. Make sure that this import is **the first** import in your
 whole app.
 
-```javascript
-// Must be the first import
-import "preact/debug";
-
-// Or if you just want the devtools bridge (~240B) without other
-// debug code (useful for production sites)
-import "preact/devtools";
+```bash
+import '@lynx-js/preact-devtools'
 ```
 
-Then, download the Preact Devtools extension for your browser:
-
-- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/preact-devtools/)
-- [Chrome](https://chrome.google.com/webstore/detail/preact-developer-tools/ilcajpmogmhpliinlbcdebhbcanbghmd)
-- [Edge](https://microsoftedge.microsoft.com/addons/detail/hdkhobcafnfejjieimdkmjaiihkjpmhk)
+See the documentation of [Preact Devtools Panel in Lynx Devtool](https://lynxjs.org/guide/devtool/panels/preact-devtools-panel.html#preact-devtools-panel) for more information.
 
 ## Contributing
 
-- Use `npm run dev` to start a demo page
-- Use `npm run watch` to rebuild all extensions on any code changes
-- Use `npm run build:firefox` or `npm run build:chrome` to create a release build
-
-Chrome:
-
-1. Go to extensions page
-2. Enable developer mode
-3. Click "Load unpacked"
-4. Select `dist/chrome/` folder
-
-Firefox:
-
-1. Go to addons page
-2. Click the settings icon
-3. Select "Debug addons"
-4. Click "Load temporary addon"
-5. Select the `manifest.json` in `dist/firefox/`
-
-## For extension reviewers
-
-These commands will build the extension and load it into a browser with a temporary profile. The browser will automatically navigate to [preactjs.com](https://preactjs.com). There you can test the extension.
+- [`ldt-plugin`](./ldt-plugin/) contains the source code of Preact Devtools Panel in Lynx Devtool. Run it by `npm run dev:ldt-plugin` when developing, and `npm run build:ldt-plugin` to build it.
+- [`src`](./src/) contains the source code for ReactLynx App to setup Preact Devtools related hooks. You can build it just by `npm run build:lib` in the root folder of this repository.
 
-Chrome:
+The ReactLynx App will communicate with the Preact Devtools Panel in Lynx Devtool using CDP messages.
 
-1. Execute `npm run run:chrome`
-2. Click on `Preact` tab in devtools
+## Credits
 
-Firefox:
+Thanks to:
 
-1. Exectue `npm run run:firefox`
-2. Open devtools + click on `Preact` tab in devtools
+- [Preact Devtools](https://github.com/preactjs/preact-devtools) for the original Devtools implementation for Preact.

README.preact.md

@@ -0,0 +1,64 @@
+# Preact Devtools
+
+Browser extension that allows you to inspect a Preact component hierarchy,
+including props and state.
+
+**Requires Preact >=10.1.0**
+
+![Screenshot of Preact devtools](media/preact-chrome-light.png)
+
+## Usage
+
+Firstly, we need to import `preact/debug` somewhere to initialize the connection
+to the extension. Make sure that this import is **the first** import in your
+whole app.
+
+```javascript
+// Must be the first import
+import "preact/debug";
+
+// Or if you just want the devtools bridge (~240B) without other
+// debug code (useful for production sites)
+import "preact/devtools";
+```
+
+Then, download the Preact Devtools extension for your browser:
+
+- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/preact-devtools/)
+- [Chrome](https://chrome.google.com/webstore/detail/preact-developer-tools/ilcajpmogmhpliinlbcdebhbcanbghmd)
+- [Edge](https://microsoftedge.microsoft.com/addons/detail/hdkhobcafnfejjieimdkmjaiihkjpmhk)
+
+## Contributing
+
+- Use `npm run dev` to start a demo page
+- Use `npm run watch` to rebuild all extensions on any code changes
+- Use `npm run build:firefox` or `npm run build:chrome` to create a release build
+
+Chrome:
+
+1. Go to extensions page
+2. Enable developer mode
+3. Click "Load unpacked"
+4. Select `dist/chrome/` folder
+
+Firefox:
+
+1. Go to addons page
+2. Click the settings icon
+3. Select "Debug addons"
+4. Click "Load temporary addon"
+5. Select the `manifest.json` in `dist/firefox/`
+
+## For extension reviewers
+
+These commands will build the extension and load it into a browser with a temporary profile. The browser will automatically navigate to [preactjs.com](https://preactjs.com). There you can test the extension.
+
+Chrome:
+
+1. Execute `npm run run:chrome`
+2. Click on `Preact` tab in devtools
+
+Firefox:
+
+1. Exectue `npm run run:firefox`
+2. Open devtools + click on `Preact` tab in devtools

demo/lynx.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from "@lynx-js/rspeedy";
+
+import { pluginQRCode } from "@lynx-js/qrcode-rsbuild-plugin";
+import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
+
+export default defineConfig({
+	// output: {
+	//   filenameHash: 'contenthash:8',
+	//   minify: false,
+	// },
+	source: {
+		define: {
+			"globalThis.preactDevtoolsCtx.__DEBUG__": "true",
+		},
+	},
+	plugins: [
+		pluginQRCode({
+			schema(url) {
+				// We use `?fullscreen=true` to open the page in LynxExplorer in full screen mode
+				return `${url}?fullscreen=true`;
+			},
+		}),
+		pluginReactLynx({
+			enableRemoveCSSScope: false,
+		}),
+	],
+	output: {
+		minify: {
+			css: false,
+		},
+	},
+});