Use @crxjs/vite-plugin@beta instead of @crxjs/vite-plugin@v1

2022-12-05 03:36:10 +09:00
parent 01ab5ef49f
commit 88d31f7d0f
6 changed files with 59 additions and 120 deletions
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
        "solid-js": "^1.6.2"
    },
    "devDependencies": {
-        "@crxjs/vite-plugin": "^1.0.14",
+        "@crxjs/vite-plugin": "2.0.0-beta.7",
        "@types/chrome": "0.0.203",
        "@types/jest": "^29.2.3",
        "@types/node": "18.11.10",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,7 +1,7 @@
 lockfileVersion: 5.4

 specifiers:
-  '@crxjs/vite-plugin': ^1.0.14
+  '@crxjs/vite-plugin': 2.0.0-beta.7
  '@types/chrome': 0.0.203
  '@types/jest': ^29.2.3
  '@types/node': 18.11.10
@@ -32,7 +32,7 @@ dependencies:
  solid-js: 1.6.2

 devDependencies:
-  '@crxjs/vite-plugin': 1.0.14_vite@3.2.4
+  '@crxjs/vite-plugin': 2.0.0-beta.7
  '@types/chrome': 0.0.203
  '@types/jest': 29.2.3
  '@types/node': 18.11.10
@@ -427,54 +427,6 @@ packages:
      '@babel/helper-plugin-utils': 7.20.2
    dev: true

-  /@babel/plugin-transform-react-jsx-development/7.18.6_@babel+core@7.20.5:
-    resolution: {integrity: sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.5
-      '@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.20.5
-    dev: true
-    optional: true
-
-  /@babel/plugin-transform-react-jsx-self/7.18.6_@babel+core@7.20.5:
-    resolution: {integrity: sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.5
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-    optional: true
-
-  /@babel/plugin-transform-react-jsx-source/7.19.6_@babel+core@7.20.5:
-    resolution: {integrity: sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.5
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-    optional: true
-
-  /@babel/plugin-transform-react-jsx/7.19.0_@babel+core@7.20.5:
-    resolution: {integrity: sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.20.5
-      '@babel/helper-annotate-as-pure': 7.18.6
-      '@babel/helper-module-imports': 7.18.6
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.5
-      '@babel/types': 7.20.5
-    dev: true
-    optional: true
-
  /@babel/plugin-transform-typescript/7.20.2_@babel+core@7.20.5:
    resolution: {integrity: sha512-jvS+ngBfrnTUBfOQq8NfGnSbF9BrqlR6hjJ2yVxMkmO5nL/cdifNbI30EfjRlN4g5wYWNnMPyj5Sa6R1pbLeag==}
    engines: {node: '>=6.9.0'}
@@ -558,11 +510,8 @@ packages:
    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
    dev: true

-  /@crxjs/vite-plugin/1.0.14_vite@3.2.4:
-    resolution: {integrity: sha512-emOueVCqFRFmpcfT80Xsm4mfuFw9VSp5GY4eh5qeLDeiP81g0hddlobVQCo0pE2ZvNnWbyhLrXEYAaMAXjNL6A==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      vite: ^2.9.0
+  /@crxjs/vite-plugin/2.0.0-beta.7:
+    resolution: {integrity: sha512-5BLtVwg65Rj+KxhODP1RJ83UCgaCZno6Yl9c1FBCkoPQ2vy+NcBgUvUuI2U/7mePIl7xP5X7Xs57Xjd9Gcg58w==}
    dependencies:
      '@rollup/pluginutils': 4.2.1
      '@webcomponents/custom-elements': 1.5.1
@@ -577,10 +526,8 @@ packages:
      magic-string: 0.26.7
      picocolors: 1.0.0
      react-refresh: 0.13.0
-      rollup: 2.79.1
-      vite: 3.2.4_clvymlzunojxjbv3h6i2warera
-    optionalDependencies:
-      '@vitejs/plugin-react': 2.2.0_vite@3.2.4
+      rollup: 2.78.1
+      rxjs: 7.5.7
    transitivePeerDependencies:
      - supports-color
    dev: true
@@ -1241,26 +1188,6 @@ packages:
      eslint-visitor-keys: 3.3.0
    dev: true

-  /@vitejs/plugin-react/2.2.0_vite@3.2.4:
-    resolution: {integrity: sha512-FFpefhvExd1toVRlokZgxgy2JtnBOdp4ZDsq7ldCWaqGSGn9UhWMAVm/1lxPL14JfNS5yGz+s9yFrQY6shoStA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    requiresBuild: true
-    peerDependencies:
-      vite: ^3.0.0
-    dependencies:
-      '@babel/core': 7.20.5
-      '@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.20.5
-      '@babel/plugin-transform-react-jsx-development': 7.18.6_@babel+core@7.20.5
-      '@babel/plugin-transform-react-jsx-self': 7.18.6_@babel+core@7.20.5
-      '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.5
-      magic-string: 0.26.7
-      react-refresh: 0.14.0
-      vite: 3.2.4_clvymlzunojxjbv3h6i2warera
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-    optional: true
-
  /@webcomponents/custom-elements/1.5.1:
    resolution: {integrity: sha512-6T/XT3S1UHDlRWFSxRXdeSoYWczEl78sygNPS7jDyHVrfZcF/pUtWGYgxF4uviH59iPVw1eOWbhubm8CqO0MpA==}
    dev: true
@@ -4212,12 +4139,6 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

-  /react-refresh/0.14.0:
-    resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-    optional: true
-
  /readdirp/3.6.0:
    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
    engines: {node: '>=8.10.0'}
@@ -4295,6 +4216,14 @@ packages:
      glob: 7.2.3
    dev: true

+  /rollup/2.78.1:
+    resolution: {integrity: sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
  /rollup/2.79.1:
    resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
    engines: {node: '>=10.0.0'}
@@ -4309,6 +4238,12 @@ packages:
      queue-microtask: 1.2.3
    dev: true

+  /rxjs/7.5.7:
+    resolution: {integrity: sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==}
+    dependencies:
+      tslib: 2.4.1
+    dev: true
+
  /safe-regex-test/1.0.0:
    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
    dependencies:
@@ -4700,6 +4635,10 @@ packages:
    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
    dev: true

+  /tslib/2.4.1:
+    resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}
+    dev: true
+
  /tsutils/3.21.0_typescript@4.9.3:
    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
    engines: {node: '>= 6'}
--- a/manifest.config.ts
+++ b/manifest.config.ts
@@ -1,5 +1,5 @@
 import { defineManifest } from "@crxjs/vite-plugin";
-import packageJson from "./package.json";
+import packageJson from "../package.json";

 // Convert from Semver (example: 0.1.0-beta6)
 const [major, minor, patch, label = "0"] = packageJson.version
@@ -29,7 +29,7 @@ const manifest = defineManifest(async () => ({
    {
      matches: ["http://*/*", "https://*/*", "<all_urls>"],
      js: ["src/pages/content/index.ts"],
-      css: ["assets/css/contentStyle.chunk.css"],
+      // css: ["assets/css/contentStyle.chunk.css"],
    },
  ],
  devtools_page: "src/pages/devtools/index.html",
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,6 +40,6 @@
    "utils",
    "vite.config.ts",
    "node_modules/@types",
-    "manifest.config.ts"
+    "src/manifest.ts"
  ]
 }
--- a/utils/plugins/make-manifest.ts
+++ b/utils/plugins/make-manifest.ts
@@ -1,7 +1,7 @@
 import * as fs from "fs";
 import * as path from "path";
 import { PluginOption } from "vite";
-import manifest from "../../manifest.config";
+import manifest from "../../src/manifest";
 import colorLog from "../log";

 const { resolve } = path;
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,8 @@
 import { crx } from "@crxjs/vite-plugin";
-import path, { resolve } from "path";
+import { resolve } from "path";
 import { defineConfig } from "vite";
 import solidPlugin from "vite-plugin-solid";
-import manifest from "./manifest.config";
+import manifest from "./src/manifest";

 const root = resolve(__dirname, "src");
 const pagesDir = resolve(root, "pages");
@@ -22,34 +22,34 @@ export default defineConfig({
  },
  plugins: [solidPlugin(), crx({ manifest })],
  publicDir,
-  build: {
-    outDir,
-    sourcemap: isDev,
-    rollupOptions: {
-      input: {
-        devtools: resolve(pagesDir, "devtools", "index.html"),
-        panel: resolve(pagesDir, "panel", "index.html"),
-        content: resolve(pagesDir, "content", "index.ts"),
-        background: resolve(pagesDir, "background", "index.ts"),
-        contentStyle: resolve(pagesDir, "content", "style.scss"),
-        popup: resolve(pagesDir, "popup", "index.html"),
-        newtab: resolve(pagesDir, "newtab", "index.html"),
-        options: resolve(pagesDir, "options", "index.html"),
-      },
-      output: {
-        entryFileNames: "src/pages/[name]/index.js",
-        chunkFileNames: isDev
-          ? "assets/js/[name].js"
-          : "assets/js/[name].[hash].js",
-        assetFileNames: (assetInfo) => {
-          const { dir, name: _name } = path.parse(assetInfo.name);
-          const assetFolder = getLastElement(dir.split("/"));
-          const name = assetFolder + firstUpperCase(_name);
-          return `assets/[ext]/${name}.chunk.[ext]`;
-        },
-      },
-    },
-  },
+  // build: {
+  //   outDir,
+  //   sourcemap: isDev,
+  //   rollupOptions: {
+  //     input: {
+  //       devtools: resolve(pagesDir, "devtools", "index.html"),
+  //       panel: resolve(pagesDir, "panel", "index.html"),
+  //       content: resolve(pagesDir, "content", "index.ts"),
+  //       background: resolve(pagesDir, "background", "index.ts"),
+  //       contentStyle: resolve(pagesDir, "content", "style.scss"),
+  //       popup: resolve(pagesDir, "popup", "index.html"),
+  //       newtab: resolve(pagesDir, "newtab", "index.html"),
+  //       options: resolve(pagesDir, "options", "index.html"),
+  //     },
+  //     output: {
+  //       entryFileNames: "src/pages/[name]/index.js",
+  //       chunkFileNames: isDev
+  //         ? "assets/js/[name].js"
+  //         : "assets/js/[name].[hash].js",
+  //       assetFileNames: (assetInfo) => {
+  //         const { dir, name: _name } = path.parse(assetInfo.name);
+  //         const assetFolder = getLastElement(dir.split("/"));
+  //         const name = assetFolder + firstUpperCase(_name);
+  //         return `assets/[ext]/${name}.chunk.[ext]`;
+  //       },
+  //     },
+  //   },
+  // },
 });

 function getLastElement<T>(array: ArrayLike<T>): T {