Internal: Refactor theme build scripts [TMZ-457] (#484)

.buildignore

@@ -1,10 +1,8 @@
 *.zip
 karma.conf.js
-assets/dev/
-assets/scss/
-assets/js/qunit-tests*
 bin/
-build/
+dev/
+modules/**/assets/
 composer.json
 composer.lock
 Gruntfile.js
@@ -15,6 +13,8 @@ package.json
 phpcs.xml
 README.md
 webpack.config.js
+.DS_Store
+.git/
 
 .github/
 .buildignore
@@ -23,3 +23,4 @@ webpack.config.js
 .browserslistrc
 .eslintignore
 .eslintrc.js
+.npmrc

.gitignore

@@ -1,11 +1,12 @@
 .idea/
 node_modules/
 .sass-cache/
-build/
+build/**
+assets/
 hello-elementor/
+elementor-hello-theme/
 log/
 vendor/
-composer.lock
 .DS_Store
 .project
 Thumbs.db
@@ -13,7 +14,6 @@ Thumbs.db
 *.map
 yarn.lock
 assets/js/
-*.css
 *.zip
 .npmrc
 .env

Gruntfile.js

@@ -1,138 +0,0 @@
-/**
- * Hello Elementor theme Makefile
- */
-'use strict';
-
-module.exports = function( grunt ) {
-	require( 'load-grunt-tasks' )( grunt );
-
-	const sass = require( 'sass' );
-
-	// Project configuration.
-	grunt.initConfig( {
-		pkg: grunt.file.readJSON( 'package.json' ),
-
-		sass: {
-			options: {
-				implementation: sass,
-			},
-			dist: {
-				files: 'production' === grunt.option( 'environment' ) ? [ {
-					expand: true,
-					cwd: 'assets/scss',
-					src: '*.scss',
-					dest: './',
-					ext: '.css',
-				} ] : [ {
-					expand: true,
-					cwd: 'assets/scss',
-					src: '*.scss',
-					dest: './',
-					ext: '.css',
-				} ],
-			},
-		},
-
-		postcss: {
-			dev: {
-				options: {
-					//map: true,
-
-					processors: [
-						require( 'autoprefixer' )(),
-					],
-				},
-				files: [ {
-					src: [
-						'*.css',
-						'!*.min.css',
-					],
-				} ],
-			},
-			minify: {
-				options: {
-					processors: [
-						require( 'autoprefixer' )(),
-						require( 'cssnano' )( {
-							reduceIdents: false,
-							zindex: false,
-						} ),
-					],
-				},
-				files: [ {
-					expand: true,
-					src: 'production' === grunt.option( 'environment' ) ? [
-						'*.css',
-						'!*.min.css',
-					] : [
-						'*.css',
-						'!*.min.css',
-					],
-					ext: '.min.css',
-				} ],
-			},
-		},
-
-		watch: {
-			styles: {
-				files: [
-					'assets/scss/**/*.scss',
-				],
-				tasks: [ 'styles' ],
-			},
-		},
-
-		checktextdomain: {
-			options: {
-				text_domain: 'hello-elementor',
-				correct_domain: true,
-				keywords: [
-					// WordPress keywords
-					'__:1,2d',
-					'_e:1,2d',
-					'_x:1,2c,3d',
-					'esc_html__:1,2d',
-					'esc_html_e:1,2d',
-					'esc_html_x:1,2c,3d',
-					'esc_attr__:1,2d',
-					'esc_attr_e:1,2d',
-					'esc_attr_x:1,2c,3d',
-					'_ex:1,2c,3d',
-					'_n:1,2,4d',
-					'_nx:1,2,4c,5d',
-					'_n_noop:1,2,3d',
-					'_nx_noop:1,2,3c,4d',
-				],
-			},
-			files: {
-				src: [
-					'**/*.php',
-					'!docs/**',
-					'!bin/**',
-					'!node_modules/**',
-					'!build/**',
-					'!tests/**',
-					'!.github/**',
-					'!vendor/**',
-					'!*~',
-				],
-				expand: true,
-			},
-		},
-	} );
-
-	grunt.registerTask( 'i18n', [
-		'checktextdomain',
-	] );
-
-	grunt.registerTask( 'styles', [
-		'sass',
-		'postcss',
-	] );
-
-	// Default task(s).
-	grunt.registerTask( 'default', [
-		'i18n',
-		'styles',
-	] );
-};

dev/scss/reset.scss

@@ -0,0 +1,5 @@
+@forward "reset/variables";
+@forward "reset/reset";
+@forward "reset/forms";
+@forward "reset/table";
+@forward "reset/list";

functions.php

@@ -131,12 +131,10 @@ if ( ! function_exists( 'hello_elementor_scripts_styles' ) ) {
 	 * @return void
 	 */
 	function hello_elementor_scripts_styles() {
-		$min_suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
-
 		if ( apply_filters( 'hello_elementor_enqueue_style', true ) ) {
 			wp_enqueue_style(
 				'hello-elementor',
-				get_template_directory_uri() . '/style' . $min_suffix . '.css',
+				HELLO_THEME_STYLE_URL . 'reset.css',
 				[],
 				HELLO_ELEMENTOR_VERSION
 			);
@@ -145,7 +143,7 @@ if ( ! function_exists( 'hello_elementor_scripts_styles' ) ) {
 		if ( apply_filters( 'hello_elementor_enqueue_theme_style', true ) ) {
 			wp_enqueue_style(
 				'hello-elementor-theme-style',
-				get_template_directory_uri() . '/theme' . $min_suffix . '.css',
+				HELLO_THEME_STYLE_URL . 'theme.css',
 				[],
 				HELLO_ELEMENTOR_VERSION
 			);
@@ -154,7 +152,7 @@ if ( ! function_exists( 'hello_elementor_scripts_styles' ) ) {
 		if ( hello_elementor_display_header_footer() ) {
 			wp_enqueue_style(
 				'hello-elementor-header-footer',
-				get_template_directory_uri() . '/header-footer' . $min_suffix . '.css',
+				HELLO_THEME_STYLE_URL . 'header-footer.css',
 				[],
 				HELLO_ELEMENTOR_VERSION
 			);

includes/customizer-functions.php

@@ -74,12 +74,9 @@ add_action( 'customize_register', 'hello_customizer_register_elementor_pro_upsel
  * @return void
  */
 function hello_customizer_styles() {
-
-	$min_suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
-
 	wp_enqueue_style(
 		'hello-elementor-customizer',
-		get_template_directory_uri() . '/customizer' . $min_suffix . '.css',
+		HELLO_THEME_STYLE_URL . 'customizer.css',
 		[],
 		HELLO_ELEMENTOR_VERSION
 	);

includes/elementor-functions.php

@@ -139,7 +139,7 @@ add_action( 'elementor/editor/after_enqueue_scripts', function() {
 
 	wp_enqueue_script(
 		'hello-theme-editor',
-		get_template_directory_uri() . '/assets/js/hello-editor' . $suffix . '.js',
+		HELLO_THEME_SCRIPTS_URL . 'hello-editor.js',
 		[ 'jquery', 'elementor-editor' ],
 		HELLO_ELEMENTOR_VERSION,
 		true
@@ -147,7 +147,7 @@ add_action( 'elementor/editor/after_enqueue_scripts', function() {
 
 	wp_enqueue_style(
 		'hello-editor',
-		get_template_directory_uri() . '/editor' . $suffix . '.css',
+		HELLO_THEME_STYLE_URL . 'editor.css',
 		[],
 		HELLO_ELEMENTOR_VERSION
 	);
@@ -162,11 +162,9 @@ add_action( 'wp_enqueue_scripts', function() {
 		return;
 	}
 
-	$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
-
 	wp_enqueue_script(
 		'hello-theme-frontend',
-		get_template_directory_uri() . '/assets/js/hello-frontend' . $suffix . '.js',
+		HELLO_THEME_SCRIPTS_URL . 'hello-frontend.js',
 		[],
 		HELLO_ELEMENTOR_VERSION,
 		true

includes/script.php

@@ -18,10 +18,10 @@ class Script {
 
 	public function enqueue() {
 		$asset_path = HELLO_THEME_SCRIPTS_PATH . $this->handle . '.asset.php';
-		$asset_url  = HELLO_THEME_SCRIPTS_URL;
+		$asset_url = HELLO_THEME_SCRIPTS_URL;
 
 		if ( ! file_exists( $asset_path ) ) {
-			throw new \Exception( 'You need to run `npm run build` for the "hello-elementor" first.' );
+			throw new \Exception( $asset_path . ' - You need to run `npm run build` for the "hello-elementor" first.' );
 		}
 
 		$script_asset = require $asset_path;
@@ -32,7 +32,7 @@ class Script {
 
 		wp_enqueue_script(
 			$this->handle,
-			$asset_url . "$this->handle.min.js",
+			$asset_url . "$this->handle.js",
 			$script_asset['dependencies'],
 			$script_asset['version'],
 			true

modules/admin-home/assets/js/components/settings/theme.js

@@ -28,18 +28,18 @@ export const Theme = () => {
 			</Alert>
 			<Setting
 				value={ helloStyle }
-				label={ __( 'Deregister Hello style.css', 'hello-elementor' ) }
+				label={ __( 'Deregister Hello reset.css', 'hello-elementor' ) }
 				onSwitchClick={ () => updateSetting( 'HELLO_STYLE', ! helloStyle ) }
-				description={ __( 'What it does: Turns off CSS reset rules by disabling the theme’s primary stylesheet. CSS reset rules make sure your website looks the same in different browsers.', 'hello-elementor' ) }
+				description={ __( 'What it does: Turns off CSS reset rules by disabling the theme’s reset stylesheet. CSS reset rules make sure your website looks the same in different browsers.', 'hello-elementor' ) }
-				code={ `<link rel="stylesheet" href="${ window.location.origin }/wp-content/themes/hello-elementor/style.min.css" />` }
+				code={ `<link rel="stylesheet" href="${ window.location.origin }/wp-content/themes/hello-elementor/assets/css/reset.css" />` }
-				tip={ __( 'Tip: Deregistering style.css can make your website load faster. Disable it only if you’re using another style reset method, such as with a child theme.', 'hello-elementor' ) }
+				tip={ __( 'Tip: Deregistering reset.css can make your website load faster. Disable it only if you’re using another style reset method, such as with a child theme.', 'hello-elementor' ) }
 			/>
 			<Setting
 				value={ helloTheme }
 				label={ __( 'Deregister Hello theme.css', 'hello-elementor' ) }
 				onSwitchClick={ () => updateSetting( 'HELLO_THEME', ! helloTheme ) }
-				description={ __( 'What it does: Turns off CSS reset rules by disabling the theme’s primary stylesheet. CSS reset rules make sure your website looks the same in different browsers.', 'hello-elementor' ) }
+				description={ __( 'What it does: Turns off CSS reset rules by disabling the theme’s reset stylesheet. CSS reset rules make sure your website looks the same in different browsers.', 'hello-elementor' ) }
-				code={ `<link rel="stylesheet" href="${ window.location.origin }/wp-content/themes/hello-elementor/theme.min.css" />` }
+				code={ `<link rel="stylesheet" href="${ window.location.origin }/wp-content/themes/hello-elementor/assets/css/theme.css" />` }
 				tip={ __( 'Tip: Deregistering theme.css can make your website load faster. Disable it only if you are not using any WordPress elements on your website, or if you want to style them yourself. Examples of WordPress elements include comments area, pagination box, and image align classes.', 'hello-elementor' ) }
 			/>
 		</Stack>

package.json

@@ -1,69 +1,42 @@
 {
-    "name": "elementor-hello-theme",
+    "name": "hello-elementor",
     "slug": "elementor-hello-theme",
     "homepage": "https://elementor.com/",
     "description": "A sample theme for Elementor.",
     "version": "3.4.3",
     "last_beta_version": "2.4.0-beta3",
     "scripts": {
-        "update-version": "node .github/scripts/update-version-in-files.js",
+        "start": "wp-scripts start",
-        "build:prod": "grunt default --environment=production && WP_SRC_DIRECTORY=$(pwd) wp-scripts build --env=production",
+        "build:dev": "composer update && composer install && wp-scripts build --env=developemntWithWatch",
-        "build:dev": "concurrently \"grunt default\" \"webpack --env=development\"",
+        "build:prod": "composer install --no-dev && wp-scripts build --env=production",
-        "build:dev:watch": "concurrently \"grunt default watch\" \"webpack --env=developmentLocal\"",
+        "lint:js": "wp-scripts lint-js",
-        "clean:build": "rimraf build && rimraf hello-elementor",
+        "clean:build": "rimraf assets && rimraf $npm_package_name",
-        "zip": "npm run clean:build && npm run build:prod && rsync -av --exclude-from=.buildignore . hello-elementor && zip -r hello-elementor.$npm_package_version.zip hello-elementor/*",
+        "build:dir": "npm run clean:build && npm run build:prod && rsync -av --exclude-from=.buildignore . $npm_package_name",
-        "lint:js": "eslint ."
+        "package": "npm run clean:build && npm run build:prod && rsync -av --exclude-from=.buildignore . $npm_package_name",
+        "package:zip": "npm run package && zip -r $npm_package_name.$npm_package_version.zip ./$npm_package_name/*",
+        "zip": "npm run clean:build && npm run build:prod && rsync -av --exclude-from=.buildignore . $npm_package_name && zip -r $npm_package_name.$npm_package_version.zip $npm_package_name/*",
+        "update-version": "node .github/scripts/update-version-in-files.js"
     },
     "devDependencies": {
-        "@babel/core": "~7.18.0",
+        "@wordpress/components": "^29.9.0",
-        "@babel/plugin-proposal-class-properties": "^7.2.1",
+        "@wordpress/eslint-plugin": "^22.9.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+        "@wordpress/i18n": "^5.23.0",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@wordpress/notices": "^5.23.0",
-        "@babel/preset-env": "^7.12.11",
+        "@wordpress/scripts": "^30.16.0",
-        "@wordpress/components": "^25.7.0",
-        "@wordpress/eslint-plugin": "^12.1.0",
-        "@wordpress/i18n": "^4.41.0",
-        "@wordpress/notices": "^4.9.0",
-        "@wordpress/scripts": "^26.12.0",
-        "autoprefixer": "~10.4.19",
-        "babel-eslint": "^8.2.6",
-        "babel-loader": "8.0.0",
-        "concurrently": "^6.2.0",
-        "cssnano": "4.1.11",
-        "eslint": "8.36.0",
-        "eslint-config-wordpress": "^2.0.0",
         "eslint-plugin-babel": "^5.3.1",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
-        "eslint-plugin-no-jquery": "^2.7.0",
+        "eslint-plugin-no-jquery": "^3.1.1",
-        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react": "^7.37.5",
-        "eslint-webpack-plugin": "^4.0.0",
+        "webpack-cli": "^6.0.1",
-        "grunt": "^1.4.1",
+        "webpack-remove-empty-scripts": "^1.0.4"
-        "grunt-checktextdomain": "^1.0.1",
-        "grunt-contrib-sass": "~1.0.0",
-        "grunt-contrib-watch": "~1.1.0",
-        "grunt-sass": "~3.1.0",
-        "grunt-text-replace": "~0.4.0",
-        "grunt-webpack": "^6.0.0",
-        "grunt-wp-readme-to-markdown-with-extra": "~2.2.0",
-        "load-grunt-tasks": "^4.0.0",
-        "matchdep": "~2.0.0",
-        "npm-build-zip": "^1.0.3",
-        "rimraf": "^3.0.2",
-        "sass": "^1.53.0",
-        "terser-webpack-plugin": "^5.0.3",
-        "webpack": "^5.11.0",
-        "webpack-cli": "^4.7.2"
     },
     "dependencies": {
-        "@babel/plugin-transform-modules-commonjs": "^7.2.0",
+        "@elementor/icons": "1.42.0",
-        "@babel/plugin-transform-runtime": "^7.3.4",
-        "@elementor/icons": "1.37.0",
         "@elementor/ui": "1.34.2",
-        "@lodder/grunt-postcss": "^3.1.1",
+        "copy-webpack-plugin": "^13.0.0",
-        "grunt-autoprefixer": "^3.0.4",
+        "html-entities": "^2.6.0",
-        "grunt-cssnano": "^2.1.0",
-        "html-entities": "^2.5.2",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "sass": "^1.89.0"
     }
 }

style.css

@@ -14,9 +14,3 @@
 	Text Domain: hello-elementor
 	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
 */
-
-@forward "reset/variables";
-@forward "reset/reset";
-@forward "reset/forms";
-@forward "reset/table";
-@forward "reset/list";

webpack.config.js

@@ -1,111 +1,63 @@
-/**
+// WordPress webpack config:
- * Grunt webpack task config
- *
- * @package
- */
-const path = require( 'path' );
 const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 
-const TerserPlugin = require( 'terser-webpack-plugin' );
+//Plugins:
+const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
+const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
 
-const entry = {
+//Utilities
-	'hello-editor': path.resolve( __dirname, './assets/dev/js/editor/hello-editor.js' ),
+const path = require( 'path' );
-	'hello-frontend': path.resolve( __dirname, './assets/dev/js/frontend/hello-frontend.js' ),
+const imagesPath = path.resolve( __dirname, './assets/images' );
-	'hello-home-app': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-admin.js' ),
+const modulesDir = process.cwd() + '/modules/';
-	'hello-elementor-menu': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-menu.js' ),
+
-	'hello-elementor-settings': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-settings.js' ),
+const entryPoints = {
-	'hello-elementor-topbar': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-topbar.js' ),
+	'css/reset': path.resolve( __dirname, './dev/scss', 'reset.scss' ),
-	'hello-conversion-banner': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-conversion-banner.js' ),
+	'css/theme': path.resolve( __dirname, './dev/scss', 'theme.scss' ),
+	'css/header-footer': path.resolve( __dirname, './dev/scss', 'header-footer.scss' ),
+	'css/editor-styles': path.resolve( __dirname, './dev/scss', 'editor-styles.scss' ),
+	'css/editor': path.resolve( __dirname, './dev/scss', 'editor.scss' ),
+	'css/customizer': path.resolve( __dirname, './dev/scss', 'customizer.scss' ),
+
+	'js/hello-editor': path.resolve( __dirname, './dev/js/editor', 'hello-editor.js' ),
+	'js/hello-frontend': path.resolve( __dirname, './dev/js/frontend', 'hello-frontend.js' ),
+	'js/hello-home-app': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-admin.js' ),
+	'js/hello-elementor-menu': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-menu.js' ),
+	'js/hello-elementor-settings': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-settings.js' ),
+	'js/hello-elementor-topbar': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-topbar.js' ),
+	'js/hello-conversion-banner': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-conversion-banner.js' ),
 };
 
-const moduleRules = {
+module.exports = {
-	rules: [
-		...defaultConfig.module.rules,
-		{
-			test: /\.js$/,
-			exclude: /node_modules/,
-			use: [
-				{
-					loader: 'babel-loader',
-					options: {
-						presets: [ '@babel/preset-env', '@babel/preset-react' ],
-						plugins: [
-							[ '@babel/plugin-proposal-class-properties' ],
-							[ '@babel/plugin-transform-runtime' ],
-							[ '@babel/plugin-transform-modules-commonjs' ],
-							[ '@babel/plugin-proposal-optional-chaining' ],
-							[ '@babel/plugin-syntax-dynamic-import' ],
-						],
-					},
-				},
-			],
-		},
-	],
-};
-
-const commonConfig = {
 	...defaultConfig,
-	target: 'web',
+	...{
-	context: __dirname,
+		entry: entryPoints,
-	module: moduleRules,
+		output: {
-	entry,
+			...defaultConfig.output,
-	output: {
+			path: path.resolve( __dirname, './assets' ),
-		...defaultConfig.output,
+			chunkFilename: 'js/[name].js',
-		path: path.resolve( __dirname, './assets/js' ),
+			clean: false,
-		filename: '[name].js',
+		},
-	},
+		plugins: [
-};
+			// Include WP's plugin config.
+			...defaultConfig.plugins,
 
-const webpackConfig = {
+			new CopyWebpackPlugin( {
-	...commonConfig,
+				patterns: [
-	mode: 'development',
+					{
-	output: {
+						from: path.resolve( modulesDir, 'admin-home/assets/images' ),
-		...commonConfig.output,
+						to: imagesPath,
-		devtoolModuleFilenameTemplate: './[resource]',
+					},
-	},
+					{
-	entry: {
+						from: path.resolve( __dirname, 'dev/images' ),
-		...entry,
+						to: imagesPath,
-	},
+					},
-	devtool: 'source-map',
+				],
-};
+			} ),
-
+			// Removes the empty `.js` files generated by webpack but
-const webpackProductionConfig = {
+			// sets it after WP has generated its `*.asset.php` file.
-	...commonConfig,
+			new RemoveEmptyScriptsPlugin( {
-	mode: 'production',
+				stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
-	optimization: {
-		...defaultConfig.optimization || {},
-		minimize: true,
-		minimizer: [
-			new TerserPlugin( {
-				terserOptions: {
-					keep_fnames: true,
-				},
-				include: /\.min\.js$/,
 			} ),
 		],
 	},
-	performance: { hints: false },
-};
-
-// Add minified entry points
-Object.entries( webpackProductionConfig.entry ).forEach( ( [ wpEntry, value ] ) => {
-	webpackProductionConfig.entry[ wpEntry + '.min' ] = value;
-} );
-
-webpackProductionConfig.plugins = defaultConfig.plugins;
-
-module.exports = ( env ) => {
-	if ( env.developmentLocal ) {
-		return { ...webpackConfig, watch: true };
-	}
-
-	if ( env.production ) {
-		return webpackProductionConfig;
-	}
-
-	if ( env.development ) {
-		return webpackConfig;
-	}
-
-	throw new Error( 'missing or invalid --env= development/production/developmentWithWatch/productionWithWatch' );
 };