@lipemat/js-boilerplate 10.7.1 → 10.8.0-beta.3

package/bin/build.ts

@@ -0,0 +1,33 @@
+import {execSync} from 'node:child_process';
+import {ESLint} from 'eslint';
+import chalk from 'chalk';
+
+const FILES = [
+	'config/babel.config',
+	'config/jest.config',
+	'helpers/config',
+	'helpers/package-config',
+];
+
+console.log( chalk.blue( '[TS] ' ) + ' Compiling the files from the src directory.' );
+execSync( 'tsc -p src', {stdio: 'inherit'} );
+
+FILES.forEach( async file => {
+	const destination = `${file}`;
+	console.log( chalk.blueBright( '[ESLint] ' ) + `Reformatting ${destination}.js.` );
+
+	// 1. Create an instance with the `fix` and `cache` options.
+	const eslint = new ESLint( {
+		fix: true,
+		cache: true,
+		cacheStrategy: 'content',
+	} );
+
+	// 2. Lint files. This doesn't modify target files.
+	const results: ESLint.LintResult[] = await eslint.lintFiles( [
+		file + '*.{js,jsx,ts,tsx}',
+	] );
+
+	// 3. Modify the files with the fixed code.
+	await ESLint.outputFixes( results );
+} );

package/bin/watch.ts

@@ -0,0 +1,21 @@
+import chokidar from 'chokidar';
+import {exec} from 'child_process';
+import {red} from 'chalk';
+
+/**
+ * Watch for changes in the src directory and run the build script when a change is detected.
+ */
+chokidar.watch( 'src', {ignored: /(^|[\/\\])\../} )
+	.on( 'change', path => {
+		console.log( `${path} changed` );
+		exec( 'yarn run build', ( err, stdout ) => {
+			if ( err ) {
+				console.error( red( stdout ) );
+			} else {
+				console.log( stdout );
+			}
+		} );
+	} )
+	.once( 'ready', () => {
+		console.log( 'Watching for changes in the src directory...' );
+	} )

package/config/babel.config.d.ts

@@ -0,0 +1,15 @@
+import type {TransformOptions} from '@babel/core';
+export type BabelConfig = Pick<BabelFull, 'presets' | 'plugins' | 'cacheDirectory'>;
+export type BabelFull = Partial<TransformOptions> & BabelLoader;
+/**
+ * @link https://webpack.js.org/loaders/babel-loader/#options
+ */
+export type BabelLoader = {
+    cacheDirectory?: boolean | string;
+    cacheIdentifier?: string;
+    cacheCompression?: boolean;
+    customize?: string;
+    metadataSubscribers?: string[];
+};
+declare const babelConfig: BabelConfig;
+export default babelConfig;

package/config/babel.config.js

@@ -1,10 +1,6 @@
-const {getBrowsersList} = require( '../helpers/config' );
-
-/**
- * @notice This file must NOT be a TS file because it is used
- *         as part of the JEST configuration.
- */
-
+'use strict';
+Object.defineProperty( exports, '__esModule', {value: true} );
+const config_1 = require( '../helpers/config' );
 /**
  * Use Babel's preset-env to add support for target browsers.
  *
@@ -25,13 +21,11 @@ const presetEnv = {
 	ignoreBrowserslistConfig: true,
 	shippedProposals: false,
 	targets: {
-		browsers: getBrowsersList(),
+		browsers: ( 0, config_1.getBrowsersList )(),
 	},
 	useBuiltIns: 'usage',
 };
-
-
-module.exports = {
+const babelConfig = {
 	cacheDirectory: true,
 	presets: [
 		[ '@babel/preset-env', presetEnv ],
@@ -45,3 +39,5 @@ module.exports = {
 		'@babel/plugin-syntax-dynamic-import',
 	],
 };
+exports.default = babelConfig;
+module.exports = babelConfig;

package/config/jest.config.d.ts

@@ -0,0 +1,4 @@
+import type {Config} from 'jest';
+export type JestConfig = Pick<Config, 'globals' | 'moduleNameMapper' | 'roots' | 'testEnvironment' | 'testEnvironmentOptions' | 'transform' | 'transformIgnorePatterns' | 'setupFilesAfterEnv'>;
+declare const jestConfig: Config;
+export default jestConfig;

package/config/jest.config.js

@@ -1,16 +1,13 @@
-const path = require( 'path' );
-const packageConfig = require( '../helpers/package-config' );
-const fs = require( 'fs' );
-
-const babelConfig = require( '../helpers/config' ).getConfig( 'babel.config' );
+'use strict';
+Object.defineProperty( exports, '__esModule', {value: true} );
+const path_1 = require( 'path' );
+const fs_1 = require( 'fs' );
+const package_config_1 = require( '../helpers/package-config' );
+const config_1 = require( '../helpers/config' );
+const {workingDirectory, url} = ( 0, package_config_1.getPackageConfig )();
+const babelConfig = ( 0, config_1.getConfig )( 'babel.config' );
 delete babelConfig.cacheDirectory;
-
-/**
- * @todo Rename this file to `jest.config.ts` in version 11.
- *
- */
-
-let jestConfig = {
+const jestConfig = {
 	globals: {
 		__TEST__: true,
 	},
@@ -24,32 +21,21 @@ let jestConfig = {
 	],
 	testEnvironment: 'jsdom',
 	testEnvironmentOptions: {
-		url: packageConfig.url,
+		url,
 	},
 	transform: {
 		'^.+\\.[tj]sx?$': [ 'babel-jest', babelConfig ],
 	},
+	transformIgnorePatterns: [
+		'node_modules/(?!@lipemat)',
+	],
 	setupFilesAfterEnv: [
 		// @todo Remove old "tests" directory in version 11.
-		path.resolve( packageConfig.workingDirectory, 'tests/setup.js' ),
-		path.resolve( packageConfig.workingDirectory, 'tests/setup.ts' ),
-
+		( 0, path_1.resolve )( workingDirectory, 'tests/setup.js' ),
+		( 0, path_1.resolve )( workingDirectory, 'tests/setup.ts' ),
 		// New location.
-		path.resolve( packageConfig.workingDirectory, 'jest/setup.ts' ),
-	].filter( fs.existsSync ),
+		( 0, path_1.resolve )( workingDirectory, 'jest/setup.ts' ),
+	].filter( fs_1.existsSync ),
 };
-
-/**
- * Allows overriding configurations in the project `/config/jest.config.js` file.
- * We don't actually need to do this because `jest.config.js` in the project root
- * is already an override of this file, but we support it anyway to keep things consistent.
- *
- * @todo Remove in version 11.
- */
-try {
-	const localConfig = require( path.resolve( packageConfig.workingDirectory + '/config', 'jest.config.js' ) );
-	jestConfig = {...jestConfig, ...localConfig};
-} catch ( e ) {
-}
-
+exports.default = jestConfig;
 module.exports = jestConfig;

package/helpers/config.d.ts

@@ -1,7 +1,100 @@
+import type {BabelConfig} from '../config/babel.config';
+import type {JestConfig} from '../config/jest.config';
+type Configs = {
+    'babel.config': BabelConfig;
+    'jest.config': JestConfig;
+};
 /**
- * @todo convert the source to TS.
+ * Check to see if a local config file exists.
+ *
+ * @param {string}  fileName
+ * @param {boolean} inWorkingDirectory - Look in working directory instead of their /config directory
+ *
+ * @return {boolean}
  */
-
-export function getBrowsersList(): readonly string[];
-
-export function getConfig<T extends object>( fileName: string ): T;
+export declare function hasLocalOverride( fileName: string, inWorkingDirectory?: boolean ): boolean;
+/**
+ * Get a config from our /config directory merged with any
+ * matching configuration from the project directory.
+ *
+ * For instance if we have a file named config/babel.config.js in our project
+ * 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}
+ */
+export declare function getConfig<T extends keyof Configs>( fileName: T ): Configs[T];
+/**
+ * Get a config from any existing extension's /config directories
+ * merged into one.
+ *
+ * @param {string} fileName
+ * @param {Object} defaultConfig - Default config from this package.
+ *                               Used for passing to an extension callback.
+ *
+ * @see getConfig
+ *
+ * @return {Object}
+ */
+export declare function getExtensionsConfig<T extends object>( fileName: string, defaultConfig: T ): T;
+/**
+ * Get the path to the "tsconfig.json" file if it exists.
+ *
+ * 1. The working directory.
+ * 2. The package directory.
+ *
+ * The package directory takes priority over the working directory.
+ *
+ *
+ * @return {string}
+ */
+export declare function getTsConfigFile(): string;
+/**
+ * Get the browserslist from the current project.
+ *
+ * - If specified using standard browserslist config, we will use that.
+ *
+ *  @link https://github.com/browserslist/browserslist#config-file
+ */
+export declare function getBrowsersList(): readonly string[];
+/**
+ * If browserslist is not specified, we fall back to WordPress defaults.
+ *
+ * - Return the default browserslist if the current project does not specify one.
+ * - Return false if a browserslist is specified.
+ *
+ * Used in cases where we can fall back to standard browserslist config if the project
+ * has not specified one.
+ *
+ * @deprecated Use getBrowsersList instead.
+ *
+ * @link https://github.com/browserslist/browserslist#config-file
+ *
+ * @return {boolean | string[]}
+ */
+export declare const getDefaultBrowsersList: () => false | string[];
+/**
+ * Adjust the browserslist to include our defaults.
+ *
+ * @todo Remove `not op_mini all` after 3/8/2024 if it does not creep back in to the defaults.
+ */
+export declare function adjustBrowserslist( browserRules: string[] ): string[];
+export {};

package/helpers/config.js

@@ -1,14 +1,15 @@
-const packageConfig = require( './package-config' );
-const path = require( 'path' );
+'use strict';
+Object.defineProperty( exports, '__esModule', {value: true} );
+exports.adjustBrowserslist = exports.getDefaultBrowsersList = exports.getBrowsersList = exports.getTsConfigFile = exports.getExtensionsConfig = exports.getConfig = exports.hasLocalOverride = void 0;
+const fs_1 = require( 'fs' );
+const path_1 = require( 'path' );
 const browserslist = require( 'browserslist' );
-const fs = require( 'fs' );
-const config = require( './package-config' );
-
+const package_config_1 = require( './package-config' );
+const {dependencies, devDependencies, workingDirectory, packageDirectory} = ( 0, package_config_1.getPackageConfig )();
 const extensions = [
-	...Object.keys( packageConfig.dependencies ?? {} ).filter( name => name.includes( 'js-boilerplate-' ) ),
-	...Object.keys( packageConfig.devDependencies ?? {} ).filter( name => name.includes( 'js-boilerplate-' ) ),
+	...Object.keys( dependencies ?? {} ).filter( name => name.includes( 'js-boilerplate-' ) ),
+	...Object.keys( devDependencies ?? {} ).filter( name => name.includes( 'js-boilerplate-' ) ),
 ];
-
 /**
  * Check to see if a local config file exists.
  *
@@ -17,22 +18,21 @@ const extensions = [
  *
  * @return {boolean}
  */
-function hasLocalOverride( fileName, inWorkingDirectory = false, ) {
+function hasLocalOverride( fileName, inWorkingDirectory = false ) {
 	let hasLocal = false;
 	try {
 		if ( inWorkingDirectory ) {
-			require( path.resolve( packageConfig.workingDirectory, fileName ) );
+			require( ( 0, path_1.resolve )( workingDirectory, fileName ) );
 			hasLocal = true;
 		} else {
-			require( path.resolve( packageConfig.packageDirectory + '/config', fileName ) );
+			require( ( 0, path_1.resolve )( packageDirectory + '/config', fileName ) );
 			hasLocal = true;
 		}
 	} catch ( e ) {
 	}
-
 	return hasLocal;
 }
-
+exports.hasLocalOverride = hasLocalOverride;
 /**
  * Get a config from our /config directory merged with any
  * matching configuration from the project directory.
@@ -65,7 +65,7 @@ function getConfig( fileName ) {
 	let mergedConfig = require( '../config/' + fileName );
 	mergedConfig = {...mergedConfig, ...getExtensionsConfig( fileName, mergedConfig )};
 	try {
-		const localConfig = require( path.resolve( packageConfig.packageDirectory + '/config', fileName ) );
+		const localConfig = require( ( 0, path_1.resolve )( packageDirectory + '/config', fileName ) );
 		if ( 'function' === typeof localConfig ) {
 			mergedConfig = {...mergedConfig, ...localConfig( mergedConfig )};
 		} else {
@@ -75,7 +75,7 @@ function getConfig( fileName ) {
 	}
 	return mergedConfig;
 }
-
+exports.getConfig = getConfig;
 /**
  * Get a config from any existing extension's /config directories
  * merged into one.
@@ -101,10 +101,9 @@ function getExtensionsConfig( fileName, defaultConfig ) {
 		} catch ( e ) {
 		}
 	} );
-
 	return mergedConfig;
 }
-
+exports.getExtensionsConfig = getExtensionsConfig;
 /**
  * Get the path to the "tsconfig.json" file if it exists.
  *
@@ -119,18 +118,16 @@ function getExtensionsConfig( fileName, defaultConfig ) {
 function getTsConfigFile() {
 	const possibles = [
 		// Backward compatible for before @lipemat/eslint-config version 3.
-		path.resolve( config.workingDirectory + '/tsconfig.json' ),
-		path.resolve( config.packageDirectory + '/tsconfig.json' ),
-	];
+		( 0, path_1.resolve )( workingDirectory + '/tsconfig.json' ),
+		( 0, path_1.resolve )( packageDirectory + '/tsconfig.json' ),
+	].filter( fs_1.existsSync );
 	let tsConfig = '';
 	possibles.forEach( filePath => {
-		if ( fs.existsSync( filePath ) ) {
-			tsConfig = filePath;
-		}
+		tsConfig = filePath;
 	} );
 	return tsConfig;
 }
-
+exports.getTsConfigFile = getTsConfigFile;
 /**
  * Get the browserslist from the current project.
  *
@@ -146,7 +143,7 @@ function getBrowsersList() {
 	}
 	return projectBrowsersList;
 }
-
+exports.getBrowsersList = getBrowsersList;
 /**
  * If browserslist is not specified, we fall back to WordPress defaults.
  *
@@ -157,6 +154,7 @@ function getBrowsersList() {
  * has not specified one.
  *
  * @deprecated Use getBrowsersList instead.
+ *
  * @link https://github.com/browserslist/browserslist#config-file
  *
  * @return {boolean | string[]}
@@ -168,7 +166,7 @@ const getDefaultBrowsersList = () => {
 	}
 	return false;
 };
-
+exports.getDefaultBrowsersList = getDefaultBrowsersList;
 /**
  * Adjust the browserslist to include our defaults.
  *
@@ -178,14 +176,4 @@ function adjustBrowserslist( browserRules ) {
 	browserRules.push( 'not op_mini all' );
 	return browserRules;
 }
-
-
-module.exports = {
-	adjustBrowserslist,
-	getBrowsersList,
-	getConfig,
-	getDefaultBrowsersList,
-	getExtensionsConfig,
-	getTsConfigFile,
-	hasLocalOverride,
-};
+exports.adjustBrowserslist = adjustBrowserslist;

package/helpers/package-config.d.ts

@@ -1,46 +1,49 @@
 export interface PackageConfig {
-	author?: string;
-	brotliFiles: boolean;
-	certificates?: Certificates;
-	combinedJson: boolean;
-	css_folder: string;
-	cssTsFiles: boolean;
-	dependencies: Dependencies;
-	description?: string;
-	devDependencies: Dependencies;
-	es6Modules?: string[];
-	jsPath: string;
-	license?: string;
-	name?: string;
-	packageDirectory: string;
-	packageManager?: string;
-	resolutions?: Dependencies;
-	scripts: Partial<Scripts>;
-	shortCssClasses: boolean;
-	url: string;
-	version?: string;
-	workingDirectory: string;
+    author?: string;
+    brotliFiles: boolean;
+    certificates?: Certificates;
+    combinedJson: boolean;
+    cssTsFiles: boolean;
+    css_folder: string;
+    default: PackageConfig;
+    dependencies: Dependencies;
+    description?: string;
+    devDependencies: Dependencies;
+    es6Modules?: string[];
+    getPackageConfig: () => PackageConfig;
+    jsPath: string;
+    license?: string;
+    name?: string;
+    packageDirectory: string;
+    packageManager?: string;
+    resolutions?: Dependencies;
+    scripts: Partial<Scripts>;
+    shortCssClasses: boolean;
+    url: string;
+    version?: string;
+    workingDirectory: string;
 }
-
 export interface Dependencies {
-	[ name: string ]: string;
+    [name: string]: string;
 }
-
 export interface Certificates {
-	cert: string;
-	key: string;
+    cert: string;
+    key: string;
 }
-
 export interface Scripts {
-	browserslist: string;
-	dist: string;
-	lint: string;
-	postinstall: string;
-	start: string;
-	test: string;
+    browserslist: string;
+    dist: string;
+    lint: string;
+    postinstall: string;
+    start: string;
+    test: string;
 }
-
-declare const packageConfig: PackageConfig & {
-	getPackageConfig: () => PackageConfig;
-};
-export default packageConfig;
+/**
+ * Helper function to get the results of `packageConfig`.
+ *
+ * - Allows mocking the results of `packageConfig` for testing.
+ * - Allows getting the config through a callback instead of an import.
+ *
+ * @since 10.3.0
+ */
+export declare function getPackageConfig(): PackageConfig;

package/helpers/package-config.js

@@ -1,25 +1,26 @@
-const path = require( 'path' );
-const fs = require( 'fs' );
-
-const workingDirectory = fs.realpathSync( process.cwd() );
-let packageConfig = require( path.resolve( workingDirectory, 'package.json' ) );
-packageConfig.brotliFiles ||= false;
-packageConfig.es6Modules ||= [];
-packageConfig.jsPath ||= '';
-// Path of the package.json file (root).
-packageConfig.packageDirectory = workingDirectory;
-packageConfig.url ||= 'http://localhost';
-// Path of JS application files.
-packageConfig.workingDirectory = packageConfig.jsPath !== '' ? path.resolve( packageConfig.jsPath ) : workingDirectory;
-packageConfig.shortCssClasses ||= false;
-packageConfig.tsCssModules ||= false;
-
+'use strict';
+Object.defineProperty( exports, '__esModule', {value: true} );
+exports.getPackageConfig = void 0;
+const path_1 = require( 'path' );
+const node_fs_1 = require( 'node:fs' );
+const workingDirectory = ( 0, node_fs_1.realpathSync )( process.cwd() );
+const defaults = {
+	brotliFiles: false,
+	es6Modules: [],
+	jsPath: '',
+	packageDirectory: workingDirectory,
+	url: 'http://localhost',
+	shortCssClasses: false,
+	cssTsFiles: false,
+};
+let packageConfig = require( ( 0, path_1.resolve )( workingDirectory, 'package.json' ) );
+packageConfig = {...defaults, ...packageConfig};
+packageConfig.workingDirectory = packageConfig.jsPath !== '' ? ( 0, path_1.resolve )( packageConfig.jsPath ) : workingDirectory;
 try {
-	const localConfig = require( path.resolve( workingDirectory, './local-config.json' ) );
+	const localConfig = require( ( 0, path_1.resolve )( workingDirectory, './local-config.json' ) );
 	packageConfig = {...packageConfig, ...localConfig};
 } catch ( e ) {
 }
-
 /**
  * Helper function to get the results of `packageConfig`.
  *
@@ -31,6 +32,7 @@ try {
 function getPackageConfig() {
 	return packageConfig;
 }
+exports.getPackageConfig = getPackageConfig;
 packageConfig.getPackageConfig = getPackageConfig;
-
+packageConfig.default = packageConfig;
 module.exports = packageConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.7.1",
+  "version": "10.8.0-beta.3",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -23,7 +23,6 @@
     "no-config"
   ],
   "files": [
-    "tsconfig.json",
     "bin/",
     "config/",
     "helpers/",
@@ -35,7 +34,10 @@
   },
   "scripts": {
     "browserslist": "lipemat-js-boilerplate browserslist",
-    "test": "lipemat-js-boilerplate test"
+    "build": "ts-node ./bin/build.ts",
+    "prepublishOnly": "yarn run build",
+    "test": "lipemat-js-boilerplate test",
+    "watch": "ts-node ./bin/watch.ts"
   },
   "dependencies": {
     "@babel/core": "^7.4.3",
@@ -97,10 +99,11 @@
   "devDependencies": {
     "@types/jest": "^29.5.3",
     "@types/minimist": "^1",
+    "chokidar": "^3.5.3",
     "eslint": "^8",
     "glob": "^10.3.3",
     "memfs": "^3.5.3",
     "setimmediate": "^1.0.5"
   },
-  "packageManager": "yarn@4.0.2"
+  "packageManager": "yarn@4.1.0"
 }

package/scripts/lint.ts

@@ -2,7 +2,7 @@ import {ESLint} from 'eslint';
 import minimist from 'minimist';
 import chalk from 'chalk';
 
-import packageConfig from '../helpers/package-config';
+import {getPackageConfig} from '../helpers/package-config';
 
 // Command line arguments.
 const flags = minimist( process.argv.slice( 2 ) );
@@ -35,7 +35,7 @@ function errorOccurred( results: ESLint.LintResult[] ): boolean {
 
 	// 2. Lint files. This doesn't modify target files.
 	const results: ESLint.LintResult[] = await eslint.lintFiles( [
-		packageConfig.workingDirectory + '/src/**/*.{js,jsx,ts,tsx}',
+		getPackageConfig().workingDirectory + '/src/**/*.{js,jsx,ts,tsx}',
 	] );
 
 	// 3. Modify the files with the fixed code.

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "extends": "./config/tsconfig.json",
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "display": "JS Boilerplate",
-  "include": [
-    "bin/**/*",
-    "config/**/*",
-    "helpers/**/*",
-    "lib/**/*",
-    "jest/**/*",
-    "scripts/**/*"
-  ],
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "module": "CommonJS"
-  }
-}