Created init.js script

README.md

@@ -1,49 +1,35 @@
 # react-wp-scripts
 
-A wrapper for create-react-app's `react-scripts` to allow seamless usage of scripts and styles served from `webpack-dev-server` while developing a theme or plugin.
+A wrapper for create-react-app's [`react-scripts`](https://github.com/facebookincubator/create-react-app/tree/master/packages/react-scripts) to allow seamless usage of scripts and styles served from `webpack-dev-server` while developing a theme or plugin.
 
 **Important Note**: This project is brand new, and largely untested. We recommend using it as a learning tool rather than depending on it for critical development work.
 
 ## Installation & Usage
 
-From the root directory of your `create-react-app`-generated project, run
+Run `create-react-app --scripts-version react-wp-scripts --php-namespace="Your_Namespace" /path/to/your/project/folder` to generate a new create-react-app project configured to use these custom scripts.
 
-```sh
-npm install react-wp-scripts
-```
-
-Once installed, change your `start` script in `package.json` from
-
-```
-"start": "react-scripts start",
-```
-to
-```
-"start": "react-wp-scripts start",
-```
-
-Copy `loader.php` from the module to your project root (_e.g._ `cp node_modules/react-wp-scripts/loader.php .` on OSX/Linux), then copy this code into your theme:
+The file `react-wp-scripts.php` will be created within your generated project folder. Replace `Your_Namespace` with the PHP namespace you would like to use for this file; it will default to `ReactWPScripts`.
 
+Once installed, you can require this file from your theme or plugin code:
 ```php
-require __DIR__ . '/loader.php';
+require __DIR__ . '/react-wp-scripts.php';
 
-function mytheme_enqueue_assets() {
+function myproject_enqueue_assets() {
+	// In a theme, pass in the stylesheet directory:
 	\ReactWPScripts\enqueue_assets( get_stylesheet_directory() );
-}
-add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
-```
-or copy this code into your plugin:
-```php
-require __DIR__ . '/loader.php';
 
-function myplugin_enqueue_assets() {
+	// In a plugin, pass the plugin dir path:
 	\ReactWPScripts\enqueue_assets( plugin_dir_path( __FILE__ ) );
 }
-add_action( 'wp_enqueue_scripts', 'myplugin_enqueue_assets' );
+add_action( 'wp_enqueue_scripts', 'myproject_enqueue_assets' );
 ```
 
 This will load all generated JS and CSS into your theme or plugin.
 
+You may now use the `react-scripts` [commands](https://github.com/facebookincubator/create-react-app/blob/master/README.md#npm-start-or-yarn-start) as normal while you develop.
+
+## PHP Interface
+
 ### `enqueue_assets`
 
 The `enqueue_assets` function takes two arguments: the filesystem path to the project directory containing the `src` and `build` folders, and an optional array argument which may be used to customize script handles and dependencies. Available options:

loader.php

@@ -3,7 +3,7 @@
  * Entrypoint for the theme.
  */
 
-namespace ReactWPScripts;
+namespace %%NAMESPACE%%;
 
 /**
  * Is this a development environment?

package.json

@@ -1,26 +1,28 @@
 {
-	"name": "react-wp-scripts",
-	"description": "A wrapper for react-scripts to allow seamless usage of webpack-dev-server while developing a WordPress theme or plugin.",
-	"version": "0.1.1",
-	"contributors": [
-		"Ryan McCue",
-		"K. Adam White",
-		"Human Made"
-	],
-	"license": "GPL-2.0+",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/humanmade/react-wp-scripts.git"
-	},
-	"bugs": {
-		"url": "https://github.com/humanmade/react-wp-scripts/issues"
-	},
-	"homepage": "https://github.com/humanmade/react-wp-scripts#readme",
-	"bin": {
-		"react-wp-scripts": "./bin/react-wp-scripts.js"
-	},
-	"dependencies": {
-		"react-scripts": "1.0.17",
-		"signal-exit": "^3.0.2"
-	}
+  "name": "react-wp-scripts",
+  "description": "A wrapper for react-scripts to allow seamless usage of webpack-dev-server while developing a WordPress theme or plugin.",
+  "version": "0.1.1",
+  "contributors": [
+    "Ryan McCue",
+    "K. Adam White",
+    "Human Made"
+  ],
+  "license": "GPL-2.0+",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/humanmade/react-wp-scripts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/humanmade/react-wp-scripts/issues"
+  },
+  "homepage": "https://github.com/humanmade/react-wp-scripts#readme",
+  "bin": {
+    "react-wp-scripts": "./bin/react-wp-scripts.js"
+  },
+  "dependencies": {
+    "chalk": "^2.3.2",
+    "minimist": "^1.2.0",
+    "react-scripts": "1.0.17",
+    "signal-exit": "^3.0.2"
+  }
 }

scripts/init.js

@@ -0,0 +1,80 @@
+/**
+ * Sets the start script for react-wp-scripts and moves
+ * loader.php to the project root folder.
+ */
+'use strict';
+
+process.on( 'unhandledRejection', err => {
+	throw err;
+} );
+
+const fs = require( 'fs-extra' );
+const path = require( 'path' );
+const chalk = require( 'chalk' );
+
+const argv = require( 'minimist' )( process.argv.slice( 2 ) );
+
+module.exports = function(
+	appPath,
+	appName,
+	verbose,
+	originalDirectory,
+	template
+) {
+
+	// Parse a namespace based on the name of the package
+	const namespace = argv['php-namespace'] || 'ReactWPScripts';
+
+	const pkgName = require( path.join( __dirname, '..', 'package.json' ) ).name;
+	const reactWPScriptsPath = path.join( appPath, 'node_modules', pkgName );
+	const appPackage = require( path.join( appPath, 'package.json' ) );
+
+	const scriptsPath = path.resolve(
+		process.cwd(),
+		'node_modules',
+		'react-scripts',
+		'scripts',
+		'init.js'
+	);
+	const reactScriptsInit = require(scriptsPath);
+	reactScriptsInit( appPath, appName, verbose, originalDirectory, template );
+
+	// Setup the custom start script
+	appPackage.scripts.start = 'react-wp-scripts start';
+
+	fs.writeFileSync(
+		path.join( appPath, 'package.json' ),
+		JSON.stringify( appPackage, null, 2 )
+	);
+
+	// Copy the loader.php
+	const loaderPath = path.join( reactWPScriptsPath, 'loader.php' );
+
+	const destinationFile = path.join( appPath, 'react-wp-scripts.php' );
+	fs.copy( loaderPath, destinationFile )
+		.then( () => new Promise( ( resolve, reject ) => {
+			// Replace %%NAMESPACE%% for the specified namespace
+			fs.readFile( destinationFile, 'utf8', function( err, data ) {
+				if ( err ) {
+					return reject( err );
+				}
+
+				var result = data.replace( '%%NAMESPACE%%', namespace );
+				fs.writeFile( destinationFile, result, 'utf8', function( err ) {
+					if ( err ) {
+						return reject( err );
+					}
+					resolve();
+				} );
+			} );
+		} ) )
+		.then( () => {
+			console.log( chalk.green( 'React WP Scripts Loader copied to your project root folder.' ) );
+			console.log( chalk.green( 'Please follow these instructions to enqueue your assets in PHP:' ) );
+			console.log( chalk.blue( 'https://github.com/humanmade/react-wp-scripts#react-wp-scripts' ) );
+		} )
+		.catch( err => {
+			console.log( chalk.bgRed( 'React WP Scripts loader could not be copied to your root folder. Error details:' ) );
+			console.log( chalk.red( err ) );
+		} );
+};