@lipemat/js-boilerplate 8.0.0-beta.4 → 8.0.1

package/README.md

@@ -15,18 +15,13 @@ A zero configuration starting point for a React or non React app.
 yarn add @lipemat/js-boilerplate
 ```
 
-## Version 7
-
-**Version 7 has some backward incompatibilities and should be updated with focus and thoroughness.**
-
-[Migration instructions are here.](https://github.com/lipemat/js-boilerplate/wiki/Version-7-Migration)
-
 ## Usage
 Add the following to your package.json. (this may also be found in the `templates` directory.
 
 ```json
 {
-  "theme_path": "/wp-content/themes/core/",
+  "jsPath": "./js",
+  "themeUrlPath": "/wp-content/themes/core/",
   "scripts": {
     "browserslist": "lipemat-js-boilerplate browserslist",
     "dist": "lipemat-js-boilerplate dist",
@@ -37,14 +32,16 @@ Add the following to your package.json. (this may also be found in the `template
   },
   "devDependencies": {},
   "dependencies": {
-    "@lipemat/js-boilerplate": "^5.6.0"
+    "@lipemat/js-boilerplate": "^8.0.0"
   }
 }
 
 ```
-
 **_You may adjust things as needed but be sure to leave the `scripts` as is._**
 
+* `jsPath`: Path of JS application relative to `package.json`. If `package.json` is in same directory as the JS application, this may be omitted.
+* `themeUrlPath`: Path of `package.json` file relative to site's domain.
+
 ## 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).
 
@@ -80,7 +77,6 @@ Babel will automatically compile TypeScript files into the finished javascript,
 
 ### Configuration Overrides
 All configurations are found in the `config` directory and may be extended by adding a matching file within your project directory.
-
 For instance is you want to adjust `webpack.dev.js` you may add a `config/webpack.dev.js` file in your project directory.
 
 All declarations are merged in favor of the project config.
@@ -125,7 +121,7 @@ An alternative/extra location is `../pcss/globals/variables.css`.
 The app will automatically detect any packages in your `package.json` which do not support ES5 and add them to the list
 of files that Babel will transform into ES5 code.
 
-If you have a package which has a dependency which does not support ES5, you will need to add it to a `es6Modules` key
+If you have a package, which has a dependency, which does not support ES5, you will need to add it to a `es6Modules` key
 in your `package.json` to have it transformed.
 
 **Example**
@@ -149,4 +145,3 @@ If you are using https in your local environment, you may point to the certifica
   }
 }
 ```
-

package/bin/{lipemat-js-boilerplace.js → lipemat-js-boilerplate.js}

@@ -4,15 +4,15 @@
 // Update notifier.
 const updateNotifier = require( 'update-notifier' );
 const pkg = require( '../package.json' );
-updateNotifier( { pkg, shouldNotifyInNpmScript:true } ).notify();
+updateNotifier( {pkg, shouldNotifyInNpmScript: true} ).notify();
 
 const spawn = require( 'cross-spawn' );
 const args = process.argv.slice( 2 );
 
 const scriptIndex = args.findIndex(
-	x => x === 'browserslist' || x === 'start' || x === 'dist' || x === 'test' || x === 'lint' || x === 'fix-pnp'
+	x => 'browserslist' === x || 'start' === x || 'dist' === x || 'test' === x || 'lint' === x || 'fix-pnp' === x,
 );
-const script = scriptIndex === -1 ? args[ 0 ] : args[ scriptIndex ];
+const script = -1 === scriptIndex ? args[ 0 ] : args[ scriptIndex ];
 const nodeArgs = scriptIndex > 0 ? args.slice( 0, scriptIndex ) : [];
 
 switch ( script ) {
@@ -27,20 +27,20 @@ switch ( script ) {
 			nodeArgs
 				.concat( require.resolve( '../scripts/' + script ) )
 				.concat( args.slice( scriptIndex + 1 ) ),
-			{ stdio: 'inherit' }
+			{stdio: 'inherit'},
 		);
 		if ( result.signal ) {
-			if ( result.signal === 'SIGKILL' ) {
+			if ( 'SIGKILL' === result.signal ) {
 				console.log(
 					'The build failed because the process exited too early. ' +
 					'This probably means the system ran out of memory or someone called ' +
-					'`kill -9` on the process.'
+					'`kill -9` on the process.',
 				);
-			} else if ( result.signal === 'SIGTERM' ) {
+			} else if ( 'SIGTERM' === result.signal ) {
 				console.log(
 					'The build failed because the process exited too early. ' +
 					'Someone might have called `kill` or `killall`, or the system could ' +
-					'be shutting down.'
+					'be shutting down.',
 				);
 			}
 			process.exit( 1 );

package/config/dev-server.config.js

@@ -3,26 +3,35 @@ const packageConfig = require( '../helpers/package-config' );
 
 const url = new URL( packageConfig.url );
 
-let https = 'https:' === url.protocol;
+let server = 'https:' === url.protocol ? 'https' : 'http';
 // Load local certificates for https during development.
 if ( 'object' === typeof ( packageConfig.certificates ) ) {
-	https = {
-		cert: fs.readFileSync( packageConfig.certificates.cert ),
-		key: fs.readFileSync( packageConfig.certificates.key ),
+	server = {
+		type: 'https',
+		options: {
+			cert: fs.readFileSync( packageConfig.certificates.cert ),
+			key: fs.readFileSync( packageConfig.certificates.key ),
+		},
 	};
 }
 
 module.exports = {
 	allowedHosts: 'all',
-	compress: false,
-	host: url.hostname,
-	hot: true,
-	https,
+	client: {
+		logging: 'warn',
+		overlay: {
+			errors: true,
+			warnings: false,
+		},
+	},
 	headers: {
 		'Access-Control-Allow-Origin': '*',
 		'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
 		'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
 	},
+	host: '0.0.0.0', // Allow connections from any IP.
+	hot: true,
 	port: 3000,
+	server,
 	static: false,
 };

package/config/webpack.dev.js

@@ -17,7 +17,7 @@ const plugins = [
 	} ),
 ];
 
-// Loads a thread which verifies any TypeScripts on changes.
+// Loads a thread, which verifies any TypeScripts on changes.
 // Only use this if the project has a tsconfig.json file.
 if ( configHelper.hasLocalOverride( 'tsconfig.json', true ) ) {
 	plugins.push( new ForkTsCheckerWebpackPlugin( {
@@ -33,8 +33,6 @@ if ( configHelper.hasLocalOverride( 'tsconfig.json', true ) ) {
 
 const entry = {
 	master: [
-		'webpack-dev-server/client?' + config.url + ':3000',
-		'webpack/hot/only-dev-server',
 		config.workingDirectory + '/src/index.js',
 	],
 };
@@ -46,7 +44,7 @@ if ( fs.existsSync( path.resolve( config.workingDirectory, 'src/admin.js' ) ) )
 }
 
 module.exports = {
-	devtool: 'eval-cheap-module-source-map',
+	devtool: 'eval-source-map',
 	entry,
 	mode: 'development',
 	stats: 'minimal',

package/helpers/config.js

@@ -8,19 +8,19 @@ const extensions = Object.keys( packageConfig.dependencies ).filter( name => nam
 /**
  * Check to see if a local config file exists.
  *
- * @param {string} $fileName
- * @param {boolean} $inRoot - Look in the root their project directory instead of their /config directory
+ * @param {string} fileName
+ * @param {boolean} inWorkingDirectory - Look in working directory instead of their /config directory
  *
  * @return {boolean}
  */
-function hasLocalOverride( $fileName, $inRoot = false ) {
+function hasLocalOverride( fileName, inWorkingDirectory = false ) {
 	let hasLocal = false;
 	try {
-		if ( $inRoot ) {
-			require( path.resolve( packageConfig.workingDirectory, $fileName ) );
+		if ( inWorkingDirectory ) {
+			require( path.resolve( packageConfig.workingDirectory, fileName ) );
 			hasLocal = true;
 		} else {
-			require( path.resolve( packageConfig.workingDirectory + '/config', $fileName ) );
+			require( path.resolve( packageConfig.packageDirectory + '/config', fileName ) );
 			hasLocal = true;
 		}
 	} catch ( e ) {
@@ -44,7 +44,7 @@ function hasLocalOverride( $fileName, $inRoot = false ) {
 function getConfig( $fileName ) {
 	let config = {...require( '../config/' + $fileName ), ...getExtensionsConfig( $fileName )};
 	try {
-		const localConfig = require( path.resolve( packageConfig.workingDirectory + '/config', $fileName ) );
+		const localConfig = require( path.resolve( packageConfig.packageDirectory + '/config', $fileName ) );
 		config = {...config, ...localConfig};
 	} catch ( e ) {
 	}
@@ -52,8 +52,8 @@ function getConfig( $fileName ) {
 }
 
 /**
- * Get a config from any existing extension's /config directory's
- * merged together into one.
+ * Get a config from any existing extension's /config directories
+ * merged into one.
  *
  * @param {string} $fileName
  *

package/helpers/package-config.js

@@ -6,12 +6,13 @@ const fs = require( 'fs' );
 const workingDirectory = fs.realpathSync( process.cwd() );
 
 let packageConfig = require( path.resolve( workingDirectory, 'package.json' ) );
-packageConfig.workingDirectory = packageConfig.jsPath ? path.resolve( packageConfig.jsPath ) : workingDirectory;
+packageConfig.es6Modules = packageConfig.es6Modules || [];
+// Path of the package.json file (root).
+packageConfig.packageDirectory = workingDirectory;
 packageConfig.themeUrlPath = packageConfig.themeUrlPath || '/';
 packageConfig.url = packageConfig.url || 'http://localhost';
-packageConfig.root = packageConfig.root || './';
-packageConfig.regenerate_revision = packageConfig.regenerate_revision || false;
-packageConfig.es6Modules = packageConfig.es6Modules || [];
+// Path of JS application files.
+packageConfig.workingDirectory = packageConfig.jsPath ? path.resolve( packageConfig.jsPath ) : workingDirectory;
 
 try {
 	const localConfig = require( path.resolve( workingDirectory, './local-config.json' ) );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.1",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "engines": {
     "node": ">=14.17.6"
@@ -23,7 +23,7 @@
     "scripts/"
   ],
   "bin": {
-    "lipemat-js-boilerplate": "./bin/lipemat-js-boilerplace.js"
+    "lipemat-js-boilerplate": "bin/lipemat-js-boilerplate.js"
   },
   "author": "Mat Lipe",
   "license": "MIT",
@@ -85,5 +85,6 @@
   "bugs": {
     "url": "https://github.com/lipemat/js-boilerplate/issues"
   },
-  "homepage": "https://github.com/lipemat/js-boilerplate#readme"
+  "homepage": "https://github.com/lipemat/js-boilerplate#readme",
+  "packageManager": "yarn@3.1.1"
 }

package/scripts/dist.js

@@ -3,7 +3,6 @@ process.env.NODE_ENV = 'production';
 
 const webpack = require( 'webpack' );
 const webpackConfig = require( '../helpers/config' ).getConfig( 'webpack.dist.js' );
-const updateRevisionFile = require( '../helpers/revision' ).updateRevisionFile;
 
 async function build( config ) {
 	// Compiler Instance.
@@ -23,11 +22,8 @@ async function build( config ) {
 		} else {
 			console.log( stats.toString( config.stats ) );
 		}
-
-		updateRevisionFile();
 	} );
 }
 
 
 build( webpackConfig );
-

package/scripts/test.js

@@ -1,7 +1,7 @@
 /**
  * Runs `jest` with any arguments passed via the terminal or yarn.
  *
- * @notice you must add `/templates/jest.config.js` to the root of your project.
+ * @notice you must add `/templates/jest.config.js` to the `jsPath` of your project.
  *
  * @example `lipemat-js-boilerplate test`
  */

package/helpers/revision.js

@@ -1,31 +0,0 @@
-const fs = require( 'fs' );
-const path = require( 'path' );
-const packageConfig = require( '../helpers/package-config' );
-
-/**
- * Bump the .revision file to the current timestamp.
- *
- * Useful when PWA is active because Chrome will get the old service worker
- * cached resources unless we bump the revision.
- * Also helps with sha integrity issues on developing locally.
- *
- * If not using PWA and using another form of .revision generation such as
- * Beanstalk or a deploy script, it's probably better to disable this so you
- * can match the git hash to the .revision file.
- *
- * May be enabled by adding "regenerate_revision":true to your package.json.
- */
-function updateRevisionFile() {
-	if ( packageConfig.regenerate_revision && packageConfig.root ) {
-		fs.writeFile( path.resolve( packageConfig.root, '.revision' ), Date.now(), err => {
-			if ( err ) {
-				throw err;
-			}
-			console.log( '\n', 'Generated .revision file', '\n' );
-		} );
-	}
-}
-
-module.exports = {
-	updateRevisionFile
-}