Consume monorepo packages without building them

apps/full-site-editing/package.json

@@ -85,8 +85,8 @@
 		"prebuild": "check-npm-client && yarn run clean",
 		"predev": "check-npm-client && yarn run clean",
 		"sync:newspack-blocks": "check-npm-client && ./bin/sync-newspack-blocks.sh",
-		"wpcom-sync": "check-npm-client && ./bin/wpcom-watch-and-sync.sh",
-		"prepare": "check-npm-client && yarn run sync:newspack-blocks --nodemodules"
+		"build:sync-newspack-blocks": "check-npm-client && yarn run sync:newspack-blocks --nodemodules",
+		"wpcom-sync": "check-npm-client && ./bin/wpcom-watch-and-sync.sh"
 	},
 	"dependencies": {
 		"@automattic/calypso-build": "*",

apps/notifications/package.json

@@ -19,7 +19,7 @@
 	"scripts": {
 		"clean": "check-npm-client && npx rimraf dist",
 		"prebuild": "check-npm-client && yarn run clean",
-		"build": "check-npm-client && calypso-build --config='./webpack.config.js'"
+		"build": "check-npm-client && calypso-build --config='./webpack.config.js' --display errors-only"
 	},
 	"dependencies": {
 		"@automattic/calypso-color-schemes": "^2.1.1",

apps/notifications/webpack.config.js

@@ -52,6 +52,10 @@ function getWebpackConfig(
 
 	return {
 		...webpackConfig,
+		resolve: {
+			...webpackConfig.resolve,
+			mainFields: [ 'calypso:main', 'browser', 'module', 'main' ],
+		},
 		plugins: [
 			...webpackConfig.plugins,
 			new HtmlWebpackPlugin( {

client/webpack.config.js

@@ -232,6 +232,7 @@ const webpackConfig = {
 	},
 	resolve: {
 		extensions: [ '.json', '.js', '.jsx', '.ts', '.tsx' ],
+		mainFields: [ 'calypso:main', 'browser', 'module', 'main' ],
 		modules: [ __dirname, 'node_modules' ],
 		alias: Object.assign(
 			{

client/webpack.config.node.js

@@ -19,7 +19,6 @@ const config = require( './server/config' );
 const bundleEnv = config( 'env' );
 const { workerCount } = require( './webpack.common' );
 const TranspileConfig = require( '@automattic/calypso-build/webpack/transpile' );
-const nodeExternals = require( 'webpack-node-externals' );
 const FileConfig = require( '@automattic/calypso-build/webpack/file-loader' );
 
 /**
@@ -43,20 +42,9 @@ const commitSha = process.env.hasOwnProperty( 'COMMIT_SHA' ) ? process.env.COMMI
  */
 function getExternals() {
 	return [
-		// Don't bundle any node_modules, both to avoid a massive bundle, and problems
-		// with modules that are incompatible with webpack bundling.
-		//
-		nodeExternals( {
-			whitelist: [
-				// `@automattic/components` is forced to be webpack-ed because it has SCSS and other
-				// non-JS asset imports that couldn't be processed by Node.js at runtime.
-				'@automattic/components',
-
-				// Ensure that file-loader files imported from packages in node_modules are
-				// _not_ externalized and can be processed by the fileLoader.
-				fileLoader.test,
-			],
-		} ),
+		'webpack',
+		'webpack-dev-middleware',
+		'webpack-hot-middleware',
 		// Some imports should be resolved to runtime `require()` calls, with paths relative
 		// to the path of the `build/bundle.js` bundle.
 		{
@@ -109,6 +97,7 @@ const webpackConfig = {
 	},
 	resolve: {
 		extensions: [ '.json', '.js', '.jsx', '.ts', '.tsx' ],
+		mainFields: [ 'calypso:main', 'module', 'main' ],
 		modules: [ __dirname, path.join( __dirname, 'extensions' ), 'node_modules' ],
 		alias: {
 			config: 'server/config',
@@ -132,6 +121,9 @@ const webpackConfig = {
 			BUILD_TIMESTAMP: JSON.stringify( new Date().toISOString() ),
 			COMMIT_SHA: JSON.stringify( commitSha ),
 			'process.env.NODE_ENV': JSON.stringify( bundleEnv ),
+			// The `formidable` package (used by `superagent`) contains conditional code that hijacks
+			// the `require` function. That breaks webpack.
+			'global.GENTLY': false,
 		} ),
 		new webpack.NormalModuleReplacementPlugin(
 			/^my-sites[/\\]themes[/\\]theme-upload$/,

package.json

@@ -56,7 +56,7 @@
 		"autoprefixer": "check-npm-client && postcss -u autoprefixer -r --no-map --config packages/calypso-build/postcss.config.js",
 		"postcss": "check-npm-client && postcss -r --config packages/calypso-build/postcss.config.js",
 		"prebuild": "check-npm-client && yarn run install-if-deps-outdated",
-		"build": "check-npm-client && yarn run build-static && yarn run build-packages && yarn run build-css && run-p -s build-devdocs:* && run-p -s build-server build-client-if-prod build-client-if-desktop",
+		"build": "check-npm-client && yarn run build-static && yarn run build-css && run-p -s build-devdocs:* && run-p -s build-server build-client-if-prod build-client-if-desktop",
 		"build-css": "check-npm-client && run-p -s build-css:*",
 		"build-css:directly": "check-npm-client && node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --include-path client client/assets/stylesheets/directly.scss public/directly.css --output-style compressed && yarn run -s postcss public/directly.css",
 		"build-css:editor": "check-npm-client && node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --include-path client client/assets/stylesheets/editor.scss public/editor.css --output-style compressed && yarn run -s postcss public/editor.css",
@@ -81,8 +81,8 @@
 		"build-client-if-prod": "check-npm-client && node -e \"process.env.CALYPSO_ENV === 'production' && process.exit(1)\" || yarn run build-client-both",
 		"build-client-if-desktop": "check-npm-client && node -e \"(process.env.CALYPSO_ENV === 'desktop' || process.env.CALYPSO_ENV === 'desktop-development') && process.exit(1)\" || yarn run build-client-fallback",
 		"build-client-stats": "check-npm-client && NODE_ENV=production CALYPSO_ENV=production EMIT_STATS=true PROGRESS=true yarn run build-client-evergreen",
-		"build-packages": "check-npm-client && npx lerna run prepare --stream",
-		"build-packages:watch": "check-npm-client && node bin/watch-packages-and-rebuild.js",
+		"prepare-packages": "check-npm-client && npx lerna run prepare --stream",
+		"build-packages": "check-npm-client && npx lerna run build --stream",
 		"build-languages": "check-npm-client && yarn run translate && node bin/build-languages.js",
 		"build-languages-if-enabled": "check-npm-client && node -e \"(process.env.BUILD_TRANSLATION_CHUNKS === 'true' || process.env.ENABLE_FEATURES === 'use-translation-chunks') && process.exit(1)\" || yarn run build-languages",
 		"clean": "check-npm-client && yarn run clean:packages && yarn run clean:build && yarn run clean:public && yarn run clean:translations",
@@ -96,7 +96,7 @@
 		"eslint-branch": "check-npm-client && node bin/eslint-branch.js",
 		"install-if-deps-outdated": "check-npm-client && node bin/install-if-deps-outdated.js",
 		"install-if-no-packages": "check-npm-client && node bin/install-if-no-packages.js",
-		"postinstall": "check-npm-client && yarn run build-packages",
+		"postinstall": "check-npm-client && yarn run prepare-packages",
 		"lint": "check-npm-client && run-s -s lint:*",
 		"lint:config-defaults": "check-npm-client && node bin/validate-config-keys.js",
 		"lint:css": "check-npm-client && stylelint \"**/*.scss\" --syntax scss",
@@ -105,7 +105,7 @@
 		"lint:package-json": "check-npm-client && npmPkgJsonLint './package.json' './client/package.json' './packages/*/package.json' './apps/*/package.json'",
 		"prestart": "check-npm-client && npx check-node-version --package && yarn run install-if-deps-outdated && node bin/welcome.js",
 		"start": "check-npm-client && yarn run -s build",
-		"poststart": "check-npm-client && run-p -s start-build-if-web start-build-if-desktop build-packages:watch",
+		"poststart": "check-npm-client && run-p -s start-build-if-web start-build-if-desktop",
 		"start-fallback": "check-npm-client && DEV_TARGET=fallback yarn run start",
 		"start-jetpack-cloud": "check-npm-client && CALYPSO_ENV=jetpack-cloud-development yarn start",
 		"reformat-files": "check-npm-client && ./node_modules/.bin/prettier --ignore-path .eslintignore --write \"**/*.{js,jsx,json,ts,tsx}\"",

packages/browser-data-collector/package.json

@@ -5,8 +5,9 @@
 	"homepage": "https://github.com/Automattic/wp-calypso",
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic Inc.",
-	"main": "dist/cjs/index",
-	"module": "dist/esm/index",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"calypso:main": "src/index.ts",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Automattic/wp-calypso.git",
@@ -18,8 +19,7 @@
 	},
 	"scripts": {
 		"clean": "check-npm-client && npx rimraf dist \"../../.tsc-cache/packages__browser-data-collector*\"",
-		"prepublish": "check-npm-client && yarn run clean",
-		"prepare": "check-npm-client && tsc --project ./tsconfig.json && tsc --project ./tsconfig-cjs.json",
+		"build": "check-npm-client && tsc --project ./tsconfig.json && tsc --project ./tsconfig-cjs.json",
 		"watch": "check-npm-client && tsc --project ./tsconfig.json --watch"
 	},
 	"dependencies": {

packages/calypso-analytics/package.json

@@ -6,8 +6,9 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic Inc.",
 	"sideEffects": true,
-	"main": "dist/cjs/index",
-	"module": "dist/esm/index",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"calypso:main": "src/index.ts",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Automattic/wp-calypso.git",
@@ -26,8 +27,7 @@
 	},
 	"scripts": {
 		"clean": "check-npm-client && npx rimraf dist \"../../.tsc-cache/packages__calypso-analytics*\"",
-		"prepublish": "check-npm-client && yarn run clean",
-		"prepare": "check-npm-client && tsc --project ./tsconfig.json && tsc --project ./tsconfig-cjs.json",
+		"build": "check-npm-client && tsc --project ./tsconfig.json && tsc --project ./tsconfig-cjs.json",
 		"watch": "check-npm-client && tsc --project ./tsconfig.json --watch"
 	},
 	"dependencies": {

packages/calypso-build/bin/copy-assets.js

@@ -21,6 +21,7 @@ const copyOptions = {
 		'**/*.png',
 		'**/*.svg',
 		'**/*.scss',
+		'**/package.json',
 		'!**/test/**',
 	],
 	concurrency: 127,

packages/calypso-build/jest-preset.js

@@ -5,6 +5,7 @@ const path = require( 'path' );
 const { defaults } = require( 'jest-config' );
 
 module.exports = {
+	resolver: '@automattic/calypso-build/jest/calypso-resolver',
 	setupFilesAfterEnv: [
 		path.join( __dirname, 'jest', 'setup.js' ),
 		require.resolve( 'jest-enzyme' ),

packages/calypso-build/jest/calypso-resolver.js

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+const fs = require( 'fs' ); // eslint-disable-line import/no-nodejs-modules
+const resolve = require( 'resolve' );
+
+module.exports = function calypsoResolver( path, options ) {
+	const result = resolve.sync( path, {
+		basedir: options.basedir,
+		extensions: options.extensions,
+		isDirectory,
+		isFile,
+		moduleDirectory: options.moduleDirectory,
+		paths: options.paths,
+		preserveSymlinks: false,
+		realpathSync,
+		packageFilter,
+	} );
+
+	return realpathSync( result );
+};
+
+function packageFilter( pkg ) {
+	const calypsoMainField = pkg[ 'calypso:main' ];
+	if ( calypsoMainField ) {
+		pkg.main = calypsoMainField;
+	}
+	return pkg;
+}
+
+const checkedPaths = new Map();
+function statSyncCached( path ) {
+	const result = checkedPaths.get( path );
+	if ( result !== undefined ) {
+		return result;
+	}
+
+	let stat;
+	try {
+		stat = fs.statSync( path );
+	} catch ( e ) {
+		if ( ! ( e && ( e.code === 'ENOENT' || e.code === 'ENOTDIR' ) ) ) {
+			throw e;
+		}
+	}
+
+	if ( stat ) {
+		if ( stat.isFile() || stat.isFIFO() ) {
+			checkedPaths.set( path, 'f' );
+			return 'f';
+		} else if ( stat.isDirectory() ) {
+			checkedPaths.set( path, 'd' );
+			return 'd';
+		}
+	}
+
+	checkedPaths.set( path, 'o' );
+	return 'o';
+}
+
+const checkedRealpathPaths = new Map();
+function realpathCached( path ) {
+	let result = checkedRealpathPaths.get( path );
+
+	if ( result !== undefined ) {
+		return result;
+	}
+
+	result = path;
+	try {
+		result = fs.realpathSync.native( path );
+	} catch ( error ) {
+		if ( error.code !== 'ENOENT' ) {
+			throw error;
+		}
+	}
+
+	checkedRealpathPaths.set( path, result );
+
+	if ( path !== result ) {
+		// also cache the result in case it's ever referenced directly - no reason to `realpath` that as well
+		checkedRealpathPaths.set( result, result );
+	}
+
+	return result;
+}
+
+function isFile( file ) {
+	return statSyncCached( file ) === 'f';
+}
+
+function isDirectory( dir ) {
+	return statSyncCached( dir ) === 'd';
+}
+
+function realpathSync( file ) {
+	return realpathCached( file );
+}

packages/calypso-build/package.json

@@ -64,6 +64,7 @@
 		"postcss-custom-properties": "^9.1.1",
 		"postcss-loader": "^3.0.0",
 		"recursive-copy": "^2.0.10",
+		"resolve": "^1.17.0",
 		"sass-loader": "^8.0.0",
 		"terser-webpack-plugin": "^3.0.1",
 		"thread-loader": "^2.1.3",

packages/components/package.json

@@ -7,6 +7,7 @@
 	"author": "Automattic Inc.",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
+	"calypso:main": "src/index.js",
 	"sideEffects": [
 		"*.css",
 		"*.scss"
@@ -41,7 +42,6 @@
 	},
 	"scripts": {
 		"clean": "check-npm-client && npx rimraf dist \"../../.tsc-cache/packages__components*\"",
-		"prepublish": "check-npm-client && yarn run clean",
-		"prepare": "check-npm-client && transpile && tsc && copy-assets"
+		"build": "check-npm-client && transpile && tsc && copy-assets"
 	}
 }

packages/composite-checkout/package.json

@@ -4,11 +4,11 @@
 	"description": "A checkout component for Automattic brands",
 	"main": "dist/cjs/public-api.js",
 	"module": "dist/esm/public-api.js",
+	"calypso:main": "src/public-api.js",
 	"sideEffects": false,
 	"scripts": {
 		"clean": "check-npm-client && npx rimraf dist",
-		"prepublish": "check-npm-client && yarn run clean",
-		"prepare": "check-npm-client && transpile"
+		"build": "check-npm-client && transpile"
 	},
 	"files": [
 		"dist",

packages/data-stores/package.json

@@ -7,6 +7,7 @@
 	"author": "Automattic Inc.",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
+	"calypso:main": "src/index.ts",
 	"sideEffects": false,
 	"repository": {
 		"type": "git",
@@ -27,8 +28,7 @@
 	"types": "dist/types",
 	"scripts": {
 		"clean": "check-npm-client && npx rimraf dist \"../../.tsc-cache/packages__data-stores*\"",
-		"prepare": "check-npm-client && tsc --project ./tsconfig.json && tsc --project ./tsconfig-cjs.json",
-		"prepublish": "check-npm-client && yarn run clean",
+		"build": "check-npm-client && tsc --project ./tsconfig.json && tsc --project ./tsconfig-cjs.json",
 		"watch": "check-npm-client && tsc --project ./tsconfig.json --watch"
 	},
 	"dependencies": {

packages/data-stores/src/auth/index.ts

@@ -17,7 +17,7 @@ import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 import { controls as wpcomRequestControls } from '../wpcom-request-controls';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 export function register( config: ActionsConfig ): typeof STORE_KEY {

packages/data-stores/src/domain-suggestions/index.ts

@@ -15,7 +15,7 @@ import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 import { controls } from '../wpcom-request-controls';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 interface StoreConfiguration {

packages/data-stores/src/site/index.ts

@@ -16,7 +16,7 @@ import type { WpcomClientCredentials } from '../shared-types';
 import { controls } from '../wpcom-request-controls';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 export function register( clientCreds: WpcomClientCredentials ): typeof STORE_KEY {

packages/data-stores/src/user/index.ts

@@ -16,7 +16,7 @@ import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 import type { WpcomClientCredentials } from '../shared-types';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 export function register( clientCreds: WpcomClientCredentials ): typeof STORE_KEY {

packages/data-stores/src/verticals-templates/index.ts

@@ -15,7 +15,7 @@ import * as selectors from './selectors';
 import type { DispatchFromMap, SelectFromMap } from '../mapped-types';
 
 export * from './types';
-export { State };
+export type { State };
 
 let isRegistered = false;
 export function register(): typeof STORE_KEY {