@lipemat/js-boilerplate 6.6.0 → 7.0.0-beta.3

package/README.md

@@ -15,11 +15,11 @@ A zero configuration starting point for a React or non React app.
 yarn add @lipemat/js-boilerplate
 ```
 
-## Version 6
+## Version 7
 
-**Version 6 has many backward incompatibilities and should be updated with focus and thoroughness.**
+**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-6-Migration)
+[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.
@@ -142,9 +142,11 @@ in your `package.json` to have it transformed.
 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>"
+    "cert": "<path to -crt.pem file>",
+    "key": "<path to -key.pem file>"
   }
+}
 ```
 

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.
@@ -26,6 +25,9 @@ if ( configHelper.hasLocalOverride( 'tsconfig.json', true ) ) {
 		logger: {
 			devServer: false,
 		},
+		typescript: {
+			configFile: config.workingDirectory + '/tsconfig.json',
+		},
 	} ) );
 }
 
@@ -33,14 +35,14 @@ const entry = {
 	master: [
 		'webpack-dev-server/client?' + config.url + ':3000',
 		'webpack/hot/only-dev-server',
-		'./src/index.js',
+		config.workingDirectory + '/src/index.js',
 	],
 };
 
-// Loads an admin.js file if it exists @since 5.0.0
-if ( fs.existsSync( path.resolve( config.workingDirectory, './src/admin.js' ) ) ) {
+// Loads an admin.js file if it exists.
+if ( fs.existsSync( path.resolve( config.workingDirectory, '/src/admin.js' ) ) ) {
 	entry.admin = [ ...entry.master ];
-	entry.admin.splice( -1, 1, './src/admin.js' );
+	entry.admin.splice( -1, 1, config.workingDirectory + '/src/admin.js' );
 }
 
 module.exports = {
@@ -75,14 +77,14 @@ module.exports = {
 	module: {
 		rules: [
 			{
-				test: /\.(j|t)sx?$/,
+				test: /\.[jt]sx?$/,
 				loader: 'babel-loader',
 				include: path.resolve( config.workingDirectory, 'src' ),
 				exclude: /node_modules/,
 				options: babelOptions,
 			},
 			{
-				test: /\.(j|t)sx?$/,
+				test: /\.[jt]sx?$/,
 				include: /node_modules/,
 				use: [ 'react-hot-loader/webpack' ],
 			},
@@ -94,8 +96,10 @@ module.exports = {
 						loader: 'css-loader',
 						options: {
 							importLoaders: 1,
-							modules: true,
-							localIdentName: 'Ⓜ[name]__[local]__[contenthash:base64:1]',
+							modules: {
+								exportLocalsConvention: 'camelCase',
+								localIdentName: 'Ⓜ[name]__[local]__[contenthash:base64:2]',
+							},
 							sourceMap: true,
 							url: false,
 						},

package/config/webpack.dist.js

@@ -12,14 +12,14 @@ const SriPlugin = require( 'webpack-subresource-integrity' );
 
 const entry = {
 	master: [
-		'./src/index.js',
+		config.workingDirectory + '/src/index.js',
 	],
 };
 
-// Loads an admin.js file if it exists @since 4.3.0
-if ( fs.existsSync( path.resolve( config.workingDirectory, './src/admin.js' ) ) ) {
+// Loads an admin.js file if it exists.
+if ( fs.existsSync( path.resolve( config.workingDirectory, '/src/admin.js' ) ) ) {
 	entry.admin = [ ...entry.master ];
-	entry.admin.splice( -1, 1, './src/admin.js' );
+	entry.admin.splice( -1, 1, config.workingDirectory + '/src/admin.js' );
 }
 
 module.exports = {
@@ -55,7 +55,7 @@ module.exports = {
 	output: {
 		path: path.resolve( config.workingDirectory, 'dist' ),
 		filename: '[name].js',
-		publicPath: config.theme_path + 'js/dist/',
+		publicPath: config.themeUrlPath + 'js/dist/',
 		chunkFilename: '[name].[chunkhash].js',
 		crossOriginLoading: 'anonymous',
 	},
@@ -87,7 +87,7 @@ module.exports = {
 	module: {
 		rules: [
 			{
-				test: /\.(j|t)sx?$/,
+				test: /\.[jt]sx?$/,
 				loader: 'babel-loader',
 				exclude: moduleHelpers.getBabelExcludeRegex(),
 				options: babelOptions,
@@ -100,8 +100,10 @@ module.exports = {
 						loader: 'css-loader',
 						options: {
 							importLoaders: 1,
-							modules: true,
-							localIdentName: '[contenthash:base64:5]',
+							modules: {
+								exportLocalsConvention: 'camelCase',
+								localIdentName: '[contenthash:base64:5]',
+							},
 							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/helpers/package-config.js

@@ -6,8 +6,8 @@ const fs = require( 'fs' );
 const workingDirectory = fs.realpathSync( process.cwd() );
 
 let packageConfig = require( path.resolve( workingDirectory, 'package.json' ) );
-packageConfig.workingDirectory = workingDirectory;
-packageConfig.theme_path = packageConfig.theme_path || '/';
+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;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "6.6.0",
+  "version": "7.0.0-beta.3",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "engines": {
-    "node": ">=14.15.3"
+    "node": ">=14.17.6"
   },
   "repository": {
     "type": "git",
@@ -40,15 +40,14 @@
     "@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",
-    "classnames": "^2.2.6",
+    "babel-loader": "^8.2.2",
+    "browserslist": "^4.17.0",
     "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",
@@ -73,7 +72,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/lint.js

@@ -1,3 +1,4 @@
 const eslint = require( 'eslint/lib/cli' );
+const packageConfig = require( '../helpers/package-config' );
 
-eslint.execute( [ '', '', 'src', '--fix', '--ext', '.tsx,.ts,.js,.jsx' ] );
+eslint.execute( [ '', '', packageConfig.workingDirectory + '/src', '--fix', '--ext', '.tsx,.ts,.js,.jsx' ] );