feat: solid templates (#42)

Author: samrum

README.md

@@ -10,11 +10,12 @@ An easy way to start a Vite Web Extension project
 - Manifest V2, Manifest V3, or Both
 - TypeScript
 - Choice of framework including:
+  - Preact
+  - React
+  - Solid
+  - Svelte
   - Vanilla
   - Vue
-  - Svelte
-  - React
-  - Preact
 
 ## Usage
 

index.js

@@ -150,10 +150,11 @@ async function init() {
           message: "Framework:",
           choices: [
             { title: "Vanilla (None)", value: "vanilla" },
-            { title: "Vue", value: "vue" },
+            { title: "Preact", value: "preact" },
             { title: "React", value: "react" },
+            { title: "Solid", value: "solid" },
             { title: "Svelte", value: "svelte" },
-            { title: "Preact", value: "preact" },
+            { title: "Vue", value: "vue" },
           ],
           initial: 0,
         },
@@ -220,7 +221,7 @@ async function init() {
 
   // Cleanup.
 
-  if (["react", "preact"].includes(framework)) {
+  if (["react", "preact", "solid"].includes(framework)) {
     preOrderDirectoryTraverse(
       root,
       () => {},

package.json

@@ -48,7 +48,8 @@
     "preact",
     "svelte",
     "vue",
-    "typescript"
+    "typescript",
+    "solid"
   ],
   "author": "Ruben Medina <dev@rubenmedina.com>",
   "repository": {

scripts/build-playground.mjs

@@ -7,7 +7,7 @@ const exec = util.promisify(execCallback);
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-const frameworks = ["vanilla", "vue", "svelte", "react", "preact"];
+const frameworks = ["preact", "react", "solid", "svelte", "vanilla", "vue"];
 
 const manifestVersions = ["2", "3", "2+3"];
 

template/framework/solid-ts/package.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "vite-plugin-solid": "^2.7.0",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "solid-js": "^1.7.8"
+  }
+}

template/framework/solid-ts/src/components/PageContent.css

@@ -0,0 +1,7 @@
+h1 {
+  margin: 5px;
+}
+
+button {
+  margin-top: 10px;
+}

template/framework/solid-ts/src/components/PageContent.tsx

@@ -0,0 +1,21 @@
+import Solid, { createSignal } from "solid-js";
+import "./PageContent.css";
+import logo from "~/assets/logo.svg";
+
+function PageContent(props: Solid.ParentProps) {
+  const imageUrl = new URL(logo, import.meta.url).href;
+
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <div>
+      <img src={imageUrl} height="45" alt="" />
+      <h1>{props.children}</h1>
+      <button type="button" onClick={() => setCount((count) => count + 1)}>
+        Clicks: {count()}
+      </button>
+    </div>
+  );
+}
+
+export default PageContent;

template/framework/solid-ts/src/entries/contentScript/primary/App.css

@@ -0,0 +1,19 @@
+.logo {
+  z-index: 99999;
+  position: fixed;
+  bottom: 20px;
+  right: 10px;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 4px solid #c72a21;
+  border-radius: 50%;
+  background-color: #fff;
+}
+
+img {
+  position: absolute;
+  top: 7px;
+}

template/framework/solid-ts/src/entries/contentScript/primary/App.tsx

@@ -0,0 +1,14 @@
+import logo from "~/assets/logo.svg";
+import "./App.css";
+
+function App() {
+  const logoImageUrl = new URL(logo, import.meta.url).href;
+
+  return (
+    <div class="logo">
+      <img src={logoImageUrl} height="50" alt="" />
+    </div>
+  );
+}
+
+export default App;

template/framework/solid-ts/src/entries/contentScript/primary/main.tsx

@@ -0,0 +1,8 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+import renderContent from "../renderContent";
+import App from "./App";
+
+renderContent(import.meta.PLUGIN_WEB_EXT_CHUNK_CSS_PATHS, (appRoot) => {
+  render(() => <App />, appRoot);
+});