@lipemat/js-boilerplate 8.0.0-beta.3 → 8.0.0

package/README.md

@@ -26,7 +26,8 @@ Add the following to your package.json. (this may also be found in the `template
 
 ```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 +38,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,9 +83,11 @@ 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.
 
+**@note** The `jsPath` will be taken into account so if you specified a `jsPath` the `config` directory must be placed
+inside it. (e.g. `js/config/wepack.dev.js`).
+
 All declarations are merged in favor of the project config.
 
 ### Extensions
@@ -125,7 +130,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 +154,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

@@ -1,38 +1,37 @@
 const fs = require( 'fs' );
-const configHelper = require( '../helpers/config' );
-const webpackConfig = configHelper.getConfig( 'webpack.dev.js' );
 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',
 	client: {
-		webSocketURL: {
-			hostname: url.hostname,
-			port: 3000,
+		logging: 'warn',
+		overlay: {
+			errors: true,
+			warnings: false,
 		},
 	},
-	compress: false,
-	host: '0.0.0.0', // Allow connections from outside localhost to support mobile debugging
-	hot: true,
-	https,
-	historyApiFallback: true,
 	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,
-	publicPath: webpackConfig.output.publicPath,
-	stats: webpackConfig.stats,
+	server,
+	static: false,
 };

package/config/webpack.dev.js

@@ -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/package-config.js

@@ -9,8 +9,6 @@ let packageConfig = require( path.resolve( workingDirectory, 'package.json' ) );
 packageConfig.workingDirectory = packageConfig.jsPath ? path.resolve( packageConfig.jsPath ) : 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 || [];
 
 try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "8.0.0-beta.3",
+  "version": "8.0.0",
   "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/start.js

@@ -15,10 +15,4 @@ const server = new WebpackDevServer( devServerConfig, webpack( webpackConfig ) )
 	} catch ( err ) {
 		return console.log( err );
 	}
-
-	if ( devServerConfig.https ) {
-		console.log( `Listening at https://${devServerConfig.host}:${devServerConfig.port}/` );
-	} else {
-		console.log( `Listening at http://${devServerConfig.host}:${devServerConfig.port}/` );
-	}
 } )();

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
-}