@dword-design/base-config-web-extension 2.0.0 → 3.0.0

package/LICENSE.md

@@ -6,7 +6,7 @@ Copyright &copy; Sebastian Landwehr <info@sebastianlandwehr.com>
 
 and licensed under:
 
-[MIT License](https://opensource.org/licenses/MIT)
+[MIT License](https://opensource.org/license/mit/)
 
 ## MIT License
 

package/README.md

@@ -102,5 +102,5 @@ Thanks a lot for your support! ❤️
 
 ## License
 
-[MIT License](https://opensource.org/licenses/MIT) © [Sebastian Landwehr](https://sebastianlandwehr.com)
+[MIT License](https://opensource.org/license/mit/) © [Sebastian Landwehr](https://sebastianlandwehr.com)
 <!-- /LICENSE -->

package/dist/config.js

@@ -0,0 +1,24 @@
+import vue from '@vitejs/plugin-vue';
+import P from 'path';
+import { defineConfig } from 'vite';
+import babel from 'vite-plugin-babel';
+import eslint from 'vite-plugin-eslint';
+import webExtension from 'vite-plugin-web-extension';
+import getManifest from "./get-manifest.js";
+process.env.TARGET = process.env.TARGET || 'chrome';
+export default defineConfig({
+  build: {
+    outDir: P.join('dist', process.env.TARGET)
+  },
+  plugins: [vue(), webExtension({
+    browser: process.env.TARGET,
+    manifest: () => getManifest({
+      browser: process.env.TARGET
+    }),
+    scriptViteConfig: {
+      plugins: [eslint({
+        fix: true
+      }), babel()]
+    }
+  })]
+});

package/dist/dev.js

@@ -1,6 +1,7 @@
-import webpack from 'webpack';
-import getWebpackConfig from "./get-webpack-config.js";
-export default (config => (target = 'firefox-desktop') => {
-  process.env.WEB_EXT_TARGET = target;
-  return new Promise(() => webpack(getWebpackConfig(config)).watch({}, () => {}));
-});
+import { execaCommand } from 'execa';
+export default (() => browser => execaCommand('vite', {
+  env: {
+    TARGET: browser
+  },
+  stdio: 'inherit'
+}));

package/dist/get-manifest.js

@@ -0,0 +1,53 @@
+import fs from 'fs-extra';
+import loadPkg from 'load-pkg';
+import { pick } from 'lodash-es';
+export default (async ({
+  browser
+}) => {
+  var _config$css, _config$css2;
+  const packageConfig = await loadPkg();
+  const config = await fs.readJson('config.json').catch(() => ({}));
+  const iconExists = await fs.exists('assets/icon.png');
+  const popupExists = await fs.exists('popup.html');
+  return {
+    name: config.name,
+    ...pick(packageConfig, ['version', 'description']),
+    manifest_version: 3,
+    ...(iconExists && {
+      icons: {
+        128: 'assets/icon.png'
+      }
+    }),
+    ...(('action' in config || popupExists) && {
+      action: {
+        ...(iconExists && {
+          default_icon: 'assets/icon.png'
+        }),
+        ...(popupExists && {
+          default_popup: 'popup.html'
+        }),
+        ...(typeof config.action === 'object' && config.action)
+      }
+    }),
+    ...(((await fs.exists('content.js')) || ((_config$css = config.css) === null || _config$css === void 0 ? void 0 : _config$css.length) > 0) && {
+      content_scripts: [{
+        js: ['content.js'],
+        ...(((_config$css2 = config.css) === null || _config$css2 === void 0 ? void 0 : _config$css2.length) > 0 && {
+          css: config.css
+        }),
+        matches: config.matches || ['<all_urls>']
+      }]
+    }),
+    ...((await fs.exists('background.js')) && {
+      background: {
+        ...(browser === 'firefox' ? {
+          persistent: false,
+          scripts: ['background.js']
+        } : {
+          service_worker: 'background.js'
+        })
+      }
+    }),
+    ...pick(config, ['permissions', 'browser_specific_settings', 'css'])
+  };
+});

package/dist/index.js

@@ -1,20 +1,27 @@
 import depcheckParserSass from '@dword-design/depcheck-parser-sass';
 import endent from "@dword-design/functions/dist/endent.js";
 import packageName from 'depcheck-package-name';
-import { execaCommand } from 'execa';
-import fs from 'fs-extra';
+import { createRequire } from 'module';
+import outputFiles from 'output-files';
+import P from 'path';
+import { fileURLToPath } from 'url';
 import dev from "./dev.js";
 import lint from "./lint.js";
 import prepublishOnly from "./prepublish-only.js";
+const __dirname = P.dirname(fileURLToPath(import.meta.url));
+const isInNodeModules = __dirname.split(P.sep).includes('node_modules');
+const resolver = createRequire(import.meta.url);
 export default (config => ({
-  allowedMatches: ['artifacts', 'assets', 'background.js', 'content.js', 'config.json', 'icon.png', 'index.spec.js', 'options.html', 'popup.html', 'options.js', 'popup.js', 'model'],
+  allowedMatches: ['assets', 'background.js', 'content.js', 'config.json', 'icon.png', 'index.spec.js', 'options.html', 'popup.html', 'options.js', 'popup.js', 'model'],
   commands: {
     dev: {
-      arguments: '[target]',
+      arguments: '[browser]',
       handler: dev(config)
     },
-    prepublishOnly: prepublishOnly(config),
-    source: () => execaCommand('git archive --output=source.zip HEAD')
+    prepublishOnly: {
+      arguments: '[browser]',
+      handler: prepublishOnly(config)
+    }
   },
   depcheckConfig: {
     parsers: {
@@ -31,26 +38,29 @@ export default (config => ({
     GOOGLE_REFRESH_TOKEN: '${{ secrets.GOOGLE_REFRESH_TOKEN }}'
   },
   deployPlugins: [[packageName`@semantic-release/exec`, {
-    prepareCmd: 'yarn prepublishOnly'
-  }], [packageName`semantic-release-chrome`, {
-    asset: 'extension.zip',
-    extensionId: config.chromeExtensionId,
-    target: 'draft'
+    prepareCmd: `yarn prepublishOnly && yarn prepublishOnly firefox && zip -r dist/chrome dist/chrome.zip && zip -r dist/firefox dist/firefox.zip && git archive --output=dist/firefox-sources.zip HEAD && ${packageName`publish-browser-extension`} --chrome-zip=dist/chrome.zip --firefox-zip=dist/firefox.zip --firefox-sources=dist/firefox-sources.zip`
   }]],
   editorIgnore: ['.eslintrc.json', 'dist'],
-  gitignore: ['/.eslintrc.json', '/artifacts', '/dist', 'source.zip'],
+  gitignore: ['/.eslintrc.json', '/dist'],
   isLockFileFixCommitType: true,
   lint,
-  prepare: () => fs.outputFile('.eslintrc.json', JSON.stringify({
-    extends: packageName`@dword-design/eslint-config`,
-    globals: {
-      browser: 'readonly'
-    }
-  }, undefined, 2)),
+  prepare: () => {
+    const configPath = isInNodeModules ? '@dword-design/base-config-web-extension/config' : `./${P.relative(process.cwd(), resolver.resolve('./config.js')).split(P.sep).join('/')}`;
+    outputFiles({
+      '.eslintrc.json': `${JSON.stringify({
+        extends: packageName`@dword-design/eslint-config`
+      }, undefined, 2)}\n`,
+      'vite.config.js': endent`
+        import config from '${configPath}'
+
+        export default config
+      `
+    });
+  },
   readmeInstallString: endent`
     ## Recommended setup
-    * Node.js 12.16.0
-    * Yarn 1.21.1
+    * Node.js 20.11.1
+    * Yarn 1.22.19
 
     ## Install
     \`\`\`bash
@@ -59,18 +69,13 @@ export default (config => ({
 
     ## Running a development server
     \`\`\`bash
-    $ yarn dev [target]
+    $ yarn dev [browser]
     \`\`\`
-    Available targets are \`firefox\` and \`chrome\`. Default is \`firefox\`.
+    Available browsers are \`firefox\` and \`chrome\`. Default is \`firefox\`.
 
     ## Building the extension for upload
     \`\`\`bash
-    $ yarn prepublishOnly
-    \`\`\`
-
-    ## Archiving the source for upload
-    \`\`\`bash
-    $ yarn source
+    $ yarn prepublishOnly [browser]
     \`\`\`
   `
 }));

package/dist/lint.js

@@ -1,7 +1,7 @@
 import { execaCommand } from 'execa';
 export default (async () => {
   try {
-    await execaCommand('eslint --fix --ext .js,.json --ignore-path .gitignore .', {
+    await execaCommand('eslint --fix --ext .js,.json,.vue --ignore-path .gitignore .', {
       all: true
     });
   } catch (error) {

package/dist/prepublish-only.js

@@ -1,11 +1,7 @@
-import webpack from 'webpack';
-import getWebpackConfig from "./get-webpack-config.js";
-export default (config => () => new Promise((resolve, reject) => webpack(getWebpackConfig(config), (error, stats) => {
-  if (error) {
-    return reject(error);
-  }
-  if (stats.hasErrors()) {
-    return reject(new Error(JSON.stringify(stats.toJson().errors, undefined, 2)));
-  }
-  return resolve();
-})));
+import { execaCommand } from 'execa';
+export default (() => browser => execaCommand('vite build', {
+  env: {
+    TARGET: browser
+  },
+  stdio: 'inherit'
+}));

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@dword-design/base-config-web-extension",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "repository": "dword-design/base-config-web-extension",
   "funding": "https://github.com/sponsors/dword-design",
   "license": "MIT",
   "author": "Sebastian Landwehr <info@sebastianlandwehr.com>",
   "type": "module",
-  "exports": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./config": "./dist/config.js"
+  },
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -27,22 +30,19 @@
     "@dword-design/eslint-config": "^5.0.1",
     "@dword-design/functions": "^5.0.27",
     "@semantic-release/exec": "^6.0.3",
-    "babel-loader": "^9.1.3",
-    "better-node-env": "^1.0.3",
-    "copy-webpack-plugin": "^12.0.2",
+    "@vitejs/plugin-vue": "^5.0.4",
     "depcheck-package-name": "^3.0.1",
-    "eslint-webpack-plugin": "^4.0.1",
     "execa": "^8.0.1",
     "fs-extra": "^11.1.0",
     "load-pkg": "^4.0.0",
-    "node-sass": "^9.0.0",
-    "raw-loader": "^4.0.1",
-    "sass-loader": "^14.0.0",
-    "semantic-release-chrome": "dword-design/semantic-release-chrome#fork",
-    "webext-webpack-plugin": "^0.0.11",
-    "webextension-polyfill": "^0.10.0",
-    "webpack": "^5.33.2",
-    "webpackbar": "^6.0.0"
+    "lodash-es": "^4.17.21",
+    "output-files": "^2.0.0",
+    "publish-browser-extension": "^2.1.3",
+    "vite": "^5.1.4",
+    "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-web-extension": "^4.1.1",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
     "@dword-design/base": "^11.0.2",
@@ -51,7 +51,7 @@
     "@dword-design/tester-plugin-tmp-dir": "^2.0.3",
     "express": "^4.17.1",
     "globby": "^14.0.0",
-    "output-files": "^2.0.0",
+    "webextension-polyfill": "^0.10.0",
     "with-local-tmp-dir": "^5.0.1",
     "xvfb": "^0.4.0"
   },

package/dist/config-to-manifest.js

@@ -1,44 +0,0 @@
-import pick from "@dword-design/functions/dist/pick.js";
-import fs from 'fs-extra';
-import loadPkg from 'load-pkg';
-export default (async configString => {
-  var _packageConfig, _config;
-  const packageConfig = await loadPkg();
-  const config = JSON.parse(configString);
-  const iconExists = fs.existsSync('assets/icon.png');
-  const popupExists = fs.existsSync('popup.html');
-  return JSON.stringify({
-    name: config.name,
-    ...(_packageConfig = packageConfig, pick(['version', 'description'])(_packageConfig)),
-    manifest_version: 2,
-    ...(iconExists && {
-      icons: {
-        128: 'assets/icon.png'
-      }
-    }),
-    ...(('browser_action' in config || popupExists) && {
-      browser_action: {
-        ...(iconExists && {
-          default_icon: 'assets/icon.png'
-        }),
-        ...(popupExists && {
-          default_popup: 'popup.html'
-        }),
-        ...(typeof config.browser_action === 'object' && config.browser_action)
-      }
-    }),
-    ...(fs.existsSync('content.js') && {
-      content_scripts: [{
-        js: ['browser-polyfill.js', 'content.js'],
-        matches: config.matches || ['<all_urls>']
-      }]
-    }),
-    ...(fs.existsSync('background.js') && {
-      background: {
-        persistent: false,
-        scripts: ['browser-polyfill.js', 'background.js']
-      }
-    }),
-    ...(_config = config, pick(['permissions', 'browser_specific_settings'])(_config))
-  });
-});

package/dist/get-webpack-config.js

@@ -1,70 +0,0 @@
-import nodeEnv from 'better-node-env';
-import CopyWebpackPlugin from 'copy-webpack-plugin';
-import packageName from 'depcheck-package-name';
-import EslintWebpackPlugin from 'eslint-webpack-plugin';
-import fs from 'fs-extra';
-import { WebExtWebpackPlugin } from 'webext-webpack-plugin';
-import WebpackBar from 'webpackbar';
-import configToManifest from "./config-to-manifest.js";
-export default (config => ({
-  devtool: false,
-  entry: {
-    ...(fs.existsSync('background.js') && {
-      background: './background.js'
-    }),
-    ...(fs.existsSync('content.js') && {
-      content: './content.js'
-    }),
-    ...(fs.existsSync('options.js') && {
-      options: './options.js'
-    }),
-    ...(fs.existsSync('popup.js') && {
-      popup: './popup.js'
-    })
-  },
-  mode: nodeEnv === 'production' ? nodeEnv : 'development',
-  module: {
-    rules: [{
-      test: /\.js$/,
-      use: {
-        loader: packageName`babel-loader`
-      }
-    }, {
-      test: /\.s[ac]ss$/i,
-      use: [packageName`raw-loader`, packageName`sass-loader`]
-    }]
-  },
-  output: {
-    clean: true
-  },
-  plugins: [new EslintWebpackPlugin({
-    failOnWarning: true,
-    fix: true
-  }), new WebpackBar(), new CopyWebpackPlugin({
-    patterns: [{
-      from: 'config.json',
-      to: 'manifest.json',
-      transform: configToManifest
-    }, {
-      from: require.resolve('webextension-polyfill')
-    }, {
-      from: 'assets',
-      noErrorOnMissing: true,
-      to: 'assets'
-    }, {
-      from: 'options.html',
-      noErrorOnMissing: true
-    }, {
-      from: 'popup.html',
-      noErrorOnMissing: true
-    }]
-  }), new WebExtWebpackPlugin({
-    build: {
-      artifactsDir: 'artifacts'
-    },
-    run: {
-      startUrl: config.startUrl,
-      target: process.env.WEB_EXT_TARGET
-    }
-  })]
-}));