@enact/cli 7.0.0-alpha.3 → 7.0.0-alpha.5

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 7.0.0-alpha.5 (February 26, 2025)
+
+### lint
+
+* Updated `eslint` to v9 and adopted flat config.
+
+## 7.0.0-alpha.4 (January 17, 2025)
+
+* Updated all dependencies to the latest including React 19.
+* Updated the minimum version of Node to `20.5.0`.
+
+### pack
+
+* Changed classnames to be hashed when production build.
+
 ## 7.0.0-alpha.3 (December 12, 2024)
 
 ### pack

package/commands/eject.js

@@ -44,7 +44,7 @@ const bareTasks = {
 	'pack-p': 'webpack --env production --config config/webpack.config.js && cpy public dist',
 	watch: 'cpy public dist && webpack --env development --config config/webpack.config.js --watch',
 	clean: 'rimraf build dist',
-	lint: 'eslint --no-eslintrc --config enact --ignore-pattern config/* .',
+	lint: 'eslint --no-config-lookup --config enact --ignore-pattern config/* .',
 	license: 'license-checker ',
 	test: 'jest --config config/jest/jest.config.js',
 	'test-watch': 'jest --config config/jest/jest.config.js --watch'
@@ -216,7 +216,7 @@ function configurePackage(bare) {
 	app.eslintConfig = eslintConfig;
 	app.eslintIgnore = app.eslintIgnore || [];
 	app.eslintIgnore = app.eslintIgnore.concat(eslintIgnore.filter(l => !app.eslintIgnore.includes(l)));
-	backupOld(['.eslintignore', '.eslintrc.js', '.eslintrc.yaml', '.eslintrc.yml', '.eslintrc.json', '.eslintrc']);
+	backupOld(['.eslintignore', 'eslint.config.js']);
 
 	// Sort the package.json output
 	['dependencies', 'devDependencies'].forEach(obj => {

package/commands/lint.js

@@ -37,9 +37,9 @@ function shouldESLint() {
 function eslint({strict = false, local = false, fix = false, eslintArgs = []} = {}) {
 	let args = [];
 	if (strict) {
-		args.push('--no-eslintrc', '--config', require.resolve('eslint-config-enact/strict'));
+		args.push('--no-config-lookup', '--config', require.resolve('eslint-config-enact/strict'));
 	} else if (!local) {
-		args.push('--no-eslintrc', '--config', require.resolve('eslint-config-enact'));
+		args.push('--no-config-lookup', '--config', require.resolve('eslint-config-enact'));
 	}
 	if (local) {
 		args.push('--ignore-pattern', '**/node_modules/*');

package/commands/pack.js

@@ -252,6 +252,8 @@ function api(opts = {}) {
 		app.applyEnactMeta({template: path.join(__dirname, '..', 'config', 'custom-skin-template.ejs')});
 	}
 
+	// make the framework option available globally in order to be used by the eslint-webpack-plugin custom configuration
+	process.env.FRAMEWORK = opts.framework;
 	// Do this as the first thing so that any code reading it knows the right env.
 	const configFactory = require('../config/webpack.config');
 	const config = configFactory(
@@ -260,7 +262,6 @@ function api(opts = {}) {
 		opts.isomorphic,
 		!opts.animation,
 		!opts['split-css'],
-		opts.framework,
 		opts['ilib-additional-path']
 	);
 

package/config/eslintWebpackPluginConfig.js

@@ -0,0 +1,30 @@
+const eslintConfigEnact = require('eslint-config-enact/index');
+const eslintConfigEnactStrict = require('eslint-config-enact/strict');
+
+// Check if JSX transform is able
+const hasJsxRuntime = (() => {
+	if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+		return false;
+	}
+
+	try {
+		require.resolve('react/jsx-runtime');
+		return true;
+	} catch (e) {
+		return false;
+	}
+})();
+
+const loadedEnactConfig = process.env.FRAMEWORK ? eslintConfigEnactStrict : eslintConfigEnact;
+
+module.exports = [
+	...loadedEnactConfig,
+	{
+		rules: {
+			...(!hasJsxRuntime && {
+				'react/jsx-uses-react': 'warn',
+				'react/react-in-jsx-scope': 'warn'
+			})
+		}
+	}
+];

package/config/webpack.config.js

@@ -46,7 +46,6 @@ module.exports = function (
 	isomorphic = false,
 	noAnimation = false,
 	noSplitCSS = false,
-	framework = false,
 	ilibAdditionalResourcesPath
 ) {
 	process.chdir(app.context);
@@ -57,20 +56,6 @@ module.exports = function (
 	// Sets the browserslist default fallback set of browsers to the Enact default browser support list.
 	app.setEnactTargetsAsDefault();
 
-	// Check if JSX transform is able
-	const hasJsxRuntime = (() => {
-		if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
-			return false;
-		}
-
-		try {
-			require.resolve('react/jsx-runtime');
-			return true;
-		} catch (e) {
-			return false;
-		}
-	})();
-
 	// Check if TypeScript is setup
 	const useTypeScript = fs.existsSync('tsconfig.json');
 
@@ -335,7 +320,7 @@ module.exports = function (
 							use: getStyleLoaders({
 								importLoaders: 1,
 								modules: {
-									getLocalIdent
+									...(isEnvProduction ? {} : {getLocalIdent})
 								}
 							})
 						},
@@ -346,7 +331,8 @@ module.exports = function (
 							use: getStyleLoaders({
 								importLoaders: 1,
 								modules: {
-									...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
+									...(app.forceCSSModules ? {} : {mode: 'icss'}),
+									...(!app.forceCSSModules && isEnvProduction ? {} : {getLocalIdent})
 								}
 							}),
 							// Don't consider CSS imports dead code even if the
@@ -360,7 +346,7 @@ module.exports = function (
 							use: getLessStyleLoaders({
 								importLoaders: 2,
 								modules: {
-									getLocalIdent
+									...(isEnvProduction ? {} : {getLocalIdent})
 								}
 							})
 						},
@@ -369,7 +355,8 @@ module.exports = function (
 							use: getLessStyleLoaders({
 								importLoaders: 2,
 								modules: {
-									...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
+									...(app.forceCSSModules ? {} : {mode: 'icss'}),
+									...(!app.forceCSSModules && isEnvProduction ? {} : {getLocalIdent})
 								}
 							}),
 							sideEffects: true
@@ -381,7 +368,7 @@ module.exports = function (
 							use: getScssStyleLoaders({
 								importLoaders: 3,
 								modules: {
-									getLocalIdent
+									...(isEnvProduction ? {} : {getLocalIdent})
 								}
 							})
 						},
@@ -391,7 +378,8 @@ module.exports = function (
 							use: getScssStyleLoaders({
 								importLoaders: 3,
 								modules: {
-									...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
+									...(app.forceCSSModules ? {} : {mode: 'icss'}),
+									...(!app.forceCSSModules && isEnvProduction ? {} : {getLocalIdent})
 								}
 							})
 						},
@@ -521,7 +509,9 @@ module.exports = function (
 					ignoreOrder: noSplitCSS
 				}),
 			// Webpack5 removed node polyfills but we need this to run screenshot tests
-			new NodePolyfillPlugin(),
+			new NodePolyfillPlugin({
+				additionalAliases: ['console', 'domain', 'process', 'stream']
+			}),
 			// Provide meaningful information when modules are not found
 			new ModuleNotFoundPlugin(app.context),
 			// Ensure correct casing in module filepathes
@@ -582,26 +572,12 @@ module.exports = function (
 				}),
 			new ESLintPlugin({
 				// Plugin options
+				configType: 'flat',
 				extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
 				formatter: require.resolve('react-dev-utils/eslintFormatter'),
 				eslintPath: require.resolve('eslint'),
-				// ESLint class options
-				resolvePluginsRelativeTo: __dirname,
 				// @remove-on-eject-begin
-				baseConfig: {
-					extends: [
-						framework
-							? require.resolve('eslint-config-enact/strict.js')
-							: require.resolve('eslint-config-enact/index.js')
-					],
-					rules: {
-						...(!hasJsxRuntime && {
-							'react/jsx-uses-react': 'warn',
-							'react/react-in-jsx-scope': 'warn'
-						})
-					}
-				},
-				useEslintrc: false,
+				overrideConfigFile: require.resolve('./eslintWebpackPluginConfig'),
 				// @remove-on-eject-end
 				cache: true
 			})

package/eslint.config.js

@@ -0,0 +1,47 @@
+const enactConfig = require('eslint-config-enact');
+const prettierConfig = require('eslint-config-prettier');
+const importPlugin = require('eslint-plugin-import');
+const prettierPlugin = require('eslint-plugin-prettier');
+const globals = require('globals');
+
+module.exports = [
+	...enactConfig,
+	{
+		languageOptions: {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			globals: {
+				...globals.node
+			},
+			parserOptions: {
+				ecmaFeatures: {
+					jsx: true
+				}
+			}
+		},
+		plugins: {
+			import: importPlugin,
+			prettier: prettierPlugin
+		},
+		rules: {
+			// import plugin rules
+			'import/no-unresolved': ['error', {commonjs: true, caseSensitive: true}],
+			'import/named': 'error',
+			'import/first': 'warn',
+			'import/no-duplicates': 'error',
+			'import/extensions': ['warn', 'always', {js: 'never', json: 'always'}],
+			'import/newline-after-import': 'warn',
+			'import/order': [
+				'warn',
+				{
+					'newlines-between': 'never',
+					groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index']
+				}
+			],
+
+			// prettier rules
+			...prettierPlugin.configs.recommended.rules,
+			...prettierConfig.rules
+		}
+	}
+];