Merge pull request google#10321 from google/infra/10092-npm-workspaces-assets

Move JS dependencies required to build assets into their own workspace

Author: eugene-manuilov

.github/workflows/e2e-tests.yml

@@ -14,7 +14,6 @@ on:
       - '.github/workflows/e2e-tests.yml'
       - '.babelrc'
       - 'assets/**'
-      - 'blocks/**'
       - 'includes/**'
       - '/*.php'
       - 'jest-puppeteer.config.js'
@@ -47,7 +46,6 @@ on:
       - '.github/workflows/e2e-tests.yml'
       - '.babelrc'
       - 'assets/**'
-      - 'blocks/**'
       - 'includes/**'
       - '/*.php'
       - 'jest-puppeteer.config.js'

.github/workflows/storybook.yml

@@ -12,7 +12,6 @@ on:
       - '!assets/**/__tests__/**/*.js'
       - '!assets/**/test/*.js'
       - '!assets/**/*.test.js'
-      - 'blocks/**'
       - 'storybook/**'
       - '**.scss'
       - '.nvmrc'
@@ -30,7 +29,6 @@ on:
       - '!assets/**/__tests__/**/*.js'
       - '!assets/**/test/*.js'
       - '!assets/**/*.test.js'
-      - 'blocks/**'
       - 'storybook/**'
       - '**.scss'
       - '.nvmrc'

.github/workflows/visual-regression.yml

@@ -13,7 +13,6 @@ on:
       - '!assets/**/__tests__/**/*.js'
       - '!assets/**/test/*.js'
       - '!assets/**/*.test.js'
-      - 'blocks/**'
       - '**.stories.js'
       - 'tests/backstop/**'
       - 'storybook/**'

.github/workflows/zips.yml

@@ -15,7 +15,6 @@ on:
       - '!assets/**/__tests__/**/*.js'
       - '!assets/**/test/*.js'
       - '!assets/**/*.test.js'
-      - 'blocks/**'
       - 'includes/**'
       - 'google-site-kit.php'
       - 'scoper.inc.php'
@@ -42,7 +41,6 @@ on:
       - '!assets/**/__tests__/**/*.js'
       - '!assets/**/test/*.js'
       - '!assets/**/*.test.js'
-      - 'blocks/**'
       - 'includes/**'
       - 'google-site-kit.php'
       - 'scoper.inc.php'
@@ -108,6 +106,11 @@ jobs:
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
+      # nvm@7 is the minimum version required for npm workspace support.
+      # This is needed to prevent js lint failures due to module resolution to the workspace packages.
+      # This can be removed once our node base version comes with nvm@7 or greater.
+      - name: Install npm Globally
+        run: npm run install-global-npm
       - name: npm install
         run: |
           npm ci

blocks/reader-revenue-manager/block-editor-plugin/SettingPanel.js assets/blocks/reader-revenue-manager/block-editor-plugin/SettingPanel.js

@@ -26,7 +26,7 @@ import { PluginDocumentSettingPanel as EditorSettingPanel } from '@wordpress-cor
 /**
  * Internal dependencies
  */
-import GoogleLogoIcon from '../../../assets/svg/graphics/logo-g.svg';
+import GoogleLogoIcon from '../../../svg/graphics/logo-g.svg';
 import SettingsForm from './SettingsForm';
 
 export default function SettingPanel() {

blocks/reader-revenue-manager/block-editor-plugin/SettingsForm.js assets/blocks/reader-revenue-manager/block-editor-plugin/SettingsForm.js

@@ -27,7 +27,7 @@ import { useState } from '@wordpress-core/element';
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants';
+import { MODULES_READER_REVENUE_MANAGER } from '../../../js/modules/reader-revenue-manager/datastore/constants';
 import { CORE_EDITOR } from '../common/constants';
 
 const { select, dispatch } = Data;

blocks/reader-revenue-manager/block-editor-plugin/editor-styles.scss assets/blocks/reader-revenue-manager/block-editor-plugin/editor-styles.scss

@@ -25,10 +25,10 @@ import { registerPlugin } from '@wordpress-core/plugins';
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import { CORE_MODULES } from '../../../assets/js/googlesitekit/modules/datastore/constants';
-import { CORE_USER } from '../../../assets/js/googlesitekit/datastore/user/constants';
+import { CORE_MODULES } from '../../../js/googlesitekit/modules/datastore/constants';
+import { CORE_USER } from '../../../js/googlesitekit/datastore/user/constants';
 import { CORE_EDIT_SITE } from '../common/constants';
-import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants';
+import { MODULES_READER_REVENUE_MANAGER } from '../../../js/modules/reader-revenue-manager/datastore/constants';
 import SettingPanel from './SettingPanel';
 
 const { select, resolveSelect } = Data;

blocks/reader-revenue-manager/block-editor-plugin/index.js assets/blocks/reader-revenue-manager/block-editor-plugin/index.js

@@ -35,16 +35,15 @@ jest.mock( '@wordpress-core/editor', () => ( {} ), {
 jest.mock( '@wordpress-core/components', () => ( {} ), {
 	virtual: true,
 } );
-jest.mock( '@wordpress-core/editor', () => ( {} ), { virtual: true } );
 jest.mock( '@wordpress-core/element', () => ( {} ), { virtual: true } );
 
 import Data from 'googlesitekit-data';
 import SettingPanel from './SettingPanel';
-import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants';
-import { registerStore as registerCoreModulesStore } from '../../../assets/js/googlesitekit/modules';
-import { registerStore as registerCoreUserStore } from '../../../assets/js/googlesitekit/datastore/user';
-import { registerStore as registerReaderRevenueManagerStore } from '../../../assets/js/modules/reader-revenue-manager/datastore';
-import { provideModules, provideUserInfo } from '../../../tests/js/utils';
+import { MODULES_READER_REVENUE_MANAGER } from '../../../js/modules/reader-revenue-manager/datastore/constants';
+import { registerStore as registerCoreModulesStore } from '../../../js/googlesitekit/modules';
+import { registerStore as registerCoreUserStore } from '../../../js/googlesitekit/datastore/user';
+import { registerStore as registerReaderRevenueManagerStore } from '../../../js/modules/reader-revenue-manager/datastore';
+import { provideModules, provideUserInfo } from '../../../../tests/js/utils';
 import { registerPlugin } from '@wordpress-core/plugins';
 import { registerReaderRevenueManagerPlugin } from './plugin-registration';
 

blocks/reader-revenue-manager/block-editor-plugin/plugin-registration.js assets/blocks/reader-revenue-manager/block-editor-plugin/plugin-registration.js

@@ -33,8 +33,8 @@ import { useSelect } from '@wordpress-core/data';
 import { select, resolveSelect } from 'googlesitekit-data';
 import EditorButton from './EditorButton';
 import { CORE_EDITOR } from './constants';
-import { CORE_MODULES } from '../../../assets/js/googlesitekit/modules/datastore/constants';
-import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants';
+import { CORE_MODULES } from '../../../js/googlesitekit/modules/datastore/constants';
+import { MODULES_READER_REVENUE_MANAGER } from '../../../js/modules/reader-revenue-manager/datastore/constants';
 import { getNoticeAndDisabled } from './button-edit-utils';
 
 /**

blocks/reader-revenue-manager/block-editor-plugin/plugin-registration.test.js assets/blocks/reader-revenue-manager/block-editor-plugin/plugin-registration.test.js

@@ -23,7 +23,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import GoogleLogoIcon from '../../../assets/svg/graphics/logo-g.svg';
+import GoogleLogoIcon from '../../../svg/graphics/logo-g.svg';
 
 export default function EditorButton( { children, disabled } ) {
 	return (

blocks/reader-revenue-manager/common/ButtonEdit.js assets/blocks/reader-revenue-manager/common/ButtonEdit.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import "../../../assets/sass/config/variables";
+@import "../../../sass/config/variables";
 
 // Styles copied over from the actual inline button.
 .googlesitekit-blocks-reader-revenue-manager-button {

blocks/reader-revenue-manager/common/EditorButton.js assets/blocks/reader-revenue-manager/common/EditorButton.js

@@ -26,7 +26,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { select } from 'googlesitekit-data';
 import { ButtonEdit } from '../common';
-import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants';
+import { MODULES_READER_REVENUE_MANAGER } from '../../../js/modules/reader-revenue-manager/datastore/constants';
 
 /**
  * Contribute with Google Block Edit component.

blocks/reader-revenue-manager/common/button-edit-utils.js assets/blocks/reader-revenue-manager/common/button-edit-utils.js

@@ -23,9 +23,9 @@ import { registerBlockType } from '@wordpress-core/blocks';
  * Internal dependencies
  */
 import { select, resolveSelect } from 'googlesitekit-data';
-import { CORE_MODULES } from '../../../assets/js/googlesitekit/modules/datastore/constants';
-import { CORE_USER } from '../../../assets/js/googlesitekit/datastore/user/constants';
-import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants';
+import { CORE_MODULES } from '../../../js/googlesitekit/modules/datastore/constants';
+import { CORE_USER } from '../../../js/googlesitekit/datastore/user/constants';
+import { MODULES_READER_REVENUE_MANAGER } from '../../../js/modules/reader-revenue-manager/datastore/constants';
 import { CORE_EDIT_SITE } from '../common/constants';
 import Edit from './Edit';
 import metadata from './block.json';

blocks/reader-revenue-manager/common/button-edit-utils.test.js assets/blocks/reader-revenue-manager/common/button-edit-utils.test.js

@@ -26,7 +26,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { select } from 'googlesitekit-data';
 import { ButtonEdit } from '../common';
-import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants';
+import { MODULES_READER_REVENUE_MANAGER } from '../../../js/modules/reader-revenue-manager/datastore/constants';
 
 /**
  * Subscribe with Google Block Edit component.

blocks/reader-revenue-manager/common/constants.js assets/blocks/reader-revenue-manager/common/constants.js

@@ -23,9 +23,9 @@ import { registerBlockType } from '@wordpress-core/blocks';
  * Internal dependencies
  */
 import { select, resolveSelect } from 'googlesitekit-data';
-import { CORE_MODULES } from '../../../assets/js/googlesitekit/modules/datastore/constants';
-import { CORE_USER } from '../../../assets/js/googlesitekit/datastore/user/constants';
-import { MODULES_READER_REVENUE_MANAGER } from '../../../assets/js/modules/reader-revenue-manager/datastore/constants';
+import { CORE_MODULES } from '../../../js/googlesitekit/modules/datastore/constants';
+import { CORE_USER } from '../../../js/googlesitekit/datastore/user/constants';
+import { MODULES_READER_REVENUE_MANAGER } from '../../../js/modules/reader-revenue-manager/datastore/constants';
 import { CORE_EDIT_SITE } from '../common/constants';
 import Edit from './Edit';
 import metadata from './block.json';

blocks/reader-revenue-manager/common/editor-styles.scss assets/blocks/reader-revenue-manager/common/editor-styles.scss

@@ -0,0 +1,131 @@
+{
+	"scripts": {
+		"build": "npm run build:production",
+		"prebuild:dev": "npm run remove-dist",
+		"build:dev": "webpack --mode=development --devtool cheap-module-eval-source-map --output-pathinfo",
+		"prebuild:production": "npm run remove-dist",
+		"build:production": "webpack --mode=production",
+		"build:test": "npm run build:production -- --include-tests",
+		"watch": "npm run build:dev -- --watch",
+		"remove-dist": "rimraf ../dist"
+	},
+	"browserslist": [
+		"extends @wordpress/browserslist-config"
+	],
+	"dependencies": {
+		"@lit-labs/react": "^1.2.0",
+		"@material-ui/core": "^4.11.4",
+		"@material/button": "^2.3.0",
+		"@material/checkbox": "^2.3.0",
+		"@material/dialog": "^2.3.0",
+		"@material/form-field": "^2.3.0",
+		"@material/layout-grid": "^0.41.0",
+		"@material/linear-progress": "^1.1.0",
+		"@material/list": "^2.3.0",
+		"@material/menu": "^2.3.0",
+		"@material/radio": "^2.3.0",
+		"@material/react-card": "^0.15.0",
+		"@material/react-chips": "^0.15.0",
+		"@material/react-dialog": "^0.15.0",
+		"@material/react-select": "^0.15.0",
+		"@material/react-tab-bar": "^0.15.0",
+		"@material/react-text-field": "^0.15.0",
+		"@material/ripple": "^2.3.0",
+		"@material/select": "^2.3.1",
+		"@material/switch": "^2.3.0",
+		"@material/textfield": "^2.3.1",
+		"@material/theme": "^1.1.0",
+		"@material/web": "^1.0.0-pre.9",
+		"@reach/combobox": "^0.10.5",
+		"@react-hook/event": "^1.2.1",
+		"@react-hook/merged-ref": "^1.3.0",
+		"@react-hook/throttle": "^2.2.0",
+		"@wordpress/api-fetch": "^3.18.0",
+		"@wordpress/compose": "^3.25.3",
+		"@wordpress/data": "^4.27.3",
+		"@wordpress/dom-ready": "^2.10.0",
+		"@wordpress/element": "^2.20.3",
+		"@wordpress/i18n": "^3.14.0",
+		"@wordpress/icons": "^2.9.0",
+		"@wordpress/keycodes": "^3.2.4",
+		"@wordpress/url": "^3.1.1",
+		"classnames": "^2.2.6",
+		"clipboard-copy": "^3.1.0",
+		"compare-versions": "^3.6.0",
+		"dompurify": "^2.5.8",
+		"focus-trap-react": "^10.0.0",
+		"immer": "^9.0.15",
+		"intersection-observer": "^0.12.0",
+		"invariant": "^2.2.4",
+		"just-detect-adblock": "^1.1.0",
+		"lodash": "^4.17.21",
+		"md5": "^2.2.1",
+		"memize": "^1.1.0",
+		"prop-types": "^15.7.2",
+		"psl": "^1.8.0",
+		"punycode": "^2.1.1",
+		"query-string": "^7.0.1",
+		"react": "^16.14.0",
+		"react-dom": "^16.14.0",
+		"react-google-charts": "^3.0.15",
+		"react-joyride": "^2.9.3",
+		"react-router-dom": "^5.2.0",
+		"react-use": "^15.3.4",
+		"react-use-observer": "^2.2.4",
+		"use-memo-one": "^1.1.2"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.14.8",
+		"@babel/plugin-transform-runtime": "^7.10.4",
+		"@babel/preset-react": "^7.10.4",
+		"@svgr/webpack": "^5.4.0",
+		"@wordpress/babel-preset-default": "^4.17.0",
+		"@wordpress/browserslist-config": "^5.40.0",
+		"@wordpress/eslint-plugin": "^7.1.0",
+		"@wordpress/prettier-config": "^2.0",
+		"@wordpress/stylelint-config": "^21.0.0",
+		"autoprefixer": "^9.8.5",
+		"babel-loader": "^8.1.0",
+		"circular-dependency-plugin": "^5.2.0",
+		"copy-webpack-plugin": "^6.4.1",
+		"create-file-webpack": "^1.0.2",
+		"css-loader": "^3.6.0",
+		"cssnano": "^4.1.10",
+		"eslint": "^7.32.0",
+		"eslint-import-resolver-alias": "^1.1.2",
+		"eslint-plugin-filenames": "^1.3.2",
+		"eslint-plugin-import": "^2.25.3",
+		"eslint-plugin-jsdoc": "^30.7.13",
+		"eslint-plugin-lodash": "^7.4.0",
+		"eslint-plugin-react-hooks": "^4.2.0",
+		"eslint-plugin-sitekit": "file:../packages/eslint-plugin",
+		"eslint-scope": "^5.1.0",
+		"eslint-webpack-plugin": "^2.5.1",
+		"glob-to-regexp": "^0.4.1",
+		"google-pax-sdk": "1.1.0",
+		"mini-css-extract-plugin": "^1.2.1",
+		"natives": "^1.1.6",
+		"patch-package": "^8.0.0",
+		"postcss": "^8.4.31",
+		"postcss-import-url": "^7.0.0",
+		"postcss-loader": "^4.0.0",
+		"postcss-preset-env": "^9.5.11",
+		"prettier": "npm:[email protected]",
+		"rimraf": "^3.0.2",
+		"sass": "^1.30.0",
+		"sass-loader": "^9.0.2",
+		"semver-compare": "^1.0.0",
+		"semver-regex": "^3.1.4",
+		"stylelint": "^14.11.0",
+		"stylelint-config-standard-scss": "^5.0.0",
+		"stylelint-declaration-strict-value": "^1.9.0",
+		"stylelint-order": "^5.0.0",
+		"stylelint-scss": "^4.3.0",
+		"terser-webpack-plugin": "^3.0.6",
+		"webpack": "^4.43.0",
+		"webpack-bundle-analyzer": "^4.6.1",
+		"webpack-cli": "^3.3.12",
+		"webpack-manifest-plugin": "^2.2.0",
+		"webpackbar": "^4.0.0"
+	}
+}

blocks/reader-revenue-manager/common/index.js assets/blocks/reader-revenue-manager/common/index.js

@@ -19,7 +19,7 @@
 /**
  * Internal dependencies
  */
-const { createRules } = require( './webpack/common' );
+const { createRules } = require( '../webpack/common' );
 const adminCssConfig = require( './webpack/adminCss.config' );
 const basicModulesConfig = require( './webpack/basicModules.config' );
 const frontendModules = require( './webpack/frontendModules.config' );

blocks/reader-revenue-manager/contribute-with-google/Edit.js assets/blocks/reader-revenue-manager/contribute-with-google/Edit.js

@@ -26,15 +26,18 @@ const WebpackBar = require( 'webpackbar' );
 /**
  * Internal dependencies
  */
-const { manifestArgs } = require( './common' );
+const { rootDir, manifestArgs } = require( '../../webpack/common' );
 
 module.exports = ( mode ) => ( {
 	entry: {
-		'googlesitekit-admin-css': './assets/sass/admin.scss',
-		'googlesitekit-adminbar-css': './assets/sass/adminbar.scss',
-		'googlesitekit-wp-dashboard-css': './assets/sass/wpdashboard.scss',
+		'googlesitekit-admin-css': './sass/admin.scss',
+		'googlesitekit-adminbar-css': './sass/adminbar.scss',
+		'googlesitekit-wp-dashboard-css': './sass/wpdashboard.scss',
 		'googlesitekit-authorize-application-css':
-			'./assets/sass/authorize-application.scss',
+			'./sass/authorize-application.scss',
+	},
+	output: {
+		path: rootDir + '/dist',
 	},
 	module: {
 		rules: [
@@ -49,7 +52,7 @@ module.exports = ( mode ) => ( {
 						options: {
 							implementation: require( 'sass' ),
 							sassOptions: {
-								includePaths: [ 'node_modules' ],
+								includePaths: [ rootDir + '/node_modules' ],
 							},
 						},
 					},

blocks/reader-revenue-manager/contribute-with-google/block.json assets/blocks/reader-revenue-manager/contribute-with-google/block.json

@@ -31,14 +31,13 @@ const {
 	externals,
 	resolve,
 	rules,
-} = require( './common' );
+} = require( '../../webpack/common' );
 
 module.exports = ( mode ) => ( {
 	entry: {
-		'googlesitekit-i18n': './assets/js/googlesitekit-i18n.js',
+		'googlesitekit-i18n': './js/googlesitekit-i18n.js',
 		// Analytics advanced tracking script to be injected in the frontend.
-		'analytics-advanced-tracking':
-			'./assets/js/analytics-advanced-tracking.js',
+		'analytics-advanced-tracking': './js/analytics-advanced-tracking.js',
 	},
 	externals,
 	output: {