Enable instant search build in package

projects/packages/search/.gitignore

@@ -1 +1,4 @@
+.cache/
+build/
+node_modules/
 wordpress

projects/packages/search/babel.config.js

@@ -0,0 +1,43 @@
+/**
+ * A babel preset wrapper to set @babel/plugin-transform-runtime's absoluteRuntime to true.
+ *
+ * @param {string|Function} preset - The preset being wrapped.
+ * @returns {Function} The wrapped preset-function.
+ */
+function presetOverrideBabelPluginTransformRuntimeAbsoluteRuntime(preset) {
+	if ('string' === typeof preset) {
+		preset = require(preset);
+	}
+	return (api, opts) => {
+		const ret = preset(api, opts);
+		// Override the configuration for @babel/plugin-transform-runtime to set absoluteRuntime true.
+		// This prevents it from blowing up when other workspace projects are symlinked.
+		ret.plugins.forEach(p => {
+			if (Array.isArray(p) && /[\\/]@babel[\\/]plugin-transform-runtime[\\/]/.test(p[0])) {
+				p[1].absoluteRuntime = true;
+			}
+		});
+		return ret;
+	};
+}
+
+const config = {
+	presets: [
+		presetOverrideBabelPluginTransformRuntimeAbsoluteRuntime(
+			'@automattic/calypso-build/babel/default'
+		),
+	],
+	plugins: ['@babel/plugin-proposal-nullish-coalescing-operator'],
+	overrides: [
+		{
+			test: './src/instant-search',
+			presets: [
+				presetOverrideBabelPluginTransformRuntimeAbsoluteRuntime(
+					'./src/instant-search/babel.config.js'
+				),
+			],
+		},
+	],
+};
+
+module.exports = config;

projects/packages/search/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "jetpack-search",
+  "version": "1.0.0-alpha",
+  "description": "Package for Jetpack Search products",
+  "main": "main.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "build-instant": "webpack --config ./webpack.instant.config.js",
+    "clean": "rm -rf build/*",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Automattic/jetpack-search.git"
+  },
+  "author": "Automattic",
+  "license": "GPL-2.0-or-later",
+  "bugs": {
+    "url": "https://github.com/Automattic/jetpack-search/issues"
+  },
+  "homepage": "https://github.com/Automattic/jetpack-search#readme",
+  "engines": {
+    "node": "^14.17.6 || ^16.7.0",
+    "pnpm": "^6.5.0",
+    "yarn": "use pnpm instead - see docs/yarn-upgrade.md"
+  },
+  "dependencies": {
+    "@automattic/color-studio": "2.5.0",
+    "@wordpress/i18n": "4.2.2",
+    "fast-json-stable-stringify": "2.1.0",
+    "lodash": "4.17.21",
+    "photon": "4.0.0",
+    "preact": "10.5.15",
+    "q-flat": "1.0.7",
+    "qss": "2.0.3",
+    "react-redux": "7.2.5",
+    "redux": "4.1.1",
+    "refx": "3.1.1",
+    "strip": "3.0.0",
+    "tiny-lru": "7.0.6"
+  },
+  "devDependencies": {
+    "@automattic/calypso-build": "9.0.0",
+    "@babel/core": "7.15.8",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
+    "@babel/preset-env": "7.15.8",
+    "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "7.15.0",
+    "@size-limit/preset-app": "6.0.3",
+    "@wordpress/dependency-extraction-webpack-plugin": "3.2.1",
+    "postcss": "8.3.11",
+    "size-limit": "6.0.3",
+    "webpack": "5.51.1"
+  }
+}

projects/packages/search/webpack.config.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+const instantSearchConfig = require('./webpack.instant.config');
+
+module.exports = [instantSearchConfig];

projects/packages/search/webpack.helpers.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+const webpack = require( 'webpack' );
+
+/**
+ * Returns an instance of the DefinePlugin that adds color-studio colors as literals.
+ *
+ * @returns {object} DefinePlugin instance.
+ */
+function definePaletteColorsAsStaticVariables() {
+	return new webpack.DefinePlugin( {
+		// Replace palette colors as individual literals in the bundle.
+		PALETTE: ( () => {
+			const colors = require( '@automattic/color-studio' ).colors;
+			const stringifiedColors = {};
+
+			// DefinePlugin replaces the values as unescaped text.
+			// We therefore need to double-quote each value, to ensure it ends up as a string.
+			for ( const color in colors ) {
+				stringifiedColors[ color ] = `"${ colors[ color ] }"`;
+			}
+
+			return stringifiedColors;
+		} )(),
+	} );
+}
+
+module.exports = {
+	definePaletteColorsAsStaticVariables,
+};

projects/packages/search/webpack.instant.config.js

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
+const getBaseWebpackConfig = require('@automattic/calypso-build/webpack.config.js');
+const path = require('path');
+const {
+	defaultRequestToExternal,
+	defaultRequestToHandle,
+} = require('@wordpress/dependency-extraction-webpack-plugin/lib/util');
+const { definePaletteColorsAsStaticVariables } = require('./webpack.helpers');
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+/**
+ * Determines if the module import request should be externalized.
+ *
+ * @param {string} request - Requested module
+ * @returns {(string|string[]|undefined)} Script global
+ */
+function requestToExternalForInstantSearch(request) {
+	// Prevent React from being externalized. This ensures that React will be properly aliased to preact/compat.
+	if (request === 'react' || request === 'react-dom') {
+		return;
+	}
+	return defaultRequestToExternal(request);
+}
+
+const baseWebpackConfig = getBaseWebpackConfig(
+	{ WP: false },
+	{
+		entry: {
+			main: path.join(__dirname, 'src/instant-search/loader.js'),
+		},
+		'output-chunk-filename': 'jp-search.chunk-[name].[contenthash:20].min.js',
+		'output-filename': 'jp-search-[name].bundle.js',
+		'output-path': path.join(__dirname, 'build/instant-search'),
+		// Calypso-build defaults this to "window", which breaks things if no library.name is set.
+		'output-library-target': '',
+	}
+);
+
+const instantSearchConfig = {
+	...baseWebpackConfig,
+	resolve: {
+		...baseWebpackConfig.resolve,
+		alias: {
+			...baseWebpackConfig.resolve.alias,
+			react: 'preact/compat',
+			'react-dom/test-utils': 'preact/test-utils',
+			'react-dom': 'preact/compat', // Must be aliased after test-utils
+			fs: false,
+		},
+		modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'],
+		// We want the compiled version, not the "calypso:src" sources.
+		mainFields: baseWebpackConfig.resolve.mainFields.filter(entry => 'calypso:src' !== entry),
+	},
+	devtool: isDevelopment ? 'source-map' : false,
+	plugins: [
+		...baseWebpackConfig.plugins,
+		// Replace 'debug' module with a dummy implementation in production
+		...(isDevelopment
+			? []
+			: [
+					new webpack.NormalModuleReplacementPlugin(
+						/^debug$/,
+						path.resolve(__dirname, 'src/instant-search/lib/dummy-debug')
+					),
+			  ]),
+		new DependencyExtractionWebpackPlugin({
+			injectPolyfill: true,
+			useDefaults: false,
+			requestToExternal: requestToExternalForInstantSearch,
+			requestToHandle: defaultRequestToHandle,
+		}),
+		definePaletteColorsAsStaticVariables(),
+	],
+	optimization: {
+		...baseWebpackConfig.optimization,
+		splitChunks: {
+			cacheGroups: {
+				vendors: false,
+			},
+		},
+		// This optimization sometimes causes webpack to drop `__()` and such.
+		concatenateModules: false,
+	},
+};
+
+// NOTE: tiny-lru publishes non-ES5 as a browser target. It's necessary to let babel-loader transpile this module.
+instantSearchConfig.module.rules[0].exclude = /[\\/]node_modules[\\/](?!(\.pnpm|tiny-lru)[\\/])/;
+
+// Do not try to reassign NODE_ENV during execution. This will raise a warning during build.
+delete instantSearchConfig.plugins[0].definitions['process.env.NODE_ENV'];
+
+module.exports = instantSearchConfig;