refactor: pure es6 import syntax (#384)

* refactor: convert require syntax to import syntax

* refactor: downgrade ssestream to avoild "SSEStream is not a constructor" problem

See EventSource/node-ssestream#3 (comment)

* refactor: module is not defined in pure es6 module package so remove it

The removed code is not important since we use absolute path when
calling the crx-webpack-plugin.

* fix: exsiting way to write process.env.XXX does not work

* chore: format code

* refactor: convert specific ci scripts to es6 modules

* refactor: conventional-changelog-action requires pre-commit.js as a CommonJS module

Author: tyn1998

.github/workflows/release-deploy.yml

@@ -23,7 +23,7 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           skip-on-empty: 'false'
-          pre-commit: scripts/pre-commit.js
+          pre-commit: scripts/pre-commit.cjs
           git-message: 'chore(release): {version}'
 
       - name: Build

package.json

@@ -1,12 +1,13 @@
 {
   "name": "hypercrx",
   "version": "1.6.0",
+  "type": "module",
   "private": true,
   "description": "Hypertrons Chromium Extension",
   "license": "Apache",
   "scripts": {
-    "build": "node utils/build.js",
-    "start": "node utils/server.js",
+    "build": "NODE_ENV='production' BABEL_ENV='production' node utils/build.js",
+    "start": "NODE_ENV='development' BABEL_ENV='development' node utils/server.js",
     "deploy": "node scripts/deploy.js",
     "prettier": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss}\"",
     "prettier:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss}\"",
@@ -43,7 +44,7 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "babel-loader": "^8.2.3",
-    "chrome-webstore-upload": "0.5.0",
+    "chrome-webstore-upload": "^1.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^7.0.0",
     "crx": "^5.0.1",
@@ -53,14 +54,15 @@
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
+    "lodash-es": "^4.17.21",
     "mkdirp": "^1.0.4",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
     "querystring": "^0.2.1",
     "sass": "^1.52.1",
     "sass-loader": "^12.4.0",
     "source-map-loader": "^3.0.1",
-    "ssestream": "^1.1.0",
+    "ssestream": "1.0.1",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.2.6",

scripts/bump-version.js renamed to scripts/bump-version.cjs

@@ -1,10 +1,13 @@
+// according to https://github.com/TriPSs/conventional-changelog-action#pre-commit-hook
+// this script should be a CommonJS module
+
 async function bump({ version, deploy }) {
-  const { readJson, writeJson, processFile } = require('./utils.js');
+  const { readJson, writeJson, processFile } = require('./utils.cjs');
   // update package.json
   const pkgPath = 'package.json';
   const pkg = await readJson(pkgPath);
   pkg.version = version;
-  await writeJson(pkgPath, pkg);
+  writeJson(pkgPath, pkg);
 
   // update update_information.json
   const infoPath = 'publish/update_information.json';

scripts/deploy.js

@@ -1,6 +1,10 @@
-const chromeWebstoreUpload = require('chrome-webstore-upload');
-const path = require('path');
-const fs = require('fs');
+import chromeWebstoreUpload from 'chrome-webstore-upload';
+import { fileURLToPath } from 'url';
+import path, { dirname } from 'path';
+import fs from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const ZIP_PATH = path.join(__dirname, '..', '/release/hypercrx.zip');
 

scripts/pre-commit.cjs

@@ -0,0 +1,8 @@
+// according to https://github.com/TriPSs/conventional-changelog-action#pre-commit-hook
+// this script should be a CommonJS module
+
+const { bump } = require('./bump-version.cjs');
+
+exports.preCommit = ({ version }) => {
+  bump({ version: version, deploy: true });
+};

scripts/pre-commit.js

@@ -1,3 +1,6 @@
+// according to https://github.com/TriPSs/conventional-changelog-action#pre-commit-hook
+// this script should be a CommonJS module
+
 const fs = require('fs');
 
 function readJson(filename) {

scripts/utils.js renamed to scripts/utils.cjs

@@ -1,4 +1,5 @@
-const ENV = require('../../utils/env');
+// @ts-ignore
+import ENV from '../../utils/env';
 import { ErrorCode } from '../constant';
 
 /**

src/utils/request.ts

@@ -1,4 +1,4 @@
-const querystring = require('querystring');
+import querystring from 'querystring';
 
 const logger = (msg) => {
   console.log(`[BGC] ${msg}`);

utils/autoReloadClients/backgroundClient.js

@@ -1,13 +1,11 @@
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
-process.env.ASSET_PATH = '/';
+import { fileURLToPath } from 'url';
+import path, { dirname } from 'path';
+import CrxWebpackPlugin from './crx-webpack-plugin/index.js';
+import webpack from 'webpack';
+import config from '../webpack.config.js';
 
-const path = require('path');
-const CrxWebpackPlugin = require('./crx-webpack-plugin/index');
-
-var webpack = require('webpack'),
-  config = require('../webpack.config');
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 delete config.custom;
 

utils/build.js

@@ -1,8 +1,7 @@
-var fs = require('fs');
-var path = require('path');
-var join = path.join;
-var mkdirp = require('mkdirp');
-var ChromeExtension = require('crx');
+import fs from 'fs';
+import { join } from 'path';
+import mkdirp from 'mkdirp';
+import ChromeExtension from 'crx';
 
 function CrxWebpackPlugin(options) {
   this.options = options || {};
@@ -17,16 +16,9 @@ function CrxWebpackPlugin(options) {
   this.options.updateUrl = this.options.updateUrl.replace(/\/$/, '');
 
   // setup paths
-  this.context = path.dirname(module.parent.filename);
-  this.keyFile = path.isAbsolute(this.options.keyFile)
-    ? this.options.keyFile
-    : join(this.context, this.options.keyFile);
-  this.outputPath = path.isAbsolute(this.options.outputPath)
-    ? this.options.outputPath
-    : join(this.context, this.options.outputPath);
-  this.contentPath = path.isAbsolute(this.options.contentPath)
-    ? this.options.contentPath
-    : join(this.context, this.options.contentPath);
+  this.keyFile = this.options.keyFile;
+  this.outputPath = this.options.outputPath;
+  this.contentPath = this.options.contentPath;
 
   // set output info
   this.crxName = this.options.name + '.crx';
@@ -81,4 +73,4 @@ CrxWebpackPlugin.prototype.package = function () {
   });
 };
 
-module.exports = CrxWebpackPlugin;
+export default CrxWebpackPlugin;

utils/crx-webpack-plugin/index.js

@@ -1,5 +1,5 @@
 // tiny wrapper with default env vars
-module.exports = {
+export default {
   NODE_ENV: process.env.NODE_ENV || 'development',
   PORT: process.env.PORT || 3000,
   MOCK: process.env.MOCK || false,

utils/env.js

@@ -1,16 +1,14 @@
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
-process.env.ASSET_PATH = '/';
-
-const WebpackDevServer = require('webpack-dev-server'),
-  webpack = require('webpack'),
-  config = require('../webpack.config'),
-  env = require('./env'),
-  path = require('path');
-const { custom } = require('../webpack.config');
-const debounce = require('lodash').debounce;
-const SSEStream = require('ssestream').default;
+import WebpackDevServer from 'webpack-dev-server';
+import webpack from 'webpack';
+import config from '../webpack.config.js';
+import env from './env.js';
+import { fileURLToPath } from 'url';
+import path, { dirname } from 'path';
+import { debounce } from 'lodash-es';
+import SSEStream from 'ssestream';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const customOptions = config.custom;
 
@@ -121,7 +119,7 @@ const server = new WebpackDevServer(
               customOptions.enableContentScriptsAutoReload;
 
             if (shouldBackgroundReload) {
-              sseStream.writeMessage(
+              sseStream.write(
                 {
                   event: 'background-updated',
                   data: {}, // "data" key should be reserved though it is empty.
@@ -130,7 +128,7 @@ const server = new WebpackDevServer(
               );
             }
             if (shouldContentScriptsReload) {
-              sseStream.writeMessage(
+              sseStream.write(
                 {
                   event: 'content-scripts-updated',
                   data: {},

utils/server.js

@@ -1,11 +1,15 @@
-const webpack = require('webpack'),
-  path = require('path'),
-  fileSystem = require('fs-extra'),
-  env = require('./utils/env'),
-  CopyWebpackPlugin = require('copy-webpack-plugin'),
-  HtmlWebpackPlugin = require('html-webpack-plugin'),
-  TerserPlugin = require('terser-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+import webpack from 'webpack';
+import { fileURLToPath } from 'url';
+import path, { dirname } from 'path';
+import fileSystem from 'fs-extra';
+import env from './utils/env.js';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const ASSET_PATH = process.env.ASSET_PATH || '/';
 
@@ -203,4 +207,4 @@ if (env.NODE_ENV === 'development') {
   };
 }
 
-module.exports = options;
+export default options;