From b858efa34fb0f990196d1cd37729e547925ea627 Mon Sep 17 00:00:00 2001 From: Ignatius Bagus Date: Tue, 12 Sep 2023 17:29:15 +0700 Subject: [PATCH 1/5] feat: build app with vite --- .gitignore | 20 +- README.md | 26 +- dest/devtools/check.svg | 3 - dest/devtools/index.html | 9 - dest/devtools/index.js | 14 - dest/devtools/panel.html | 10 - index.html | 12 + package.json | 15 +- pnpm-lock.yaml | 393 ++++++++++++++++++ rollup.config.js | 62 +-- src/App.svelte | 2 +- src/{base.css => app.css} | 0 src/background.js | 66 --- src/entry.ts | 12 + src/index.js | 13 - src/panel/ComponentView.svelte | 3 +- src/panel/PropertyList.svelte | 3 +- {dest => static}/.web-extension-id | 0 static/background.js | 61 +++ {dest => static}/icons/128.png | Bin {dest => static}/icons/16.png | Bin {dest => static}/icons/24.png | Bin {dest => static}/icons/48.png | Bin {dest => static}/icons/96.png | Bin .../icons}/svelte-logo-dark.svg | 0 .../icons}/svelte-logo-light.svg | 0 {dest => static}/manifest.json | 7 +- static/register.html | 5 + static/register.js | 15 + svelte.config.js | 10 + tsconfig.json | 36 ++ vite.config.ts | 21 + 32 files changed, 611 insertions(+), 207 deletions(-) delete mode 100644 dest/devtools/check.svg delete mode 100644 dest/devtools/index.html delete mode 100644 dest/devtools/index.js delete mode 100644 dest/devtools/panel.html create mode 100644 index.html rename src/{base.css => app.css} (100%) delete mode 100644 src/background.js create mode 100644 src/entry.ts delete mode 100644 src/index.js rename {dest => static}/.web-extension-id (100%) create mode 100644 static/background.js rename {dest => static}/icons/128.png (100%) rename {dest => static}/icons/16.png (100%) rename {dest => static}/icons/24.png (100%) rename {dest => static}/icons/48.png (100%) rename {dest => static}/icons/96.png (100%) rename {dest/devtools => static/icons}/svelte-logo-dark.svg (100%) rename {dest/devtools => static/icons}/svelte-logo-light.svg (100%) rename {dest => static}/manifest.json (80%) create mode 100644 static/register.html create mode 100644 static/register.js create mode 100644 svelte.config.js create mode 100644 tsconfig.json create mode 100644 vite.config.ts diff --git a/.gitignore b/.gitignore index 5ac58ef..5a599fd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,13 +1,9 @@ -.cache node_modules -dest/devtools/styles.css -dest/devtools/styles.css.map -dest/devtools/bundle.js -dest/background.js -dest/privilegedContent.js -dest/icon-*.png -credentials -test/public/bundle.js -test/public/styles.css -test/public/styles.css.map -web-ext-artifacts/ +/build + +.DS_Store +.cache +.env + +# generated files +static/courier.js diff --git a/README.md b/README.md index 7396edc..2011195 100644 --- a/README.md +++ b/README.md @@ -33,19 +33,19 @@ import * as fs from 'fs'; import svelte from 'rollup-plugin-svelte'; export default { - input: 'src/main.js', - output: { - file: 'public/bundle.js', - format: 'iife' - }, - plugins: [ - svelte({ - compilerOptions: { - dev: true - } - }) - ] -} + input: 'src/main.js', + output: { + file: 'public/bundle.js', + format: 'iife', + }, + plugins: [ + svelte({ + compilerOptions: { + dev: true, + }, + }), + ], +}; ``` ### Webpack diff --git a/dest/devtools/check.svg b/dest/devtools/check.svg deleted file mode 100644 index ec45a2a..0000000 --- a/dest/devtools/check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/dest/devtools/index.html b/dest/devtools/index.html deleted file mode 100644 index 2fd0f48..0000000 --- a/dest/devtools/index.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/dest/devtools/index.js b/dest/devtools/index.js deleted file mode 100644 index 5ea3be0..0000000 --- a/dest/devtools/index.js +++ /dev/null @@ -1,14 +0,0 @@ -chrome.devtools.panels.create( - 'Svelte', - chrome.devtools.panels.themeName == 'dark' - ? '/devtools/svelte-logo-dark.svg' - : '/devtools/svelte-logo-light.svg', - '/devtools/panel.html', - (panel) => - panel.onShown.addListener(() => - chrome.devtools.inspectedWindow.eval( - 'if (window.__svelte_devtools_select_element) window.__svelte_devtools_select_element($0)', - (result, err) => err && console.error(err), - ), - ), -); diff --git a/dest/devtools/panel.html b/dest/devtools/panel.html deleted file mode 100644 index 8cd1d05..0000000 --- a/dest/devtools/panel.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/index.html b/index.html new file mode 100644 index 0000000..396be6e --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + + + +
+ + + diff --git a/package.json b/package.json index 6cff247..eae584c 100644 --- a/package.json +++ b/package.json @@ -4,25 +4,30 @@ "description": "Browser devtools extension for debugging Svelte applications.", "repository": "github:sveltejs/svelte-devtools", "license": "MIT", + "type": "module", "scripts": { - "build": "rollup -c", + "dev:app": "vite build --watch", + "dev:scripts": "rollup -cw", + "build": "vite build && rollup -c", "format": "prettier -w . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-sort-package-json", "check": "pnpm check:style && pnpm check:svelte", "check:style": "prettier -c . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-sort-package-json", - "check:svelte": "svelte-check" + "check:svelte": "svelte-check --tsconfig ./tsconfig.json" }, "packageManager": "pnpm@8.7.0", "devDependencies": { "@rollup/plugin-node-resolve": "^15.2.1", + "@sveltejs/vite-plugin-svelte": "^2.4.5", + "@types/chrome": "^0.0.245", + "@types/node": "^20.6.0", "prettier": "^3.0.2", "prettier-plugin-sort-package-json": "^0.1.1", "prettier-plugin-svelte": "^3.0.3", "rollup": "^3.28.1", - "rollup-plugin-css-only": "^4.3.0", - "rollup-plugin-svelte": "^7.1.6", "svelte": "^4.2.0", "svelte-check": "^3.5.0", "svelte-listener": "github:RedHatter/svelte-listener", - "typescript": "^5.2.2" + "typescript": "^5.2.2", + "vite": "^4.4.9" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 878a74d..3bb8b90 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,15 @@ devDependencies: '@rollup/plugin-node-resolve': specifier: ^15.2.1 version: 15.2.1(rollup@3.28.1) + '@sveltejs/vite-plugin-svelte': + specifier: ^2.4.5 + version: 2.4.5(svelte@4.2.0)(vite@4.4.9) + '@types/chrome': + specifier: ^0.0.245 + version: 0.0.245 + '@types/node': + specifier: ^20.6.0 + version: 20.6.0 prettier: specifier: ^3.0.2 version: 3.0.2 @@ -38,6 +47,9 @@ devDependencies: typescript: specifier: ^5.2.2 version: 5.2.2 + vite: + specifier: ^4.4.9 + version: 4.4.9(@types/node@20.6.0) packages: @@ -49,6 +61,204 @@ packages: '@jridgewell/trace-mapping': 0.3.19 dev: true + /@esbuild/android-arm64@0.18.20: + resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@esbuild/android-arm@0.18.20: + resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@esbuild/android-x64@0.18.20: + resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@esbuild/darwin-arm64@0.18.20: + resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@esbuild/darwin-x64@0.18.20: + resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@esbuild/freebsd-arm64@0.18.20: + resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/freebsd-x64@0.18.20: + resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-arm64@0.18.20: + resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-arm@0.18.20: + resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-ia32@0.18.20: + resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-loong64@0.18.20: + resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-mips64el@0.18.20: + resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-ppc64@0.18.20: + resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-riscv64@0.18.20: + resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-s390x@0.18.20: + resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/linux-x64@0.18.20: + resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@esbuild/netbsd-x64@0.18.20: + resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/openbsd-x64@0.18.20: + resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + + /@esbuild/sunos-x64@0.18.20: + resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-arm64@0.18.20: + resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-ia32@0.18.20: + resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@esbuild/win32-x64@0.18.20: + resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@jridgewell/gen-mapping@0.3.3: resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} engines: {node: '>=6.0.0'} @@ -141,10 +351,71 @@ packages: rollup: 3.28.1 dev: true + /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.4.5)(svelte@4.2.0)(vite@4.4.9): + resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==} + engines: {node: ^14.18.0 || >= 16} + peerDependencies: + '@sveltejs/vite-plugin-svelte': ^2.2.0 + svelte: ^3.54.0 || ^4.0.0 + vite: ^4.0.0 + dependencies: + '@sveltejs/vite-plugin-svelte': 2.4.5(svelte@4.2.0)(vite@4.4.9) + debug: 4.3.4 + svelte: 4.2.0 + vite: 4.4.9(@types/node@20.6.0) + transitivePeerDependencies: + - supports-color + dev: true + + /@sveltejs/vite-plugin-svelte@2.4.5(svelte@4.2.0)(vite@4.4.9): + resolution: {integrity: sha512-UJKsFNwhzCVuiZd06jM/psscyNJNDwjQC+qIeb7GBJK9iWeQCcIyfcPWDvbCudfcJggY9jtxJeeaZH7uny93FQ==} + engines: {node: ^14.18.0 || >= 16} + peerDependencies: + svelte: ^3.54.0 || ^4.0.0 + vite: ^4.0.0 + dependencies: + '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.4.5)(svelte@4.2.0)(vite@4.4.9) + debug: 4.3.4 + deepmerge: 4.3.1 + kleur: 4.1.5 + magic-string: 0.30.3 + svelte: 4.2.0 + svelte-hmr: 0.15.3(svelte@4.2.0) + vite: 4.4.9(@types/node@20.6.0) + vitefu: 0.2.4(vite@4.4.9) + transitivePeerDependencies: + - supports-color + dev: true + + /@types/chrome@0.0.245: + resolution: {integrity: sha512-bBdONkLO8wMbJK6iG0Q8ShFuh67Grnod+5OpClJaa8MuKJXP/Kjl3f8wRYeMOnQ0Q8HDgpUlopu8bvl9siR8/A==} + dependencies: + '@types/filesystem': 0.0.32 + '@types/har-format': 1.2.12 + dev: true + /@types/estree@1.0.1: resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==} dev: true + /@types/filesystem@0.0.32: + resolution: {integrity: sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==} + dependencies: + '@types/filewriter': 0.0.29 + dev: true + + /@types/filewriter@0.0.29: + resolution: {integrity: sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==} + dev: true + + /@types/har-format@1.2.12: + resolution: {integrity: sha512-P20p/YBrqUBmzD6KhIQ8EiY4/RRzlekL4eCvfQnulFPfjmiGxKIoyCeI7qam5I7oKH3P8EU4ptEi0EfyGoLysw==} + dev: true + + /@types/node@20.6.0: + resolution: {integrity: sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==} + dev: true + /@types/pug@2.0.6: resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==} dev: true @@ -253,6 +524,18 @@ packages: source-map-js: 1.0.2 dev: true + /debug@4.3.4: + resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + dev: true + /deepmerge@4.3.1: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} @@ -272,6 +555,36 @@ packages: resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==} dev: true + /esbuild@0.18.20: + resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/android-arm': 0.18.20 + '@esbuild/android-arm64': 0.18.20 + '@esbuild/android-x64': 0.18.20 + '@esbuild/darwin-arm64': 0.18.20 + '@esbuild/darwin-x64': 0.18.20 + '@esbuild/freebsd-arm64': 0.18.20 + '@esbuild/freebsd-x64': 0.18.20 + '@esbuild/linux-arm': 0.18.20 + '@esbuild/linux-arm64': 0.18.20 + '@esbuild/linux-ia32': 0.18.20 + '@esbuild/linux-loong64': 0.18.20 + '@esbuild/linux-mips64el': 0.18.20 + '@esbuild/linux-ppc64': 0.18.20 + '@esbuild/linux-riscv64': 0.18.20 + '@esbuild/linux-s390x': 0.18.20 + '@esbuild/linux-x64': 0.18.20 + '@esbuild/netbsd-x64': 0.18.20 + '@esbuild/openbsd-x64': 0.18.20 + '@esbuild/sunos-x64': 0.18.20 + '@esbuild/win32-arm64': 0.18.20 + '@esbuild/win32-ia32': 0.18.20 + '@esbuild/win32-x64': 0.18.20 + dev: true + /estree-walker@2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} dev: true @@ -417,6 +730,11 @@ packages: '@types/estree': 1.0.1 dev: true + /kleur@4.1.5: + resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} + engines: {node: '>=6'} + dev: true + /locate-character@3.0.0: resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==} dev: true @@ -479,6 +797,16 @@ packages: engines: {node: '>=4'} dev: true + /ms@2.1.2: + resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} + dev: true + + /nanoid@3.3.6: + resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + dev: true + /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} @@ -523,6 +851,15 @@ packages: engines: {node: '>=8.6'} dev: true + /postcss@8.4.29: + resolution: {integrity: sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.6 + picocolors: 1.0.0 + source-map-js: 1.0.2 + dev: true + /prettier-plugin-sort-package-json@0.1.1(prettier@3.0.2): resolution: {integrity: sha512-mnnLmKyL/bigGISn2xLObeGS5a/tdbR2ll6Ek1QLPBUfket4ydpYhZJxllHlxJkzwOT1ooRw9yWM7SkNXvB9oQ==} peerDependencies: @@ -696,6 +1033,15 @@ packages: - sugarss dev: true + /svelte-hmr@0.15.3(svelte@4.2.0): + resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==} + engines: {node: ^12.20 || ^14.13.1 || >= 16} + peerDependencies: + svelte: ^3.19.0 || ^4.0.0 + dependencies: + svelte: 4.2.0 + dev: true + /svelte-preprocess@5.0.4(svelte@4.2.0)(typescript@5.2.2): resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==} engines: {node: '>= 14.10.0'} @@ -775,6 +1121,53 @@ packages: hasBin: true dev: true + /vite@4.4.9(@types/node@20.6.0): + resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 20.6.0 + esbuild: 0.18.20 + postcss: 8.4.29 + rollup: 3.28.1 + optionalDependencies: + fsevents: 2.3.3 + dev: true + + /vitefu@0.2.4(vite@4.4.9): + resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 + peerDependenciesMeta: + vite: + optional: true + dependencies: + vite: 4.4.9(@types/node@20.6.0) + dev: true + /wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} dev: true diff --git a/rollup.config.js b/rollup.config.js index 47e9b43..747a54a 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,46 +1,17 @@ -import svelte from 'rollup-plugin-svelte'; -import resolve from '@rollup/plugin-node-resolve'; -import css from 'rollup-plugin-css-only'; +import { nodeResolve } from '@rollup/plugin-node-resolve'; +import { defineConfig } from 'rollup'; -export default [ +export default defineConfig([ { - input: 'src/index.js', - external: ['chrome'], + input: 'static/background.js', output: { - file: 'dest/devtools/bundle.js', - name: 'App', - format: 'iife', - globals: { - chrome: 'chrome', - }, - }, - plugins: [ - svelte({ - preprocess: { - markup: (input) => { - const code = input.content - .replace(/(>|})\s+(?![^]*?<\/(?:script|style)>|[^<]*?>|[^{]*?})/g, '$1') - .replace(/(?]*?|{[^}]*?)\s+(<|{)(?![^]*<\/(?:script|style)>)/g, '$1'); - return { code }; - }, - }, - }), - resolve(), - css({ output: 'styles.css' }), - ], - }, - { - input: 'src/background.js', - output: { - file: 'dest/background.js', + file: 'build/background.js', }, - plugins: [], }, { input: 'src/client/index.js', output: { - file: 'dest/privilegedContent.js', - name: 'SvelteDevtools', + file: 'build/courier.js', format: 'iife', banner: `if (!window.tag) { window.tag = document.createElement('script') @@ -76,23 +47,6 @@ export default [ window.addEventListener('unload', () => sendMessage({ type: 'clear' })) }`, }, - plugins: [resolve()], - }, - { - input: 'test/src/index.js', - output: { - file: 'test/public/bundle.js', - name: 'App', - format: 'iife', - }, - plugins: [ - svelte({ - compilerOptions: { - dev: true, - }, - }), - resolve(), - css({ output: 'styles.css' }), - ], + plugins: [nodeResolve()], }, -]; +]); diff --git a/src/App.svelte b/src/App.svelte index 4cb2e2f..28e9d06 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -24,7 +24,7 @@ -
    ($hoveredNodeId = null)}> +
      ($hoveredNodeId = null)}> {#each $rootNodes as node (node.id)} {/each} diff --git a/src/base.css b/src/app.css similarity index 100% rename from src/base.css rename to src/app.css diff --git a/src/background.js b/src/background.js deleted file mode 100644 index 1a282cb..0000000 --- a/src/background.js +++ /dev/null @@ -1,66 +0,0 @@ -const ports = new Map(); - -chrome.runtime.onConnect.addListener((port) => { - if (port.sender.url == chrome.runtime.getURL('/devtools/panel.html')) { - port.onMessage.addListener(handleToolsMessage); - } else { - // This is not an expected connection, so we just log an error and close it - console.error('Unexpected connection. Port ', port); - port.disconnect(); - } -}); - -function handleToolsMessage(msg, port) { - switch (msg.type) { - // 'init' and 'reload' messages do not need to be delivered to content script - case 'init': - setup(msg.tabId, port, msg.profilerEnabled); - break; - case 'reload': - chrome.tabs.reload(msg.tabId, { bypassCache: true }); - break; - default: - chrome.tabs.sendMessage(msg.tabId, msg); - break; - } -} - -// Receive messages from content scripts -chrome.runtime.onMessage.addListener((msg, sender) => handlePageMessage(msg, sender.tab.id)); - -function handlePageMessage(msg, tabId) { - const tools = ports.get(tabId); - if (tools) tools.postMessage(msg); -} - -function attachScript(tabId, changed) { - const firefox = !window.chrome && !changed.url; - if (!ports.has(tabId) || changed.status !== 'loading' || firefox) return; - chrome.tabs.executeScript(tabId, { - file: '/privilegedContent.js', - runAt: 'document_start', - }); -} - -function setup(tabId, port, profilerEnabled) { - chrome.tabs.executeScript(tabId, { - code: profilerEnabled - ? `window.sessionStorage.SvelteDevToolsProfilerEnabled = "true"` - : 'delete window.sessionStorage.SvelteDevToolsProfilerEnabled', - runAt: 'document_start', - }); - - ports.set(tabId, port); - - port.onDisconnect.addListener(() => { - ports.delete(tabId); - chrome.tabs.onUpdated.removeListener(attachScript); - // Inform content script that it background closed and it needs to clean up - chrome.tabs.sendMessage(tabId, { - type: 'clear', - tabId: tabId, - }); - }); - - chrome.tabs.onUpdated.addListener(attachScript); -} diff --git a/src/entry.ts b/src/entry.ts new file mode 100644 index 0000000..0d63182 --- /dev/null +++ b/src/entry.ts @@ -0,0 +1,12 @@ +import './app.css'; +import App from './App.svelte'; + +if (chrome.devtools.panels.themeName === 'dark') { + document.body.classList.add('dark'); +} else { + document.body.classList.remove('dark'); +} + +export default new App({ + target: document.querySelector('#app')!, +}); diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 6accd00..0000000 --- a/src/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import './base.css'; -import { devtools } from 'chrome'; -import App from './App.svelte'; - -function setDarkMode(theme) { - if (theme == 'dark') document.body.classList.add('dark'); - else document.body.classList.remove('dark'); -} - -setDarkMode(devtools.panels.themeName); -if (devtools.panels.onThemeChanged) devtools.panels.onThemeChanged.addListener(setDarkMode); - -new App({ target: document.body }); diff --git a/src/panel/ComponentView.svelte b/src/panel/ComponentView.svelte index 8b146f1..1a318d9 100644 --- a/src/panel/ComponentView.svelte +++ b/src/panel/ComponentView.svelte @@ -1,5 +1,4 @@ + + diff --git a/static/register.js b/static/register.js new file mode 100644 index 0000000..cbb761a --- /dev/null +++ b/static/register.js @@ -0,0 +1,15 @@ +chrome.devtools.panels.create( + 'Svelte', + chrome.devtools.panels.themeName === 'dark' + ? '/icons/svelte-logo-dark.svg' + : '/icons/svelte-logo-light.svg', + '/index.html', + (panel) => { + panel.onShown.addListener(() => { + chrome.devtools.inspectedWindow.eval( + 'if (window.__svelte_devtools_select_element) window.__svelte_devtools_select_element($0)', + (_, err) => err && console.error(err), + ); + }); + }, +); diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..d5a9d0f --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,10 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +export default { + preprocess: vitePreprocess(), + + onwarn(warning, handler) { + if (warning.message.includes('A11y')) return; + !warning.message.includes('chrome') && handler(warning); + }, +}; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..b8a3f8b --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,36 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + + "checkJs": true, + "strict": true, + "composite": true, + "noEmit": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + + "skipLibCheck": true, + "isolatedModules": true, + "useDefineForClassFields": true, + "forceConsistentCasingInFileNames": true, + + "paths": { + "$lib": ["./src/lib"], + "$lib/*": ["./src/lib/*"] + } + }, + "include": [ + "vite.config.ts", + // disable temporarily + // "src/**/*.d.ts", + // "src/**/*.ts", + // "src/**/*.js", + // "src/**/*.svelte", + "static/**/*.js" + ], + "exclude": ["static/courier.js"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..553a45c --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,21 @@ +import { resolve } from 'node:path'; +import { svelte } from '@sveltejs/vite-plugin-svelte'; +import { defineConfig } from 'vite'; + +export default defineConfig(() => { + return { + plugins: [svelte()], + + build: { + outDir: 'build', + }, + + publicDir: 'static', + + resolve: { + alias: { + $lib: resolve(__dirname, 'src/lib'), + }, + }, + }; +}); From 4c775cfb7ee5844409ace741e7a2ac9f7f48cc06 Mon Sep 17 00:00:00 2001 From: Ignatius Bagus Date: Tue, 12 Sep 2023 17:31:20 +0700 Subject: [PATCH 2/5] update readme --- README.md | 114 ++++++++++-------------------------------------------- 1 file changed, 20 insertions(+), 94 deletions(-) diff --git a/README.md b/README.md index 2011195..003a71c 100644 --- a/README.md +++ b/README.md @@ -1,116 +1,42 @@ -# Svelte DevTools +

      Svelte DevTools

      -[![Mozilla Add-on](https://img.shields.io/amo/users/svelte-devtools?color=red&label=Firefox)](https://addons.mozilla.org/en-US/firefox/addon/svelte-devtools/) [![Chrome Web Store](https://img.shields.io/chrome-web-store/users/ckolcbmkjpjmangdbmnkpjigpkddpogn?color=blue&label=Chrome)](https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn) + -Install from the [Firefox addon page](https://addons.mozilla.org/en-US/firefox/addon/svelte-devtools/) or the -[Chrome addon page](https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn) - -**Svelte devtools is actively maintained. If you have any problems or feature requests feel free to create an issue.** - -Svelte Devtools is a Firefox and Chrome extension for the Svelte javascript framework. It allows you to inspect the Svelte state and component hierarchies in the Developer Tools. +Svelte DevTools is a Chrome extension for the [Svelte](https://svelte.dev/) framework. It allows you to inspect the Svelte state and component hierarchies in the Developer Tools. After installing you will see a new tab in Developer Tools. This tab displays a tree of Svelte components, HTMLx blocks, and DOM elements that were rendered on the page. By selecting one of the nodes in the tree, you can inspect and edit its current state in the panel to the right. -**Requires svelte version 3.12.0 or above** - ![1.1.0 Screenshot](./.github/assets/screenshot-1.1.0.png '1.1.0 Screenshot') -## Enabling dev mode - -In order for svelte-devtools to comunicate with your application bundle the svelte compiler must have the `dev` option set to `true`. - -### Template - -By default the [svelte template](https://github.com/sveltejs/template) will set `dev: true` when running `npm run dev` and `false` otherwise. - -### Rollup - -Below is a minimalist rollup config with `dev: true` set. - -```js -// rollup.config.js -import * as fs from 'fs'; -import svelte from 'rollup-plugin-svelte'; - -export default { - input: 'src/main.js', - output: { - file: 'public/bundle.js', - format: 'iife', - }, - plugins: [ - svelte({ - compilerOptions: { - dev: true, - }, - }), - ], -}; -``` - -### Webpack - -Below is the relevant snipet from a `webpack.config.js` with `dev: true` set. - -```js - ... - module: { - rules: [ - ... - { - test: /\.(html|svelte)$/, - exclude: /node_modules/, - use: { - loader: 'svelte-loader', - options: { - compilerOptions: { - dev: true, - } - }, - }, - }, - ... - ] - }, - ... -``` - -## Build from source - -### Firefox - -Clone this repository and run the package script. - -```sh -git clone https://github.com/sveltejs/svelte-devtools.git -cd svelte-devtools -npm install -npm run package:firefox -``` - -This should build the codebase and output a zip file under `web-ext-artifacts`. +## Requirements -Unsigned addons can't be install in firefox permanently but addons can be installed temporarily. +The `svelte-devtools` extension requires your Svelte application to be compiled with the `dev` option set to `true`. If you're using [SvelteKit](https://kit.svelte.dev/), this is done automatically, outside of that you will need to set it manually. -1. Navigate to `about:debugging`. -2. Click "Load Temporary Add-on" and choose the generated zip file. +This extensions officially supports Svelte 4.0 and above. -### Chrome +## Development Clone this repository and run the package script. ```sh git clone https://github.com/sveltejs/svelte-devtools.git cd svelte-devtools -npm install -npm run package:chrome +pnpm install +pnpm build ``` -This should build the codebase and output a zip file under `web-ext-artifacts`. +This will build the codebase and output all the required files in the `build` directory. To load the extension for development, follow these steps: -1. Navigate to `chrome://extensions/`. -2. Turn on developer mode using the 'Developer mode' switch in the upper right hand corner of the page. -3. Click 'Load Unpacked' and select the `dest` directory. +1. Navigate to the extensions settings page +2. Turn on the 'Developer mode' switch +3. Click 'Load Unpacked' and select the `build` directory ## Acknowledgements From 5db3ecc594cde9b63c18ebbffd8fd5c55e01cc2d Mon Sep 17 00:00:00 2001 From: Ignatius Bagus Date: Tue, 12 Sep 2023 17:35:49 +0700 Subject: [PATCH 3/5] update lockfile --- pnpm-lock.yaml | 42 ------------------------------------------ 1 file changed, 42 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3bb8b90..fc93b8f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,12 +29,6 @@ devDependencies: rollup: specifier: ^3.28.1 version: 3.28.1 - rollup-plugin-css-only: - specifier: ^4.3.0 - version: 4.3.0(rollup@3.28.1) - rollup-plugin-svelte: - specifier: ^7.1.6 - version: 7.1.6(rollup@3.28.1)(svelte@4.2.0) svelte: specifier: ^4.2.0 version: 4.2.0 @@ -328,14 +322,6 @@ packages: rollup: 3.28.1 dev: true - /@rollup/pluginutils@4.2.1: - resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==} - engines: {node: '>= 8.0.0'} - dependencies: - estree-walker: 2.0.2 - picomatch: 2.3.1 - dev: true - /@rollup/pluginutils@5.0.4(rollup@3.28.1): resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==} engines: {node: '>=14.0.0'} @@ -900,11 +886,6 @@ packages: engines: {node: '>=4'} dev: true - /resolve.exports@2.0.2: - resolution: {integrity: sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==} - engines: {node: '>=10'} - dev: true - /resolve@1.22.4: resolution: {integrity: sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==} hasBin: true @@ -926,29 +907,6 @@ packages: glob: 7.2.3 dev: true - /rollup-plugin-css-only@4.3.0(rollup@3.28.1): - resolution: {integrity: sha512-BsiCqJJQzZh2lQiHY5irejRoJ3I1EUFHEi5PjVqsr+EmOh54YrWVwd3YZEXnQJ2+fzlhif0YM/Kf0GuH90GAdQ==} - engines: {node: '>=14'} - peerDependencies: - rollup: <4 - dependencies: - '@rollup/pluginutils': 5.0.4(rollup@3.28.1) - rollup: 3.28.1 - dev: true - - /rollup-plugin-svelte@7.1.6(rollup@3.28.1)(svelte@4.2.0): - resolution: {integrity: sha512-nVFRBpGWI2qUY1OcSiEEA/kjCY2+vAjO9BI8SzA7NRrh2GTunLd6w2EYmnMt/atgdg8GvcNjLsmZmbQs/u4SQA==} - engines: {node: '>=10'} - peerDependencies: - rollup: '>=2.0.0' - svelte: '>=3.5.0' - dependencies: - '@rollup/pluginutils': 4.2.1 - resolve.exports: 2.0.2 - rollup: 3.28.1 - svelte: 4.2.0 - dev: true - /rollup@3.28.1: resolution: {integrity: sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==} engines: {node: '>=14.18.0', npm: '>=8.0.0'} From 740817664f1137ed22a93f9939799bb0d8281e4e Mon Sep 17 00:00:00 2001 From: Ignatius Bagus Date: Tue, 12 Sep 2023 17:43:46 +0700 Subject: [PATCH 4/5] git mv --- static/background.js | 61 +++++++++++++---------- static/devtools/index.html | 9 ++++ static/{register.js => devtools/index.js} | 2 +- static/manifest.json | 2 +- static/register.html | 5 -- 5 files changed, 47 insertions(+), 32 deletions(-) create mode 100644 static/devtools/index.html rename static/{register.js => devtools/index.js} (89%) delete mode 100644 static/register.html diff --git a/static/background.js b/static/background.js index e3f23fb..9bc65a7 100644 --- a/static/background.js +++ b/static/background.js @@ -14,33 +14,15 @@ chrome.runtime.onConnect.addListener((port) => { /** @type {Parameters[0]} */ function handleToolsMessage(msg, port) { switch (msg.type) { - case 'init': { - chrome.tabs.executeScript(msg.tabId, { - code: msg.profilerEnabled - ? `window.sessionStorage.SvelteDevToolsProfilerEnabled = "true"` - : 'delete window.sessionStorage.SvelteDevToolsProfilerEnabled', - runAt: 'document_start', - }); - - ports.set(msg.tabId, port); - - port.onDisconnect.addListener(() => { - ports.delete(msg.tabId); - - chrome.tabs.onUpdated.removeListener(attach); - chrome.tabs.sendMessage(msg.tabId, { - type: 'clear', - tabId: msg.tabId, - }); - }); - - return chrome.tabs.onUpdated.addListener(attach); - } + case 'init': + setup(msg.tabId, port, msg.profilerEnabled); + break; case 'reload': - return void chrome.tabs.reload(msg.tabId, { bypassCache: true }); + chrome.tabs.reload(msg.tabId, { bypassCache: true }); + break; default: - // relay messages from devtools page to content scripts - return void chrome.tabs.sendMessage(msg.tabId, msg); + chrome.tabs.sendMessage(msg.tabId, msg); + break; } } @@ -59,3 +41,32 @@ function attach(tabId, changed) { runAt: 'document_start', }); } + +/** + * + * @param {number} tabId + * @param {chrome.runtime.Port} port + * @param {boolean} profilerEnabled + */ +function setup(tabId, port, profilerEnabled) { + chrome.tabs.executeScript(tabId, { + code: profilerEnabled + ? `window.sessionStorage.SvelteDevToolsProfilerEnabled = "true"` + : 'delete window.sessionStorage.SvelteDevToolsProfilerEnabled', + runAt: 'document_start', + }); + + ports.set(tabId, port); + + port.onDisconnect.addListener(() => { + ports.delete(tabId); + + chrome.tabs.onUpdated.removeListener(attach); + chrome.tabs.sendMessage(tabId, { + type: 'clear', + tabId: tabId, + }); + }); + + chrome.tabs.onUpdated.addListener(attach); +} diff --git a/static/devtools/index.html b/static/devtools/index.html new file mode 100644 index 0000000..2fd0f48 --- /dev/null +++ b/static/devtools/index.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/register.js b/static/devtools/index.js similarity index 89% rename from static/register.js rename to static/devtools/index.js index cbb761a..0f60516 100644 --- a/static/register.js +++ b/static/devtools/index.js @@ -1,6 +1,6 @@ chrome.devtools.panels.create( 'Svelte', - chrome.devtools.panels.themeName === 'dark' + chrome.devtools.panels.themeName == 'dark' ? '/icons/svelte-logo-dark.svg' : '/icons/svelte-logo-light.svg', '/index.html', diff --git a/static/manifest.json b/static/manifest.json index bc38459..a27298e 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -14,7 +14,7 @@ "background": { "scripts": ["background.js"] }, - "devtools_page": "register.html", + "devtools_page": "devtools/index.html", "permissions": ["tabs", ""], "web_accessible_resources": ["courier.js"] } diff --git a/static/register.html b/static/register.html deleted file mode 100644 index 6689014..0000000 --- a/static/register.html +++ /dev/null @@ -1,5 +0,0 @@ - - - - - From b2ea329fca0c6dd9f1c5a24c92fbd67b5b2de9a0 Mon Sep 17 00:00:00 2001 From: Ignatius Bagus Date: Tue, 12 Sep 2023 19:19:41 +0700 Subject: [PATCH 5/5] move to lib --- src/entry.ts | 2 +- src/{ => lib}/nodes/Anchor.svelte | 0 src/{ => lib}/nodes/Block.svelte | 0 src/{ => lib}/nodes/Collapse.svelte | 0 src/{ => lib}/nodes/Element.svelte | 0 src/{ => lib}/nodes/ElementAttributes.svelte | 0 src/{ => lib}/nodes/Iteration.svelte | 0 src/{ => lib}/nodes/Node.svelte | 0 src/{ => lib}/nodes/SearchTerm.svelte | 0 src/{ => lib}/nodes/Slot.svelte | 0 src/{ => lib}/nodes/Text.svelte | 0 src/{ => lib}/panel/CollapsableValue.svelte | 0 src/{ => lib}/panel/ComponentView.svelte | 0 src/{ => lib}/panel/Editable.svelte | 0 src/{ => lib}/panel/Panel.svelte | 0 src/{ => lib}/panel/PropertyList.svelte | 0 src/{ => lib}/profiler/Frame.svelte | 0 src/{ => lib}/profiler/Operation.svelte | 0 src/{ => lib}/profiler/Profiler.svelte | 11 +++++----- src/{ => lib}/store.js | 0 src/{ => lib}/toolbar/Button.svelte | 0 src/{ => lib}/toolbar/PickerButton.svelte | 0 src/{ => lib}/toolbar/ProfileButton.svelte | 0 src/{ => lib}/toolbar/Search.svelte | 0 src/{ => lib}/toolbar/Toolbar.svelte | 0 src/{ => lib}/toolbar/VisibilityButton.svelte | 0 src/{ => routes}/App.svelte | 20 ++++++++++--------- src/{ => routes}/Breadcrumbs.svelte | 2 +- src/{ => routes}/ConnectMessage.svelte | 2 +- {src => static/icons}/svelte-logo.svg | 0 30 files changed, 20 insertions(+), 17 deletions(-) rename src/{ => lib}/nodes/Anchor.svelte (100%) rename src/{ => lib}/nodes/Block.svelte (100%) rename src/{ => lib}/nodes/Collapse.svelte (100%) rename src/{ => lib}/nodes/Element.svelte (100%) rename src/{ => lib}/nodes/ElementAttributes.svelte (100%) rename src/{ => lib}/nodes/Iteration.svelte (100%) rename src/{ => lib}/nodes/Node.svelte (100%) rename src/{ => lib}/nodes/SearchTerm.svelte (100%) rename src/{ => lib}/nodes/Slot.svelte (100%) rename src/{ => lib}/nodes/Text.svelte (100%) rename src/{ => lib}/panel/CollapsableValue.svelte (100%) rename src/{ => lib}/panel/ComponentView.svelte (100%) rename src/{ => lib}/panel/Editable.svelte (100%) rename src/{ => lib}/panel/Panel.svelte (100%) rename src/{ => lib}/panel/PropertyList.svelte (100%) rename src/{ => lib}/profiler/Frame.svelte (100%) rename src/{ => lib}/profiler/Operation.svelte (100%) rename src/{ => lib}/profiler/Profiler.svelte (88%) rename src/{ => lib}/store.js (100%) rename src/{ => lib}/toolbar/Button.svelte (100%) rename src/{ => lib}/toolbar/PickerButton.svelte (100%) rename src/{ => lib}/toolbar/ProfileButton.svelte (100%) rename src/{ => lib}/toolbar/Search.svelte (100%) rename src/{ => lib}/toolbar/Toolbar.svelte (100%) rename src/{ => lib}/toolbar/VisibilityButton.svelte (100%) rename src/{ => routes}/App.svelte (57%) rename src/{ => routes}/Breadcrumbs.svelte (96%) rename src/{ => routes}/ConnectMessage.svelte (95%) rename {src => static/icons}/svelte-logo.svg (100%) diff --git a/src/entry.ts b/src/entry.ts index 0d63182..600290e 100644 --- a/src/entry.ts +++ b/src/entry.ts @@ -1,5 +1,5 @@ import './app.css'; -import App from './App.svelte'; +import App from './routes/App.svelte'; if (chrome.devtools.panels.themeName === 'dark') { document.body.classList.add('dark'); diff --git a/src/nodes/Anchor.svelte b/src/lib/nodes/Anchor.svelte similarity index 100% rename from src/nodes/Anchor.svelte rename to src/lib/nodes/Anchor.svelte diff --git a/src/nodes/Block.svelte b/src/lib/nodes/Block.svelte similarity index 100% rename from src/nodes/Block.svelte rename to src/lib/nodes/Block.svelte diff --git a/src/nodes/Collapse.svelte b/src/lib/nodes/Collapse.svelte similarity index 100% rename from src/nodes/Collapse.svelte rename to src/lib/nodes/Collapse.svelte diff --git a/src/nodes/Element.svelte b/src/lib/nodes/Element.svelte similarity index 100% rename from src/nodes/Element.svelte rename to src/lib/nodes/Element.svelte diff --git a/src/nodes/ElementAttributes.svelte b/src/lib/nodes/ElementAttributes.svelte similarity index 100% rename from src/nodes/ElementAttributes.svelte rename to src/lib/nodes/ElementAttributes.svelte diff --git a/src/nodes/Iteration.svelte b/src/lib/nodes/Iteration.svelte similarity index 100% rename from src/nodes/Iteration.svelte rename to src/lib/nodes/Iteration.svelte diff --git a/src/nodes/Node.svelte b/src/lib/nodes/Node.svelte similarity index 100% rename from src/nodes/Node.svelte rename to src/lib/nodes/Node.svelte diff --git a/src/nodes/SearchTerm.svelte b/src/lib/nodes/SearchTerm.svelte similarity index 100% rename from src/nodes/SearchTerm.svelte rename to src/lib/nodes/SearchTerm.svelte diff --git a/src/nodes/Slot.svelte b/src/lib/nodes/Slot.svelte similarity index 100% rename from src/nodes/Slot.svelte rename to src/lib/nodes/Slot.svelte diff --git a/src/nodes/Text.svelte b/src/lib/nodes/Text.svelte similarity index 100% rename from src/nodes/Text.svelte rename to src/lib/nodes/Text.svelte diff --git a/src/panel/CollapsableValue.svelte b/src/lib/panel/CollapsableValue.svelte similarity index 100% rename from src/panel/CollapsableValue.svelte rename to src/lib/panel/CollapsableValue.svelte diff --git a/src/panel/ComponentView.svelte b/src/lib/panel/ComponentView.svelte similarity index 100% rename from src/panel/ComponentView.svelte rename to src/lib/panel/ComponentView.svelte diff --git a/src/panel/Editable.svelte b/src/lib/panel/Editable.svelte similarity index 100% rename from src/panel/Editable.svelte rename to src/lib/panel/Editable.svelte diff --git a/src/panel/Panel.svelte b/src/lib/panel/Panel.svelte similarity index 100% rename from src/panel/Panel.svelte rename to src/lib/panel/Panel.svelte diff --git a/src/panel/PropertyList.svelte b/src/lib/panel/PropertyList.svelte similarity index 100% rename from src/panel/PropertyList.svelte rename to src/lib/panel/PropertyList.svelte diff --git a/src/profiler/Frame.svelte b/src/lib/profiler/Frame.svelte similarity index 100% rename from src/profiler/Frame.svelte rename to src/lib/profiler/Frame.svelte diff --git a/src/profiler/Operation.svelte b/src/lib/profiler/Operation.svelte similarity index 100% rename from src/profiler/Operation.svelte rename to src/lib/profiler/Operation.svelte diff --git a/src/profiler/Profiler.svelte b/src/lib/profiler/Profiler.svelte similarity index 88% rename from src/profiler/Profiler.svelte rename to src/lib/profiler/Profiler.svelte index c41b515..d58343a 100644 --- a/src/profiler/Profiler.svelte +++ b/src/lib/profiler/Profiler.svelte @@ -1,10 +1,11 @@ {#if $profilerEnabled} diff --git a/src/Breadcrumbs.svelte b/src/routes/Breadcrumbs.svelte similarity index 96% rename from src/Breadcrumbs.svelte rename to src/routes/Breadcrumbs.svelte index 0676db3..97a7d03 100644 --- a/src/Breadcrumbs.svelte +++ b/src/routes/Breadcrumbs.svelte @@ -1,6 +1,6 @@
      diff --git a/src/svelte-logo.svg b/static/icons/svelte-logo.svg similarity index 100% rename from src/svelte-logo.svg rename to static/icons/svelte-logo.svg