refactor: add interactivity to templates (#6)

also fix a few small issues

Author: samrum

index.js

@@ -309,7 +309,10 @@ async function init() {
         }
 
         // Rename, remove js files matching ts file
-        if (filepath.endsWith(".js")) {
+        if (
+          filepath.endsWith(".js") &&
+          !filepath.endsWith("svelte.config.js")
+        ) {
           const tsFilePath = filepath.replace(/\.js$/, ".ts");
           if (fs.existsSync(tsFilePath)) {
             fs.unlinkSync(filepath);

scripts/snapshot.mjs

@@ -11,7 +11,7 @@ const builds = [];
 
 (async () => {
   await exec("mkdir -p playground");
-  // await exec('rm -rf playground/*');
+  await exec("rm -rf playground/*");
 
   for (const framework of frameworks) {
     for (const manifest of manifestVersions) {

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

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

template/framework/preact-ts/src/components/PageHeader.tsx renamed to template/framework/preact-ts/src/components/PageContent.tsx

@@ -1,15 +1,19 @@
+import { useState } from "preact/hooks";
+import "./PageContent.css";
 import logo from "~/assets/logo.svg";
 
 function PageHeader(props) {
   const imageUrl = new URL(logo, import.meta.url).href;
 
+  const [count, setCount] = useState(0);
+
   return (
     <div>
       <img src={imageUrl} height="45" />
       <h1>{props.children}</h1>
-      <a href="https://vitejs.dev/guide/features.html" target="_blank">
-        Documentation
-      </a>
+      <button type="button" onClick={() => setCount((count) => count + 1)}>
+        Count: {count}
+      </button>
     </div>
   );
 }

template/framework/preact-ts/src/entries/options/App.tsx

@@ -1,10 +1,10 @@
-import PageHeader from "~/components/PageHeader";
+import PageContent from "~/components/PageContent";
 import "./App.css";
 
 function App() {
   return (
     <main>
-      <PageHeader>Options</PageHeader>
+      <PageContent>Options</PageContent>
     </main>
   );
 }

template/framework/preact-ts/src/entries/popup/App.tsx

@@ -1,10 +1,10 @@
-import PageHeader from "~/components/PageHeader";
+import PageContent from "~/components/PageContent";
 import "./App.css";
 
 function App() {
   return (
     <main>
-      <PageHeader>Popup</PageHeader>
+      <PageContent>Popup</PageContent>
     </main>
   );
 }

template/framework/preact-ts/src/vite-env.d.ts

@@ -1 +1,5 @@
 /// <reference types="vite/client" />
+
+interface ImportMeta {
+  CURRENT_CONTENT_SCRIPT_CSS_URL: string;
+}

template/framework/preact/src/components/PageContent.css

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

template/framework/preact/src/components/PageContent.jsx

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