@lipemat/js-boilerplate 6.5.0 → 7.0.0-beta.1

package/README.md

@@ -1,4 +1,4 @@
-## The Start Of A Beautiful JS App
+# The Start Of A Beautiful JS App
 
 <p>
 <a href="https://www.npmjs.com/package/@lipemat/js-boilerplate">
@@ -10,12 +10,18 @@
 
 A zero configuration starting point for a React or non React app. 
 
-### Installation
+## Installation
 ```bash
 yarn add @lipemat/js-boilerplate
 ```
 
-### Usage
+## Version 6
+
+**Version 6 has many backward incompatibilities and should be updated with focus and thoroughness.**
+
+[Migration instructions are here.](https://github.com/lipemat/js-boilerplate/wiki/Version-6-Migration)
+
+## Usage
 Add the following to your package.json. (this may also be found in the `templates` directory.
 
 ```json
@@ -39,25 +45,17 @@ Add the following to your package.json. (this may also be found in the `template
 
 **_You may adjust things as needed but be sure to leave the `scripts` as is._**
 
-
-## Version 6
-
-**Version 6 has many backward incompatibilities and should be updated with focus and thoroughness.**
-
-[Migration instructions are here.](https://github.com/lipemat/js-boilerplate/wiki/Version-6-Migration)
-
-
-### Code Completion In PHPStorm
+## Code Completion In PHPStorm
 Some `@types` have been specified in this library to assist with code completion and allow using the built-in TypeScript support. Unfortunately, some typescripts still send errors to PHPStorm like "Default export is not declared in an imported module". I've found that it's easier to just remove this warning by un-checking `Editor -> Inspections -> JavaScript -> General -> Validate Imports`. (this may not need to be un-checked if you enable the built-in TypeScript support).
 
 
-### ESLint
+## ESLint
 To use the built-in eslint, copy the following items from `templates` into your project root:
 1. `.eslintrc`
 
 Now you may adjust the eslint configuration as desired and run the linter via `yarn run lint`.
 
-### Browserslist
+## Browserslist
 To retrieve a list of all currently targeted browsers, add the following to your `package.json`
 and run `yarn browserslist`.
 
@@ -72,7 +70,7 @@ and run `yarn browserslist`.
 The console will display a list of browsers targeted by your [browserslist configruation](https://github.com/browserslist/browserslist#config-file), or the defaults if no configuration is specified.
 
 
-### TypeScript
+## TypeScript
 To use the built-in TypeScript, copy the following items from `templates` into your project root:
 1. `tsconfig.json`
 
@@ -139,3 +137,14 @@ in your `package.json` to have it transformed.
   ]
 }
 ```
+
+## Certificates
+If you are using https in your local environment, you may point to the certificates in your package.json like so:
+
+```json
+  "certificates": {
+      "cert": "<path to -crt.pem file>",
+      "key": "<path to -key.pem file>"
+  }
+```
+

package/config/postcss.config.js

@@ -18,6 +18,27 @@ const presetEnv = {
 		path.resolve( packageConfig.workingDirectory, 'src/globals/pcss/variables.css' ),
 		path.resolve( packageConfig.workingDirectory, '../pcss/globals/variables.css' ),
 	].filter( filePath => fs.existsSync( filePath ) ),
+
+	features: {
+		/**
+		 * Fixes `focus-visible` feature for CSS modules (included by preset-env anywhere
+		 * Safari is supported).
+		 *
+		 * Requires `focus-visible` polyfill to be loaded externally to support Safari.
+		 *
+		 * @link https://caniuse.com/css-focus-visible
+		 *
+		 * May be imported directly into index.js for SPA or site which loads JS app
+		 * on every page.
+		 * @link https://github.com/WICG/focus-visible
+		 *
+		 * Most often will need it site wide on pages which do and don't use the JS app.
+		 * @link https://unpkg.com/focus-visible@5.2.0/dist/focus-visible.min.js
+		 */
+		'focus-visible-pseudo-class': {
+			replaceWith: ':global(.focus-visible)',
+		},
+	},
 };
 
 /**
@@ -39,19 +60,6 @@ const config = {
 		postcssPresetEnv( presetEnv ),
 		require( 'postcss-color-mod-function' ),
 		require( '@lipemat/css-mqpacker' ),
-
-		/**
-		 * Requires `focus-visible` polyfill to be loaded externally to support Safari.
-		 *
-		 * @link https://caniuse.com/css-focus-visible
-		 *
-		 * May be imported directly into index.js for SPA or site which load JS app on every page.
-		 * @link https://github.com/WICG/focus-visible
-		 *
-		 * Most often will need it site wide on pages which do and don't us the JS app.
-		 * @link https://unpkg.com/focus-visible@5.2.0/dist/focus-visible.min.js
-		 */
-		require( 'postcss-focus-visible' )( {replaceWith: ':global(.focus-visible)'} ),
 	],
 	parser: 'postcss-scss',
 };

package/config/webpack.dev.js

@@ -15,7 +15,6 @@ const plugins = [
 		jQuery: 'jquery',
 		$: 'jquery',
 	} ),
-	new webpack.HotModuleReplacementPlugin(),
 ];
 
 // Loads a thread which verifies any TypeScripts on changes.
@@ -95,7 +94,7 @@ module.exports = {
 						options: {
 							importLoaders: 1,
 							modules: true,
-							localIdentName: 'Ⓜ[name]__[local]__[contenthash:base64:1]',
+							localIdentName: 'Ⓜ[name]__[local]__[contenthash:base64:2]',
 							sourceMap: true,
 							url: false,
 						},

package/helpers/config.js

@@ -1,6 +1,5 @@
 const packageConfig = require( './package-config' );
 const path = require( 'path' );
-const without = require( 'lodash/without' );
 const once = require( 'lodash/once' );
 const browserslist = require( 'browserslist' );
 
@@ -90,9 +89,7 @@ const getDefaultBrowsersList = once( () => {
 	}
 
 	if ( browserslist( browserslist.defaults ) === browserslist() ) {
-		const browsers = require( '@wordpress/browserslist-config' );
-		browsers.push( 'not IE 11' );
-		return without( browsers, 'ie >= 11' );
+		return require( '@wordpress/browserslist-config' );
 	}
 	return false;
 } );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "6.5.0",
+  "version": "7.0.0-beta.1",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "engines": {
     "node": ">=14.15.3"
@@ -40,15 +40,15 @@
     "@lipemat/postcss-loader": "^3.1.2",
     "@lipemat/webpack-cleanup-plugin": "^1.0.0",
     "@types/lipemat__js-boilerplate": "lipemat/types-js-boilerplate#semver:^1.3.0",
-    "@wordpress/browserslist-config": "^3.0.1",
+    "@wordpress/browserslist-config": "^4.1.0",
     "are-you-es5": "^2.1.1",
     "babel-jest": "^24.7.1",
-    "babel-loader": "^8.0.5",
-    "browserslist": "^4.16.3",
+    "babel-loader": "^8.2.2",
+    "browserslist": "^4.17.0",
     "classnames": "^2.2.6",
     "core-js": "^3.8.3",
     "cross-spawn": "^6.0.5",
-    "css-loader": "2.1.1",
+    "css-loader": "6.2.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.5.0",
@@ -63,7 +63,6 @@
     "postcss-clean": "^1.1.0",
     "postcss-color-mod-function": "^3.0.3",
     "postcss-custom-media": "^6.0.0",
-    "postcss-focus-visible": "^5.0.0",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.1.2",
     "postcss-preset-env": "^6.6.0",
@@ -74,7 +73,7 @@
     "react-hot-loader": "^4.8.3",
     "react-test-renderer": "^16.5.2",
     "react-transition-group": "^4.4.1",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.2.1",
     "typescript": "^4.2.4",
     "update-notifier": "^4.1.3",
     "webpack": "^5.11.0",

package/scripts/fix-pnp.js

@@ -9,30 +9,37 @@
  * all loose module warnings unless the environmental variable
  * it set to display all warnings.
  *
- * @usage "scripts": {
+ * @example "scripts": {
     "postinstall": "lipemat-js-boilerplate fix-pnp"
   },
  *
  */
 
 const fs = require( 'fs' );
-const PNP_FILE = './.pnp.js';
 
-fs.readFile( PNP_FILE, 'utf8', ( err, data ) => {
-	if ( err ) {
-		return console.log( err );
-	}
+const PNP_FILES = [
+	'./.pnp.js',
+	'./.pnp.cjs',
+];
 
-	const result = data.replace( /if \(reference != null\) {/, '// # Warnings suppressed via @lipemat/js-boilerplate/fix-pnp script. \n' +
-		'if (! alwaysWarnOnFallback && reference != null) { \n' +
-					'dependencyReference = reference; \n' +
-		'} else if (alwaysWarnOnFallback && reference != null) {' );
+PNP_FILES.forEach( PNP_FILE => {
+	if ( fs.existsSync( PNP_FILE ) ) {
+		fs.readFile( PNP_FILE, 'utf8', ( readError, data ) => {
+			if ( readError ) {
+				return console.log( readError );
+			}
 
-	fs.writeFile( PNP_FILE, result, 'utf8', err => {
-		if ( err ) {
-			return console.log( err );
-		}
-	} );
-} );
+			const result = data.replace( /if \(reference != null\) {/, '// # Warnings suppressed via @lipemat/js-boilerplate/fix-pnp script. \n' +
+				'if (! alwaysWarnOnFallback && reference != null) { \n' +
+				'dependencyReference = reference; \n' +
+				'} else if (alwaysWarnOnFallback && reference != null) {' );
 
-console.log( 'The .pnp.js file has been adjusted to no longer display warnings for loose modules.' )
+			fs.writeFile( PNP_FILE, result, 'utf8', writeError => {
+				if ( writeError ) {
+					return console.log( writeError );
+				}
+				console.log( `The ${PNP_FILE} file has been adjusted to no longer display warnings for loose modules.` );
+			} );
+		} );
+	}
+} );