Transform requests for WordPress provided externals
Install @roots/wordpress-transforms to your project.
Yarn:
yarn add @roots/wordpress-transforms --dev
npm:
npm install @roots/wordpress-transforms --save-dev
Transform a request for a WordPress provided package to its enqueue handle.
-
@wordpress/dom-ready
=>'dom-ready'
-
react
=>'react'
-
not-provided-package
=>undefined
import { transform } from "@roots/wordpress-transforms/handle";
transform(`@wordpress/edit-post`);
// ==> `wp-edit-post`
transform(`lodash`);
// ==> `lodash`
transform(`non-match`);
// ==> undefined
Transform a request for a WordPress provided package to its window variable (expressesd as an array).
-
@wordpress/dom-ready
=>['wp', 'domReady']
-
react
=>['React']
-
not-provided-package
=>undefined
import { transform } from "@roots/wordpress-transforms/window";
transform(`@wordpress/edit-post`);
// ==> [`wp`, `editPost`]
transform(`lodash`);
// ==> [`lodash`]
transform(`non-match`);
// ==> undefined
Utilities used by @roots/wordpress-transforms/handle and @roots/wordpress-transforms/window.
Examples:
import * as wp from "@roots/wordpress-transforms/wordpress";
wp.isLibrary(`jquery`); // true
wp.isLibrary(`@wordpress/dom-ready`); // false
wp.isLibrary(`non-match`); // false
wp.isProvided(`@wordpress/icons`); // false
wp.isProvided(`lodash`); // true
wp.isWordPressRequest(`@wordpress/element`); // true
wp.isWordPressRequest(`lodash`); // false
wp.normalize(`../node_modules/react-refresh/runtime/foo/bar`); // `react-refresh/runtime`
The three submodules are exported from root.
import { handle, window, wordpress } from "@roots/wordpress-transforms";
handle.transform(/** */);
window.transform(/** */);
wordpress.isLibrary(/** */);
This is the plugin exported by @roots/wordpress-externals-webpack-plugin
, which uses this library:
import { window } from "@roots/wordpress-transforms";
import Webpack, { type WebpackPluginInstance } from "webpack";
/**
* {@link WebpackPluginInstance}
*/
export class WordPressExternalsWebpackPlugin implements WebpackPluginInstance {
/**
* {@link WebpackPluginInstance.apply}
*/
public apply(compiler: Webpack.Compiler) {
new Webpack.ExternalsPlugin(`window`, ({ request }, callback) => {
const lookup = window.transform(request);
return lookup ? callback(null, lookup) : callback();
}).apply(compiler);
}
}
Contributions are welcome from everyone.
We have contribution guidelines to help you get started.
@roots/wordpress-transforms is licensed under MIT.
Keep track of development and community news.
- Join us on Roots Slack by becoming a GitHub sponsor
- Participate on the Roots Discourse
- Follow @rootswp on Twitter
- Read and subscribe to the Roots Blog
- Subscribe to the Roots Newsletter
bud.js is an open source project and completely free to use.
However, the amount of effort needed to maintain and develop new features and projects within the Roots ecosystem is not sustainable without proper financial backing. If you have the capability, please consider sponsoring Roots.