@caweb/html-webpack-plugin 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+v2.1.0
+- Plugin name was changed
+
+v2.0.2
+- No longer emitting src/href/styles assets
+
 v2.0.1
 - Updated npm packages
 

package/index.js

@@ -15,10 +15,59 @@ const boldWhite = chalk.bold.white;
 const boldGreen = chalk.bold.green;
 const boldBlue = chalk.bold.hex('#03a7fc');
 */
-const currentPath = path.dirname(fileURLToPath(import.meta.url));
+// this is the current project directory
 const appPath = process.cwd();
-const templatePath = path.resolve(currentPath, '..', 'template');
-const iconLibraryPath = path.resolve(currentPath, '..', 'icon-library');
+
+// this is the path to this current file
+const currentPath = path.dirname(fileURLToPath(import.meta.url));
+
+// this should be the path to the @caweb/template and @caweb/icon-library packages
+const templatePath = path.join( 'node_modules', '@caweb', 'template');
+const iconLibraryPath = path.join( 'node_modules', '@caweb', 'icon-library');
+
+const allowedAssetExts = [
+  '.png', '.jpg', '.jpeg', '.gif', '.svg',
+  '.bmp', '.gif', '.ico', 
+  '.woff', '.woff2', '.eot', '.ttf', '.otf'
+]
+
+// function to process assets from regex matches
+const processAssets = ( assets = [] , type = 'style') => {
+  let temp = [];
+
+  if( ! assets ){
+    return temp;
+  }
+
+  if( 'style' === type ){
+    temp = assets
+      .map( a => {
+          return a
+          .replace(/(style=".*url\(\s*)(\S+)\s*\)/g, '$2') // get url() content
+          .replace(/((src|href)=")(\S+)".*/g, '$3') // remove src=" or href="
+          // .replace(/['"]/g, '') // remove quotes
+        })
+  } else {
+    temp = assets // map to extract just the asset file
+    .map( a => {
+      return a
+      .replace(/((src|href)=")/g, '') // remove src=" or href="
+      // .replace(/".*/g, '') // remove anything after the first "
+    })
+  }
+  
+  return temp
+    // filter to only include local files with allowed extensions
+    .filter( asset => {
+      let ext = path.extname( asset ).toLowerCase();
+      let localFile = fs.existsSync( path.join( appPath, asset ) ) 
+
+      return localFile && allowedAssetExts.includes( ext );
+
+    });
+}
+  
+const pluginName = 'CAWebHTMLPlugin';
 
 /**
  * Launches CAWeb HTML Markup
@@ -32,95 +81,97 @@ const iconLibraryPath = path.resolve(currentPath, '..', 'icon-library');
  * @typedef {CAWebHTMLPlugin}
  * @extends {HtmlWebpackPlugin}
  */
-class CAWebHtmlWebpackPlugin extends HtmlWebpackPlugin{
+class CAWebHTMLPlugin extends HtmlWebpackPlugin{
 
   // we change some of the html-webpack-plugin defaults
   constructor(opts = {}) {
-    let templates = ['index', 'blank', 'default', 'search'];
-
+    // the available templates in @caweb/template
+    let templates = ['blank', 'default', 'search'];
+
+    /**
+     * Default options
+     * we use the @caweb/template package as the default template source
+     * 
+     * @see https://github.com/jantimon/html-webpack-plugin/blob/main/index.js
+     */
     let defaultOptions = {
-      title: path.basename( appPath ),
-      inject: 'body',
-      template: path.join( templatePath, 'patterns', 'index.html'),
-      scriptLoading: 'blocking',
+      // we use the @caweb/template patterns/default.html as the default template
+      template: path.join( templatePath, 'patterns', 'default.html'),
+      
+      // favicon
+      favicon: path.join( templatePath, 'media', 'favicon.ico' ),
+      
+      // variables to pass to the template
       templateParameters: {
-        "template": "index",
-        "title": path.basename( appPath ),
-        "scheme": "oceanside",
-        "meta": {
-          "Author": "CAWebPublishing",
-          "Description": "State of California",
-          "Keywords": "California,government",
-          "viewport": "width=device-width, initial-scale=1.0, maximum-scale=2.0"
-        }
+        // site title
+        title: path.basename( appPath ),
+        
+        //site color scheme
+        scheme: 'oceanside',
+
+        // site logo, default is the @caweb/template/media/logo.png
+        logo: path.join(templatePath, 'media', 'logo.png'),
+        
+        // meta tags
+        meta: {
+          Author: "CAWebPublishing",
+          Description: "State of California",
+          Keywords: "CAWebPublishing, California, government",
+          viewport: "width=device-width, initial-scale=1.0, maximum-scale=2.0"
+        },
+
+        // array of additional assets to include
+        // this might be removed in the future
+        assets: []
       },
+      
+      
+      // array of additional assets to include
+      // this might be removed in the future
       assets: []
-    }
+    };
 
     // if there is a favicon.ico file in the media directory we use that
-    // otherwise we fallback to the template favicon.ico
-    defaultOptions.favicon = fs.existsSync(path.join(appPath, 'media', 'favicon.ico')) ?
-      path.join(appPath, 'media', 'favicon.ico') :
-      path.join(templatePath, 'media', 'favicon.ico');
-
-      // the templateParameters.favicon is not set, set it
-    if( ! defaultOptions.templateParameters.favicon ){
-      defaultOptions.templateParameters.favicon = defaultOptions.favicon;
+    if( fs.existsSync(path.join(appPath, 'media', 'favicon.ico')) ){
+      defaultOptions.favicon = path.join(appPath, 'media', 'favicon.ico');
     }
 
     // if there is a logo file in the media directory we use that
     if( fs.existsSync(path.join(appPath, 'media', 'logo.png')) ){
-      defaultOptions.assets.push( path.join(appPath, 'media', 'logo.png') );
+      // defaultOptions.assets.push( path.join(appPath, 'media', 'logo.png') );
       defaultOptions.templateParameters.logo = '/media/logo.png';
-
-      // otherwise we fallback to the template logo.png
-    }else{
-      // remove the appPath from the templath path
-      // replace all backslashes with forward slashes
-      // this is to make sure the logo.png in the branding.html is in the right place
-      defaultOptions.templateParameters.logo = 
-        path.join(
-          templatePath,
-          'media', 'logo.png'
-        )
-         .replace(appPath, '')
-        .replace(/\\/g, '/');
     }
       
-    // update templateParameters.title to match user options.
-    if( opts.title ){
-      defaultOptions.templateParameters.title = opts.title;
-    }
-
     // if template selection is one of ours
     if( opts.template && templates.includes(opts.template) ){
-      let template = 'default' === opts.template ? 'index' : opts.template;
       
       // update template file based on template selection 
-      opts.template = path.join( templatePath, 'patterns', `${template}.html`);
-      
-      // update default.templateParameters.template to match user options.
-      defaultOptions.templateParameters.template = template;
+      opts.template = path.join( templatePath, 'patterns', `${opts.template}.html`);
     }
-   
-    // if the user options has meta tags we merge them with the defaultOptions.templateParameters.meta
-    // and clear the meta key
+
+    /**
+     * the html-webpack-plugin meta tags are missing the self closing forward slash
+     * so if the user options has meta tags, we move them to the opts.templateParameters.meta
+     * and delete the opts.meta key
+     */
     if( opts.meta ){
-      defaultOptions.templateParameters.meta = {
-        ...defaultOptions.templateParameters.meta,
-        ...opts.meta
-      }
+      // ensure templateParameters exists
+      opts.templateParameters = opts.templateParameters || {};
 
+      // move opts.meta to opts.templateParameters.meta
+      opts.templateParameters.meta = opts.meta
+      
+      // delete opts.meta
       delete opts.meta;
     }
 
     // if there is a caweb.json file we merge the site data with the templateParameters
     if( fs.existsSync( path.join(appPath, 'caweb.json') ) ){
-
       let dataFile = JSON.parse( fs.readFileSync( path.join(appPath, 'caweb.json') ) );
-
+      
       // if there is a dataFile.site 
       if( dataFile.site ){
+
         // we remove the title key from the dataFile.site
         // this is to avoid overwriting the title set in the defaultOptions.templateParameters
         if( dataFile.site.title ){
@@ -134,8 +185,8 @@ class CAWebHtmlWebpackPlugin extends HtmlWebpackPlugin{
           ...dataFile.site
         }
 
-        // some properties are used in different ways and not as templateParameters
-        // if there is a dataFile.site.favicon we use that
+        // some properties are used in different ways and not just as templateParameters
+        // if there is a dataFile.site.favicon we have to define that outside of the templateParameters
         if( dataFile.site.favicon ){
           defaultOptions.favicon = dataFile.site.favicon;
         }
@@ -143,6 +194,7 @@ class CAWebHtmlWebpackPlugin extends HtmlWebpackPlugin{
       
     }
 
+    // call the parent class constructor with the merged options
     super(deepmerge(defaultOptions, opts));
 
   }
@@ -150,56 +202,40 @@ class CAWebHtmlWebpackPlugin extends HtmlWebpackPlugin{
   apply(compiler) {
     super.apply(compiler);
 
-    compiler.hooks.compilation.tap("CAWebHtmlWebpackPlugin", (compilation) => {
+    compiler.hooks.compilation.tap(pluginName, (compilation) => {
        /**
        * Hook into the HtmlWebpackPlugin events
        * 
        * @link https://github.com/jantimon/html-webpack-plugin?tab=readme-ov-file#events
        */
       HtmlWebpackPlugin.getCompilationHooks(compilation).beforeEmit.tapAsync(
-        "CAWebHtmlWebpackPlugin", 
+        pluginName, 
         ({html, outputName, plugin}, cb) => {
           // if the html contains local assets those assets are added to the options.assets array 
           // and the assets are added to the compilation afterEmit
-          let srcHrefAssets = html.match(/(src|href)="(.+?)"/g);
-          let styleAssets = html.match(/style=".*url\((\S+)\)/g);
-          
-          let allAssets = [];
-
-          // if the html contains url() in the style attributes
-          if( styleAssets ){
-            styleAssets = styleAssets.map( s => s.replace(/(style=".*url\(|["'()])/g, '') )
-            // |["'\(\)]
-            allAssets = [...allAssets, ...styleAssets];
-          }
-
-          // if the html contains src or href attributes
-          if( srcHrefAssets ){  
-            srcHrefAssets = srcHrefAssets.map( s => s.replace(/(src|href|=|")/g, '') );
-
-            allAssets = [...allAssets, ...srcHrefAssets];
-          }
-
-          allAssets.forEach( asset =>{
-              let localFile = asset.startsWith('/') || asset.startsWith('\\') ? 
-                path.join( appPath, asset ) : 
-                asset;
-
-              // if the asset is a local file 
-              // if the asset is not already in the options.assets array
-              if( 
-                fs.existsSync(localFile) && 
-                fs.lstatSync(localFile).isFile() &&
-                ! this.options.assets.includes(localFile)
-              ){
-                  this.options.assets.push(localFile);
-              }
-          });
-
-            // any references to the node_modules directory are removed
-            // any organizational packages @ are also removed
-            // this might cause some conflicts with packages that are named the same as organiazational packages
-            html = html.replace(/[\\\/]?node_modules[\\\/@]+/g, '/');
+          // let srcHrefAssets = processAssets(html.match(/(src|href)="(.+)"/g));
+          // let styleAssets = processAssets(html.match(/style=".*url\((\S+)\)/g));
+          // let allAssets = [ ...new Set([
+          //     ...srcHrefAssets, 
+          //     ...styleAssets
+          //   ])
+          // ];
+
+          // allAssets.forEach( asset =>{
+          //     let localFile = asset.startsWith('/') || asset.startsWith('\\') ? 
+          //       path.join( appPath, asset ) : 
+          //       asset;
+
+          //     // if the asset is a local file 
+          //     // if the asset is not already in the options.assets array
+          //     if( 
+          //       fs.existsSync(localFile) && 
+          //       fs.lstatSync(localFile).isFile() &&
+          //       ! this.options.assets.includes(localFile)
+          //     ){
+          //         this.options.assets.push(localFile);
+          //     }
+          // });
           
           // Tell webpack to move on
           cb(null, {html, outputName, plugin});
@@ -207,46 +243,46 @@ class CAWebHtmlWebpackPlugin extends HtmlWebpackPlugin{
       );
 
       HtmlWebpackPlugin.getCompilationHooks(compilation).afterEmit.tapAsync(
-        "CAWebHtmlWebpackPlugin", 
+        pluginName, 
         ({outputName, plugin}, cb) => {
 
           // if there are any assets in the options.assets array
           // we add them to the compilation and emit them
-          this.options.assets.forEach( async (asset) => { 
-            compilation.fileDependencies.add( asset );
-
-            // we remove the appPath from the asset path
-            // we remove the node_modules/@ from the asset path
-            compilation.emitAsset( 
-              asset.replace(appPath, '').replace(/[\\\/]?node_modules[\\\/@]+/g, ''),
-              new compiler.webpack.sources.RawSource( fs.readFileSync(asset) ) 
-            );
-
-            // if the asset is the @caweb/icon-library font-only.css file we have to also add the font files
-            if( asset.match(/@caweb\/icon-library\/build\/font-only-?.*.css/g) ){
-              let fontPath = path.join( iconLibraryPath, 'build', 'fonts' );
-
-              let fontFiles = fs.readdirSync(fontPath).filter( (file) => { 
-                  return file.endsWith('.woff') || 
-                    file.endsWith('.woff2') || 
-                    file.endsWith('.eot') || 
-                    file.endsWith('.svg') || 
-                    file.endsWith('.ttf');
-                });
-
-              fontFiles.forEach( (file) => {
-                  compilation.fileDependencies.add( file );
-
-                  let filePath = path.join( fontPath, file );
+          // this.options.assets.forEach( async (asset) => { 
+          //   compilation.fileDependencies.add( asset );
+
+          //   // we remove the appPath from the asset path
+          //   // we remove the node_modules/@ from the asset path
+          //   compilation.emitAsset( 
+          //     asset.replace(appPath, '').replace(/[\\\/]?node_modules[\\\/@]+/g, ''),
+          //     new compiler.webpack.sources.RawSource( fs.readFileSync(asset) ) 
+          //   );
+
+          //   // if the asset is the @caweb/icon-library font-only.css file we have to also add the font files
+          //   if( asset.match(/@caweb\/icon-library\/build\/font-only-?.*.css/g) ){
+          //     let fontPath = path.join( iconLibraryPath, 'build', 'fonts' );
+
+          //     let fontFiles = fs.readdirSync(fontPath).filter( (file) => { 
+          //         return file.endsWith('.woff') || 
+          //           file.endsWith('.woff2') || 
+          //           file.endsWith('.eot') || 
+          //           file.endsWith('.svg') || 
+          //           file.endsWith('.ttf');
+          //       });
+
+          //     fontFiles.forEach( (file) => {
+          //         compilation.fileDependencies.add( file );
+
+          //         let filePath = path.join( fontPath, file );
                   
-                  // we remove the appPath from the asset path
-                  compilation.emitAsset( 
-                    filePath.replace(appPath, '').replace(/[\\\/]?node_modules[\\\/@]+/g, ''),
-                    new compiler.webpack.sources.RawSource( fs.readFileSync(filePath) ) 
-                  );
-              });
-            }
-          });
+          //         // we remove the appPath from the asset path
+          //         compilation.emitAsset( 
+          //           filePath.replace(appPath, '').replace(/[\\\/]?node_modules[\\\/@]+/g, ''),
+          //           new compiler.webpack.sources.RawSource( fs.readFileSync(filePath) ) 
+          //         );
+          //     });
+          //   }
+          // });
           
           // Tell webpack to move on
           cb(null, {outputName, plugin});
@@ -258,4 +294,4 @@ class CAWebHtmlWebpackPlugin extends HtmlWebpackPlugin{
 } // end of class
   
 
-export default CAWebHtmlWebpackPlugin;
+export default CAWebHTMLPlugin;

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@caweb/html-webpack-plugin",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "description": "CAWebPublishing Site Generation HTML Webpack Plugin",
     "main": "index.js",
     "type": "module",
-    "scripts": {
-        "test": "echo \"Error: run tests from root\" && exit 0"
-    },
+    "author": "CAWebPublishing",
+    "license": "ISC",
+    "homepage": "https://github.com/CAWebPublishing/webpack/plugins/html#readme",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/CAWebPublishing/webpack.git",
@@ -18,19 +18,26 @@
         "webpack",
         "html-webpack-plugin"
     ],
-    "author": "CAWebPublishing",
-    "license": "ISC",
     "bugs": {
         "url": "https://github.com/CAWebPublishing/webpack/issues"
     },
     "publishConfig": {
         "access": "public"
     },
-    "homepage": "https://github.com/CAWebPublishing/webpack/plugins/html#readme",
     "dependencies": {
+        "@caweb/framework": "^1.9.2",
+        "@caweb/icon-library": "^1.1.6",
+        "@caweb/template": "^1.0.12",
         "html-webpack-plugin": "^5.6.6"
     },
-    "peerDependencies": {
-        "@caweb/template": "^1.0.6"
+    "scripts": {
+        "webpack": "webpack",
+        "test:build": "webpack build --config ./node_modules/@caweb/webpack/webpack.config.js",
+        "test:serve": "webpack serve --config ./node_modules/@caweb/webpack/webpack.config.js ./tests/webpack.tests.js --merge",
+        "test": "echo \"Error: run tests from root\" && exit 0"
+    },
+    "devDependencies": {
+        "webpack": "^5.104.1",
+        "webpack-cli": "^6.0.1"
     }
 }

package/tests/webpack.tests.js

@@ -0,0 +1,32 @@
+/**
+ * These are tests for the CAWeb HTML Webpack Plugin
+ */
+
+/**
+ * External Dependencies
+ */
+import path from 'path';
+
+/**
+ * Internal Dependencies
+ */
+
+// we import this current plugin to test it
+import CAWebHtmlWebpackPlugin from '../index.js';
+
+export default {
+    plugins: [
+        new CAWebHtmlWebpackPlugin({
+            templateParameters: {
+            }
+        })
+    ],
+    devServer: {
+        static: [
+            // we all serving the local template media files for testing
+            {
+                directory: path.join( process.cwd(), '..', 'template', 'media' ),
+            },
+        ]
+    }
+};