@lipemat/js-boilerplate 8.3.0 → 8.5.0

package/config/babel.config.js

@@ -9,10 +9,7 @@ const presetEnv = {
 };
 
 /**
- * If browserslist is not specified, we fallback to WordPress defaults
- * except for IE11 which we don't support by default.
- *
- * @link https://babeljs.io/docs/en/babel-preset-env#targets
+ * Use shared browserslist configurations.
  */
 if ( getDefaultBrowsersList() ) {
 	presetEnv.targets = getDefaultBrowsersList();
@@ -30,4 +27,3 @@ module.exports = {
 		'react-hot-loader/babel',
 	],
 };
-

package/config/jest.config.js

@@ -14,6 +14,9 @@ let jestConfig = {
 	moduleNameMapper: {
 		'\\.(pcss|less|css)$': 'identity-obj-proxy',
 	},
+	roots: [
+		'./tests',
+	],
 	testURL: packageConfig.url,
 	transform: {
 		'^.+\\.[tj]sx?$': [ 'babel-jest', babelConfig ],

package/config/webpack.dist.js

@@ -1,4 +1,5 @@
 const moduleHelpers = require( '../helpers/modules' );
+const {getLocalIdent} = require( '../helpers/css-classnames' );
 const webpack = require( 'webpack' );
 const path = require( 'path' );
 const fs = require( 'fs' );
@@ -102,6 +103,9 @@ module.exports = {
 							importLoaders: 1,
 							modules: {
 								exportLocalsConvention: 'camelCase',
+								// Use short CSS Classes if enabled.
+								...config.shortCssClasses ? {getLocalIdent} : {},
+								// Hash used when short CSS classes are not enabled.
 								localIdentName: '[contenthash:base64:5]',
 								// Default to :global for classes in "global" directories.
 								mode: resourcePath => {

package/helpers/config.js

@@ -37,6 +37,22 @@ function hasLocalOverride( fileName, inWorkingDirectory = false ) {
  * we will merge the contents with our config/babel.config.js in favor of whatever
  * is specified with the project's file.
  *
+ * If the `module.exports` are a function, the existing configuration will be passed
+ * as the only argument. Otherwise, standard `module.exports` are also supported.
+ *
+ * @example ```ts
+ * // standard
+ * module.export = {
+ *     externals: {extra: 'Extra'}
+ * }
+ * // function
+ * module.exports = function( config ) {
+ *     return {
+ *         externals: {...config.externals, extra: 'Extra'}
+ *     }
+ * }
+ * ```
+ *
  * @param {string} $fileName
  *
  * @return {Object}
@@ -45,7 +61,11 @@ function getConfig( $fileName ) {
 	let config = {...require( '../config/' + $fileName ), ...getExtensionsConfig( $fileName )};
 	try {
 		const localConfig = require( path.resolve( packageConfig.packageDirectory + '/config', $fileName ) );
-		config = {...config, ...localConfig};
+		if ( 'function' === typeof localConfig ) {
+			config = {...config, ...localConfig( config )};
+		} else {
+			config = {...config, ...localConfig};
+		}
 	} catch ( e ) {
 	}
 	return config;
@@ -55,6 +75,8 @@ function getConfig( $fileName ) {
  * Get a config from any existing extension's /config directories
  * merged into one.
  *
+ * @see getConfig
+ *
  * @param {string} $fileName
  *
  * @return {Object}
@@ -64,7 +86,11 @@ function getExtensionsConfig( $fileName ) {
 	extensions.forEach( extension => {
 		try {
 			const extensionConfig = require( extension + '/config/' + $fileName );
-			config = {...config, ...extensionConfig};
+			if ( 'function' === typeof extensionConfig ) {
+				config = {...config, ...extensionConfig( config )};
+			} else {
+				config = {...config, ...extensionConfig};
+			}
 		} catch ( e ) {
 		}
 	} );
@@ -73,8 +99,8 @@ function getExtensionsConfig( $fileName ) {
 }
 
 /**
- * If browserslist is not specified, we fallback to WordPress defaults
- * except for IE11 which we don't support by default.
+ * If browserslist is not specified, we fall back to WordPress defaults
+ * except for > 1% we don't support by default.
  *
  * Return false if a browserslist is specified in the current project.
  *

package/helpers/css-classnames.js

@@ -0,0 +1,106 @@
+const SHORT_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const ALPHABET = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+
+const classes = {};
+let counters = [ -1 ];
+
+/**
+ * Reset all counters.
+ *
+ * @notice Mostly here for unit tests.
+ */
+function resetCounters() {
+	counters = [ -1 ];
+}
+
+/**
+ * Get the next class is sequence based on:
+ * 1. Single character from shortAlphabet (prevent conflicts with CSS boilerplate).
+ * 2. Incremented character from the `alphabet`.
+ *      1. Used once require 2+ characters.
+ *      2. Grows to 3+ characters as needed.
+ *
+ * @return {string}
+ */
+function getNextClass() {
+	const last = counters.length - 1;
+	let totalLetters = ALPHABET.length - 1;
+
+	// First level uses the SHORT_ALPHABET.
+	if ( 0 === last ) {
+		totalLetters = SHORT_ALPHABET.length - 1;
+	}
+
+	if ( counters[ last ] < totalLetters ) {
+		counters[ last ]++;
+	} else {
+		incrementParent();
+	}
+
+	return counters.map( ( counter, i ) => {
+		return 0 === i ? SHORT_ALPHABET[ counter ] : ALPHABET[ counter ];
+	} ).join( '' );
+}
+
+
+/**
+ * When we run out of characters on the current level:
+ * 1. Increment the parent level.
+ * 2. Reset current level and all child levels back to 0.
+ *
+ * If we are out of characters on the parent level or have
+ * no parent level:
+ * 1. Add a new child level.
+ * 2. Reset all levels back to 0.
+ *
+ */
+function incrementParent() {
+	let parent = counters.length - 2;
+	let totalLetters = ALPHABET.length - 1;
+
+	while ( counters[ parent ] !== undefined ) {
+		// First level uses the SHORT_ALPHABET.
+		if ( 0 === parent ) {
+			totalLetters = SHORT_ALPHABET.length - 1;
+		}
+		if ( counters[ parent ] < totalLetters ) {
+			counters[ parent ]++;
+			// Reset all child levels to 0.
+			while ( counters[ parent + 1 ] !== undefined ) {
+				counters[ parent + 1 ] = 0;
+				parent++;
+			}
+			return;
+		}
+		parent--;
+	}
+
+	// Add a new level and reset all existing levels.
+	counters.forEach( ( _, i ) => counters[ i ] = 0 );
+	counters.push( 0 );
+}
+
+/**
+ * Return a single character unique CSS class name based on WebPack
+ * css-loader's `getLocalIdentName` callback.
+ *
+ * Tracks CSS classes per each file so duplicate uses of the
+ * same class in a file receive the same result.
+ *
+ * @notice Only enabled if the `package.json` has `shortCssClasses` set to true.
+ *
+ * @link https://webpack.js.org/loaders/css-loader/#getlocalident
+ */
+const getLocalIdent = ( {resourcePath}, _, localName ) => {
+	classes[ resourcePath ] ||= {};
+	classes[ resourcePath ][ localName ] ||= getNextClass();
+	return classes[ resourcePath ][ localName ];
+};
+
+module.exports = {
+	ALPHABET,
+	SHORT_ALPHABET,
+	getLocalIdent,
+	getNextClass,
+	resetCounters,
+};

package/package.json

@@ -1,14 +1,21 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "8.3.0",
+  "version": "8.5.0",
   "description": "Dependencies and scripts for a no config JavaScript app",
+  "author": "Mat Lipe",
+  "license": "MIT",
   "engines": {
     "node": ">=14.17.6"
   },
+  "bugs": {
+    "url": "https://github.com/lipemat/js-boilerplate/issues"
+  },
+  "homepage": "https://github.com/lipemat/js-boilerplate#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lipemat/js-boilerplate.git"
   },
+  "sideEffects": false,
   "keywords": [
     "react",
     "boilerplate",
@@ -25,9 +32,9 @@
   "bin": {
     "lipemat-js-boilerplate": "bin/lipemat-js-boilerplate.js"
   },
-  "author": "Mat Lipe",
-  "license": "MIT",
-  "sideEffects": false,
+  "scripts": {
+    "test": "lipemat-js-boilerplate test --silent"
+  },
   "dependencies": {
     "@babel/core": "^7.4.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -41,7 +48,7 @@
     "@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",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "@wordpress/browserslist-config": "^4.1.0",
     "are-you-es5": "^2.1.1",
     "babel-jest": "^24.7.1",
@@ -67,7 +74,6 @@
     "postcss-nested": "^4.1.2",
     "postcss-preset-env": "^6.6.0",
     "postcss-scss": "^2.0.0",
-    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hot-loader": "^4.8.3",
@@ -82,9 +88,5 @@
     "webpack-dev-server": "^4.7.2",
     "webpack-subresource-integrity": "^1.5.2"
   },
-  "bugs": {
-    "url": "https://github.com/lipemat/js-boilerplate/issues"
-  },
-  "homepage": "https://github.com/lipemat/js-boilerplate#readme",
   "packageManager": "yarn@3.2.0"
 }