Example Extensions: create build environment

plugins/woocommerce-admin/client/analytics/report/index.js

@@ -33,7 +33,7 @@ import ReportError from 'analytics/components/report-error';
 import { searchItemsByString } from 'wc-api/items/utils';
 import withSelect from 'wc-api/with-select';
 
-const REPORTS_FILTER = 'woocommerce-reports-list';
+const REPORTS_FILTER = 'woocommerce_admin_reports_list';
 
 const getReports = () => {
 	const reports = [

plugins/woocommerce-admin/docs/examples/extensions/README.md

@@ -0,0 +1,25 @@
+# WooCommerce Admin Extension Examples
+
+Examples for extending WooCommerce Admin
+
+## Directions
+
+Install dependencies, if you haven't already.
+
+```bash
+npm install
+```
+
+Build the example extension by running the npm script and passing the example name.
+
+```bash
+npm run example -- --ext=<example>
+```
+
+Go to your Wordpress installation's plugins page and activate the plugin. WooCommerce Analytics reports will now reflect the changes made by the example extension.
+
+You can make changes to Javascript and PHP files in the example and see changes reflected upon refresh.
+
+## Example Extensions
+
+`add-report` - Create a "Hello World" report page.

plugins/woocommerce-admin/docs/examples/extensions/add-report/js/index.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * WooCommerce dependencies
+ */
+import { ReportFilters } from '@woocommerce/components';
+
+const Report = ( { path, query } ) => {
+	return (
+		<Fragment>
+			<ReportFilters
+				query={ query }
+				path={ path }
+				filters={ [] }
+				advancedFilters={ {} }
+			/>
+		</Fragment>
+	);
+};
+
+/**
+ * Use the 'woocommerce_admin_reports_list' filter to add a report page.
+ */
+addFilter( 'woocommerce_admin_reports_list', 'plugin-domain', reports => {
+	return [
+		...reports,
+		{
+			report: 'example',
+			title: __( 'Example', 'plugin-domain' ),
+			component: Report,
+		},
+	];
+} );

plugins/woocommerce-admin/docs/examples/extensions/add-report/woocommerce-admin-add-report-example.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Plugin Name: WooCommerce Admin Add Report Example
+ *
+ * @package WC_Admin
+ */
+
+/**
+ * Register the JS.
+ */
+function add_report_register_script() {
+
+	if ( ! class_exists( 'WC_Admin_Loader' ) || ! WC_Admin_Loader::is_admin_page() ) {
+		return;
+	}
+
+	wp_register_script(
+		'add-report',
+		plugins_url( '/dist/index.js', __FILE__ ),
+		array(
+			'wp-hooks',
+			'wp-element',
+			'wp-i18n',
+			'wc-components',
+		),
+		filemtime( dirname( __FILE__ ) . '/dist/index.js' ),
+		true
+	);
+
+	wp_enqueue_script( 'add-report' );
+}
+add_action( 'admin_enqueue_scripts', 'add_report_register_script' );

plugins/woocommerce-admin/docs/examples/extensions/examples.config.js

@@ -0,0 +1,104 @@
+/** @format */
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
+const fs = require( 'fs' );
+
+const extArg = process.argv.find( arg => arg.startsWith( '--ext=' ) );
+
+if ( ! extArg ) {
+	throw new Error( 'Please provide an extension.' );
+}
+
+const extension = extArg.slice( 6 );
+const extensionPath = path.join( __dirname, `${ extension }/js/index.js` );
+
+if ( ! fs.existsSync( extensionPath ) ) {
+	throw new Error( 'Extension example does not exist.' );
+}
+
+const externals = {
+	'@wordpress/api-fetch': 'window.wp.apiFetch',
+	'@wordpress/blocks': 'window.wp.blocks',
+	'@wordpress/components': 'window.wp.components',
+	'@wordpress/compose': 'window.wp.compose',
+	'@wordpress/data': 'window.wp.data',
+	'@wordpress/editor': 'window.wp.editor',
+	'@wordpress/element': 'window.wp.element',
+	'@wordpress/hooks': 'window.wp.hooks',
+	'@wordpress/html-entities': 'window.wp.htmlEntities',
+	'@wordpress/i18n': 'window.wp.i18n',
+	'@wordpress/keycodes': 'window.wp.keycodes',
+	tinymce: 'tinymce',
+	moment: 'moment',
+	react: 'React',
+	lodash: 'lodash',
+	'react-dom': 'ReactDOM',
+	'@woocommerce/components': 'window.wc.components',
+	'@woocommerce/csv-export': 'window.wc.csvExport',
+	'@woocommerce/currency': 'window.wc.currency',
+	'@woocommerce/date': 'window.wc.date',
+	'@woocommerce/navigation': 'window.wc.navigation',
+	'@woocommerce/number': 'window.wc.number',
+};
+
+const webpackConfig = {
+	mode: 'development',
+	entry: {
+		[ extension ]: extensionPath,
+	},
+	output: {
+		filename: '[name]/dist/index.js',
+		path: path.resolve( __dirname ),
+	},
+	externals,
+	module: {
+		rules: [
+			{
+				parser: {
+					amd: false,
+				},
+			},
+			{
+				test: /\.jsx?$/,
+				loader: 'babel-loader',
+				exclude: /node_modules/,
+			},
+			{
+				test: /\.js?$/,
+				use: {
+					loader: 'babel-loader',
+					options: {
+						presets: [
+							[ '@babel/preset-env', { loose: true, modules: 'commonjs' } ],
+						],
+						plugins: [ 'transform-es2015-template-literals' ],
+					},
+				},
+			},
+		],
+	},
+	resolve: {
+		extensions: [ '.json', '.js', '.jsx' ],
+		modules: [
+			'node_modules',
+		],
+		alias: {
+			'gutenberg-components': path.resolve( __dirname, 'node_modules/@wordpress/components/src' ),
+		},
+	},
+	plugins: [
+		new CopyWebpackPlugin( [
+			{
+				from: path.join( __dirname, `${ extension }/` ),
+				to: path.resolve( __dirname, `../../../../${ extension }/` ),
+			},
+		] ),
+	],
+};
+
+webpackConfig.devtool = 'source-map';
+
+module.exports = webpackConfig;

plugins/woocommerce-admin/package.json

@@ -54,7 +54,8 @@
     "test": "wp-scripts test-unit-js --config tests/js/jest.config.json",
     "test:help": "wp-scripts test-unit-js --help",
     "test:update-snapshots": "jest --updateSnapshot --config tests/js/jest.config.json",
-    "test:watch": "npm run test -- --watch"
+    "test:watch": "npm run test -- --watch",
+    "example": "webpack --config docs/examples/extensions/examples.config.js --watch"
   },
   "husky": {
     "hooks": {