diff --git a/plugins/woocommerce-admin/bin/starter-pack/._gitignore b/plugins/woocommerce-admin/bin/starter-pack/._gitignore new file mode 100644 index 00000000000..91f0cc407ea --- /dev/null +++ b/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/ diff --git a/plugins/woocommerce-admin/bin/starter-pack/_README.md b/plugins/woocommerce-admin/bin/starter-pack/_README.md new file mode 100644 index 00000000000..2f4dd5e4d5d --- /dev/null +++ b/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. + diff --git a/plugins/woocommerce-admin/bin/starter-pack/_main.php b/plugins/woocommerce-admin/bin/starter-pack/_main.php new file mode 100644 index 00000000000..07c1d36f378 --- /dev/null +++ b/plugins/woocommerce-admin/bin/starter-pack/_main.php @@ -0,0 +1,44 @@ + 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' ); diff --git a/plugins/woocommerce-admin/bin/starter-pack/_package.json b/plugins/woocommerce-admin/bin/starter-pack/_package.json new file mode 100644 index 00000000000..0b18d33f705 --- /dev/null +++ b/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" + } +} diff --git a/plugins/woocommerce-admin/bin/starter-pack/_webpack.config.js b/plugins/woocommerce-admin/bin/starter-pack/_webpack.config.js new file mode 100644 index 00000000000..0f1408417c4 --- /dev/null +++ b/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', + ], + }, + ], + }, +}; diff --git a/plugins/woocommerce-admin/bin/starter-pack/src/index.js b/plugins/woocommerce-admin/bin/starter-pack/src/index.js new file mode 100644 index 00000000000..7d60676c42b --- /dev/null +++ b/plugins/woocommerce-admin/bin/starter-pack/src/index.js @@ -0,0 +1,3 @@ +import './index.scss'; + +console.log( 'hello world' ); diff --git a/plugins/woocommerce-admin/bin/starter-pack/src/index.scss b/plugins/woocommerce-admin/bin/starter-pack/src/index.scss new file mode 100644 index 00000000000..1507ab8d954 --- /dev/null +++ b/plugins/woocommerce-admin/bin/starter-pack/src/index.scss @@ -0,0 +1,3 @@ +body { + background-color: #ff1493; +} diff --git a/plugins/woocommerce-admin/bin/starter-pack/starter-pack.js b/plugins/woocommerce-admin/bin/starter-pack/starter-pack.js new file mode 100644 index 00000000000..c5d62acf642 --- /dev/null +++ b/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' ); +} )(); diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index ba948dcd043..186743c42a9 100644 --- a/plugins/woocommerce-admin/package.json +++ b/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",