v3.1.0

.github/ISSUE_TEMPLATE/bug_report.md

@@ -25,7 +25,7 @@ If applicable, add screenshots to help explain your problem.
 **Desktop (please complete the following information):**
 
 - OS: [e.g. iOS]
-- Browser version [e.g. chrome 100]
+- Browser version [e.g. Chrome 100]
 - Version [e.g. 3.0.2]
 
 **Additional context**

.gitignore

@@ -1,18 +1,11 @@
-
-# Dependency directories
+# autogenerated
 node_modules/
-
-# ide
-.idea
-
-# os
-.DS_Store
-
-# application autogenerated files not for git
+public/build/
 *.js.map
 *.zip
 *.crx
 manifest.json
-bundle/js
-*.log
 
+# miscellaneous
+.DS_Store
+tmp/

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["esbenp.prettier-vscode", "jebbs.plantuml"]
+  "recommendations": ["jebbs.plantuml", "denoland.vscode-deno"]
 }

.vscode/settings.json

@@ -1,6 +1,9 @@
 {
-  "json.schemaDownload.enable": true,
+  "deno.enable": true,
+  "editor.defaultFormatter": "denoland.vscode-deno",
   "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "json.schemaDownload.enable": true,
   "json.schemas": [
     {
       "fileMatch": ["manifest.json"],
@@ -9,5 +12,12 @@
   ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "spellright.language": ["en-US-10-1."],
-  "spellright.documentTypes": ["latex", "plaintext", "markdown"]
+  "spellright.documentTypes": [
+    "latex",
+    "plaintext",
+    "markdown"
+  ],
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  }
 }

Makefile

@@ -1,62 +1,54 @@
-ZIP_CHROME_FILE="extension.chrome.zip"
-ZIP_FIREFOX_FILE="extension.firefox.zip"
-HASH_ALG="sha384"
-
 .PHONY:
-	install clean all lint test dev prod zip_chrome zip_firefox
+	install clean install dev valid test prod all
 	tune2chrome tune2firefox
-
-install:
-	npm i -g pnpm
-	pnpm i
+.DEFAULT_GOAL := dev
+
+CHROME_ZIP = "extension.chrome.zip"
+CHROME_MANIFEST = ./manifest.chrome.json
+FIREFOX_ZIP = "extension.firefox.zip"
+FIREFOX_MANIFEST = ./manifest.firefox.json
+DENO_DEV = NODE_ENV=development deno run --watch
+DENO_PROD = NODE_ENV=production deno run
+DENO_OPTIONS = --allow-env --allow-read --allow-run
+BUILD_SCRIPT = ./build.ts
+OUTPUT_DIR = ./public/
+BUILD_DIR = ./public/build/
 
 clean:
-	rm -rf ./node_modules
-	rm -rf $(ZIP_CHROME_FILE) $(ZIP_FIREFOX_FILE)
-	rm -rf ./bundle/js/
-
-all:
-	make lint
-	make test
-	make prod
-	make zip_firefox
-	make zip_chrome
+	rm -rf ./node_modules ./deno.lock $(BUILD_DIR) $(CHROME_ZIP) $(FIREFOX_ZIP)
 
-lint:
-	pnpm exec prettier . --write
-	pnpm exec tsc -noEmit
-
-test:
-	pnpm exec tsx --test
+install:
+	deno install --allow-scripts
 
 dev:
-	rm -rf ./bundle/js/
-	NODE_OPTIONS="--import=tsx --trace-deprecation" \
-		pnpm exec webpack --progress --watch --mode=development
+	rm -rf $(BUILD_DIR)
+	$(DENO_DEV) $(DENO_OPTIONS) $(BUILD_SCRIPT)
 
-prod:
-	rm -rf ./bundle/js/
-	NODE_OPTIONS="--import=tsx" \
-		NODE_ENV="production" \
-		time pnpm exec webpack --mode=production
+valid:
+	deno fmt --unstable-component
+	deno lint
 
-zip_chrome:
-	make tune2chrome
-	rm -rf $(ZIP_CHROME_FILE)
-	zip -r $(ZIP_CHROME_FILE) ./bundle ./manifest.json > /dev/null
-	zip --delete $(ZIP_CHROME_FILE) "bundle/js/firefox/*"
-	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_CHROME_FILE) | openssl base64 -A); \
-		echo "$(ZIP_CHROME_FILE) $(HASH_ALG):$$FILE_HASH"
+test: valid
+	deno test --no-check --trace-leaks --reporter=dot
 
-zip_firefox:
-	make tune2firefox
-	rm -rf $(ZIP_FIREFOX_FILE)
-	zip -r $(ZIP_FIREFOX_FILE) ./bundle ./manifest.json > /dev/null
-	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_FIREFOX_FILE) | openssl base64 -A); \
-		echo "$(ZIP_FIREFOX_FILE) $(HASH_ALG):$$FILE_HASH"
+prod: test
+	rm -rf $(BUILD_DIR)
+	$(DENO_PROD) $(DENO_OPTIONS) $(BUILD_SCRIPT)
 
 tune2chrome:
-	cp manifest.chrome.json manifest.json
+	cp $(CHROME_MANIFEST) manifest.json
 
 tune2firefox:
-	cp manifest.firefox.json manifest.json
+	cp $(FIREFOX_MANIFEST) manifest.json
+
+all: prod
+	make tune2firefox
+	rm -rf $(FIREFOX_ZIP)
+	zip -r $(FIREFOX_ZIP) $(OUTPUT_DIR) ./manifest.json > /dev/null
+
+	make tune2chrome
+	rm -rf $(CHROME_ZIP)
+	zip -r $(CHROME_ZIP) $(OUTPUT_DIR) ./manifest.json > /dev/null
+	zip --delete $(CHROME_ZIP) "$(BUILD_DIR)firefox/*" > /dev/null
+
+	tree -Dis $(BUILD_DIR) *.zip

README.md

@@ -1,4 +1,4 @@
-### ![](./bundle/img/panel-icon28.png) JSDiff
+### ![](public/img/panel-icon28.png) JSDiff
 
 An extension for developers that enhances the console API by incorporating the ability to compare objects and adds a `JSDiff` tab (parallel to Elements, Network panels) within your dev-tools for viewing the results.
 
@@ -101,7 +101,7 @@ declare global {
 ### Serialization by types
 
 | Input                                                                           | Output                                                                                                   |
-| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+|---------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------|
 | XMLHttpRequest<sup>[1]</sup>                                                    | ƒ XMLHttpRequest⟪native⟫                                                                                 |
 | function test(){}<sup>[1]</sup>                                                 | ƒ test⟪1374b28d22b674e53a044425556a9cd48b82fd5aba3bf19e3545d51704227b10⟫                                 |
 | document.body                                                                   | {0001}<sup>[2,3]</sup> DOM⟪BODY⟫                                                                         |
@@ -110,7 +110,7 @@ declare global {
 | 98765432109876543210n                                                           | BigInt⟪98765432109876543210⟫                                                                             |
 | void 0                                                                          | ⟪undefined⟫                                                                                              |
 | /example/i                                                                      | RegExp⟪/example/i⟫                                                                                       |
-| new URL('https:\//example.com/')                                                | URL⟪https:\//example.com/⟫                                                                               |
+| new URL('https:\//example.com/')                                                | URL⟪https:\//example.com\/⟫                                                                              |
 | Symbol('example')                                                               | {0001}<sup>[3]</sup> Symbol(example)                                                                     |
 | Symbol.for('global')                                                            | Symbol(global)                                                                                           |
 | (obj = {key: 1}, {first: obj, second: obj})                                     | {"first": {"key": 1}, "second": "[0002]<sup>[4]</sup> Object⟪♻️⟫"}                                       |
@@ -150,7 +150,7 @@ declare global {
 ### Build instructions
 
 - Linux
-- node 22.14 (LTS)
+- deno 2.2.8
 
 ```sh
 make install      # install dependencies

build.ts

@@ -0,0 +1,51 @@
+import { build, type BuildOptions, context, stop } from 'esbuild';
+import manifest from './manifest.json' with { type: 'json' };
+import { vue3Plugin } from 'esbuild-plugin-vue-iii';
+
+const nodeEnv = Deno.env.get('NODE_ENV');
+const isProd = nodeEnv === 'production';
+const buildOptions: BuildOptions = {
+  plugins: [
+    vue3Plugin({
+      isProduction: isProd,
+    }),
+  ],
+  entryPoints: [
+    './src/jsdiff-devtools.ts',
+    './src/jsdiff-panel.ts',
+    './src/jsdiff-proxy.ts',
+    './src/jsdiff-console.ts',
+    './src/firefox/jsdiff-background.ts',
+  ],
+  outdir: './public/build/',
+  publicPath: '/public/build/',
+  define: {
+    __VUE_OPTIONS_API__: 'false',
+    __VUE_PROD_DEVTOOLS__: 'false',
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+    __development__: `${!isProd}`,
+    __app_version__: `"${manifest.version}"`,
+    __app_homepage__: `"${manifest.homepage_url}"`,
+  },
+  loader: {
+    '.png': 'file',
+    '.svg': 'file',
+  },
+  bundle: true,
+  platform: 'browser',
+  format: 'iife',
+  target: 'esnext',
+  conditions: [`${nodeEnv}`],
+  minify: isProd,
+  sourcemap: false,
+  treeShaking: true,
+  logLevel: 'warning',
+};
+
+if (isProd) {
+  await build(buildOptions);
+  await stop();
+} else {
+  const ctx = await context(buildOptions);
+  await ctx.watch();
+}