@lipemat/js-boilerplate-shared 0.0.1

package/helpers/package-config.js

@@ -0,0 +1,45 @@
+import { resolve } from 'path';
+import { readFileSync, realpathSync } from 'node:fs';
+function readJsonFile(filePath) {
+    return JSON.parse(readFileSync(filePath, 'utf8'));
+}
+const workingDirectory = realpathSync(process.cwd());
+const defaults = {
+    brotliFiles: true,
+    cssTsFiles: true,
+    jsPath: './js',
+    packageDirectory: workingDirectory,
+    shortCssClasses: true,
+    url: 'http://localhost',
+};
+let packageConfig = readJsonFile(resolve(workingDirectory, 'package.json'));
+packageConfig = { ...defaults, ...packageConfig };
+packageConfig.workingDirectory = packageConfig.jsPath !== '' ? resolve(packageConfig.jsPath) : workingDirectory;
+try {
+    const localConfig = readJsonFile(resolve(workingDirectory, './local-config.json'));
+    packageConfig = { ...packageConfig, ...localConfig };
+}
+catch {
+}
+/**
+ * Helper function to get the results of `packageConfig`.
+ *
+ * - Allows mocking the results of `packageConfig` for testing.
+ * - Allows getting the config through a callback instead of an import.
+ */
+export function getPackageConfig() {
+    return { ...packageConfig, ...modifications };
+}
+/**
+ * Modify the `packageConfig` object.
+ *
+ * - Here mainly for testing purposes.
+ */
+let modifications = {};
+export function modifyPackageConfig(additions) {
+    modifications = additions;
+}
+export function resetPackageConfig() {
+    modifications = {};
+}
+//# sourceMappingURL=package-config.js.map

package/helpers/package-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"package-config.js","sourceRoot":"","sources":["package-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,MAAM,CAAC;AAC7B,OAAO,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAEnD,SAAS,YAAY,CAAK,QAAgB;IACzC,OAAO,IAAI,CAAC,KAAK,CAAE,YAAY,CAAE,QAAQ,EAAE,MAAM,CAAE,CAAO,CAAC;AAC5D,CAAC;AAiDD,MAAM,gBAAgB,GAAG,YAAY,CAAE,OAAO,CAAC,GAAG,EAAE,CAAE,CAAC;AACvD,MAAM,QAAQ,GAA2B;IACxC,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,MAAM;IACd,gBAAgB,EAAE,gBAAgB;IAClC,eAAe,EAAE,IAAI;IACrB,GAAG,EAAE,kBAAkB;CACvB,CAAC;AAEF,IAAI,aAAa,GAAkB,YAAY,CAAiB,OAAO,CAAE,gBAAgB,EAAE,cAAc,CAAE,CAAE,CAAC;AAC9G,aAAa,GAAG,EAAC,GAAG,QAAQ,EAAE,GAAG,aAAa,EAAC,CAAC;AAChD,aAAa,CAAC,gBAAgB,GAAG,aAAa,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAE,aAAa,CAAC,MAAM,CAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;AAElH,IAAI,CAAC;IACJ,MAAM,WAAW,GAAG,YAAY,CAA0B,OAAO,CAAE,gBAAgB,EAAE,qBAAqB,CAAE,CAAE,CAAC;IAC/G,aAAa,GAAG,EAAC,GAAG,aAAa,EAAE,GAAG,WAAW,EAAC,CAAC;AACpD,CAAC;AAAC,MAAM,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB;IAC/B,OAAO,EAAC,GAAG,aAAa,EAAE,GAAG,aAAa,EAAC,CAAC;AAC7C,CAAC;AAED;;;;GAIG;AACH,IAAI,aAAa,GAA2B,EAAE,CAAC;AAE/C,MAAM,UAAU,mBAAmB,CAAE,SAAiC;IACrE,aAAa,GAAG,SAAS,CAAC;AAC3B,CAAC;AACD,MAAM,UAAU,kBAAkB;IACjC,aAAa,GAAG,EAAE,CAAC;AACpB,CAAC"}

package/helpers/package-config.ts

@@ -0,0 +1,97 @@
+import {resolve} from 'path';
+import {readFileSync, realpathSync} from 'node:fs';
+
+function readJsonFile<T>( filePath: string ): T {
+	return JSON.parse( readFileSync( filePath, 'utf8' ) ) as T;
+}
+
+export interface PackageConfig {
+	author?: string;
+	brotliFiles: boolean;
+	certificates?: Certificates;
+	combinedJson: boolean;
+	cssTsFiles: boolean;
+	css_folder: string;
+	default: PackageConfig;
+	dependencies: Dependencies;
+	description?: string;
+	devDependencies: Dependencies;
+	getPackageConfig: () => PackageConfig;
+	jsPath: string;
+	license?: string;
+	name?: string;
+	packageDirectory: string;
+	packageManager?: string;
+	resolutions?: Dependencies;
+	scripts: Partial<Scripts>;
+	shortCssClasses: boolean | {
+		js: boolean;
+		pcss: boolean;
+	};
+	url: string;
+	version?: string;
+	workingDirectory: string;
+}
+
+export interface Dependencies {
+	[ name: string ]: string;
+}
+
+export interface Certificates {
+	cert: string;
+	key: string;
+}
+
+export interface Scripts {
+	browserslist: string;
+	dist: string;
+	lint: string;
+	postinstall: string;
+	start: string;
+	test: string;
+}
+
+
+const workingDirectory = realpathSync( process.cwd() );
+const defaults: Partial<PackageConfig> = {
+	brotliFiles: true,
+	cssTsFiles: true,
+	jsPath: './js',
+	packageDirectory: workingDirectory,
+	shortCssClasses: true,
+	url: 'http://localhost',
+};
+
+let packageConfig: PackageConfig = readJsonFile<PackageConfig>( resolve( workingDirectory, 'package.json' ) );
+packageConfig = {...defaults, ...packageConfig};
+packageConfig.workingDirectory = packageConfig.jsPath !== '' ? resolve( packageConfig.jsPath ) : workingDirectory;
+
+try {
+	const localConfig = readJsonFile<Partial<PackageConfig>>( resolve( workingDirectory, './local-config.json' ) );
+	packageConfig = {...packageConfig, ...localConfig};
+} catch {
+}
+
+/**
+ * Helper function to get the results of `packageConfig`.
+ *
+ * - Allows mocking the results of `packageConfig` for testing.
+ * - Allows getting the config through a callback instead of an import.
+ */
+export function getPackageConfig(): PackageConfig {
+	return {...packageConfig, ...modifications};
+}
+
+/**
+ * Modify the `packageConfig` object.
+ *
+ * - Here mainly for testing purposes.
+ */
+let modifications: Partial<PackageConfig> = {};
+
+export function modifyPackageConfig( additions: Partial<PackageConfig> ): void {
+	modifications = additions;
+}
+export function resetPackageConfig(): void {
+	modifications = {};
+}

package/helpers/postcss-config.js

@@ -0,0 +1,135 @@
+import { resolve } from 'path';
+import { existsSync } from 'fs';
+import postcssPresetEnv, {} from 'postcss-preset-env';
+import { getExtensionsConfig } from './config.js';
+import PrettyPlugin from '../lib/postcss-pretty.js';
+import cleanCSS from '../lib/postcss-clean.js';
+import { createRequire } from 'node:module';
+import { getPackageConfig } from './package-config.js';
+import { getBrowsersList } from './browserslist.js';
+const requireModule = createRequire(import.meta.url);
+const packageConfig = getPackageConfig();
+function isPluginsArray(value) {
+    return Array.isArray(value);
+}
+/**
+ * Provide CSS properties and media queries to all postcss plugins.
+ *
+ * If a media-queries files exist, automatically load them.
+ * If CSS variables exist, automatically load them.
+ *
+ * 1. pcss/globals/variables.pcss
+ * 2. js/src/pcss/variables.pcss
+ * 3. pcss/globals/media-queries.pcss
+ * 4. js/src/pcss/media-queries.pcss
+ */
+const externalFiles = [];
+[
+    resolve(packageConfig.packageDirectory, 'pcss/globals/media-queries.pcss'),
+    resolve(packageConfig.packageDirectory, 'pcss/globals/variables.pcss'),
+    resolve(packageConfig.workingDirectory, 'src/pcss/media-queries.pcss'),
+    resolve(packageConfig.workingDirectory, 'src/pcss/variables.pcss'),
+].forEach((possibleFile) => {
+    if (existsSync(possibleFile)) {
+        externalFiles.push(possibleFile);
+    }
+});
+function getPresetEnvConfig() {
+    const presetEnv = {
+        browsers: [...getBrowsersList()],
+        features: {},
+    };
+    // Get a list of included postcss plugins based on the browser list.
+    const processor = postcssPresetEnv(presetEnv);
+    const includedPlugins = processor.plugins.map((plugin) => {
+        return 'postcssPlugin' in plugin ? plugin.postcssPlugin : '';
+    });
+    if ('object' === typeof presetEnv.features && includedPlugins.includes('postcss-focus-visible')) {
+        presetEnv.features['focus-visible-pseudo-class'] = {
+            /**
+             * Fixes `focus-visible` feature for CSS modules.
+             *
+             * Only needed if our browser list includes non-supported browsers
+             * such as Safari 15.3 and below.
+             *
+             * Requires `focus-visible` polyfill to be loaded externally.
+             * Most will often need it site wide on pages, which do and don't use the JS app.
+             *
+             * @link https://unpkg.com/focus-visible@5.2.0/dist/focus-visible.min.js
+             */
+            replaceWith: ':global(.focus-visible)',
+        };
+    }
+    return presetEnv;
+}
+export function assemblePostCssConfig(env) {
+    /**
+     * Put the config together.
+     */
+    const config = {
+        plugins: [
+            requireModule('@csstools/postcss-global-data')({
+                files: externalFiles,
+            }),
+            requireModule('postcss-import')({
+                skipDuplicates: false,
+            }),
+            requireModule('postcss-custom-media'),
+            requireModule('postcss-nested'),
+            postcssPresetEnv(getPresetEnvConfig()),
+            requireModule('postcss-color-mod-function'),
+            requireModule('postcss-sort-media-queries')({
+                onlyTopLevel: true,
+                sort: 'mobile-first',
+                configuration: {
+                    unitlessMqAlwaysFirst: true,
+                },
+            }),
+        ],
+        parser: 'postcss-scss',
+    };
+    if (isPluginsArray(config.plugins)) {
+        if ('production' === env) {
+            // For production, we minify it.
+            config.plugins.push(cleanCSS({
+                level: 2,
+            }));
+        }
+        else {
+            config.plugins.push(PrettyPlugin);
+            config.sourceMap = true;
+        }
+    }
+    return config;
+}
+/**
+ * Return the postcss config merged with any extensions
+ * or local config.
+ *
+ * @see getConfig from @lipemat/js-boilerplate
+ */
+export function getPostCSSConfig(env) {
+    const postCssConfig = assemblePostCssConfig(env);
+    let mergedConfig = { ...postCssConfig, ...getExtensionsConfig('postcss.config', postCssConfig) };
+    try {
+        let localConfig = createRequire(import.meta.url)(resolve(getPackageConfig().packageDirectory, 'config', 'postcss.config'));
+        if ('default' in localConfig) {
+            localConfig = localConfig.default;
+        }
+        if ('function' === typeof localConfig) {
+            mergedConfig = { ...mergedConfig, ...localConfig(mergedConfig) };
+        }
+        else {
+            mergedConfig = { ...mergedConfig, ...localConfig };
+        }
+    }
+    catch (e) {
+        if (e instanceof Error) {
+            if (!('code' in e) || ('MODULE_NOT_FOUND' !== e.code && 'ERR_MODULE_NOT_FOUND' !== e.code)) {
+                console.error(e);
+            }
+        }
+    }
+    return mergedConfig;
+}
+//# sourceMappingURL=postcss-config.js.map

package/helpers/postcss-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"postcss-config.js","sourceRoot":"","sources":["postcss-config.ts"],"names":[],"mappings":"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"}

package/helpers/postcss-config.ts

@@ -0,0 +1,159 @@
+import {resolve} from 'path';
+import {existsSync} from 'fs';
+import postcssPresetEnv, {type pluginOptions} from 'postcss-preset-env';
+import type Processor from 'postcss/lib/processor';
+import {getExtensionsConfig} from './config.js';
+import PrettyPlugin from '../lib/postcss-pretty.js';
+import cleanCSS from '../lib/postcss-clean.js';
+import type {Config, ConfigPlugin} from 'postcss-load-config';
+import type {LoaderContext} from 'webpack';
+import type {Plugin} from 'postcss';
+import {createRequire} from 'node:module';
+import {getPackageConfig} from './package-config.js';
+import {getBrowsersList} from './browserslist.js';
+
+
+export type PostcssConfig = Config & Partial<LoaderContext<Config>> & {
+	plugins: Plugin[];
+	parser: string;
+}
+
+export type ENV = 'development' | 'test' | 'production';
+
+const requireModule = createRequire( import.meta.url );
+const packageConfig = getPackageConfig();
+
+function isPluginsArray( value: ConfigPlugin[] | false ): value is ConfigPlugin[] {
+	return Array.isArray( value );
+}
+
+
+/**
+ * Provide CSS properties and media queries to all postcss plugins.
+ *
+ * If a media-queries files exist, automatically load them.
+ * If CSS variables exist, automatically load them.
+ *
+ * 1. pcss/globals/variables.pcss
+ * 2. js/src/pcss/variables.pcss
+ * 3. pcss/globals/media-queries.pcss
+ * 4. js/src/pcss/media-queries.pcss
+ */
+const externalFiles: string[] = [];
+[
+	resolve( packageConfig.packageDirectory, 'pcss/globals/media-queries.pcss' ),
+	resolve( packageConfig.packageDirectory, 'pcss/globals/variables.pcss' ),
+	resolve( packageConfig.workingDirectory, 'src/pcss/media-queries.pcss' ),
+	resolve( packageConfig.workingDirectory, 'src/pcss/variables.pcss' ),
+].forEach( ( possibleFile: string ) => {
+	if ( existsSync( possibleFile ) ) {
+		externalFiles.push( possibleFile );
+	}
+} );
+
+
+function getPresetEnvConfig(): pluginOptions {
+	const presetEnv: pluginOptions = {
+		browsers: [ ...getBrowsersList( ) ],
+		features: {},
+	};
+
+	// Get a list of included postcss plugins based on the browser list.
+	const processor = postcssPresetEnv( presetEnv ) as Processor;
+	const includedPlugins: string[] = processor.plugins.map( ( plugin: Processor['plugins'][number] ) => {
+		return 'postcssPlugin' in plugin ? plugin.postcssPlugin : '';
+	} );
+
+
+	if ( 'object' === typeof presetEnv.features && includedPlugins.includes( 'postcss-focus-visible' ) ) {
+		presetEnv.features[ 'focus-visible-pseudo-class' ] = {
+			/**
+			 * Fixes `focus-visible` feature for CSS modules.
+			 *
+			 * Only needed if our browser list includes non-supported browsers
+			 * such as Safari 15.3 and below.
+			 *
+			 * Requires `focus-visible` polyfill to be loaded externally.
+			 * Most will often need it site wide on pages, which do and don't use the JS app.
+			 *
+			 * @link https://unpkg.com/focus-visible@5.2.0/dist/focus-visible.min.js
+			 */
+			replaceWith: ':global(.focus-visible)',
+		};
+	}
+	return presetEnv;
+}
+
+
+export function assemblePostCssConfig( env: ENV ): PostcssConfig {
+	/**
+	 * Put the config together.
+	 */
+	const config: PostcssConfig = {
+		plugins: [
+			requireModule( '@csstools/postcss-global-data' )( {
+				files: externalFiles,
+			} ),
+			requireModule( 'postcss-import' )( {
+				skipDuplicates: false,
+			} ),
+			requireModule( 'postcss-custom-media' ),
+			requireModule( 'postcss-nested' ),
+			postcssPresetEnv( getPresetEnvConfig() ),
+			requireModule( 'postcss-color-mod-function' ),
+			requireModule( 'postcss-sort-media-queries' )( {
+				onlyTopLevel: true,
+				sort: 'mobile-first',
+				configuration: {
+					unitlessMqAlwaysFirst: true,
+				},
+			} ),
+		],
+		parser: 'postcss-scss',
+	};
+
+
+	if ( isPluginsArray( config.plugins ) ) {
+		if ( 'production' === env ) {
+			// For production, we minify it.
+			config.plugins.push( cleanCSS( {
+				level: 2,
+			} ) );
+		} else {
+			config.plugins.push( PrettyPlugin );
+			config.sourceMap = true;
+		}
+	}
+	return config;
+}
+
+/**
+ * Return the postcss config merged with any extensions
+ * or local config.
+ *
+ * @see getConfig from @lipemat/js-boilerplate
+ */
+export function getPostCSSConfig( env: ENV ): PostcssConfig {
+	const postCssConfig = assemblePostCssConfig( env );
+	let mergedConfig: PostcssConfig = {...postCssConfig, ...getExtensionsConfig<PostcssConfig>( 'postcss.config', postCssConfig )};
+
+	try {
+		let localConfig = createRequire( import.meta.url )( resolve( getPackageConfig().packageDirectory, 'config', 'postcss.config' ) );
+		if ( 'default' in localConfig ) {
+			localConfig = localConfig.default;
+		}
+
+		if ( 'function' === typeof localConfig ) {
+			mergedConfig = {...mergedConfig, ...localConfig( mergedConfig )};
+		} else {
+			mergedConfig = {...mergedConfig, ...localConfig};
+		}
+	} catch ( e ) {
+		if ( e instanceof Error ) {
+			if ( ! ( 'code' in e ) || ( 'MODULE_NOT_FOUND' !== e.code && 'ERR_MODULE_NOT_FOUND' !== e.code ) ) {
+				console.error( e );
+			}
+		}
+	}
+	return mergedConfig;
+}

package/helpers/wp-externals.js

@@ -0,0 +1,83 @@
+/**
+ * Given a string, returns a new string with dash separators converted to
+ * camel-case equivalent. This is not as aggressive as `_.camelCase`,
+ * which would also upper-case letters following numbers.
+ *
+ * @param {string} slug Input dash-delimited string.
+ *
+ * @return {string} Camel-cased string.
+ */
+const camelCaseDash = (slug) => slug.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+/**
+ * Convert all wp libraries to the global variable, which are
+ * available in WP core when the corresponding libraries are cued.
+ *
+ * @type {{wpExternals: *}}
+ */
+const wpExports = [
+    'a11y',
+    'annotations',
+    'api-fetch',
+    'autop',
+    'blob',
+    'block-directory',
+    'block-editor',
+    'block-library',
+    'block-serialization-default-parser',
+    'blocks',
+    'commands',
+    'components',
+    'compose',
+    'core-data',
+    'data',
+    'data-controls',
+    'date',
+    'deprecated',
+    'dom',
+    'dom-ready',
+    'edit-post',
+    'edit-site',
+    'editor',
+    'element',
+    'escape-html',
+    'hooks',
+    'html-entities',
+    'i18n',
+    'is-shallow-equal',
+    'keyboard-shortcuts',
+    'keycodes',
+    'list-reusable-blocks',
+    'media-utils',
+    'notices',
+    'nux',
+    'plugins',
+    'primitives',
+    'priority-queue',
+    'redux-routine',
+    'reusable-blocks',
+    'rich-text',
+    'server-side-render',
+    'shortcode',
+    'token-list',
+    'url',
+    'utils',
+    'viewport',
+    'warning',
+    'wordcount',
+].reduce((externals, name) => ({
+    ...externals,
+    [`@wordpress/${name}`]: `window.wp?.${camelCaseDash(name)}`,
+}), {
+    lodash: 'lodash',
+    wp: 'wp',
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    'react-refresh/runtime': 'ReactRefreshRuntime',
+    jquery: 'jQuery',
+    tinymce: 'tinymce',
+    moment: 'moment',
+    'react/jsx-runtime': 'ReactJSXRuntime',
+    backbone: 'Backbone',
+});
+export default wpExports;
+//# sourceMappingURL=wp-externals.js.map

package/helpers/wp-externals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wp-externals.js","sourceRoot":"","sources":["wp-externals.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,aAAa,GAAG,CAAE,IAAY,EAAW,EAAE,CAAC,IAAI,CAAC,OAAO,CAAE,WAAW,EAAE,CAAE,KAAK,EAAE,MAAM,EAAG,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAE,CAAC;AAEzH;;;;;GAKG;AACH,MAAM,SAAS,GAAiC;IAC/C,MAAM;IACN,aAAa;IACb,WAAW;IACX,OAAO;IACP,MAAM;IACN,iBAAiB;IACjB,cAAc;IACd,eAAe;IACf,oCAAoC;IACpC,QAAQ;IACR,UAAU;IACV,YAAY;IACZ,SAAS;IACT,WAAW;IACX,MAAM;IACN,eAAe;IACf,MAAM;IACN,YAAY;IACZ,KAAK;IACL,WAAW;IACX,WAAW;IACX,WAAW;IACX,QAAQ;IACR,SAAS;IACT,aAAa;IACb,OAAO;IACP,eAAe;IACf,MAAM;IACN,kBAAkB;IAClB,oBAAoB;IACpB,UAAU;IACV,sBAAsB;IACtB,aAAa;IACb,SAAS;IACT,KAAK;IACL,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACf,iBAAiB;IACjB,WAAW;IACX,oBAAoB;IACpB,WAAW;IACX,YAAY;IACZ,KAAK;IACL,OAAO;IACP,UAAU;IACV,SAAS;IACT,WAAW;CACX,CAAC,MAAM,CACP,CAAE,SAAS,EAAE,IAAI,EAAG,EAAE,CAAC,CAAE;IACxB,GAAG,SAAS;IACZ,CAAE,cAAc,IAAI,EAAE,CAAE,EAAE,cAAc,aAAa,CAAE,IAAI,CAAE,EAAE;CAC/D,CAAE,EACH;IACC,MAAM,EAAE,QAAQ;IAChB,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,UAAU;IACvB,uBAAuB,EAAE,qBAAqB;IAC9C,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,mBAAmB,EAAE,iBAAiB;IACtC,QAAQ,EAAE,UAAU;CACpB,CACD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/helpers/wp-externals.ts

@@ -0,0 +1,87 @@
+/**
+ * Given a string, returns a new string with dash separators converted to
+ * camel-case equivalent. This is not as aggressive as `_.camelCase`,
+ * which would also upper-case letters following numbers.
+ *
+ * @param {string} slug Input dash-delimited string.
+ *
+ * @return {string} Camel-cased string.
+ */
+const camelCaseDash = ( slug: string ): string => slug.replace( /-([a-z])/g, ( match, letter ) => letter.toUpperCase() );
+
+/**
+ * Convert all wp libraries to the global variable, which are
+ * available in WP core when the corresponding libraries are cued.
+ *
+ * @type {{wpExternals: *}}
+ */
+const wpExports: { [ name: string ]: string } = [
+	'a11y',
+	'annotations',
+	'api-fetch',
+	'autop',
+	'blob',
+	'block-directory',
+	'block-editor',
+	'block-library',
+	'block-serialization-default-parser',
+	'blocks',
+	'commands',
+	'components',
+	'compose',
+	'core-data',
+	'data',
+	'data-controls',
+	'date',
+	'deprecated',
+	'dom',
+	'dom-ready',
+	'edit-post',
+	'edit-site',
+	'editor',
+	'element',
+	'escape-html',
+	'hooks',
+	'html-entities',
+	'i18n',
+	'is-shallow-equal',
+	'keyboard-shortcuts',
+	'keycodes',
+	'list-reusable-blocks',
+	'media-utils',
+	'notices',
+	'nux',
+	'plugins',
+	'primitives',
+	'priority-queue',
+	'redux-routine',
+	'reusable-blocks',
+	'rich-text',
+	'server-side-render',
+	'shortcode',
+	'token-list',
+	'url',
+	'utils',
+	'viewport',
+	'warning',
+	'wordcount',
+].reduce(
+	( externals, name ) => ( {
+		...externals,
+		[ `@wordpress/${name}` ]: `window.wp?.${camelCaseDash( name )}`,
+	} ),
+	{
+		lodash: 'lodash',
+		wp: 'wp',
+		react: 'React',
+		'react-dom': 'ReactDOM',
+		'react-refresh/runtime': 'ReactRefreshRuntime',
+		jquery: 'jQuery',
+		tinymce: 'tinymce',
+		moment: 'moment',
+		'react/jsx-runtime': 'ReactJSXRuntime',
+		backbone: 'Backbone',
+	},
+);
+
+export default wpExports;