chore(release): @wxt-dev/module-solid v1.0.1

docs/guide/key-concepts/frontend-frameworks.md

@@ -1,28 +1,59 @@
 # Frontend Frameworks
 
-WXT supports all frontend frameworks with a Vite plugin:
+## Built-in Modules
 
-- `@vitejs/plugin-vue`
-- `@vitejs/plugin-react`
-- `@vitejs/plugin-react-swc`
-- And more!
+WXT has preconfigured modules for 4 frameworks:
 
-Just add the vite plugin to your config and you're good to go! Use the framework in HTML pages or content scripts, it will just work 👍
+- [`@wxt-dev/module-react`](https://github.com/wxt-dev/wxt/tree/main/packages/module-react)
+- [`@wxt-dev/module-vue`](https://github.com/wxt-dev/wxt/tree/main/packages/module-vue)
+- [`@wxt-dev/module-svelte`](https://github.com/wxt-dev/wxt/tree/main/packages/module-svelte)
+- [`@wxt-dev/module-solid`](https://github.com/wxt-dev/wxt/tree/main/packages/module-solid)
+
+Install the module for your framework, then add it to your config:
 
 :::code-group
 
-```ts [Vue]
+```ts [React]
 import { defineConfig } from 'wxt';
-import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
-  vite: () => ({
-    plugins: [vue()],
-  }),
+  modules: ['@wxt-dev/module-react'],
 });
 ```
 
-```ts [React]
+```ts [Vue]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-vue'],
+});
+```
+
+```ts [Svelte]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-svelte'],
+});
+```
+
+```ts [Solid]
+import { defineConfig } from 'wxt';
+
+export default defineConfig({
+  modules: ['@wxt-dev/module-solid'],
+});
+```
+
+:::
+
+## Adding Vite Plugins
+
+If your framework doesn't have an official WXT module, no worries! WXT supports any framework with a Vite plugin.
+
+Just add the Vite plugin to your config and you're good to go! Use the framework in HTML pages or content scripts, it will just work 👍
+
+```ts
 import { defineConfig } from 'wxt';
 import react from '@vitejs/plugin-react';
 
@@ -33,18 +64,7 @@ export default defineConfig({
 });
 ```
 
-```ts [Svelte]
-import { defineConfig } from 'wxt';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-
-export default defineConfig({
-  vite: () => ({
-    plugins: [svelte()],
-  }),
-});
-```
-
-:::
+The WXT modules just simplify the configuration and add auto-imports. They're not much different than the above.
 
 ## Multiple Apps
 
@@ -84,9 +104,9 @@ Lots of frameworks come with routers for building a multi-page app using the URL
 
 Instead, you need to configure the router to run in "hash" mode, where the routing information is apart of the URL's hash, not the path (ie: `popup.html#/` and `popup.html#/account/settings`)
 
-Refer to your router's docs for information about "hash" mode and how to enable it. Here's a non-extensive list of a few popular routers:
+Refer to your router's docs for information about hash mode and how to enable it. Here's a non-extensive list of a few popular routers:
 
-- [React](https://reactrouter.com/en/main/routers/create-hash-router)
-- [Vue](https://router.vuejs.org/guide/essentials/history-mode.html#Hash-Mode)
-- [Svelte](https://www.npmjs.com/package/svelte-spa-router#hash-based-routing)
-- [Solid](https://github.com/solidjs/solid-router?tab=readme-ov-file#hash-mode-router)
+- [`react-router`](https://reactrouter.com/en/main/routers/create-hash-router)
+- [`vue-router`](https://router.vuejs.org/guide/essentials/history-mode.html#Hash-Mode)
+- [`svelte-spa-router`](https://www.npmjs.com/package/svelte-spa-router#hash-based-routing)
+- [`solid-router`](https://github.com/solidjs/solid-router?tab=readme-ov-file#hash-mode-router)

packages/module-react/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v1.0.0
+
+Initial release 🎉

packages/module-solid/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+## v1.0.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/module-solid-v1.0.0...module-solid-v1.0.1)
+
+### 🩹 Fixes
+
+- Add `target: esnext` by default ([#733](https://github.com/wxt-dev/wxt/pull/733))
+
+### 🏡 Chore
+
+- Add changelog ([21e8ca0](https://github.com/wxt-dev/wxt/commit/21e8ca0))
+
+## v1.0.0
+
+Initial release 🎉

packages/module-solid/README.md

@@ -4,7 +4,7 @@ Enables the use of [SolidJS](https://www.solidjs.com/) in your web extension, in
 
 This plugin makes a few changes:
 
-1. Adds `vite-plugin-solid` to vite
+1. Adds `vite-plugin-solid` to and sets `build.target: esnext` in the vite config
 2. Adds the [`solid-js` preset](https://github.com/unjs/unimport/blob/main/src/presets/solid.ts) to auto-imports
 
 ## Usage

packages/module-solid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wxt-dev/module-solid",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",

packages/module-solid/src/index.ts

@@ -10,6 +10,9 @@ export default defineWxtModule<SolidModuleOptions>({
 
     addViteConfig(wxt, () => ({
       plugins: [solid(vite)],
+      build: {
+        target: 'esnext',
+      },
     }));
 
     addImportPreset(wxt, 'solid-js');

packages/module-svelte/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v1.0.0
+
+Initial release 🎉

packages/module-vue/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## v1.0.0
+
+Initial release 🎉

scripts/create-github-release.ts

@@ -29,5 +29,7 @@ await createGithubRelease(config, {
   tag_name: prevTag,
   name: `${pkgName} v${currentVersion}`,
   body: releases[0].body,
+  // @ts-expect-error: Not typed in changelogen, but present: https://docs.github.com/en/rest/releases/releases?apiVersion=2022-11-28#create-a-release
+  make_latest: pkg === 'wxt',
 });
 consola.success('Created release');

templates/react/package.json

@@ -21,7 +21,7 @@
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@wxt-dev/module-react": "^1.0.0",
     "typescript": "^5.4.5",
     "wxt": "^0.18.6"
   }

templates/react/wxt.config.ts

@@ -1,9 +1,6 @@
 import { defineConfig } from 'wxt';
-import react from '@vitejs/plugin-react';
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
-  vite: () => ({
-    plugins: [react()],
-  }),
+  modules: ['@wxt-dev/module-react'],
 });

templates/solid/package.json

@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "typescript": "^5.4.5",
-    "vite-plugin-solid": "^2.10.2",
+    "@wxt-dev/module-solid": "^1.0.0",
     "wxt": "^0.18.6"
   }
 }

templates/solid/wxt.config.ts

@@ -1,12 +1,6 @@
 import { defineConfig } from 'wxt';
-import Solid from 'vite-plugin-solid';
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
-  vite: () => ({
-    build: {
-      target: 'esnext',
-    },
-    plugins: [Solid()],
-  }),
+  modules: ['@wxt-dev/module-solid'],
 });

templates/svelte/package.json

@@ -14,8 +14,8 @@
     "postinstall": "wxt prepare"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@tsconfig/svelte": "^5.0.4",
+    "@wxt-dev/module-svelte": "^1.0.0",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.0",
     "tslib": "^2.6.3",

templates/svelte/wxt.config.ts

@@ -1,16 +1,7 @@
 import { defineConfig } from 'wxt';
-import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
   srcDir: 'src',
-  vite: () => ({
-    plugins: [
-      svelte({
-        // Using a svelte.config.js file causes a segmentation fault when importing the file
-        configFile: false,
-        preprocess: [vitePreprocess()],
-      }),
-    ],
-  }),
+  modules: ['@wxt-dev/module-svelte'],
 });

templates/vue/package.json

@@ -18,7 +18,7 @@
     "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@wxt-dev/module-vue": "^1.0.0",
     "typescript": "^5.4.5",
     "vue-tsc": "^2.0.21",
     "wxt": "^0.18.6"

templates/vue/wxt.config.ts

@@ -1,18 +1,6 @@
 import { defineConfig } from 'wxt';
-import vue from '@vitejs/plugin-vue';
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
-  imports: {
-    addons: {
-      vueTemplate: true,
-    },
-  },
-  vite: () => ({
-    plugins: [vue()],
-    build: {
-      // Enabling sourcemaps with Vue during development is known to cause problems with Vue
-      sourcemap: false,
-    },
-  }),
+  modules: ['@wxt-dev/module-vue'],
 });