Add starter pack script (https://github.com/woocommerce/woocommerce-admin/pull/3403)

* Add starter pack

* use deepPink

plugins/woocommerce-admin/bin/starter-pack/._gitignore

@@ -0,0 +1,23 @@
+
+# Directories/files that may be generated by this project
+node_modules/
+dist
+build
+build-module
+build-style
+languages/*
+!languages/README.md
+
+# Directories/files that may appear in your environment
+.DS_Store
+Thumbs.db
+wp-cli.local.yml
+*.sql
+*.tar.gz
+*.tgz
+*.zip
+.idea
+.vscode/
+
+# Composer
+/vendor/

plugins/woocommerce-admin/bin/starter-pack/_README.md

@@ -0,0 +1,15 @@
+# {{extension_name}}
+
+A WooCommerce Admin Extension
+
+## Development
+
+To get started, run the following commands:
+
+```text
+npm install
+npm start
+```
+
+See [wp-scripts](https://github.com/WordPress/gutenberg/tree/master/packages/scripts) for more usage information.
+

plugins/woocommerce-admin/bin/starter-pack/_main.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Plugin Name: {{extension_name}}
+ *
+ * @package WC_Admin
+ */
+
+/**
+ * Register the JS.
+ */
+function add_extension_register_script() {
+
+	if ( ! class_exists( 'Automattic\WooCommerce\Admin\Loader' ) || ! \Automattic\WooCommerce\Admin\Loader::is_admin_page() ) {
+		return;
+	}
+
+	$script_path       = '/build/index.js';
+	$script_asset_path = dirname( __FILE__ ) . '/build/index.asset.php';
+	$script_asset      = file_exists( $script_asset_path )
+		? require( $script_asset_path )
+		: array( 'dependencies' => array(), 'version' => filemtime( $script_path ) );
+	$script_url = plugins_url( $script_path, __FILE__ );
+
+	wp_register_script(
+		'{{extension_slug}}',
+		$script_url,
+		$script_asset['dependencies'],
+		$script_asset['version'],
+		true
+	);
+
+	wp_register_style(
+		'{{extension_slug}}',
+		plugins_url( '/build/style.css', __FILE__ ),
+		// Add any dependencies styles may have, such as wp-components.
+		array(),
+		filemtime( dirname( __FILE__ ) . '/build/style.css' )
+	);
+
+	wp_enqueue_script( '{{extension_slug}}' );
+	wp_enqueue_style( '{{extension_slug}}' );
+}
+
+add_action( 'admin_enqueue_scripts', 'add_extension_register_script' );

plugins/woocommerce-admin/bin/starter-pack/_package.json

@@ -0,0 +1,25 @@
+{
+  "name": "{{extension_slug}}",
+  "title": "{{extension_name}}",
+  "license": "GPL-3.0-or-later",
+  "version": "0.1.0",
+  "description": "{{extension_name}}",
+  "scripts": {
+    "build": "wp-scripts build",
+    "check-engines": "wp-scripts check-engines",
+    "check-licenses": "wp-scripts check-licenses",
+    "lint:css": "wp-scripts lint-style",
+    "lint:js": "wp-scripts lint-js",
+    "lint:pkg-json": "wp-scripts lint-pkg-json",
+    "start": "wp-scripts start",
+    "test:e2e": "wp-scripts test-e2e",
+    "test:unit": "wp-scripts test-unit-js"
+  },
+  "devDependencies": {
+    "@wordpress/scripts": "^6.0.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "sass-loader": "7.3.1",
+    "css-loader": "3.3.0",
+    "node-sass": "4.13.0"
+  }
+}

plugins/woocommerce-admin/bin/starter-pack/_webpack.config.js

@@ -0,0 +1,68 @@
+const defaultConfig = require( "@wordpress/scripts/config/webpack.config" );
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+
+const requestToExternal = request => {
+	const wcDepMap = {
+		'@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' ],
+		'@woocommerce/settings': [ 'window', 'wc', 'wcSettings' ],
+	};
+
+	if ( wcDepMap[ request ] ) {
+		return wcDepMap[ request ];
+	}
+};
+
+const requestToHandle = request => {
+	const wcHandleMap = {
+		'@woocommerce/components': 'wc-components',
+		'@woocommerce/csv-export': 'wc-csv',
+		'@woocommerce/currency': 'wc-currency',
+		'@woocommerce/date': 'wc-date',
+		'@woocommerce/navigation': 'wc-navigation',
+		'@woocommerce/number': 'wc-number',
+		'@woocommerce/settings': 'wc-settings',
+	};
+
+	if ( wcHandleMap[ request ] ) {
+		return wcHandleMap[ request ];
+	}
+};
+
+module.exports = {
+	...defaultConfig,
+	plugins: [
+		...defaultConfig.plugins.filter(
+			plugin => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin',
+		),
+		new DependencyExtractionWebpackPlugin( {
+			injectPolyfill: true,
+			requestToExternal,
+			requestToHandle,
+		} ),
+		new MiniCssExtractPlugin( {
+			filename: 'style.css',
+		} ),
+	],
+	module: {
+		...defaultConfig.module,
+		rules: [
+			...defaultConfig.module.rules,
+			{
+				test: /\.(sa|sc|c)ss$/,
+				use: [
+					{
+						loader: MiniCssExtractPlugin.loader,
+					},
+					'css-loader',
+					'sass-loader',
+				],
+			},
+		],
+	},
+};

plugins/woocommerce-admin/bin/starter-pack/src/index.js

@@ -0,0 +1,3 @@
+import './index.scss';
+
+console.log( 'hello world' );

plugins/woocommerce-admin/bin/starter-pack/src/index.scss

@@ -0,0 +1,3 @@
+body {
+	background-color: #ff1493;
+}

plugins/woocommerce-admin/bin/starter-pack/starter-pack.js

@@ -0,0 +1,63 @@
+/** @format */
+
+const fs = require( 'fs-extra' );
+const path = require( 'path' );
+const promptly = require( 'promptly' );
+const chalk = require( 'chalk' );
+
+const files = [ '._gitignore', '_README.md', '_webpack.config.js', '_main.php', '_package.json' ];
+const maybeThrowError = error => {
+	if ( error ) throw error;
+};
+
+( async () => {
+	console.log( '\n' );
+	console.log( chalk.yellow( '🎉 Welcome to WooCommerce Admin Extension Starter Pack 🎉' ) );
+	console.log( '\n' );
+	const extensionName = await promptly.prompt(
+		chalk.yellow( 'What is the name of your extension?' )
+	);
+
+	const extensionSlug = extensionName.replace( / /g, '-' ).toLowerCase();
+	const folder = path.join( __dirname, extensionSlug );
+
+	fs.mkdir( folder, maybeThrowError );
+
+	files.forEach( file => {
+		const from = path.join( __dirname, file );
+		const to = path.join(
+			folder,
+			'_main.php' === file ? `${ extensionSlug }.php` : file.replace( '_', '' )
+		);
+
+		fs.readFile( from, 'utf8', ( error, data ) => {
+			maybeThrowError( error );
+
+			const addSlugs = data.replace( /{{extension_slug}}/g, extensionSlug );
+			const result = addSlugs.replace( /{{extension_name}}/g, extensionName );
+
+			fs.writeFile( to, result, 'utf8', maybeThrowError );
+		} );
+	} );
+
+	fs.copy( path.join( __dirname, 'src' ), path.join( folder, 'src' ), maybeThrowError );
+
+	fs.copy( folder, path.join( '../', extensionSlug ), error => {
+		maybeThrowError( error );
+
+		fs.remove( folder, maybeThrowError );
+	} );
+
+	process.stdout.write( '\n' );
+	console.log(
+		chalk.green(
+			'Wonderful, your extension has been scaffolded and placed as a sibling directory to this one.'
+		)
+	);
+	process.stdout.write( '\n' );
+	console.log( chalk.green( 'Run the following commands from the root of the extension and activate the plugin.' ) );
+	process.stdout.write( '\n' );
+	console.log( 'npm install' );
+	console.log( 'npm start' );
+	process.stdout.write( '\n' );
+} )();

plugins/woocommerce-admin/package.json

@@ -56,7 +56,8 @@
     "test:watch": "npm run test -- --watch",
     "example": "webpack --config docs/examples/extensions/examples.config.js --watch",
     "changelog": "node ./bin/changelog.js ",
-    "pre-release": "./bin/pre-release.sh"
+    "pre-release": "./bin/pre-release.sh",
+    "create-wc-extension": "node ./bin/starter-pack/starter-pack.js"
   },
   "husky": {
     "hooks": {
@@ -146,6 +147,7 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.17.0",
     "eslint-plugin-wpcalypso": "4.1.0",
+    "fs-extra": "^8.1.0",
     "grunt": "1.0.4",
     "grunt-checktextdomain": "1.0.1",
     "grunt-wp-i18n": "1.0.3",