fix: manifest type issues, react issues (#14)

Author: samrum

index.js

@@ -246,6 +246,25 @@ async function init() {
     );
   }
 
+  if (framework === "svelte") {
+    preOrderDirectoryTraverse(
+      root,
+      () => {},
+      (filepath) => {
+        // update manifest html files
+        if (path.basename(filepath).startsWith("manifest")) {
+          const content = fs.readFileSync(filepath, "utf8").replace(
+            `import pkg from '../package.json';`,
+            `import { readFileSync } from "fs";
+const pkg = JSON.parse(readFileSync(new URL("./../package.json", import.meta.url).pathname, "utf-8"));`
+          );
+
+          fs.writeFileSync(filepath, content);
+        }
+      }
+    );
+  }
+
   if (manifestVersion === "2+3") {
     preOrderDirectoryTraverse(
       root,
@@ -254,25 +273,19 @@ async function init() {
         if (path.basename(filepath).startsWith("vite.config")) {
           const content = fs
             .readFileSync(filepath, "utf8")
+            .replace(
+              `import { defineConfig } from "vite";`,
+              `import { defineConfig, loadEnv } from "vite";`
+            )
             .replace(
               "export default defineConfig(() => {",
               `export default defineConfig(({ mode }) => {
-  const configEnv = loadEnv(mode, process.cwd(), "");
-
-  const manifest = configEnv.MANIFEST_VERSION === "3" ? ManifestV3 : ManifestV2;
+  const env = loadEnv(mode, process.cwd(), "");
 `
             )
             .replace(
-              `import manifest from "./src/manifest";`,
-              `import { ManifestV2, ManifestV3 } from "./src/manifest";`
-            )
-            .replace(
-              `import manifest from "./src/manifest.js";`,
-              `import { ManifestV2, ManifestV3 } from "./src/manifest.js";`
-            )
-            .replace(
-              `import { defineConfig } from "vite";`,
-              `import { defineConfig, loadEnv } from "vite";`
+              `getManifest()`,
+              `getManifest(Number(env.MANIFEST_VERSION))`
             );
 
           fs.writeFileSync(filepath, content);
@@ -304,7 +317,20 @@ async function init() {
         if (path.basename(filepath).startsWith("manifest")) {
           const content = fs
             .readFileSync(filepath, "utf8")
-            .replace(/\.js/g, `.ts`);
+            .replace(/\.js"/g, `.ts"`)
+            .replace(/\.jsx"/g, `.tsx"`)
+            .replace(
+              `getManifest() {`,
+              `getManifest(): ${
+                manifestVersion === "2"
+                  ? "chrome.runtime.ManifestV2"
+                  : "chrome.runtime.ManifestV3"
+              } {`
+            )
+            .replace(
+              `getManifest(manifestVersion) {`,
+              `getManifest(manifestVersion: number): chrome.runtime.ManifestV2 | chrome.runtime.ManifestV3 {`
+            );
 
           fs.writeFileSync(filepath, content);
         }

template/config/manifestV2+3/src/manifest.js

@@ -1,3 +1,5 @@
+import pkg from "../package.json";
+
 const sharedManifest = {
   content_scripts: [
     {
@@ -34,27 +36,54 @@ const browserAction = {
   default_popup: "src/entries/popup/index.html",
 };
 
-export const ManifestV2 = {
+const ManifestV2 = {
   ...sharedManifest,
   background: {
     scripts: ["src/entries/background/script.js"],
     persistent: false,
   },
   browser_action: browserAction,
-  manifest_version: 2,
   options_ui: {
     ...sharedManifest.options_ui,
     chrome_style: false,
   },
   permissions: [...sharedManifest.permissions, "*://*/*"],
 };
 
-export const ManifestV3 = {
+const ManifestV3 = {
   ...sharedManifest,
   action: browserAction,
   background: {
     service_worker: "src/entries/background/serviceWorker.js",
   },
   host_permissions: ["*://*/*"],
-  manifest_version: 3,
 };
+
+export function getManifest(manifestVersion) {
+  const manifest = {
+    author: pkg.author,
+    description: pkg.description,
+    name: pkg.displayName ?? pkg.name,
+    version: pkg.version,
+  };
+
+  if (manifestVersion === 2) {
+    return {
+      ...manifest,
+      ...ManifestV2,
+      manifest_version: manifestVersion,
+    };
+  }
+
+  if (manifestVersion === 3) {
+    return {
+      ...manifest,
+      ...ManifestV3,
+      manifest_version: manifestVersion,
+    };
+  }
+
+  throw new Error(
+    `Missing manifest definition for manifestVersion ${manifestVersion}`
+  );
+}

template/config/manifestV2/src/manifest.js

@@ -1,4 +1,6 @@
-export default {
+import pkg from "../package.json";
+
+const manifest = {
   background: {
     scripts: ["src/entries/background/main.js"],
     persistent: false,
@@ -30,11 +32,21 @@ export default {
     256: "icons/256.png",
     512: "icons/512.png",
   },
-  manifest_version: 2,
   options_ui: {
     chrome_style: false,
     open_in_tab: true,
     page: "src/entries/options/index.html",
   },
   permissions: ["*://*/*"],
 };
+
+export function getManifest() {
+  return {
+    author: pkg.author,
+    description: pkg.description,
+    name: pkg.displayName ?? pkg.name,
+    version: pkg.version,
+    manifest_version: 2,
+    ...manifest,
+  };
+}

template/config/manifestV3/src/manifest.js

@@ -1,4 +1,6 @@
-export default {
+import pkg from "../package.json";
+
+const manifest = {
   action: {
     default_icon: {
       16: "icons/16.png",
@@ -30,9 +32,19 @@ export default {
     256: "icons/256.png",
     512: "icons/512.png",
   },
-  manifest_version: 3,
   options_ui: {
     page: "src/entries/options/index.html",
     open_in_tab: true,
   },
 };
+
+export function getManifest() {
+  return {
+    author: pkg.author,
+    description: pkg.description,
+    name: pkg.displayName ?? pkg.name,
+    version: pkg.version,
+    manifest_version: 3,
+    ...manifest,
+  };
+}

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

@@ -1,8 +1,9 @@
 import { useState } from "preact/hooks";
 import "./PageContent.css";
 import logo from "~/assets/logo.svg";
+import type { ComponentChildren } from "preact";
 
-function PageHeader(props) {
+function PageContent(props: { children: ComponentChildren }) {
   const imageUrl = new URL(logo, import.meta.url).href;
 
   const [count, setCount] = useState(0);
@@ -18,4 +19,4 @@ function PageHeader(props) {
   );
 }
 
-export default PageHeader;
+export default PageContent;

template/framework/preact-ts/vite.config.ts

@@ -2,22 +2,15 @@ import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
 import webExtension from "@samrum/vite-plugin-web-extension";
 import path from "path";
-import manifest from "./src/manifest";
-import pkg from "./package.json";
+import { getManifest } from "./src/manifest";
 
 // https://vitejs.dev/config/
 export default defineConfig(() => {
   return {
     plugins: [
       preact(),
       webExtension({
-        manifest: {
-          author: pkg.author,
-          description: pkg.description,
-          name: pkg.displayName ?? pkg.name,
-          version: pkg.version,
-          ...manifest,
-        },
+        manifest: getManifest(),
       }),
     ],
     resolve: {

template/framework/preact/vite.config.js

@@ -2,22 +2,15 @@ import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
 import webExtension from "@samrum/vite-plugin-web-extension";
 import path from "path";
-import manifest from "./src/manifest";
-import pkg from "./package.json";
+import { getManifest } from "./src/manifest";
 
 // https://vitejs.dev/config/
 export default defineConfig(() => {
   return {
     plugins: [
       preact(),
       webExtension({
-        manifest: {
-          author: pkg.author,
-          description: pkg.description,
-          name: pkg.displayName ?? pkg.name,
-          version: pkg.version,
-          ...manifest,
-        },
+        manifest: getManifest(),
       }),
     ],
     resolve: {

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

@@ -1,8 +1,8 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import "./PageContent.css";
 import logo from "~/assets/logo.svg";
 
-function PageContent(props) {
+function PageContent(props: { children: React.ReactNode}) {
   const imageUrl = new URL(logo, import.meta.url).href;
 
   const [count, setCount] = useState(0);

template/framework/react-ts/src/entries/enableDevHmr.js renamed to template/framework/react-ts/src/entries/enableDevHmr.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import RefreshRuntime from "/@react-refresh";
 
 if (import.meta.hot) {

template/framework/react-ts/tsconfig.json

@@ -20,5 +20,6 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
+  "exclude": ["enableDevHmr.ts"],
   "include": ["./src"]
 }