Decrease package size (#169)

* Remove @vue/compiler-sfc This is not needed to run Vue according to package README -Size: 11.05mb * Delegate Babel to the extension.config.js We replaced Babel with SWC but Babel is one of the largest dependencies in the project, so we better remove it. babel-preset-modern-browser-extension - Size: 26.03mb @babel/core - Size: 11.23mb babel-loader - Size: 1.5mb Total: 38.31mb * Remove Tailwind from dependencies Tailwind is a dependency required by users, so it should be resolved by the user's project. tailwindcss - Size: 15mb * Delegate Stylelint to the extension.config.js stylelint - Size: 8.15mb stylelint-webpack-plugin - Size: 7.22mb stylelint-config-standard-scss - Size: 2.5mb Total: 17.87mb * Remove SASS SASS is required by the user extension already. sass - Size: 6.29mb * Remove LESS LESS is required by the user extension already. less - Size: 4.57mb * Remove browser-extension-manifest-fields Not used anymore browser-extension-manifest-fields Size: 4.64mb * Replace detect-package-manager with package-manager-detector
extension-js · Sep 6, 2024 · d9362e1 · d9362e1
1 parent 626c352
commit d9362e1
Show file tree

Hide file tree

Showing 23 changed files with 93 additions and 405 deletions.
diff --git a/examples/config-babel/babel.config.json b/examples/config-babel/babel.config.json
@@ -1,4 +1,4 @@
 {
-  "presets": [],
+  "presets": ["modern-browser-extension"],
   "plugins": []
 }
diff --git a/examples/config-babel/extension.config.js b/examples/config-babel/extension.config.js
@@ -0,0 +1,17 @@
+/** @type {import('extension-develop').FileConfig} */
+module.exports = {
+  config: (config) => {
+    config.module.rules.push(
+      // https://webpack.js.org/loaders/babel-loader/
+      // https://babeljs.io/docs/en/babel-loader
+      {
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
+        include: __dirname,
+        exclude: /node_modules/,
+        loader: require.resolve('babel-loader')
+      }
+    )
+
+    return config
+  }
+}
diff --git a/examples/config-babel/package.json b/examples/config-babel/package.json
@@ -9,6 +9,9 @@
     "url": "https://cezaraugusto.com"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "babel-loader": "^9.1.3",
+    "babel-preset-modern-browser-extension": "^0.7.0",
     "stylelint": "^16.7.0"
   }
 }
diff --git a/examples/config-stylelint/.stylelintrc.json b/examples/config-stylelint/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard-scss"
+}
diff --git a/examples/config-stylelint/newtab/index.html b/examples/config-stylelint/newtab/index.html
@@ -14,7 +14,7 @@
       href="https://unpkg.com/sakura.css/css/sakura-dark.css"
       media="screen and (prefers-color-scheme: dark)"
     />
-    <link rel="stylesheet" href="./styles.css" media="screen" />
+    <link rel="stylesheet" href="./styles.scss" media="screen" />
   </head>
   <body>
     <header>

diff --git a/examples/config-stylelint/newtab/styles.css → examples/config-stylelint/newtab/styles.scss b/examples/config-stylelint/newtab/styles.css → examples/config-stylelint/newtab/styles.scss
diff --git a/examples/config-stylelint/package.json b/examples/config-stylelint/package.json
@@ -9,10 +9,11 @@
     "url": "https://cezaraugusto.com"
   },
   "scripts": {
-    "lint:css": "stylelint '**/*.css'"
+    "lint:css": "npx stylelint '**/*.scss'"
   },
   "devDependencies": {
+    "sass": "^1.77.8",
     "stylelint": "^16.7.0",
-    "stylelint-config-standard": "^36.0.1"
+    "stylelint-config-standard-scss": "^13.1.0"
   }
 }
diff --git a/examples/config-stylelint/stylelint.config.json b/examples/config-stylelint/stylelint.config.json
diff --git a/examples/init/manifest.json b/examples/init/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "version": "0.0.1",
-  "name": "Initial Template",
+  "name": "Init Template",
   "description": "An Extension.js example.",
   "icons": {
     "16": "images/extension_16.png",

diff --git a/examples/types.ts b/examples/types.ts
@@ -3,7 +3,6 @@ export type ConfigFiles =
   | 'postcss.config.js'
   | 'tailwind.config.js'
   | 'tsconfig.json'
-  | 'babel.config.js'
   | 'stylelint.config.json'
   | 'extension.config.js'