feat: build app with vite

.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

README.md

@@ -1,116 +1,42 @@
-# Svelte DevTools
+<h1 align="center">Svelte DevTools</h1>
 
-[![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)
+<div align="center">
+  <a href="https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn">
+    <img src="https://img.shields.io/chrome-web-store/users/ckolcbmkjpjmangdbmnkpjigpkddpogn?color=blue&label=Chrome" alt="Chrome Web Store" />
+  </a>
+  <a href="https://addons.mozilla.org/en-US/firefox/addon/svelte-devtools">
+    <img src="https://img.shields.io/amo/users/svelte-devtools?color=orange&label=Firefox" alt="Mozilla Add-on" />
+  </a>
+</div>
 
-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
 

index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	</head>
+
+	<body>
+		<div id="app" style="display: contents"></div>
+		<script type="module" src="src/entry.ts"></script>
+	</body>
+</html>

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"
 	}
 }