@caweb/webpack 1.2.28 → 1.3.0

package/.github/workflows/config-publish.yml

@@ -0,0 +1,33 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Main Webpack Config
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm test
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.github/workflows/plugins-publish.yml

@@ -0,0 +1,45 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Plugins to NPM
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - a11y
+      - css-audit
+      - html
+      - jshint
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: plugins/${{ github.ref_name }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: git submodule update --init
+      - run: npm ci
+      - run: npm test
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: plugins/${{ github.ref_name }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: git submodule update --init
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.github/workflows/test

@@ -0,0 +1,29 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish Plugins to NPM
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: ls
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: console.log( 'published' )
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "css-audit"]
+	path = plugins/css-audit/bin/auditor
+	url = https://github.com/WordPress/css-audit

package/README.md

@@ -1,8 +1,7 @@
 This repository houses various plugins built and distributed by the CAWebPublishing Team and also the Webpack configuration for various CAWebPublishing products.
 
-<i>This package is inspired by [wp-scripts](https://www.npmjs.com/package/@wordpress/scripts)</i>
 
-## Plugins Used
+## Plugins 
 - [@caweb/a11y-webpack-plugin](https://www.npmjs.com/package/@caweb/a11y-webpack-plugin)
 - [@caweb/css-audit-webpack-plugin](https://www.npmjs.com/package/@caweb/css-audit-webpack-plugin)
 - [@caweb/html-webpack-plugin](https://www.npmjs.com/package/@caweb/html-webpack-plugin)

package/changelog.txt

@@ -0,0 +1,137 @@
+v1.3.0
+- Webpack configuration has been moved to @caweb/html-webpack-plugin
+
+v1.2.28
+- Updated npm packages
+
+v1.2.27
+- Updated npm packages
+
+v1.2.26
+- Updated npm packages
+
+v1.2.25
+- Updated npm packages
+
+v1.2.24
+- Updated npm packages
+
+v1.2.23
+- Updated npm packages
+
+v1.2.22
+- Updated npm packages
+
+v1.2.21
+- Updated npm packages
+
+v1.2.20
+- Updated npm packages
+
+v1.2.19
+- Updated npm packages
+
+v1.2.18
+- Added flags to webpack config, no longer using NODE_OPTIONS
+- Updated npm package
+
+v1.2.17
+- Updated npm packages
+
+v1.2.16
+- Updated npm packages
+
+v1.2.15
+- Updated npm packages
+
+v1.2.14
+- Updated npm packages
+
+v1.2.13
+- Updated npm packages
+
+v1.2.12
+- Updated npm packages
+- Added html-webpack-link-type-plugin package
+
+v1.2.11
+- Updated npm packages
+
+v1.2.10
+- Updated npm packages
+
+v1.2.9
+- Updated npm packages
+
+v1.2.8
+- Updated npm packages
+
+v1.2.7
+- Updated npm packages
+
+v1.2.6
+- We only add plugin if serving 
+
+v1.2.5
+- Updated npm packages
+
+v1.2.4
+- Updated npm packages
+
+v1.2.3
+- Updated npm packages
+
+v1.2.2
+- Added jshint, css-audit, and a11y files to skipAssets
+
+v1.2.1
+- Added  missing dependency
+
+v1.2.0
+- Webpack main configuration details moved to html plugin 
+
+v1.1.5
+- Update npm packages
+
+v1.1.4 
+- Resolved issue with --template flag not switching properly
+
+v1.1.3
+- Removed console messaging
+
+v1.1.2
+- Added flag to config to allow for switching from different templates
+
+v1.1.1
+- Added missing handlebars-loader dependency
+
+v1.1.0
+- Added sample site content
+- Added header/footer template parameters
+
+v1.0.5
+- Update npm packages
+- Added partialResolver to handlebars-loader
+
+v1.0.4
+- Update npm packages
+
+v1.0.3
+- Update npm packages
+
+v1.0.2
+- Update npm packages
+
+v1.0.1
+- Update jshint plugin
+
+v1.0.0
+- Initial CAWeb HTML Webpack Plugin added
+- Updated Webpack Configurations
+- Added Page Template to HTML Plugin
+- WordPress CSS Audit Webpack Plugin added
+- Added output folder option to WordPress CSS Audit Webpack Plugin
+- JSHint Webpack Plugin added
+- Accessibility Checker Webpack Plugin added
+- Added jshint to workflow
+- Cleaned up extra files 

package/package.json

@@ -1,20 +1,13 @@
 {
   "name": "@caweb/webpack",
-  "version": "1.2.28",
+  "version": "1.3.0",
   "description": "CAWebPublishing Webpack Configuration",
   "main": "index.js",
   "type": "module",
-  "files": [
-    "webpack.config.js"
-  ],
   "scripts": {
     "webpack": "webpack",
-    "preserve": "cd plugins/html && npm i",
-    "serve": "set NODE_OPTIONS='--no-selectors' &&  webpack serve --config ./webpack.config.js",
-    "build": "npm run build:html",
-    "build:html": "cd ./plugins/html/ && npm i && npm run build",
+    "serve": "webpack serve --config ./plugins/html/webpack.config.js",
     "u:deps": "node ./scripts/update-deps.js ./plugins",
-    "config:test": "webpack configtest ./webpack.config.js",
     "test": "echo \\\"Error: run tests from root\\\" && exit 0",
     "i:deps": "npm i @caweb/a11y-webpack-plugin @caweb/css-audit-webpack-plugin @caweb/html-webpack-plugin @caweb/jshint-webpack-plugin",
     "i:local": "npm i plugins/a11y/ plugins/css-audit/ plugins/html/ plugins/jshint/ ",
@@ -38,13 +31,13 @@
     "access": "public"
   },
   "homepage": "https://github.com/CAWebPublishing/webpack#readme",
+  "devDependencies": {
+    "webpack": "^5.96.1"
+  },
   "dependencies": {
-    "@caweb/a11y-webpack-plugin": "^1.0.8",
-    "@caweb/css-audit-webpack-plugin": "^1.0.11",
-    "@caweb/html-webpack-plugin": "^1.5.0",
-    "@caweb/jshint-webpack-plugin": "^1.0.8",
-    "@wordpress/scripts": "^30.3.0",
-    "html-webpack-link-type-plugin": "^1.1.1",
-    "html-webpack-skip-assets-plugin": "^1.0.4"
+    "@caweb/a11y-webpack-plugin": "^1.0.9",
+    "@caweb/css-audit-webpack-plugin": "^1.0.12",
+    "@caweb/html-webpack-plugin": "^1.5.1",
+    "@caweb/jshint-webpack-plugin": "^1.0.9"
   }
 }

package/plugins/a11y/README.md

@@ -0,0 +1,19 @@
+This is a Webpack Plugin that utilizes the [IBM Accessibility Checker](https://www.npmjs.com/package/accessibility-checker0) module to perform integrated accessibility testing. 
+
+## Installation
+<pre>npm install --save-dev @caweb/a11y-webpack-plugin</pre>
+
+## Get Started
+In your Webpack configuration simply add the plugin to your existing plugin array.
+
+<pre>
+import A11yPlugin from '@caweb/a11y-webpack-plugin';
+
+export default {
+    plugins: [
+        new A11yPlugin()
+    ]
+}
+</pre>
+
+## Options

package/plugins/a11y/aceconfig.js

@@ -0,0 +1,44 @@
+/**
+ * Configuration for Accessibility Checker
+ * @link https://www.npmjs.com/package/accessibility-checker
+ */
+
+let levels = [
+    'violation', 
+    'potentialviolation',
+    'recommendation',
+    'potentialrecommendation',
+    'manual',
+    'pass'
+];
+let reportLevels = levels;
+let failLevels = levels;
+
+// process args
+process.argv.forEach((arg) => {
+    // remove any report levels
+    if( arg.includes('--no-report-levels-') ){  
+      let r = arg.replace('--no-report-levels-', '')
+      delete reportLevels[reportLevels.indexOf(r)]
+    }
+    // remove any fails levels
+    if( arg.includes('--no-fail-levels-') ){  
+      let f = arg.replace('--no-fail-levels-', '')
+      delete failLevels[failLevels.indexOf(f)]
+    }
+  })
+
+export default {
+    ruleArchive: "latest",
+    policies: [
+        'WCAG_2_1'
+    ],
+    failLevels: failLevels.filter(e=>e),
+    reportLevels: reportLevels.filter(e=>e),
+    outputFilename: 'a11y',
+    outputFolder: "public",
+    outputFormat: [
+        'html'
+    ],
+    outputFilenameTimestamp: false
+}

package/plugins/a11y/changelog.txt

@@ -0,0 +1,31 @@
+v1.0.9
+- Update npm packages
+- Added npm devDependencies packages
+
+v1.0.8
+- Update npm packages
+
+v1.0.7
+- Updated Readme
+
+v1.0.6
+- Fixed issue with hot module replacement not loading
+
+v1.0.5
+- Fixed issue when publicPath is set to auto
+
+v1.0.4
+- Removed console message
+
+v1.0.3
+- If output.publicPath is set to auto the scanner will scan the public directory
+
+v1.0.2
+- Report is ran once compilation is done
+
+v1.0.1
+- Removed timeout from a11y check
+- Fixed issue with hot module replacement
+
+v1.0.0
+- Accessibility Checker Webpack Plugin

package/plugins/a11y/index.js

@@ -0,0 +1,271 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+import { sync as resolveBin } from 'resolve-bin';
+import spawn from 'cross-spawn';
+import { getAllFilesSync } from 'get-all-files'
+import EntryDependency from "webpack/lib/dependencies/EntryDependency.js";
+import path from 'path';
+import { isUrl, isValidUrl } from 'check-valid-url';
+import fs from 'fs';
+import deepmerge from 'deepmerge';
+import chalk from 'chalk';
+import { fileURLToPath, URL } from 'url';
+
+// default configuration
+import {default as DefaultConfig} from './aceconfig.js';
+
+const boldWhite = chalk.bold.white;
+const boldGreen = chalk.bold.green;
+const boldBlue = chalk.bold.hex('#03a7fc');
+const currentPath = path.dirname(fileURLToPath(import.meta.url));
+
+// IBM Accessibility Checker Plugin
+class A11yPlugin {
+    config = {}
+
+    constructor(opts = {}) {
+      // outputFolder must be resolved
+      if( opts.outputFolder ){
+        opts.outputFolder = path.join(process.cwd(), opts.outputFolder);
+      }
+      this.config = deepmerge(
+        DefaultConfig, 
+        {
+          outputFolder: path.join(currentPath, DefaultConfig.outputFolder)
+        },
+        opts
+      );
+    }
+
+    apply(compiler) {
+      const staticDir = {
+        directory: this.config.outputFolder,
+        watch: true
+      }
+
+      let { devServer, output } = compiler.options;
+      let hostUrl = 'localhost' === devServer.host ? `http://${devServer.host}`: devServer.host;
+      let hostPort = devServer.port;
+
+      if( hostPort && 80 !== hostPort )
+      {
+          hostUrl = `${hostUrl}:${hostPort}`;
+      }
+
+      // if dev server allows for multiple pages to be opened
+      // add outputFilename.html to open property.
+      if( Array.isArray(devServer.open) ){
+        devServer.open.push(`${hostUrl}/${this.config.outputFilename}.html`)
+      }else if( 'object' === typeof devServer.open && Array.isArray(devServer.open.target) ){
+        devServer.open.target.push(`${hostUrl}/${this.config.outputFilename}.html`)
+      }
+
+      // add our static directory 
+      if( Array.isArray(devServer.static) ){
+        devServer.static.push(staticDir)
+      }else{
+        devServer.static = [].concat(devServer.static, staticDir );
+      }
+      
+      // Wait for configuration preset plugins to apply all configure webpack defaults
+      compiler.hooks.initialize.tap('IBM Accessibility Plugin', () => {
+        compiler.hooks.compilation.tap(
+          "IBM Accessibility Plugin",
+          (compilation, { normalModuleFactory }) => {
+            compilation.dependencyFactories.set(
+              EntryDependency,
+              normalModuleFactory
+            );
+          }
+        );
+
+        const { entry, options, context } = {
+          entry: path.join( this.config.outputFolder, 'a11y.update.js'),
+          options: {
+            name: 'a11y.update'
+          },
+          context: 'a11y'
+        };
+
+        const dep = new EntryDependency(entry);
+        dep.loc = {
+          name: options.name
+        };
+        if( ! fs.existsSync(path.resolve(this.config.outputFolder))){
+          fs.mkdirSync( path.resolve(this.config.outputFolder), {recursive: true} );
+        }
+        
+        fs.writeFileSync(
+          path.join(this.config.outputFolder, `a11y.update.js`),
+          `` // required for hot-update to compile on our page, blank script for now
+        );
+
+
+        compiler.hooks.thisCompilation.tap('IBM Accessibility Plugin',
+          /**
+           * Hook into the webpack compilation
+           * @param {Compilation} compilation
+           */
+          (compilation) => {
+            
+            compiler.hooks.make.tapAsync("IBM Accessibility Plugin", (compilation, callback) => {
+              
+              compilation.addEntry(
+              context,
+              dep, 
+              options, 
+              err => {
+                callback(err);
+              });
+            });
+
+        });
+
+        compiler.hooks.done.tapAsync(
+          'IBM Accessibility Plugin',
+          /**
+           * Hook into the process assets hook
+           * @param {any} _
+           * @param {(err?: Error) => void} callback
+           */
+          (stats, callback) => {
+              
+            console.log(`<i> ${boldGreen('[webpack-dev-middleware] Running IBM Accessibility scan...')}`);
+
+            let result = this.a11yCheck('auto' === output.publicPath ? output.path : output.publicPath, this.config );
+
+            if( result ){
+              // we have to inject the a11y.update.js file into the head in order for the webpack-dev-server scripts to load.
+              let pageContent = fs.readFileSync(path.join(staticDir.directory, `${this.config.outputFilename}.html`))
+              
+              fs.writeFileSync(
+                path.join(staticDir.directory, `${this.config.outputFilename}.html`),
+                pageContent.toString().replace('</head>', `<script src="./a11y.update.js"></script>\n</head>`)
+              )
+            }
+
+            console.log(`<i> ${boldGreen('[webpack-dev-middleware] IBM Accessibilty Report can be viewed at')} ${ boldBlue(new URL(`${hostUrl}/${this.config.outputFilename}.html`).toString())  }`);
+
+            callback();
+        });
+       
+    });
+    
+    }
+
+    /**
+     * Run accessibility checks
+     * 
+     * @param {Object}  options
+     * @param {boolean} options.debug            True if debug mode is enabled.
+     * @param {boolean} options.ruleArchive   Specify the rule archive.
+     * @param {boolean} options.policies   Specify one or many policies to scan.
+     * @param {boolean} options.failLevels   Specify one or many violation levels on which to fail the test.
+     * @param {boolean} options.reportLevels   Specify one or many violation levels that should be reported.
+     * @param {boolean} options.labels   Specify labels that you would like associated to your scan.
+     * @param {boolean} options.outputFormat   In which formats should the results be output.
+     * @param {boolean} options.outputFilename   Filename for the scan results.
+     * @param {boolean} options.outputFolder   Where the scan results should be saved.
+     * @param {boolean} options.outputFilenameTimestamp   Should the timestamp be included in the filename of the reports?
+     */
+    a11yCheck(url, {
+      debug, 
+      ruleArchive,
+      policies,
+      failLevels,
+      reportLevels,
+      labels,
+      outputFormat,
+      outputFilename, 
+      outputFolder,
+      outputFilenameTimestamp
+    }){
+
+      let acheckerArgs = [
+        '--ruleArchive',
+        ruleArchive,
+        '--policies',
+        Array.isArray(policies) ? policies.filter(e => e).join(',') : policies,
+        '--failLevels',
+        Array.isArray(failLevels) ? failLevels.filter(e => e).join(',') : failLevels,
+        '--reportLevels',
+        Array.isArray(reportLevels) ? reportLevels.filter(e => e).join(',') : reportLevels,
+        '--outputFolder',
+        outputFolder,
+        '--outputFormat',
+        outputFormat,
+        '---outputFilenameTimestamp',
+        outputFilenameTimestamp,
+        url
+      ];
+    
+      let isValid = false;
+
+      if( fs.existsSync( url ) ){
+          if( fs.statSync(url).isDirectory() &&  path.join( url, 'index.html') ){
+              url = path.join( url, 'index.html')
+          }
+          isValid = true;
+      }else{
+          isValid = 'localhost' === new URL(url).hostname || isUrl( url )
+      }
+
+      if( isValid ){
+        let originalFileName =  `${fs.existsSync( url ) ?
+          path.resolve(url).replace(':', '_') :
+          url.replace(/http[s]+:\/\//, '')}.html`;
+        let originalJsonFileName =  `${fs.existsSync( url ) ?
+            path.resolve(url).replace(':', '_') :
+            url.replace(/http[s]+:\/\//, '')}.json`;
+
+        let outputDir = path.resolve('.',  outputFolder );
+
+        let {stderr, stdout}  = spawn.sync( 
+          resolveBin('accessibility-checker', {executable: 'achecker'}),
+          acheckerArgs,
+          {
+            stdio: 'pipe'
+          }
+        )
+
+        if( stderr && stderr.toString() ){
+            console.log( stderr.toString() );
+        }
+        
+        if( stdout && stdout.toString()){
+          let reportedFile =  path.join(outputDir, originalFileName );
+          let reportedJSon =  path.join(outputDir, originalJsonFileName );
+
+          // if output file name option was passed
+          if( outputFilename ){
+
+              reportedFile =  path.join( outputDir, `${outputFilename}.html` );
+              reportedJSon =  path.join( outputDir, `${outputFilename}.json` );
+
+              // rename the output files
+              fs.renameSync(path.join(outputDir, originalFileName), reportedFile );
+              fs.renameSync(path.join(outputDir, originalJsonFileName), reportedJSon );
+
+              // delete any empty directories.
+              fs.rmSync( path.join(outputDir, originalFileName.split(path.sep).shift()), {recursive: true} )
+          }
+
+          if( 'a11y' === process.argv[2] ){
+              console.log( reportedFile )
+          }else{
+              return reportedFile;
+          }
+        }
+      }else{
+        console.log( `${url} is not a valid url.` )
+      }
+
+    } // end of a11yCheck
+
+} // end of class
+  
+
+export default A11yPlugin;