Remove glob-all dependency and added gzip plugin (#82)

Added esbuild gzip plugin, removed glob-all dependency and ability to pass npm scripts arguments to solid jsx.

Author: woodcox

.github/workflows/11tybuild-update.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Node.js 18.x
         uses: actions/setup-node@v3
@@ -47,7 +47,11 @@ jobs:
           add: '["*.json"]'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          
+
+      - name: Npm Rebuild # for buildmeta and manifest changes to take effect 
+        if: env.UPDATE_NPM != 'true'
+        run: npm run minify
+
       - name: Deploy
         if: env.UPDATE_NPM != 'true'
         uses: peaceiris/actions-gh-pages@v3
@@ -58,7 +62,7 @@ jobs:
 
       - name: pull request on npm update
         if: env.UPDATE_NPM == 'true'
-        uses: peter-evans/create-pull-request@v5
+        uses: peter-evans/create-pull-request@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           commit-message: Update dependencies

config/build/esbuild.js

@@ -1,30 +1,56 @@
 // https://www.seancdavis.com/posts/javascript-for-11ty-with-esbuild/
 const esbuild = require('esbuild');
-const glob = require('glob-all'); // to enable * glob pattern in esbuild
 const isProd = process.env.ELEVENTY_ENV === 'prod' ? true : false;
 const isDev = process.env.ELEVENTY_ENV === 'dev' ? true : false;
 const { solidPlugin } = require('esbuild-plugin-solid');
 const manifestPlugin = require('esbuild-plugin-manifest');
+const gzipPlugin = require('@luncheon/esbuild-plugin-gzip');
 const { http, default_schemes } = require('@hyrious/esbuild-plugin-http');
 // cacheMap stores { url => contents }, you can easily persist it in file system - see https://github.com/hyrious/esbuild-plugin-http
 let cacheMap = new Map();
 const fs = require('fs');
 const path = require("path");
 
+// Get arguments from npm script (such as --pathprefix) - https://reflect.run/articles/sending-command-line-arguments-to-an-npm-script/
+const parseArgs = (args) => {
+  const parsedArgs = {};
+
+  args.forEach((arg) => {
+    const parts = arg.split("=");
+
+    parsedArgs[parts[0].slice(2)] = parts[1];
+  });
+
+  return parsedArgs;
+};
+
+const npmScriptArgs = parseArgs(process.argv);
+
+// pathPrefix and defineEnv const's access the environment variable PATHPREFIX set by the npm scripts (in the package.json) which is passed to solid-js by esbuild.js. Esbuild defines the environmental variables to pass through to solid-js app using the define config.
+const pathPrefix = npmScriptArgs.pathprefix || '';
+
+const defineEnv = {
+  'process.env.PATHPREFIX': JSON.stringify(pathPrefix),
+  // Add other environment variables as needed
+};
+
 const esbuildOpts = {
-  entryPoints: glob.sync(['src/scripts/jsx/*.jsx', 'src/scripts/js/*.js', 'dist/app/*.css']), // include css so that its in the manifest.json
+  entryPoints: ['src/scripts/jsx/*.jsx', 'src/scripts/js/*.js', 'dist/app/*.css']), // include css so that its in the manifest.json
   entryNames: isProd ? '[name]-[hash]' : '[name]',
   outExtension: isProd ? {'.js': '.min.js', '.css': '.min.css'} : {'.js': '.js', '.css': '.css'},
   allowOverwrite: !isProd,  // overwrite dist/app/style.css when in dev mode
   bundle: true,
   minify: isProd,
+  write: !isProd,  // this is required for the gzipPlugin to work
   treeShaking: isProd,
   outdir: './dist/app',
   sourcemap: !isProd,
   target: isProd ? 'es6' : 'esnext',
   metafile: true,
+  define: defineEnv,
   plugins: [
-    // Runs develeopment build (skips purgingcss) if isProd = false when ELEVENTY_ENV != 'prod'
+    // To run development/staging build (skips purgingcss) if isProd = false when ELEVENTY_ENV != 'prod'. 
+    // This is implimented in the package.json scripts
     http({
       filter: (url) => true,
       schemes: { default_schemes },
@@ -48,6 +74,15 @@ const esbuildOpts = {
   ]
 }
 
+// If isProd include gzipPlugin. This is pushed into esBuildOpts.plugins because in dev/staging mode the esBuild's write api must be true. But the gzipPlugin requires it to be false.
+if (isProd) {
+  esbuildOpts.plugins.push(gzipPlugin({
+    uncompressed: isProd,
+    gzip: isProd,
+    brotli: isProd,
+  }));
+}
+
 module.exports = async () => {
   let ctx = await esbuild.context({
     ...esbuildOpts,

config/build/purgecss.js

@@ -1,6 +1,5 @@
 // A modified version of https://github.com/arslanakram/esbuild-plugin-purgecss-2.0
 const esbuild = require('esbuild');
-const glob = require('glob-all');
 const fs = require('fs');
 const { PurgeCSS } = require('purgecss');
 const path = require('path');
@@ -47,14 +46,14 @@ let purgecssPlugin = function purgecssPlugin(options) {
 
 module.exports = async () => {
   let result = await esbuild.build({
-    entryPoints: glob.sync(['dist/app/*.css']),
+    entryPoints: ['dist/app/*.css'],
     allowOverwrite: true,
     minify: true,
     outdir: './dist/app',
     plugins: [
       purgecssPlugin({
         // For your production build. Add other content by using a glob-all pattern glob.sync(["dist/*.html", "dist/**/index.html"])
-        content: ["dist/index.html"]
+        content: ["src/scripts/jsx/*.jsx", "src/scripts/jsx/**/*.jsx", "dist/index.html"]
       })
     ]
   })

config/shortcodes/solidify.js

@@ -1,5 +1,4 @@
 const esbuild = require("esbuild");
-const glob = require('glob-all'); // to enable * glob pattern in esbuild
 const isProd = process.env.ELEVENTY_ENV === 'prod' ? true : false
 const { solidPlugin } = require('esbuild-plugin-solid');
 const fsPromises = require('fs').promises;
@@ -9,9 +8,8 @@ module.exports = async (code, filename, bundled) => {
   let bundleJsx = bundled !== 'bundleOff' ? true : false;
   await fsPromises.writeFile('./_tmp/solid-' + filename + '.jsx', code),
 
-  // esm version
   await esbuild.build({
-    entryPoints: glob.sync(['_tmp/solid-*.jsx']),
+    entryPoints: ['_tmp/solid-*.jsx'],
     entryNames: '[name]',
     // write: false,
     outdir: './_tmp/app',
@@ -34,4 +32,4 @@ module.exports = async (code, filename, bundled) => {
   })
   const solidifyJsx = await fsPromises.readFile('./_tmp/app/solid-' + filename + '.js', 'utf8');
   return `<script type="module">${solidifyJsx}</script>`;
-};
+};