@caweb/webpack 1.3.30 → 1.3.32

package/plugins/html/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@caweb/html-webpack-plugin",
-    "version": "1.6.2",
+    "version": "1.7.1",
     "description": "CAWebPublishing Sample Page and Configurations",
     "main": "index.js",
     "type": "module",
@@ -15,9 +15,8 @@
     ],
     "scripts": {
         "webpack": "webpack",
-        "postbuild": "npm run create-entrypoint && npm run generate-json",
+        "postbuild": "npm run create-entrypoint",
         "create-entrypoint": "node ./scripts/create-entrypoints.js",
-        "generate-json": "node ./scripts/icon.js",
         "update-scripts": "node ./scripts/update-scripts.js",
         "new-scheme": "node ./scripts/schemes.js",
         "remove-scheme": "node ./scripts/schemes.js -r",
@@ -106,27 +105,28 @@
     },
     "homepage": "https://github.com/CAWebPublishing/webpack/plugins/html#readme",
     "devDependencies": {
-        "@inquirer/prompts": "^7.3.2",
+        "@inquirer/prompts": "^7.4.0",
         "animate.css": "^4.1.1",
         "bootstrap": "^5.3.3",
         "bootstrap-forced-colors-css": "^1.0.7",
         "chalk": "^5.4.1",
         "cross-spawn": "^7.0.6",
-        "fast-xml-parser": "^5.0.8",
-        "mini-css-extract-plugin": "^2.9.2"
+        "fast-xml-parser": "^5.0.9"
     },
     "dependencies": {
         "@caweb/a11y-webpack-plugin": "^1.0.9",
         "@caweb/css-audit-webpack-plugin": "^1.0.12",
         "@caweb/jshint-webpack-plugin": "^2.0.1",
-        "@wordpress/scripts": "^30.12.0",
+        "@wordpress/scripts": "^30.13.0",
         "css-minimizer-webpack-plugin": "^7.0.2",
         "handlebars-loader": "^1.7.3",
         "html-webpack-link-type-plugin": "^1.1.1",
         "html-webpack-plugin": "^5.6.3",
         "html-webpack-skip-assets-plugin": "^1.0.4",
+        "mini-css-extract-plugin": "^2.9.2",
         "rtlcss-webpack-plugin": "^4.0.7",
         "webpack": "^5.98.0",
-        "webpack-cli": "^6.0.1"
+        "webpack-cli": "^6.0.1",
+        "webpack-remove-empty-scripts": "^1.0.4"
     }
-}
+}

package/plugins/html/scripts/create-entrypoints.js

@@ -10,7 +10,6 @@ import { fileURLToPath } from 'url';
 const currentPath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 
 let entry = {
-    'font-only': path.join(currentPath, 'src', 'styles', 'font-only.css')
 };
 
 // create the entry directory
@@ -25,7 +24,6 @@ let heading = `/**
 fs.readdirSync(path.join(currentPath, 'src', 'styles', 'colorschemes')).forEach((c) => {
     let scheme = c.substring(0, c.indexOf('.')).replace(' ', '');
     let files = [
-        path.join(currentPath, 'src', 'styles', 'font-only.css'),
         path.join(currentPath, 'src', 'styles', 'colorschemes', c),
         path.join(currentPath, 'src', 'scripts', 'index.js')
       ]
@@ -40,7 +38,6 @@ const currentPath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '
 
 export default {
     entry: {
-        'font-only': path.join(currentPath, 'src', 'styles', 'font-only.css'),
         ${scheme}: [
             path.join(currentPath, ${correctFiles.join('),\n' + `\t`.repeat(3) + 'path.join(currentPath, ')})
         ]

package/plugins/html/scripts/update-scripts.js

@@ -11,9 +11,8 @@ const pkg = JSON.parse( fs.readFileSync(path.resolve('package.json')) );
 
 let scripts = {
     "webpack": "webpack",
-    "postbuild": "npm run create-entrypoint && npm run generate-json",
+    "postbuild": "npm run create-entrypoint",
     "create-entrypoint": "node ./scripts/create-entrypoints.js",
-    "generate-json": "node ./scripts/icon.js",
     "update-scripts": "node ./scripts/update-scripts.js",
     "new-scheme": "node ./scripts/schemes.js",
     "remove-scheme": "node ./scripts/schemes.js -r",

package/plugins/html/webpack.config.js

@@ -20,6 +20,7 @@ import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import RtlCssPlugin from 'rtlcss-webpack-plugin';
 import {HtmlWebpackSkipAssetsPlugin} from 'html-webpack-skip-assets-plugin';
 import {HtmlWebpackLinkTypePlugin} from 'html-webpack-link-type-plugin';
+import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
 
 import JSHintPlugin from '@caweb/jshint-webpack-plugin';
 import CSSAuditPlugin from '@caweb/css-audit-webpack-plugin';
@@ -110,18 +111,33 @@ let webpackConfig = {
   mode,
   name: 'uncompressed',
   target: 'web',
+  // Turn off caching of generated modules and chunks.
+  // @see https://webpack.js.org/configuration/cache/
   cache: false,
+
   stats: 'errors',
+  
+  // Determine where the created bundles will be outputted.
+  // @see https://webpack.js.org/concepts/#output
   output: {
     ...baseConfig.output,
-    clean: mode === 'production'
+    clean: mode === 'production',
+    pathinfo: false
   },
+
   performance: {
     maxAssetSize: 500000,
     maxEntrypointSize: 500000
   },
+
+  // This option determine how different types of module within the project will be treated.
+  // @see https://webpack.js.org/configuration/module/
   module:{
     ...baseConfig.module,
+    // This option sets up loaders for webpack configuration.
+    // Loaders allow webpack to process various types because by default webpack only
+    // understand JavaScript and JSON files.
+    // @see https://webpack.js.org/concepts/#loaders
     rules: [
       ...baseConfig.module.rules,
       /**
@@ -175,6 +191,23 @@ let webpackConfig = {
       }
     ]
   },
+  // WordPress already enqueues scripts and makes them available
+  // in global scope so those scripts don't need to be included on the bundle. For webpack
+  // to recognize those files, the global variable needs to be registered as externals.
+  // These allows global variable listed below to be imported into the module.
+  // @see https://webpack.js.org/configuration/externals/#externals
+  externals: {
+    // Third party dependencies.
+    jquery: 'jQuery',
+    underscore: '_',
+    lodash: 'lodash',
+    react: ['vendor', 'React'],
+    'react-dom': ['vendor', 'ReactDOM'],
+    
+    // WordPress dependencies.
+    '@wordpress/hooks': ['vendor', 'wp', 'hooks'],
+
+  },
 };
 
 /**
@@ -324,4 +357,8 @@ if( mode === 'production' ){
   )
 }
 
+// we remove empty scripts
+webpackConfig.plugins.push(
+  new RemoveEmptyScriptsPlugin()
+);
 export default webpackConfig;

package/plugins/html/scripts/icon.js

@@ -1,60 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * External dependencies
- */
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const currentPath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
-const fontBuildPath = path.join(currentPath, 'build', 'fonts');
-
-
-// iterate over all svg files
-fs.readdirSync(fontBuildPath).filter( (e) => e.endsWith('.svg')).forEach((c) => {
-    
-    // we can't use a parser otherwise some of the unicodes will be encoded
-    // we parse the file ourselves.
-    let svgContent = fs.readFileSync(path.join(fontBuildPath, c)).toString();
-
-    // we only want the glyph with unicodes
-    let icons = [ ...svgContent.matchAll(/glyph unicode=[^\n].*/g) ].map((i) => {
-        let raw = i[0];
-        let glyph = raw.match(/glyph-name="([\S]+)"/);
-
-        // only if there is a name associated with the glyph.
-        if( glyph ){
-
-            let unicode = raw.match(/unicode="([\S]+)"/)[1];
-            let name = glyph[1];
-            let ws = name.replace(/[_-]/g, ' ').split(' ');
-            
-            // the styles is applied by certain editors/builders
-            // divi - Applies Divi Theme Support
-            // line - Applies Line Styles
-            // solid - Applied Solid Styles
-            let styles = [
-                'divi',
-                ws.includes('line') ? 'line' : 'solid'
-            ]
-
-            return {
-                glyph: name,
-                unicode,
-                name: ws.map(w => w.charAt(0).toUpperCase() + w.substring(1)).join(' '), // uppercase all words and join with a space
-                search_terms: ws.join(' '),
-                styles
-            }
-        }
-
-
-    }).filter(e=>e); // clear out any null values
-
-    // write svg json output
-    fs.writeFileSync(
-        path.join(fontBuildPath, `${c.substring(0, c.lastIndexOf('.'))}.json`),
-        JSON.stringify( icons, null, 4 )
-    )    
-
-  })