Created init.js script

README.md

@@ -1,16 +1,16 @@
 # 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`
+Replace `Your_Namespace` with any name you'd like to use for your PHP namespace. Default is `ReactWPScripts`
+
+A new `react-wp-scripts.php` will be created on your generated project folder.
 
-```sh
-npm install react-wp-scripts
-```
 
 Once installed, change your `start` script in `package.json` from
 
@@ -22,28 +22,20 @@ 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:
-
+Copy this code into your theme/plugin:
 ```php
-require __DIR__ . '/loader.php';
+require __DIR__ . '/react-wp-scripts.php';
 
 function mytheme_enqueue_assets() {
 	\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() {
-	\ReactWPScripts\enqueue_assets( plugin_dir_path( __FILE__ ) );
-}
-add_action( 'wp_enqueue_scripts', 'myplugin_enqueue_assets' );
-```
 
 This will load all generated JS and CSS into your theme or plugin.
 
+From now on, follow the common `react-scripts` [commands](https://github.com/facebookincubator/create-react-app/blob/master/README.md#npm-start-or-yarn-start)
+
 ### `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?

scripts/init.js

@@ -0,0 +1,82 @@
+'use strict';
+
+// Sets the start script for react-wp-scripts
+// And move the loader.php to the project root folder
+process.on( 'unhandledRejection', err => {
+	throw err;
+} );
+
+const fs = require( 'fs-extra' );
+const path = require( 'path' );
+const chalk = require( 'chalk' );
+const commander = require('commander');
+const packageJson = require('../package.json');
+
+const program = new commander.Command( packageJson.name )
+	.version( packageJson.version )
+	.option( '--php-namespace [namespace]', 'Specify a namespace. Default: ReactWPScripts' )
+	.parse( process.argv );
+
+
+module.exports = function(
+	appPath,
+	appName,
+	verbose,
+	originalDirectory,
+	template
+) {
+	const namespace = program.phpNamespace ? program.phpNamespace : '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' );
+
+	function successMessage() {
+		console.log( chalk.green( 'React WP Scripts Loader copied to your project root folder.' ) );
+		console.log( chalk.green( 'Please, follow instructions to add PHP to enqueue your assets:' ) );
+		console.log( chalk.blue( 'https://github.com/humanmade/react-wp-scripts#react-wp-scripts' ) );
+	}
+
+	const destinationFile = path.join( appPath, 'react-wp-scripts.php' );
+	fs.copy( loaderPath, destinationFile )
+		.then( () => {
+		// Replace %%NAMESPACE%% for the specified namespace
+		fs.readFile(destinationFile, 'utf8', function(err, data) {
+		if (err) {
+			console.log(err);
+		}
+
+		var result = data.replace('%%NAMESPACE%%',namespace);
+		fs.writeFile(destinationFile, result, 'utf8', function(err) {
+			if (err) {
+				return console.log(err);
+			};
+		});
+	});
+})
+.then( () => successMessage() )
+.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 ) );
+} );
+};