@caweb/webpack 1.3.44 → 1.4.0-beta.1

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@caweb/webpack",
-  "version": "1.3.44",
+  "version": "1.4.0-beta.1",
   "description": "CAWebPublishing Webpack Configuration",
-  "main": "index.js",
+  "main": "webpack.config.js",
+  "files": [
+    "webpack.config.js",
+    "tsconfig.json",
+    "helpers"
+  ],
   "type": "module",
   "scripts": {
     "webpack": "webpack",
@@ -31,13 +36,16 @@
     "access": "public"
   },
   "homepage": "https://github.com/CAWebPublishing/webpack#readme",
-  "devDependencies": {
-    "webpack": "^5.99.8"
-  },
   "dependencies": {
-    "@caweb/a11y-webpack-plugin": "^1.0.9",
-    "@caweb/css-audit-webpack-plugin": "^1.0.12",
-    "@caweb/html-webpack-plugin": "^1.7.13",
-    "@caweb/jshint-webpack-plugin": "^2.0.1"
+    "@caweb/html-webpack-plugin": "^1.8.1",
+    "@wordpress/scripts": "^30.16.0",
+    "css-minimizer-webpack-plugin": "^7.0.2",
+    "handlebars-loader": "^1.7.3",
+    "html-webpack-link-type-plugin": "^1.1.1",
+    "html-webpack-skip-assets-plugin": "^1.0.4",
+    "mini-css-extract-plugin": "^2.9.2",
+    "rtlcss-webpack-plugin": "^4.0.7",
+    "webpack-dev-server": "^5.2.1",
+    "webpack-remove-empty-scripts": "^1.0.4"
   }
 }

package/{plugins/html/webpack.config.js → webpack.config.js}

@@ -22,18 +22,23 @@ 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';
-import A11yPlugin from '@caweb/a11y-webpack-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';
+import CAWebHTMLPlugin from '@caweb/html-webpack-plugin';
 
 const webpackCommand = 'build' === process.argv[2] ? 'build' : 'serve' ;
+
+// this is the path to this current file
 const currentPath = path.dirname(fileURLToPath(import.meta.url));
 
+// this is the path to the current project directory
+const appPath = process.cwd();
+
 // flags can be passed via argv0 
 // we also add args from NODE_OPTIONS
 const flags = [].concat(
@@ -101,6 +106,11 @@ baseConfig.plugins.splice(1,1, false);
  */
 delete baseConfig.devServer;
 
+// we allow the user to pass custom template helpers
+const customTemplateHelpers = fs.existsSync(path.resolve('helpers'), {withFileTypes: true} ) ?
+  fs.readdirSync(path.resolve('helpers'), {withFileTypes: true} ).filter( Dirent => Dirent.isDirectory()  ).map( Dirent => path.resolve(Dirent.parentPath, Dirent.name) ) :
+  [];
+
 // Wordpress ignores the webpack --mode flag
 // if the flag is passed we use that mode 
 // otherwise use whatever Wordpress is using
@@ -161,38 +171,68 @@ let webpackConfig = {
             path.resolve(currentPath, 'helpers', 'logic'),
             path.resolve(currentPath, 'helpers', 'object'),
             path.resolve(currentPath, 'helpers', 'string')
-          ],
+          ].concat( customTemplateHelpers ),
           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
+             * All template partials are loaded from the root directory
+             * if the file doesn't exist we fallback to our template partials
              */
-            let partialPath = path.join( process.cwd(), 'sample' );
-            let partialStructurePath = path.join( partialPath, 'structural' );
+            let fallbackPath = path.join( currentPath, '..', 'template' );
+            let partialDir = '';
 
             // template parameter specific partials
             switch( partial ){
-              // header/footer is served from the /sample/structural/ directory
+              /**
+               * Semantic elements are served from the /semantic/ directory
+               * 
+               * - header
+               * - footer
+               * 
+               * @link https://www.w3schools.com/html/html5_semantic_elements.asp
+               */
+              case 'branding':
               case 'footer':
               case 'header': 
-                partialPath = fs.existsSync(path.join( partialStructurePath, `/${partial}.html` )) ? path.join( partialStructurePath, `/${partial}.html` ) :
-                `./structural/${partial}.html`
-              
-              break;
-              
+              case 'mobileControls': 
+              case 'navHeader': 
+              case 'utilityHeader': 
+                partialDir = 'semantics';
+                break;
+
+              // content is served from the /content/ directory
+              case 'index': 
               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';
+                partialDir = 'content';
+                break;
 
+              // components are served from the /components/ directory
+              case 'alerts':
+                partialDir = 'components';
+                break;
+              
+              // forms are served from the /forms/ directory
+              case 'searchForm':
+                partialDir = 'forms';
                 break;
               
-              // if not a template parameter we let the loader handle it
-              default:
-              partialPath = partial;
+              // tables are served from the /tables/ directory
+              case partial.includes('Table'):
+                partialDir = 'tables';
+                break;
             }
 
-            callback(false, partialPath );
+            if( partialDir ){
+                // we remove the Form from the name
+                // we remove the Table from the name
+                // we change the partial name from camelCase to dash-case
+                partial = partial.replace(/(Form|Table)/, '').replace(/([A-Z])/g, '-$1').toLowerCase();
+
+                partial = fs.existsSync( path.join( appPath, partialDir, `/${partial}.html` )) ? 
+                  path.join( appPath, partialDir, `/${partial}.html` ) :
+                  path.join( fallbackPath, partialDir, `/${partial}.html` )
+            }
+
+            callback(false, partial );
           }
         }
       },
@@ -229,9 +269,12 @@ let webpackConfig = {
  * 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';
+
+  let host = flags.includes('--host') ? getArgVal('--host') : 'localhost';
+  let port = flags.includes('--port') ? getArgVal('--port') : 9000;
+  let server = flags.includes('--server-type') ? getArgVal('--server-type') : 'http';
   
   // Dev Server is added
   webpackConfig.devServer = { 
@@ -241,30 +284,20 @@ if( 'serve' === webpackCommand ){
     hot: true,
     compress: true,
     allowedHosts: 'auto',
-    host: 'localhost',
-    port: 9000,
-    open: [  'http://localhost:9000' ],
+    server,
+    host,
+    port,
+    open: [  `${server}://${host}:${port}` ],
     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:[
       /**
@@ -273,7 +306,7 @@ if( 'serve' === webpackCommand ){
        */
       {
         context: ['/build'],
-        target: 'http://localhost:9000',
+        target: `${server}://${host}:${port}`,
         pathRewrite: {
           '^/build': ''
         },
@@ -284,13 +317,8 @@ if( 'serve' === webpackCommand ){
        */
       {
         context: ['/node_modules'],
-        target: 'http://localhost:9000',
+        target: `${server}://${host}:${port}`,
         pathRewrite: { '^/node_modules': '' },
-      },
-      {
-        context: ['/src'],
-        target: 'http://localhost:9000',
-        pathRewrite: { '^/src': '' },
       }
     ]
   }
@@ -312,9 +340,9 @@ if( 'serve' === webpackCommand ){
     }),
     new HtmlWebpackSkipAssetsPlugin(),
     new HtmlWebpackLinkTypePlugin(),
-    ! flagExists('--no-jshint') ? new JSHintPlugin() : false,
-    ! flagExists('--no-audit') ? new CSSAuditPlugin() : false,
-    ! flagExists('--no-a11y') ? new A11yPlugin() : false
+    //! flagExists('--no-jshint') ? new JSHintPlugin() : false,
+    //! flagExists('--no-audit') ? new CSSAuditPlugin() : false,
+    //! flagExists('--no-a11y') ? new A11yPlugin() : false
   )
 
   // we add the SERP (Search Engine Results Page)

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

@@ -1,23 +0,0 @@
-# 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:
-  publish-npm:
-    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

@@ -1,31 +0,0 @@
-# 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:
-  publish-npm:
-    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

@@ -1,29 +0,0 @@
-# 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

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

package/CHANGELOG.md

@@ -1,273 +0,0 @@
-v1.3.44
-- Updated npm packages
-
-v1.3.43
-- Updated npm packages
-
-v1.3.42
-- Updated npm packages
-
-v1.3.41
-- Updated npm packages
-
-v1.3.40
-- Updated npm packages
-
-v1.3.39
-- Updated npm packages
-
-v1.3.38
-- Updated npm packages
-
-v1.3.37
-- Updated npm packages
-
-v1.3.37
-- Updated npm packages
-
-v1.3.36
-- Updated npm packages
-
-v1.3.35
-- Updated npm packages
-
-v1.3.34
-- Updated npm packages
-
-v1.3.33
-- Changelog changed from txt to md
-- Updated npm packages
-
-v1.3.32
-- Updated npm packages
-
-v1.3.31
-- Updated npm packages
-
-v1.3.30
-- Updated npm packages
-
-v1.3.29
-- Updated npm packages
-
-v1.3.28
-- Updated npm packages
-
-v1.3.27
-- Updated npm packages
-
-v1.3.26
-- Updated npm packages
-
-v1.3.25
-- Updated npm packages
-
-v1.3.24
-- Updated npm packages
-
-v1.3.23
-- Updated npm packages
-
-v1.3.22
-- Updated npm packages
-
-v1.3.21
-- Updated npm packages
-
-v1.3.20
-- Updated npm packages
-
-v1.3.19
-- Updated npm packages
-
-v1.3.18
-- Updated npm packages
-
-v1.3.17
-- Updated npm packages
-
-v1.3.16
-- Updated npm packages
-
-v1.3.15
-- Updated npm packages
-
-v1.3.14
-- Updated npm packages
-
-v1.3.13
-- Updated npm packages
-
-v1.3.12
-- Updated npm packages
-
-v1.3.11
-- Updated npm packages
-
-v1.3.10
-- Updated npm packages
-
-v1.3.9
-- Updated npm packages
-
-v1.3.8
-- Updated npm packages
-
-v1.3.7
-- Updated npm packages
-
-v1.3.6
-- Updated npm packages
-
-v1.3.5
-- Updated npm packages
-
-v1.3.4
-- Updated npm packages
-
-v1.3.3
-- Updated npm packages
-
-v1.3.2
-- Updated npm packages
-
-v1.3.1
-- Updated npm packages
-
-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/plugins/a11y/README.md

@@ -1,19 +0,0 @@
-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

@@ -1,44 +0,0 @@
-/**
- * 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
-}