@caweb/webpack 1.2.27 → 1.3.0

package/plugins/html/sample/structural/footer.html

@@ -0,0 +1,47 @@
+<footer class="global-footer">
+    <div class="container">
+      <div class="d-flex">
+        {{#if nav.footer }}
+        <ul class="nav footer-links">
+          <li class="nav-item">
+            <a href="https://www.ca.gov?utm_campaign=state_template_link&amp;utm_medium=footer&amp;utm_source=external" class="nav-link ps-0" title="CA.gov" target="_blank">
+              <span class="ca-gov-logo-svg"></span>
+            </a>
+          </li>
+          {{#each nav.footer }}
+          {{#if this.url }}{{#if this.label }}
+          <li class="nav-item">
+            <a href="{{ this.url }}" class="nav-link">{{ this.label }}</a>
+          </li>
+          {{/if}}{{/if}}
+          {{/each}}
+        </ul>
+        {{/if}}
+        {{#if social }}
+          <ul class="nav social-share-links">
+          {{#each social }}
+            {{#if this }}
+            <li class="nav-item">
+              <a href="{{ this }}" class="nav-link ca-gov-icon-{{ @key }}"></a>
+            </li>
+            {{/if}}
+          {{/each}}
+          </ul>
+        {{/if}}
+      </div>
+    </div>
+    <!-- Copyright Statement -->
+    <div class="copyright container">
+      <p>
+        ©
+        <span id="thisyear">
+          <script>
+            document.getElementById('thisyear').appendChild(document.createTextNode(new Date().getFullYear()))
+          </script>
+        </span>
+        State of California
+      </p>
+    </div>
+
+    <button class="return-top">Back to top</button>
+  </footer>

package/plugins/html/sample/structural/header.html

@@ -0,0 +1,16 @@
+<header role="banner" id="header" class="global-header">
+    <div id="skip-to-content">
+      <a href="#main-content">Skip to Main Content</a>
+    </div>
+
+    {{> '../components/alerts.html' }}
+
+    {{> './utility-header.html' }}
+
+    {{> './branding.html' }}
+
+    {{> './mobile-controls.html' }}
+
+    {{> './navigation.html' }}
+
+</header>

package/plugins/html/sample/structural/mobile-controls.html

@@ -0,0 +1,5 @@
+<!-- Mobile Navigation Controls -->
+<div class="mobile-controlled overlay collapse collapse-horizontal">
+    <button class="mobile-control toggle-menu ca-gov-icon-close-mark fs-1" data-bs-toggle="collapse" data-bs-target=".mobile-controlled" aria-expanded="false" aria-controls="mobile-controls">
+    </button>
+</div>

package/plugins/html/sample/structural/navigation.html

@@ -0,0 +1,26 @@
+<!-- Navigation -->
+<div class="navigation border-bottom mobile-controlled collapse collapse-horizontal show">
+    <div class="container">
+        {{#if nav.header }}
+        <ul class="nav" aria-label="Main navigation">
+            {{#each nav.header }}
+                {{#if this.sub }}
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{ this.label }}</a>
+                        <ul class="dropdown-menu">
+                            {{#each this.sub }}
+                                <li class="nav-item">
+                                    <a class="nav-link" href="{{ this.url }}">{{ this.label }}</a>
+                                </li>
+                            {{/each}}
+                        </ul>
+                {{else}}
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ this.url }}">{{ this.label }}</a>
+                {{/if}}    
+                    </li>
+            {{/each}}
+        </ul>
+        {{/if}}
+    </div>
+</div>

package/plugins/html/sample/structural/search.html

@@ -0,0 +1,15 @@
+{{#if google.search }}
+<!-- Search -->
+<div class="search-container">
+    <form action="/serp.html" role="search">
+        <div class="input-group">
+            <span class="sr-only" id="SearchInput">Custom Google Search</span>
+            <input type="search" name="q" aria-labelledby="SearchInput" placeholder="Search" class="search-textfield form-control">
+            <button type="submit" class="search-button">
+                <span class="ca-gov-icon-search" aria-hidden="true"></span>
+                <span class="sr-only">Submit</span>
+            </button>
+        </div>
+    </form>
+</div>
+{{/if}}

package/plugins/html/sample/structural/utility-header.html

@@ -0,0 +1,23 @@
+<!-- Utility Header -->
+  <div class="utility-header">
+  <div class="container d-flex flex-row">
+    <div class="social-media-links">
+      <div class="header-cagov-logo">
+        <a href="https://www.ca.gov?utm_campaign=state_template_link&amp;utm_medium=header&amp;utm_source=external">
+          <span class="sr-only">CA.gov</span>
+          <span class="ca-gov-logo-svg"></span>
+        </a>
+      </div>
+      <p class="official-tag">Official website of the State of California</p>
+    </div>
+    <div class="settings-links">
+      {{#if utility-links }}
+      {{#each utility-links }}
+      {{#if this.url }}{{#if this.label }}
+      <a href="{{ this.url }}">{{ this.label }}</a>
+      {{/if}}{{/if}}
+      {{/each}}
+      {{/if}}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,62 @@
+#!/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)), '..');
+
+let entry = {
+    'font-only': path.join(currentPath, 'src', 'styles', 'font-only.css')
+};
+
+// create the entry directory
+fs.mkdirSync('entry', {recursive: true});
+
+let heading = `/**
+ *  Autogenerated Entrypoint  
+ *  DO NOT MODIFY
+ */\n`;
+
+// iterate over all colorschemes
+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')
+      ]
+    // add entries for each colorscheme 
+    entry[scheme] = files;
+
+    let correctFiles = files.map(f => `'${f.replace(process.cwd(), '').replaceAll('\\', '/')}'`)
+    let output = `
+import path from 'path';
+import { fileURLToPath } from 'url';
+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, ')})
+        ]
+    }
+};
+    `;
+
+
+    // write and entrypoint 
+    // this allows for serving of a specific entry.
+    fs.writeFileSync(
+        `./entry/${scheme}.js`,
+        `${heading} ${output}`
+    )
+
+  })
+
+
+export default {entry};

package/plugins/html/scripts/icon.js

@@ -0,0 +1,60 @@
+#!/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 )
+    )    
+
+  })

package/plugins/html/scripts/webpack.test.js

@@ -0,0 +1,41 @@
+/**
+ * External Dependencies
+ */
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Internal dependencies
+ */
+import CAWebHTMLPlugin from '../index.js';
+
+const componentDir = path.join(process.cwd(), 'sample', 'components');
+
+let plugins = [];
+
+fs.readdirSync(componentDir).forEach((c) => {
+    let p = fs.readFileSync( path.join(componentDir, c) ).toString();
+    let t = c.replace(/\.*/, '').replace('-', ' ');
+
+    plugins.push(
+      new CAWebHTMLPlugin({
+        filename: `components/${c}`,
+        title: t.charAt(0).toUpperCase() + t.substring(1),
+        templateParameters: {
+          scheme: false, // we use the entrypoints for testing
+          bodyHtmlSnippet: p,
+        },
+        skipAssets: [
+          /.*-rtl.css/, // we skip the Right-to-Left Styles
+          /css-audit.*/, // we skip the CSSAudit Files
+          /a11y.*/, // we skip the A11y Files
+          /jshint.*/, // we skip the JSHint Files
+          /font-only.*/, // we skip the font-only Files
+        ]
+      })
+    )
+})
+
+export default {
+  plugins
+};

package/plugins/html/webpack.config.js

@@ -0,0 +1,279 @@
+/**
+ * WebPack Configuration for California Department of Technology
+ * 
+ * Utilizes WordPress Scripts Webpack configuration as base.
+ *  
+ * @link https://webpack.js.org/configuration/
+ */
+
+/**
+ * External Dependencies
+ */
+import baseConfig from '@wordpress/scripts/config/webpack.config.js';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// webpack plugins
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin';
+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 JSHintPlugin from '@caweb/jshint-webpack-plugin';
+import CSSAuditPlugin from '@caweb/css-audit-webpack-plugin';
+import A11yPlugin from '@caweb/a11y-webpack-plugin';
+
+/**
+ * Internal dependencies
+ */
+import CAWebHTMLPlugin from './index.js';
+
+const webpackCommand = 'build' === process.argv[2] ? 'build' : 'serve' ;
+
+// flags can be passed via argv0 
+// we also add args from NODE_OPTIONS
+const flags = [].concat(
+  processArgs(process.argv),
+  processArgs(process.argv0.split(' ')),
+  processArgs(process.env.NODE_OPTIONS ? process.env.NODE_OPTIONS.split(' ') : [])
+)
+
+function processArgs( arr ){
+  let tmp = [];
+
+  arr.filter(Boolean).map((o) => {
+    return o.replaceAll("'", '').split('=').forEach((e => tmp.push(e)))
+ })
+
+  return tmp
+}
+
+function getArgVal(flag){
+  return flags.includes(flag) ? flags[flags.indexOf(flag) + 1] : false;
+}
+
+
+// Update some of the default WordPress webpack rules.
+baseConfig.module.rules.forEach((rule, i) => {
+  const r = new RegExp(rule.test).toString();
+
+  switch(r){
+    // WordPress adds a hash to asset file names we remove that hash.
+    case new RegExp(/\.(bmp|png|jpe?g|gif|webp)$/i).toString():
+      rule.generator.filename = 'images/[name][ext]';
+      break;
+    case new RegExp(/\.(woff|woff2|eot|ttf|otf)$/i).toString():
+      rule.generator.filename = 'fonts/[name][ext]';
+      break;
+    case new RegExp(/\.svg$/).toString():
+      // we don't want SVG to be asset/inline otherwise the resource may not be available.
+      // the asset should be an asset/resource we move them to the fonts folder. 
+      if( 'asset/inline' === rule.type ){
+        rule.type = 'asset/resource';
+        rule.generator = { filename: 'fonts/[name][ext]' };
+
+        delete rule.issuer;
+      }
+      break;
+  }
+});
+
+// we remove the WordPress CleanWebpackPlugin definition
+// instead we use the Webpack output.clean definition
+baseConfig.plugins.splice(1,1, false);
+
+/**
+ * we remove the WordPress devServer declaration since we can only have 1 when exporting multiple configurations
+ * 
+ * @see https://github.com/webpack/webpack-cli/issues/2408#issuecomment-793052542
+ */
+delete baseConfig.devServer;
+
+// Wordpress ignores the webpack --mode flag
+// if the flag is passed we use that mode 
+// otherwise use whatever Wordpress is using
+let mode = getArgVal('--mode') ? getArgVal('--mode') : baseConfig.mode;
+
+let webpackConfig = {
+  mode,
+  name: 'uncompressed',
+  target: 'web',
+  cache: false,
+  stats: 'errors',
+  output: {
+    clean: mode === 'production'
+  },
+  performance: {
+    maxAssetSize: 500000,
+    maxEntrypointSize: 500000
+  },
+  module:{
+    rules: [
+      /**
+       * Default template loader for html is lodash, 
+       * lets switch to handlebars
+       */
+      {
+        test: /\.html$/,
+        loader: 'handlebars-loader',
+        options:{
+          rootRelative: process.cwd(),
+          partialResolver: function(partial, callback){
+              /**
+               * All template partials are loaded from the root sample directory
+               * if the file doesn't exist we fallback to our sample template partials
+               */
+              let partialPath = path.join( process.cwd(), 'sample' );
+              let partialStructurePath = path.join( partialPath, 'structural' );
+
+              // template parameter specific partials
+              switch( partial ){
+                // header/footer is served from the /sample/structural/ directory
+                case 'footer':
+                case 'header': 
+                  partialPath = fs.existsSync(path.join( partialStructurePath, `/${partial}.html` )) ? path.join( partialStructurePath, `/${partial}.html` ) :
+                  `./structural/${partial}.html`
+                  
+                  break;
+                
+                case 'content': 
+                  // content is served from /sample/index.html
+                  partialPath = fs.existsSync(path.join( partialPath, '/index.html' )) ? path.join( partialPath, '/index.html' ) :
+                  './missing/content.html';
+
+                  break;
+                
+                // if not a template parameter we let the loader handle it
+                default:
+                  partialPath = partial;
+              }
+
+
+              callback(false, partialPath );
+          }
+        }
+      }
+    ]
+  },
+};
+
+/**
+ * Serve Only
+ */
+if( 'serve' === webpackCommand ){
+  const appPath = process.cwd();
+  let template = flags.includes('--template') ? getArgVal('--template') : 'default';
+  let scheme = flags.includes('--scheme') ? getArgVal('--scheme') : 'oceanside';
+     
+  // Dev Server is added
+  webpackConfig.devServer = { 
+    devMiddleware: {
+      writeToDisk: true,
+    },
+    hot: true,
+    compress: true,
+    allowedHosts: 'auto',
+    host: 'localhost',
+    port: 9000,
+    open: [  'http://localhost:9000' ],
+    static: [
+      /**
+       * Static files are served from the following files in the following order
+       * we don't have to add the build directory since that is the output.path and proxied
+       * public - Default
+       * sample - Allows loading sample files
+       * node_modules - Allows loading files from other npm packages
+       * src - Allows loading files that aren't compiled
+       */
+      {
+        directory: path.join(appPath, 'public'),
+      },
+      {
+        directory: path.join(appPath, 'sample'),
+      },
+      {
+        directory: path.join(appPath, 'node_modules'),
+      },
+      {
+        directory: path.join(appPath, 'src'),
+      },
+    ],
+    proxy:[
+      /**
+       * WordPress Proxy Configuration is deprecated
+       * @since 28.2.0
+       */
+      {
+        context: ['/build'],
+        target: 'http://localhost:9000',
+        pathRewrite: {
+          '^/build': ''
+        },
+        logLevel: 'info'
+      },
+      /**
+       * We proxy the node_modules and src so they serve from the root
+       */
+      {
+        context: ['/node_modules'],
+        target: 'http://localhost:9000',
+        pathRewrite: { '^/node_modules': '' },
+      },
+      {
+        context: ['/src'],
+        target: 'http://localhost:9000',
+        pathRewrite: { '^/src': '' },
+      }
+    ]
+  }
+
+  // Page Template and additional plugins
+  webpackConfig.plugins = [
+    new CAWebHTMLPlugin({
+        template,
+        templateParameters: {
+            scheme: 'false' !== scheme ? scheme : false 
+        },
+        skipAssets: [
+            /.*-rtl.css/, // we skip the Right-to-Left Styles
+            /css-audit.*/, // we skip the CSSAudit Files
+            /a11y.*/, // we skip the A11y Files
+            /jshint.*/, // we skip the JSHint Files
+            /font-only.js/, // we skip the font-only Files
+          ]
+    }),
+    new HtmlWebpackSkipAssetsPlugin(),
+    new HtmlWebpackLinkTypePlugin(),
+    ! getArgVal('--no-jshint') ? new JSHintPlugin() : false,
+    ! getArgVal('--no-audit') ? new CSSAuditPlugin() : false,
+    ! getArgVal('--no-a11y') ? new A11yPlugin() : false
+  ]
+}
+
+export default [
+  baseConfig,
+  webpackConfig,
+  mode === 'production' ?
+  {
+    name: 'compressed',
+    dependencies: ['uncompressed'],
+    devtool: false,
+    output: {
+      filename: '[name].min.js',
+      chunkFilename: '[name].min.js?v=[chunkhash]',
+    },
+    plugins: [
+  		new MiniCSSExtractPlugin( { filename: '[name].min.css' } ),
+  		new RtlCssPlugin( { filename: '[name]-rtl.min.css' } ),
+    ],
+    optimization:{
+      minimize: true,
+      minimizer: [
+        `...`,
+        new CssMinimizerPlugin({test: /\.min\.css$/})
+      ]
+    }
+  } : false
+].filter(Boolean);

package/plugins/jshint/.jshintrc

@@ -0,0 +1,31 @@
+{
+	"boss": true,
+	"curly": true,
+	"eqeqeq": true,
+	"eqnull": true,
+	"esversion": 11,
+	"expr": true,
+	"immed": true,
+	"noarg": true,
+	"nonbsp": true,
+	"quotmark": "single",
+	"undef": true,
+	"unused": true,
+
+	"browser": true,
+
+	"globals": {
+		"_": false,
+		"Backbone": false,
+		"jQuery": false,
+		"JSON": false,
+		"wp": false,
+		"export": false,
+		"module": false,
+		"require": false,
+		"WorkerGlobalScope": false,
+		"self": false,
+		"OffscreenCanvas": false,
+		"Promise": false
+	}
+}

package/plugins/jshint/README.md

@@ -0,0 +1,26 @@
+This is a Webpack Plugin that utilizes [JSHint](https://www.npmjs.com/package/jshint) to detect errors and potential problems in Javascript code.
+
+The JSHint Settings used are an adapation of the [WordPress JavaScript Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/). The default WordPress JSHint Settings can be viewed [here](https://develop.svn.wordpress.org/trunk/.jshintrc).  
+
+Our standard differs from the guidelines in the following ways:  
+- ESVersion has been updated from 6 to 11
+
+
+
+## Installation
+<pre>npm install --save-dev @caweb/jshint-webpack-plugin</pre>
+
+## Get Started
+In your Webpack configuration simply add the plugin to your existing plugin array.
+
+<pre>
+import CSSAuditPlugin from '@caweb/css-audit-webpack-plugin';
+
+export default {
+    plugins: [
+        new JSHintPlugin()
+    ]
+}
+</pre>
+
+## Options

package/plugins/jshint/changelog.txt

@@ -0,0 +1,30 @@
+v1.0.9
+- Update npm packages
+- Added npm devDependencies packages
+
+v1.0.8
+- Updated Readme
+
+v1.0.7
+- Fixed issue with hot module replacement not loading
+
+v1.0.6
+- Added sample file for when no files are reported
+
+v1.0.5
+- Added a11y and css-audit HRM update file to ignore list
+
+v1.0.4
+- Updated jshint esversion from 6 to 
+
+v1.0.3
+- Fixed issue with hot module replacement
+
+v1.0.2
+- Fixed issue with hot module replacement
+
+v1.0.1
+- Fixed issue with reporter file missing
+
+v1.0.0
+- JSHint Webpack Plugin