chore: Add Solid template (#63)

Co-authored-by: Aaron Klinker <aklinker1@users.noreply.github.com>

.github/workflows/validate.yml

@@ -96,3 +96,10 @@ jobs:
           npm i
           npm run build
           npm run check
+
+      - name: Validate Solid
+        working-directory: templates/solid
+        run: |
+          npm i
+          npm run build
+          npm run compile

docs/.vitepress/components/Icon.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-defineProps<{
+import { computed } from 'vue';
+
+const props = defineProps<{
   name: string;
   icon?: string;
 }>();
+
+const src = computed(() => {
+  if (props.icon) return props.icon;
+  return `https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/icons/${props.name.toLowerCase()}.svg`;
+});
 </script>
 
 <template>
-  <img
-    :src="`https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/icons/${
-      name?.toLowerCase() ?? icon
-    }.svg`"
-    :alt="`${name} Logo`"
-  />
+  <img :src="src" :alt="`${name} Logo`" />
 </template>
 
 <style scoped>

docs/get-started/installation.md

@@ -24,12 +24,13 @@ npx wxt@latest init
 
 There are several starting templates available.
 
-| TypeScript                                                                                           |
-| ---------------------------------------------------------------------------------------------------- |
-| <Icon name="TypeScript" /> [`vanilla`](https://github.com/aklinker1/wxt/tree/main/templates/vanilla) |
-| <Icon name="Vue" /> [`vue`](https://github.com/aklinker1/wxt/tree/main/templates/vue)                |
-| <Icon name="React" /> [`react`](https://github.com/aklinker1/wxt/tree/main/templates/react)          |
-| <Icon name="Svelte" /> [`svelte`](https://github.com/aklinker1/wxt/tree/main/templates/svelte)       |
+| TypeScript                                                                                                                                                |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <Icon name="TypeScript" /> [`vanilla`](https://github.com/aklinker1/wxt/tree/main/templates/vanilla)                                                      |
+| <Icon name="Vue" /> [`vue`](https://github.com/aklinker1/wxt/tree/main/templates/vue)                                                                     |
+| <Icon name="React" /> [`react`](https://github.com/aklinker1/wxt/tree/main/templates/react)                                                               |
+| <Icon name="Svelte" /> [`svelte`](https://github.com/aklinker1/wxt/tree/main/templates/svelte)                                                            |
+| <Icon name="Solid" icon="https://www.solidjs.com/img/favicons/favicon-32x32.png" /> [`solid`](https://github.com/aklinker1/wxt/tree/main/templates/solid) |
 
 > All templates are in TypeScript. WXT does not support JS at this time.
 

templates/solid/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

templates/solid/README.md

@@ -0,0 +1,3 @@
+# WXT + SolidJS
+
+This template should help get you started developing with SolidJS in WXT.

templates/solid/_gitignore

@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+artifacts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

templates/solid/entrypoints/background.ts

@@ -0,0 +1,3 @@
+export default defineBackground(() => {
+  console.log('Hello background!', { id: browser.runtime.id });
+});

templates/solid/entrypoints/popup/App.css

@@ -0,0 +1,27 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.solid:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

templates/solid/entrypoints/popup/App.tsx

@@ -0,0 +1,35 @@
+import { createSignal } from 'solid-js';
+import solidLogo from '@/assets/solid.svg';
+import wxtLogo from '/wxt.svg';
+import './App.css';
+
+function App() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://wxt.dev" target="_blank">
+          <img src={wxtLogo} class="logo" alt="WXT logo" />
+        </a>
+        <a href="https://solidjs.com" target="_blank">
+          <img src={solidLogo} class="logo solid" alt="Solid logo" />
+        </a>
+      </div>
+      <h1>WXT + Solid</h1>
+      <div class="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count()}
+        </button>
+        <p>
+          Edit <code>popup/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p class="read-the-docs">
+        Click on the WXT and Solid logos to learn more
+      </p>
+    </>
+  );
+}
+
+export default App;

templates/solid/entrypoints/popup/index.css

@@ -0,0 +1,69 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

templates/solid/entrypoints/popup/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Popup Title</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

templates/solid/entrypoints/popup/index.tsx

@@ -0,0 +1,6 @@
+import { render } from 'solid-js/web';
+
+import './index.css';
+import App from './App';
+
+render(() => <App />, document.getElementById('root')!);

templates/solid/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "wxt-starter",
+  "description": "manifest.json description",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "wxt",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build -b firefox",
+    "compile": "tsc --noEmit",
+    "postinstall": "wxt prepare"
+  },
+  "dependencies": {
+    "solid-js": "^1.7.8"
+  },
+  "devDependencies": {
+    "typescript": "^5.1.6",
+    "vite-plugin-solid": "^2.7.0",
+    "wxt": "^0.3.0"
+  }
+}

templates/solid/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./.wxt/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}

templates/solid/wxt.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'wxt';
+import Solid from 'vite-plugin-solid';
+
+// See https://wxt.dev/config.html
+export default defineConfig({
+  manifest: {
+    icons: {
+      '16': 'icon/16.png',
+      '32': 'icon/32.png',
+      '48': 'icon/48.png',
+      '96': 'icon/96.png',
+      '128': 'icon/128.png',
+    },
+  },
+  vite: {
+    build: {
+      target: 'esnext',
+    },
+    plugins: [Solid()],
+  },
+});