Merge pull request #57 from kucrut/wp-scripts

WP scripts

README.md

@@ -58,7 +58,6 @@ Feel free to [customise the configuration](https://vitejs.dev/config/) to add pl
 ```js
 // vite.config.js
 import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
 import { v4wp } from '@kucrut/vite-for-wp';
 import react from '@vitejs/plugin-react';
 
@@ -128,49 +127,38 @@ You can now run `npm run dev` when developing your plugin/theme and run `npm run
 
 ### External Dependencies
 
-If your JS package depends on one or more WordPress modules (eg. `@wordpress/i18n`), you can define them as externals with the help of `rollup-plugin-external-globals`.
+If your package depends on one or more scripts registered by WordPress (eg. `jquery`, `react`, `@wordpress/i18n`, etc.) and you want to exclude them from the final build, add `wp_scripts()` to the list of Vite's plugins. But first, install the required dependencies:
 
 ```sh
-npm add -D rollup-plugin-external-globals
+npm add -D rollup-plugin-external-globals vite-plugin-external
 ```
 
 For example, to externalise `react` and `react-dom` packages:
 
 ```js
 // vite.config.js
-import { defineConfig } from 'vite';
-import { wp_globals } from '@kucrut/vite-for-wp/utils';
-import create_config from '@kucrut/vite-for-wp';
-import external_globals from 'rollup-plugin-external-globals';
+import { v4wp } from '@kucrut/vite-for-wp';
+import { wp_scripts } from '@kucrut/vite-for-wp/plugins';
 import react from '@vitejs/plugin-react';
 
-export default defineConfig( ( { command } ) => {
-	if ( command === 'serve' ) {
-		return create_config( 'js/src/main.jsx', 'js/dist', {
-			plugins: [ react() ],
-		} );
-	}
-
-	return create_config( 'js/src/main.jsx', 'js/dist', {
-		plugins: [
-			react(),
-			external_globals( {
-				...wp_globals(),
-			} ),
-		],
-		build: {
-			rollupOptions: {
-				external: [ 'react', 'react-dom' ],
-				output: {
-					globals: wp_globals(),
-				},
-			},
-		},
-	} );
-} );
+export default {
+	plugins: [
+		v4wp( {
+			input: 'js/src/main.jsx',
+			outDir: 'js/dist',
+		} ),
+		wp_scripts(),
+		react( {
+			jsxRuntime: 'classic',
+		} ),
+	],
+};
 ```
 
-Note that `react` and `react-dom` packages still need to be installed as dev dependencies and added to the `dependencies` array when enqueueing the script (see example above).
+**Special Notes for React**
+
+-   `react` and `react-dom` packages still need to be installed as your package's dev dependencies as they're used by `@vitejs/plugin-react`.
+-   `react` and `react-dom` should be added to the `dependencies` array when enqueueing the script (see example above).
 
 ## Example plugins
 

package.json

@@ -29,11 +29,23 @@
 		"eslint": "^8.51.0",
 		"eslint-plugin-prettier": "^5.0.0",
 		"prettier": "npm:wp-prettier@^3.0.3",
+		"rollup-plugin-external-globals": "^0.8.0",
 		"typescript": "^5.2.2",
-		"vite": "^4.4.11"
+		"vite": "^4.4.11",
+		"vite-plugin-external": "^4.0.1"
 	},
 	"peerDependencies": {
-		"vite": "^4.4.11"
+		"rollup-plugin-external-globals": "^0.8.0",
+		"vite": "^4.4.11",
+		"vite-plugin-external": "^4.0.1"
+	},
+	"peerDependenciesMeta": {
+		"rollup-plugin-external-globals": {
+			"optional": true
+		},
+		"vite-plugin-external": {
+			"optional": true
+		}
 	},
 	"exports": {
 		"./package.json": "./package.json",

src/exports/plugins/index.js

@@ -1,2 +1,3 @@
 export { dev_server_config } from './dev-server-config.js';
 export { dev_server_manifest } from './dev-server-manifest.js';
+export { wp_scripts } from './wp-scripts.js';

src/exports/plugins/wp-scripts.js

@@ -0,0 +1,51 @@
+/** @typedef {{extraScripts?: Record<string, string>}} Options */
+
+import externals from 'vite-plugin-external';
+import globals from 'rollup-plugin-external-globals';
+import { wp_globals } from '../utils/wp-globals.js';
+
+/**
+ * WordPress scripts plugin
+ *
+ * This plugin provides easy access to built-in WordPress scripts and exclude them from the build.
+ *
+ * @type {(options?: Options) => import('vite').PluginOption[]}
+ * @return {import('vite').PluginOption[]} Vite plugins instances.
+ */
+export function wp_scripts( options = {} ) {
+	const { extraScripts = {} } = options;
+
+	const scripts = {
+		...wp_globals(),
+		...extraScripts,
+	};
+
+	/** @type { import('vite').Plugin } */
+	const plugin = {
+		name: 'v4wp:wp-scripts',
+		apply: 'build',
+
+		config() {
+			return {
+				build: {
+					rollupOptions: {
+						external: Object.keys( scripts ),
+						output: {
+							globals: scripts,
+						},
+					},
+				},
+			};
+		},
+	};
+
+	return [
+		plugin,
+		externals( {
+			externals: scripts,
+		} ),
+		globals( scripts, {
+			include: [ '**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx' ],
+		} ),
+	];
+}

src/exports/utils/wp-globals.js

@@ -21,13 +21,16 @@ export function wp_globals() {
 		'components',
 		'compose',
 		'core-data',
+		'customize-widgets',
 		'data',
 		'data-controls',
 		'date',
 		'deprecated',
 		'dom',
 		'dom-ready',
 		'edit-post',
+		'edit-site',
+		'edit-widgets',
 		'editor',
 		'element',
 		'escape-html',
@@ -43,17 +46,21 @@ export function wp_globals() {
 		'notices',
 		'nux',
 		'plugins',
+		'preferences',
+		'preferences-persistence',
 		'primitives',
 		'priority-queue',
 		'redux-routine',
 		'reusable-blocks',
 		'rich-text',
 		'server-side-render',
 		'shortcode',
+		'style-engine',
 		'token-list',
 		'url',
 		'viewport',
 		'warning',
+		'widgets',
 		'wordcount',
 	];
 

types/index.d.ts

@@ -14,6 +14,10 @@ declare module '@kucrut/vite-for-wp' {
 declare module '@kucrut/vite-for-wp/plugins' {
 	export function dev_server_config(): import('vite').Plugin;
 	export function dev_server_manifest(): import('vite').Plugin;
+	export function wp_scripts(options?: Options): import('vite').PluginOption[];
+	type Options = {
+		extraScripts?: Record<string, string>;
+	};
 }
 
 declare module '@kucrut/vite-for-wp/utils' {

types/index.d.ts.map

@@ -11,11 +11,13 @@
 	],
 	"sources": [
 		"../src/exports/index.js",
+		"../src/exports/plugins/wp-scripts.js",
 		"../src/exports/utils/choose-port.js"
 	],
 	"sourcesContent": [
+		null,
 		null,
 		null
 	],
-	"mappings": ";;;aAA6BA,cAAcA;aACdC,UAAUA;aACFC,WAAWA;aACuBC,WAAWA;aACDC,OAAOA;;;;;;;;;;;;;;MCJxCC,iBAAiBA"
+	"mappings": ";;;aAA6BA,cAAcA;aACdC,UAAUA;aACFC,WAAWA;aACuBC,WAAWA;aACDC,OAAOA;;;;;;;;;;MCJjCA,OAAOA;;;;;;;;MCAdC,iBAAiBA"
 }