@enact/cli 7.0.0 → 7.2.0

package/commands/template.js

@@ -1,4 +1,5 @@
 // @remove-file-on-eject
+/* eslint no-console: off, no-undef: off */
 const os = require('os');
 const path = require('path');
 const url = require('url');
@@ -14,7 +15,7 @@ const TEMPLATE_DIR = path.join(process.env.APPDATA || os.homedir(), '.enact');
 const INCLUDED = path.dirname(require.resolve('@enact/template-sandstone'));
 const DEFAULT_LINK = path.join(TEMPLATE_DIR, 'default');
 
-function displayHelp() {
+function displayHelp () {
 	let e = 'node ' + path.relative(process.cwd(), __filename);
 	if (require.main !== module) e = 'enact template';
 
@@ -56,7 +57,7 @@ function displayHelp() {
 	process.exit(0);
 }
 
-function initTemplateArea() {
+function initTemplateArea () {
 	if (!fs.existsSync(TEMPLATE_DIR)) {
 		fs.mkdirSync(TEMPLATE_DIR);
 	} else {
@@ -76,7 +77,7 @@ function initTemplateArea() {
 	return init.then(() => !fs.existsSync(DEFAULT_LINK) && doLink(sandstoneLink, 'default'));
 }
 
-function doInstall(target, name) {
+function doInstall (target, name) {
 	const github = target.match(/^([a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38})\/([-_.\w]+)((?:#|@)?[-_.\w]+)?$/);
 	if (github) {
 		// If target is GitHub shorthand, resolve to full HTTPS URI
@@ -114,12 +115,12 @@ function doInstall(target, name) {
 	});
 }
 
-function normalizeName(name) {
+function normalizeName (name) {
 	return name.replace(/(?:^enact-template-|^template-)/g, '');
 }
 
 // Clone Git repository using specific branch if desired
-function installFromGit(target, name = normalizeName(path.basename(url.parse(target).pathname, '.git'))) {
+function installFromGit (target, name = normalizeName(path.basename(url.parse(target).pathname, '.git'))) {
 	const git = target.match(/^(?:(^.*)#([\w\d-_.]+)?|(^.*))$/);
 	const args = ['clone', git[1] || git[3], name, '-c', 'advice.detachedHead=false'];
 	if (git[2]) args.splice(2, 0, '-b', git[2]);
@@ -137,7 +138,7 @@ function installFromGit(target, name = normalizeName(path.basename(url.parse(tar
 }
 
 // Copy directory files
-function installFromLocal(target, name = normalizeName(path.basename(target))) {
+function installFromLocal (target, name = normalizeName(path.basename(target))) {
 	const output = path.join(TEMPLATE_DIR, name);
 	fs.removeSync(output);
 	fs.ensureDirSync(output);
@@ -150,7 +151,7 @@ function installFromLocal(target, name = normalizeName(path.basename(target))) {
 }
 
 // Download and extract NPM package
-function installFromNPM(target, name = normalizeName(path.basename(target).replace(/@.*$/g, ''))) {
+function installFromNPM (target, name = normalizeName(path.basename(target).replace(/@.*$/g, ''))) {
 	const tempDir = path.join(os.tmpdir(), 'enact');
 	fs.removeSync(tempDir);
 	fs.ensureDirSync(tempDir);
@@ -182,7 +183,7 @@ function installFromNPM(target, name = normalizeName(path.basename(target).repla
 		});
 }
 
-function doLink(target, name = normalizeName(path.basename(path.resolve(target)))) {
+function doLink (target, name = normalizeName(path.basename(path.resolve(target)))) {
 	const directory = path.resolve(target);
 	const prevCWD = process.cwd();
 	process.chdir(TEMPLATE_DIR);
@@ -199,7 +200,7 @@ function doLink(target, name = normalizeName(path.basename(path.resolve(target))
 		});
 }
 
-function doRemove(name) {
+function doRemove (name) {
 	const output = path.join(TEMPLATE_DIR, name);
 	const isDefault = fs.existsSync(DEFAULT_LINK) && fs.realpathSync(output) === fs.realpathSync(DEFAULT_LINK);
 	if (!fs.existsSync(output)) return Promise.reject(new Error(`Unable to remove. Template "${name}" not found.`));
@@ -212,7 +213,7 @@ function doRemove(name) {
 		});
 }
 
-function doDefault(name) {
+function doDefault (name) {
 	const all = fs.readdirSync(TEMPLATE_DIR).filter(t => t !== 'default');
 	let choice;
 	if (name && all.includes(name)) {
@@ -232,7 +233,7 @@ function doDefault(name) {
 	return choice.then(response => doLink(path.join(TEMPLATE_DIR, response.template), 'default'));
 }
 
-function doList() {
+function doList () {
 	const realDefault = fs.realpathSync(DEFAULT_LINK);
 	const all = fs.readdirSync(TEMPLATE_DIR).filter(t => t !== 'default');
 	console.log(chalk.bold('Available Templates'));
@@ -250,12 +251,13 @@ function doList() {
 	});
 }
 
-function api({action, target, name} = {}) {
+function api ({action, target, name} = {}) {
 	return initTemplateArea().then(() => {
 		let actionPromise;
 
-		if (['install', 'link', 'remove'].includes(action) && name === 'default')
+		if (['install', 'link', 'remove'].includes(action) && name === 'default') {
 			throw new Error('Template "default" name is reserved. ' + 'Use "enact template default" to modify it.');
+		}
 
 		switch (action) {
 			case 'install':
@@ -289,7 +291,7 @@ function api({action, target, name} = {}) {
 	});
 }
 
-function cli(args) {
+function cli (args) {
 	import('chalk').then(({default: _chalk}) => {
 		chalk = _chalk;
 		const opts = minimist(args, {

package/commands/test.js

@@ -1,3 +1,4 @@
+/* eslint no-console: off, no-undef: off */
 /* eslint-env node, es6 */
 // @remove-on-eject-begin
 /**
@@ -26,7 +27,7 @@ process.on('unhandledRejection', err => {
 	throw err;
 });
 
-function isInGitRepository() {
+function isInGitRepository () {
 	try {
 		execSync('git rev-parse --is-inside-work-tree', {stdio: 'ignore'});
 		return true;
@@ -35,7 +36,7 @@ function isInGitRepository() {
 	}
 }
 
-function isInMercurialRepository() {
+function isInMercurialRepository () {
 	try {
 		execSync('hg --cwd . root', {stdio: 'ignore'});
 		return true;
@@ -46,14 +47,14 @@ function isInMercurialRepository() {
 
 // This is a very dirty workaround for https://github.com/facebook/jest/issues/5913.
 // We're trying to resolve the environment ourselves because Jest does it incorrectly.
-function resolveJestDefaultEnvironment(name) {
+function resolveJestDefaultEnvironment (name) {
 	const jestDir = path.dirname(resolve.sync('jest', {basedir: __dirname}));
 	const jestCLIDir = path.dirname(resolve.sync('jest-cli', {basedir: jestDir}));
 	const jestConfigDir = path.dirname(resolve.sync('jest-config', {basedir: jestCLIDir}));
 	return resolve.sync(name, {basedir: jestConfigDir});
 }
 
-function testEnvironment(args) {
+function testEnvironment (args) {
 	const env = (
 		args.reverse().find((curr, i, a) => curr.startsWith('--env=') || a[i + 1] === '--env') || 'jsdom'
 	).replace(/^--env=/, '');
@@ -74,7 +75,7 @@ function testEnvironment(args) {
 	return resolvedEnv || env;
 }
 
-function assignOverrides(config) {
+function assignOverrides (config) {
 	const {meta} = packageRoot();
 	const overrides = Object.assign({}, meta.jest);
 	const supportedKeys = [
@@ -149,7 +150,7 @@ function assignOverrides(config) {
 	}
 }
 
-function api(args = []) {
+function api (args = []) {
 	const config = require('../config/jest/jest.config');
 
 	// @TODO: readd dotenv parse support
@@ -171,7 +172,7 @@ function api(args = []) {
 	return jest.run(args);
 }
 
-function cli(args) {
+function cli (args) {
 	import('chalk').then(({default: _chalk}) => {
 		chalk = _chalk;
 		api(args).catch(() => {

package/commands/transpile.js

@@ -1,4 +1,5 @@
 // @remove-file-on-eject
+/* eslint no-console: off, no-undef: off */
 const path = require('path');
 const babel = require('@babel/core');
 const fs = require('fs-extra');
@@ -15,7 +16,7 @@ const babelConfig = path.join(__dirname, '..', 'config', 'babel.config.js');
 const babelRename = {original: '^(\\.(?!.*\\bstyles\\b.*).*)\\.less$', replacement: '$1.css'};
 const lessPlugins = [new LessPluginResolve({prefix: '~'}), new LessPluginRi(app.ri)];
 
-function displayHelp() {
+function displayHelp () {
 	let e = 'node ' + path.relative(process.cwd(), __filename);
 	if (require.main !== module) e = 'enact transpile';
 
@@ -33,7 +34,7 @@ function displayHelp() {
 	process.exit(0);
 }
 
-function transpile(src, dest, plugins) {
+function transpile (src, dest, plugins) {
 	return new Promise((resolve, reject) => {
 		babel.transformFile(src, {extends: babelConfig, plugins}, (err, result) => {
 			if (err) {
@@ -45,7 +46,7 @@ function transpile(src, dest, plugins) {
 	}).then(result => fs.writeFile(dest, result.code, {encoding: 'utf8'}));
 }
 
-function lessc(src, dest) {
+function lessc (src, dest) {
 	return less
 		.render(fs.readFileSync(src, {encoding: 'utf8'}), {
 			rewriteUrls: 'local',
@@ -56,7 +57,7 @@ function lessc(src, dest) {
 		.then(result => fs.writeFileSync(dest.replace(/\.less$/, '.css'), result.css, {encoding: 'utf8'}));
 }
 
-function api({source = '.', output = './build', commonjs = true, ignore} = {}) {
+function api ({source = '.', output = './build', commonjs = true, ignore} = {}) {
 	process.env.ES5 = 'true';
 	const babelPlugins = [
 		commonjs && require.resolve('@babel/plugin-transform-modules-commonjs'),
@@ -91,7 +92,7 @@ function api({source = '.', output = './build', commonjs = true, ignore} = {}) {
 	});
 }
 
-function cli(args) {
+function cli (args) {
 	const opts = minimist(args, {
 		string: ['output', 'ignore'],
 		boolean: ['commonjs', 'help'],

package/config/eslintWebpackPluginConfig.js

@@ -15,7 +15,7 @@ const hasJsxRuntime = (() => {
 	}
 })();
 
-const loadedEnactConfig = process.env.FRAMEWORK ? eslintConfigEnactStrict : eslintConfigEnact;
+const loadedEnactConfig = process.env.FRAMEWORK === true ? eslintConfigEnactStrict : eslintConfigEnact;
 
 module.exports = [
 	...loadedEnactConfig,

package/config/jest/babelTransform.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 /**
  * Portions of this source code file are from create-react-app, used under the
  * following MIT license:

package/config/jest/cssTransform.js

@@ -16,12 +16,12 @@
 // http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
-	process() {
+	process () {
 		return {
 			code: 'module.exports = {};'
 		};
 	},
-	getCacheKey() {
+	getCacheKey () {
 		// The output is always the same.
 		return 'cssTransform';
 	}

package/config/jest/fileTransform.js

@@ -18,7 +18,7 @@ const path = require('path');
 // http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
-	process(src, filename) {
+	process (src, filename) {
 		const assetFilename = JSON.stringify(path.basename(filename));
 		return {
 			code: `module.exports = ${assetFilename};`

package/config/jest/setupTests.js

@@ -1,3 +1,4 @@
+/* eslint no-console: off, no-undef: off */
 /* eslint-env jest */
 const fs = require('fs');
 const path = require('path');
@@ -56,7 +57,7 @@ const ilibPaths = Object.keys(global).filter(k => /ILIB_[^_]+_PATH/.test(k));
 const pkg = packageRoot();
 const XHR = global.XMLHttpRequest;
 class ILibXHR extends XHR {
-	open(method, url) {
+	open (method, url) {
 		if (ilibPaths.some(p => url.startsWith(global[p]))) {
 			this.send = () => {
 				try {
@@ -75,13 +76,13 @@ class ILibXHR extends XHR {
 			return super.open(...arguments);
 		}
 	}
-	get readyState() {
+	get readyState () {
 		return typeof this.fileStatus !== 'undefined' ? XHR.DONE : super.readyState;
 	}
-	get status() {
+	get status () {
 		return typeof this.fileStatus !== 'undefined' ? this.fileStatus : super.status;
 	}
-	get responseText() {
+	get responseText () {
 		return typeof this.fileText !== 'undefined' ? this.fileText : super.responseText;
 	}
 }

package/config/polyfills.js

@@ -1,4 +1,4 @@
-/* eslint no-var: off, no-extend-native: off */
+/* eslint no-var: off, no-extend-native: off, vars-on-top: off */
 /*
  *  polyfills.js
  *

package/config/webpack.config.js

@@ -1,3 +1,4 @@
+/* eslint no-console: off, no-undef: off */
 /* eslint-env node, es6 */
 // @remove-on-eject-begin
 /**
@@ -17,9 +18,9 @@ const path = require('path');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const ForkTsCheckerWebpackPlugin =
-	process.env.TSC_COMPILE_ON_ERROR === 'true'
-		? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
-		: require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+	process.env.TSC_COMPILE_ON_ERROR === 'true' ?
+		require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin') :
+		require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
@@ -41,12 +42,13 @@ const createEnvironmentHash = require('./createEnvironmentHash');
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 module.exports = function (
-	env,
-	contentHash = false,
-	isomorphic = false,
-	noAnimation = false,
-	noSplitCSS = false,
-	ilibAdditionalResourcesPath
+		env,
+		noLinting = false,
+		contentHash = false,
+		isomorphic = false,
+		noAnimation = false,
+		noSplitCSS = false,
+		ilibAdditionalResourcesPath
 ) {
 	process.chdir(app.context);
 
@@ -146,7 +148,98 @@ module.exports = function (
 							// the browserslist targets.
 							!useTailwind && require('postcss-normalize'),
 							// Resolution indepedence support
-							app.ri !== false && require('postcss-resolution-independence')(app.ri)
+							app.ri !== false && require('postcss-resolution-independence')(app.ri),
+							// Support importing JSON files with ~ alias - custom plugin (must run first)
+							{
+								postcssPlugin: 'postcss-import-json-tilde',
+								Once (root) {
+									// Process all @import-json rules with ~ prefix first, before other plugins
+									root.walkAtRules('import-json', atRule => {
+										let src = atRule.params.slice(1, -1); // Remove quotes
+
+										// Only handle ~ alias paths
+										if (src.startsWith('~')) {
+											const packagePath = src.substring(1); // Remove ~
+
+											try {
+												// Use Node.js standard module resolution
+												// This mimics webpack's ~ alias behavior
+												const currentFileDir = path.dirname(atRule.source.input.file || '');
+
+												// Try to resolve the module using require.resolve
+												// This follows standard Node.js module resolution algorithm
+												let resolvedPath;
+												try {
+													// First try from current file's directory
+													resolvedPath = require.resolve(packagePath, {
+														paths: [currentFileDir]
+													});
+												} catch (e) {
+													// Fallback to current working directory
+													resolvedPath = require.resolve(packagePath, {
+														paths: [process.cwd()]
+													});
+												}
+
+												// Convert to relative path for the original plugin
+												const relativePath = path.relative(currentFileDir, resolvedPath);
+												atRule.params = `"${relativePath}"`;
+											} catch (error) {
+												// If resolution fails, try manual node_modules lookup
+												try {
+													let currentDir = path.dirname(
+														atRule.source.input.file || process.cwd()
+													);
+													let found = false;
+
+													// Walk up directories to find node_modules
+													while (currentDir !== path.parse(currentDir).root && !found) {
+														const moduleDir = path.join(
+															currentDir,
+															'node_modules',
+															packagePath
+														);
+														if (fs.existsSync(moduleDir)) {
+															const relativePath = path.relative(
+																path.dirname(atRule.source.input.file || ''),
+																moduleDir
+															);
+															atRule.params = `"${relativePath}"`;
+															found = true;
+															break;
+														}
+														currentDir = path.dirname(currentDir);
+													}
+
+													if (!found) {
+														console.warn(`Could not resolve module path: ${packagePath}`);
+													}
+												} catch (fallbackError) {
+													console.warn(
+														`Failed to resolve ${packagePath}:`,
+														fallbackError.message
+													);
+												}
+											}
+										}
+									});
+								}
+							},
+							// Support importing JSON files in CSS - original plugin (for non-~ paths)
+							[
+								'@daltontan/postcss-import-json',
+								{
+									map: (selector, value) => {
+										if (typeof value === 'object' && value !== null && value.$ref) {
+											const tokenPath = value.$ref.split('#/')[1];
+											const cssVariableName = '--' + tokenPath.replace(/\//g, '-');
+
+											return `var(${cssVariableName})`;
+										}
+										return value;
+									}
+								}
+							]
 						].filter(Boolean)
 					},
 					sourceMap: shouldUseSourceMap
@@ -187,8 +280,8 @@ module.exports = function (
 		mode: isEnvProduction ? 'production' : 'development',
 		// Don't attempt to continue if there are any errors.
 		bail: true,
-		// Webpack noise constrained to errors and warnings
-		stats: 'errors-warnings',
+		// Webpack noise constrained to errors only
+		stats: 'errors-only',
 		// Use source maps during development builds or when specified by GENERATE_SOURCEMAP
 		devtool: shouldUseSourceMap && (isEnvProduction ? 'source-map' : 'cheap-module-source-map'),
 		// These are the "entry points" to our application.
@@ -215,9 +308,9 @@ module.exports = function (
 			publicPath,
 			// Improved sourcemap path name mapping for system filepaths
 			devtoolModuleFilenameTemplate: info => {
-				let file = isEnvProduction
-					? path.relative(app.context, info.absoluteResourcePath)
-					: path.resolve(info.absoluteResourcePath);
+				let file = isEnvProduction ?
+					path.relative(app.context, info.absoluteResourcePath) :
+					path.resolve(info.absoluteResourcePath);
 				file = file.replace(/\\/g, '/').replace(/\.\./g, '_');
 				const loader = info.allLoaders.match(/[^\\/]+-loader/);
 				if (info.resource.includes('.less') && loader) {
@@ -238,6 +331,7 @@ module.exports = function (
 			store: 'pack',
 			buildDependencies: {
 				defaultWebpack: ['webpack/lib/'],
+				// eslint-disable-next-line no-undef
 				config: [__filename],
 				tsconfig: useTypeScript ? ['tsconfig.json'] : []
 			}
@@ -267,9 +361,9 @@ module.exports = function (
 			symlinks: false,
 			// Backward compatibility for apps using new ilib references with old Enact
 			// and old apps referencing old iLib location with new Enact
-			alias: fs.existsSync(path.join(app.context, 'node_modules', '@enact', 'i18n', 'ilib'))
-				? Object.assign({ilib: '@enact/i18n/ilib'}, app.alias)
-				: Object.assign({'@enact/i18n/ilib': 'ilib'}, app.alias),
+			alias: fs.existsSync(path.join(app.context, 'node_modules', '@enact', 'i18n', 'ilib')) ?
+				Object.assign({ilib: '@enact/i18n/ilib'}, app.alias) :
+				Object.assign({'@enact/i18n/ilib': 'ilib'}, app.alias),
 			// Optional configuration for redirecting module requests.
 			fallback: app.resolveFallback
 		},
@@ -441,6 +535,7 @@ module.exports = function (
 							comments: false,
 							// Turned on because emoji and regex is not minified properly using default
 							// https://github.com/facebook/create-react-app/issues/2488
+							// eslint-disable-next-line camelcase
 							ascii_only: true
 						}
 					},
@@ -568,17 +663,18 @@ module.exports = function (
 						infrastructure: 'silent'
 					}
 				}),
-			new ESLintPlugin({
-				// Plugin options
-				configType: 'flat',
-				extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
-				formatter: require.resolve('react-dev-utils/eslintFormatter'),
-				eslintPath: require.resolve('eslint'),
-				// @remove-on-eject-begin
-				overrideConfigFile: require.resolve('./eslintWebpackPluginConfig'),
-				// @remove-on-eject-end
-				cache: true
-			})
+			!noLinting &&
+				new ESLintPlugin({
+					// Plugin options
+					configType: 'flat',
+					extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+					formatter: require.resolve('react-dev-utils/eslintFormatter'),
+					eslintPath: require.resolve('eslint'),
+					// @remove-on-eject-begin
+					overrideConfigFile: require.resolve('./eslintWebpackPluginConfig'),
+					// @remove-on-eject-end
+					cache: true
+				})
 		].filter(Boolean)
 	};
 };

package/docs/building-apps.md

@@ -26,6 +26,7 @@ order: 4
                       (requires V8_MKSNAPSHOT set)
     -m, --meta        JSON to override package.json enact metadata
     -c, --custom-skin Build with a custom skin
+    --no-linting      Build without code linting
     --no-animation    Build without effects such as animation and shadow
     --stats           Output bundle analysis file
     --verbose         Verbose log build details

package/docs/serving-apps.md

@@ -10,7 +10,12 @@ order: 6
   Options
     -b, --browser     Automatically open browser
     -i, --host        Server host IP address
+    -f, --fast        Enables experimental frast refresh
     -p, --port        Server port number
+    -m, --meta        JSON to override package.json enact metadata
+    --no-linting      Build without code linting
+    -v, --version     Display version information
+    -h, --help        Display help information
 ```
 The `enact serve` command (aliased as `npm run serve`) will build and host your project on **http://localhost:8080/**. The options allow you to customize the host IP and host port, which can also be overriden via `HOST` and `PORT` environment variable. While the `enact serve` is active, any changes to source code will trigger a rebuild and update any loaded browser windows.