P1-1277 - Implement tooling standards in js package

.eslintrc

@@ -28,37 +28,6 @@ overrides:
       jest: true
     rules:
       no-restricted-imports: "off"
-  - files:
-      - "packages/js/**/*.js"
-    rules:
-      # Custom rules: only for temporary exceptions that should be removed over time
-      camelcase: 1
-      complexity: [ 1, 6 ]
-      brace-style: 1
-      max-statements: 1
-      no-shadow: 1
-      require-jsdoc: 1
-      react/jsx-no-bind: 1
-      react/jsx-no-target-blank: 1
-      react/no-access-state-in-setstate: 1
-      react/no-deprecated: 1
-      react/no-unused-prop-types: 1
-      react/prop-types: 1
-      react/require-default-props: 1
-      no-restricted-imports:
-        - error
-        - name: react
-          message: Please use @wordpress/element instead. No need to import just for JSX.
-        - name: react-dom
-          message: Please use @wordpress/element instead.
-
-      # Disabled rules
-      # In the editor, we're using the pragma `wp.element.createElement`
-      react/react-in-jsx-scope: 0
-  - files:
-      - "packages/js/tests/**/*.js"
-    rules:
-      no-restricted-imports: 0
   - files:
       - "packages/schema-blocks/src/**"
     env:

babel.config.js

@@ -1,9 +1,3 @@
-module.exports = ( api ) => {
-	api.cache( true );
-
-	return {
-		presets: [ "@wordpress/babel-preset-default" ],
-		plugins: [ "@babel/plugin-transform-runtime" ],
-		sourceType: "unambiguous",
-	};
+module.exports = {
+	presets: [ "@yoast/babel-preset" ],
 };

config/grunt/task-config/shell.js

@@ -79,6 +79,7 @@ module.exports = function( grunt ) {
 				callback: throwUncommittedChangesError,
 			},
 		},
+
 		"readme-reset-txt": {
 			command: "git checkout readme.txt",
 			options: {

config/webpack/paths.js

@@ -1,44 +1,48 @@
 const path = require( "path" );
 
 const jsDistPath = path.resolve( "js", "dist" );
-const jsSrcPath = path.resolve( "packages", "js", "src" );
-const cssDistPath = path.resolve( "css", "dist" );
 
-// Output filename: Entry file (relative to jsSrcPath)
-const entry = {
-	"addon-installation": "./packages/js/src/addon-installation.js",
-	"admin-global": "./packages/js/src/admin-global.js",
-	"admin-modules": "./packages/js/src/admin-modules.js",
-	"analysis-worker": "./packages/js/src/analysis-worker.js",
-	"api-client": "./packages/js/src/api-client.js",
-	"block-editor": "./packages/js/src/block-editor.js",
-	"bulk-editor": "./packages/js/src/bulk-editor.js",
-	"schema-blocks": "./packages/js/src/schema-blocks.js",
-	"classic-editor": "./packages/js/src/classic-editor.js",
-	"dashboard-widget": "./packages/js/src/dashboard-widget.js",
-	"dynamic-blocks": "./packages/js/src/dynamic-blocks.js",
-	"edit-page": "./packages/js/src/edit-page.js",
-	"editor-modules": "./packages/js/src/editor-modules.js",
-	elementor: "./packages/js/src/elementor.js",
-	"externals-components": "./packages/js/src/externals/components.js",
-	"externals-contexts": "./packages/js/src/externals/contexts.js",
-	"externals-redux": "./packages/js/src/externals/redux.js",
-	"filter-explanation": "./packages/js/src/filter-explanation.js",
-	"help-scout-beacon": "./packages/js/src/help-scout-beacon.js",
-	"import": "./packages/js/src/import.js",
-	indexation: "./packages/js/src/indexation.js",
-	"installation-success": "./packages/js/src/installation-success.js",
-	"network-admin": "./packages/js/src/network-admin.js",
-	"post-edit": "./packages/js/src/post-edit.js",
-	"quick-edit-handler": "./packages/js/src/quick-edit-handler.js",
-	"reindex-links": "./packages/js/src/reindex-links.js",
-	settings: "./packages/js/src/settings.js",
-	"structured-data-blocks": "./packages/js/src/structured-data-blocks.js",
-	"term-edit": "./packages/js/src/term-edit.js",
-	"used-keywords-assessment": "./packages/js/src/used-keywords-assessment.js",
-	"react-select": "./packages/js/src/externals/react-select.js",
-	workouts: "./packages/js/src/workouts.js",
-};
+/**
+ * Composes a list of entries based on the current NODE_ENV mode.
+ *
+ * @param {string} sourceDirectory The source path.
+ *
+ * @returns {object} A list of entries.
+ */
+const getEntries = ( sourceDirectory = "./packages/js/src" ) => ( {
+	"addon-installation": `${ sourceDirectory }/addon-installation.js`,
+	"admin-global": `${ sourceDirectory }/admin-global.js`,
+	"admin-modules": `${ sourceDirectory }/admin-modules.js`,
+	"analysis-worker": `${ sourceDirectory }/analysis-worker.js`,
+	"api-client": `${ sourceDirectory }/api-client.js`,
+	"block-editor": `${ sourceDirectory }/block-editor.js`,
+	"bulk-editor": `${ sourceDirectory }/bulk-editor.js`,
+	"schema-blocks": `${ sourceDirectory }/schema-blocks.js`,
+	"classic-editor": `${ sourceDirectory }/classic-editor.js`,
+	"dashboard-widget": `${ sourceDirectory }/dashboard-widget.js`,
+	"dynamic-blocks": `${ sourceDirectory }/dynamic-blocks.js`,
+	"edit-page": `${ sourceDirectory }/edit-page.js`,
+	"editor-modules": `${ sourceDirectory }/editor-modules.js`,
+	elementor: `${ sourceDirectory }/elementor.js`,
+	"externals-components": `${ sourceDirectory }/externals/components.js`,
+	"externals-contexts": `${ sourceDirectory }/externals/contexts.js`,
+	"externals-redux": `${ sourceDirectory }/externals/redux.js`,
+	"filter-explanation": `${ sourceDirectory }/filter-explanation.js`,
+	"help-scout-beacon": `${ sourceDirectory }/help-scout-beacon.js`,
+	"import": `${ sourceDirectory }/import.js`,
+	indexation: `${ sourceDirectory }/indexation.js`,
+	"installation-success": `${ sourceDirectory }/installation-success.js`,
+	"network-admin": `${ sourceDirectory }/network-admin.js`,
+	"post-edit": `${ sourceDirectory }/post-edit.js`,
+	"quick-edit-handler": `${ sourceDirectory }/quick-edit-handler.js`,
+	"reindex-links": `${ sourceDirectory }/reindex-links.js`,
+	settings: `${ sourceDirectory }/settings.js`,
+	"structured-data-blocks": `${ sourceDirectory }/structured-data-blocks.js`,
+	"term-edit": `${ sourceDirectory }/term-edit.js`,
+	"used-keywords-assessment": `${ sourceDirectory }/used-keywords-assessment.js`,
+	"react-select": `${ sourceDirectory }/externals/react-select.js`,
+	workouts: `${ sourceDirectory }/workouts.js`,
+} );
 
 /**
  * Flattens a version for usage in a filename.
@@ -57,10 +61,8 @@ function flattenVersionForFile( version ) {
 }
 
 module.exports = {
-	entry,
+	entry: getEntries(),
 	jsDist: jsDistPath,
-	jsSrc: jsSrcPath,
-	cssDist: cssDistPath,
 	select2: path.resolve( "node_modules", "select2", "dist" ),
 	flattenVersionForFile,
 };

package.json

@@ -35,14 +35,14 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.13.10",
     "@lodder/grunt-postcss": "^3.1.1",
     "@slack/webhook": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "^4.24.0",
     "@typescript-eslint/parser": "^4.24.0",
     "@wordpress/dependency-extraction-webpack-plugin": "^3.1.0",
     "@wordpress/scripts": "^14.1.1",
-    "@yoast/browserslist-config": "file:packages/browserslist-config",
+    "@yoast/babel-preset": "^1.0.0",
+    "@yoast/browserslist-config": "^1.2.2",
     "@yoast/grunt-plugin-tasks": "^2.3",
     "babel-plugin-dynamic-import-webpack": "^1.1.0",
     "colors": "1.4.0",
@@ -53,7 +53,7 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.1",
     "eslint": "^7.32.0",
-    "eslint-config-yoast": "file:packages/eslint",
+    "eslint-config-yoast": "^5.0.17",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.22.0",
     "grunt-git": "^1.0.14",

packages/js/.browserslistrc

@@ -0,0 +1 @@
+extends @yoast/browserslist-config

packages/js/.eslintrc.js

@@ -0,0 +1,83 @@
+module.exports = {
+	root: true,
+	"extends": [
+		"yoast",
+	],
+	settings: {
+		react: {
+			version: "detect",
+		},
+	},
+	parser: "@babel/eslint-parser",
+	parserOptions: {
+		ecmaVersion: 2019,
+		sourceType: "module",
+	},
+	plugins: [
+		"@babel",
+		"jest",
+	],
+	env: {
+		"jest/globals": true,
+	},
+	rules: {
+		"no-prototype-builtins": 0,
+		"comma-dangle": [
+			"error",
+			{
+				arrays: "always-multiline",
+				objects: "always-multiline",
+				imports: "always-multiline",
+				exports: "always-multiline",
+				functions: "never",
+			},
+		],
+	},
+	overrides: [
+		{
+			files: [ "**/*.js" ],
+			rules: {
+				// Custom rules: only for temporary exceptions that should be removed over time
+				camelcase: 1,
+				complexity: [ 1, 6 ],
+				"brace-style": 1,
+				"max-statements": 1,
+				"no-shadow": 1,
+				"require-jsdoc": 1,
+				"react/jsx-no-bind": 1,
+				"react/jsx-no-target-blank": 1,
+				"react/no-access-state-in-setstate": 1,
+				"react/no-deprecated": 1,
+				"react/no-unused-prop-types": 1,
+				"react/prop-types": 1,
+				"react/require-default-props": 1,
+				"no-restricted-imports": [
+					"error",
+					{
+						name: "react",
+						message: "Please use @wordpress/element instead. No need to import just for JSX.",
+
+					},
+					{
+						name: "react-dom",
+						message: "Please use @wordpress/element instead.",
+					},
+
+				],
+
+				// Disabled rules
+				// In the editor, we're using the pragma `wp.element.createElement`
+				"react/react-in-jsx-scope": 0,
+			},
+
+		},
+		{
+			files: [ "tests/**/*.js" ],
+			rules: {
+				"no-restricted-imports": 0,
+				"no-undefined": 0,
+				"react/display-name": 0,
+			},
+		},
+	],
+};

packages/js/.gitignore

@@ -0,0 +1,6 @@
+# Editor
+.vscode
+.idea
+# Dependencies
+node_modules
+

packages/js/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	presets: [ "@yoast/babel-preset" ],
+	env: {
+		test: {
+			plugins: [
+				"babel-plugin-styled-components",
+			],
+		},
+	},
+};

packages/js/jest.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+	preset: "@yoast/jest-preset",
+	setupFilesAfterEnv: [ "<rootDir>/tests/setupTests.js" ],
+	testPathIgnorePatterns: [
+		"/tests/__mocks__/",
+		"/tests/containers/mockSelectors.js",
+		"/tests/helpers/factory.js",
+		"/tests/setupTests.js",
+		"/tests/decorator/__mocks__/@wordpress/rich-text/index.js",
+	],
+
+	moduleNameMapper: {
+		"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
+		"\\.(css|less)$": "<rootDir>/tests/__mocks__/styleMock.js",
+		"find-with-regex": "<rootDir>/node_modules/find-with-regex/lib/index.js",
+		"^lodash-es$": "lodash",
+		"^lodash-es/(.*)$": "lodash/$1",
+	},
+	moduleDirectories: [
+		"<rootDir>/node_modules",
+		"node_modules",
+	],
+	snapshotSerializers: [
+		"enzyme-to-json/serializer",
+	],
+	testURL: "http://localhost/",
+};