From 034ad41a0d80ed2efeb98ca06855fbca4584a3f2 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Thu, 8 Mar 2018 18:14:38 +1000 Subject: [PATCH 01/17] Prepare for Lerna --- {bin => packages/react-wp-scripts/bin}/react-wp-scripts.js | 0 loader.php => packages/react-wp-scripts/loader.php | 0 .../react-wp-scripts/overrides}/webpackHotDevClient.js | 0 package.json => packages/react-wp-scripts/package.json | 0 {scripts => packages/react-wp-scripts/scripts}/init.js | 0 {scripts => packages/react-wp-scripts/scripts}/override-start.js | 0 {scripts => packages/react-wp-scripts/scripts}/start.js | 0 7 files changed, 0 insertions(+), 0 deletions(-) rename {bin => packages/react-wp-scripts/bin}/react-wp-scripts.js (100%) rename loader.php => packages/react-wp-scripts/loader.php (100%) rename {overrides => packages/react-wp-scripts/overrides}/webpackHotDevClient.js (100%) rename package.json => packages/react-wp-scripts/package.json (100%) rename {scripts => packages/react-wp-scripts/scripts}/init.js (100%) rename {scripts => packages/react-wp-scripts/scripts}/override-start.js (100%) rename {scripts => packages/react-wp-scripts/scripts}/start.js (100%) diff --git a/bin/react-wp-scripts.js b/packages/react-wp-scripts/bin/react-wp-scripts.js similarity index 100% rename from bin/react-wp-scripts.js rename to packages/react-wp-scripts/bin/react-wp-scripts.js diff --git a/loader.php b/packages/react-wp-scripts/loader.php similarity index 100% rename from loader.php rename to packages/react-wp-scripts/loader.php diff --git a/overrides/webpackHotDevClient.js b/packages/react-wp-scripts/overrides/webpackHotDevClient.js similarity index 100% rename from overrides/webpackHotDevClient.js rename to packages/react-wp-scripts/overrides/webpackHotDevClient.js diff --git a/package.json b/packages/react-wp-scripts/package.json similarity index 100% rename from package.json rename to packages/react-wp-scripts/package.json diff --git a/scripts/init.js b/packages/react-wp-scripts/scripts/init.js similarity index 100% rename from scripts/init.js rename to packages/react-wp-scripts/scripts/init.js diff --git a/scripts/override-start.js b/packages/react-wp-scripts/scripts/override-start.js similarity index 100% rename from scripts/override-start.js rename to packages/react-wp-scripts/scripts/override-start.js diff --git a/scripts/start.js b/packages/react-wp-scripts/scripts/start.js similarity index 100% rename from scripts/start.js rename to packages/react-wp-scripts/scripts/start.js From aa02d5edbf43b5853501085cd36c04a5e9050285 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Thu, 8 Mar 2018 18:16:21 +1000 Subject: [PATCH 02/17] Add Lerna with config --- lerna.json | 9 +++++++++ package.json | 9 +++++++++ 2 files changed, 18 insertions(+) create mode 100644 lerna.json create mode 100644 package.json diff --git a/lerna.json b/lerna.json new file mode 100644 index 0000000..09a0bb3 --- /dev/null +++ b/lerna.json @@ -0,0 +1,9 @@ +{ + "lerna": "2.9.0", + "npmClient": "yarn", + "useWorkspaces": true, + "packages": [ + "packages/*" + ], + "version": "independent" +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..156b820 --- /dev/null +++ b/package.json @@ -0,0 +1,9 @@ +{ + "private": true, + "workspaces": [ + "packages/*" + ], + "devDependencies": { + "lerna": "^2.9.0" + } +} From e6ec69db2cb7402cd26fa7b60bafd9f8b22c887f Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 11:51:31 +1000 Subject: [PATCH 03/17] Move loader into common directory --- packages/react-wp-scripts/scripts/init.js | 2 +- packages/react-wp-scripts/{ => template/common}/loader.php | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/react-wp-scripts/{ => template/common}/loader.php (100%) diff --git a/packages/react-wp-scripts/scripts/init.js b/packages/react-wp-scripts/scripts/init.js index 5a07d8f..69f9707 100644 --- a/packages/react-wp-scripts/scripts/init.js +++ b/packages/react-wp-scripts/scripts/init.js @@ -48,7 +48,7 @@ module.exports = function( ); // Copy the loader.php - const loaderPath = path.join( reactWPScriptsPath, 'loader.php' ); + const loaderPath = path.join( reactWPScriptsPath, 'template', 'common', 'loader.php' ); const destinationFile = path.join( appPath, 'react-wp-scripts.php' ); fs.copy( loaderPath, destinationFile ) diff --git a/packages/react-wp-scripts/loader.php b/packages/react-wp-scripts/template/common/loader.php similarity index 100% rename from packages/react-wp-scripts/loader.php rename to packages/react-wp-scripts/template/common/loader.php From 502f5f6e811530fd2ad08d2fef9748afdc38554a Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 13:06:41 +1000 Subject: [PATCH 04/17] Allow skipping the installation instructions --- packages/react-wp-scripts/scripts/init.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/react-wp-scripts/scripts/init.js b/packages/react-wp-scripts/scripts/init.js index 69f9707..00ee54b 100644 --- a/packages/react-wp-scripts/scripts/init.js +++ b/packages/react-wp-scripts/scripts/init.js @@ -24,6 +24,7 @@ module.exports = function( // Parse a namespace based on the name of the package const namespace = argv['php-namespace'] || 'ReactWPScripts'; + const usingCRWP = argv['using-crwp'] || false; const pkgName = require( path.join( __dirname, '..', 'package.json' ) ).name; const reactWPScriptsPath = path.join( appPath, 'node_modules', pkgName ); @@ -69,9 +70,11 @@ module.exports = function( } ); } ) ) .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' ) ); + if ( ! usingCRWP ) { + 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:' ) ); From ae07f7a8f9c83439e6aa6412bc43da7c03a2aa23 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 13:07:44 +1000 Subject: [PATCH 05/17] Add create-react-wp-plugin and common core --- packages/create-react-wp-plugin/index.js | 6 + packages/create-react-wp-plugin/package.json | 25 +++ packages/create-react-wp-project/index.js | 155 ++++++++++++++++++ packages/create-react-wp-project/package.json | 17 ++ .../react-wp-scripts/scripts/init-extra.js | 71 ++++++++ .../template/plugin/plugin.php | 19 +++ .../template/theme/functions.php | 20 +++ .../react-wp-scripts/template/theme/style.css | 7 + 8 files changed, 320 insertions(+) create mode 100755 packages/create-react-wp-plugin/index.js create mode 100644 packages/create-react-wp-plugin/package.json create mode 100644 packages/create-react-wp-project/index.js create mode 100644 packages/create-react-wp-project/package.json create mode 100644 packages/react-wp-scripts/scripts/init-extra.js create mode 100644 packages/react-wp-scripts/template/plugin/plugin.php create mode 100644 packages/react-wp-scripts/template/theme/functions.php create mode 100644 packages/react-wp-scripts/template/theme/style.css diff --git a/packages/create-react-wp-plugin/index.js b/packages/create-react-wp-plugin/index.js new file mode 100755 index 0000000..dcf3b2a --- /dev/null +++ b/packages/create-react-wp-plugin/index.js @@ -0,0 +1,6 @@ +#!/usr/bin/env node + +const packageJson = require( './package.json' ); +const run = require( '@humanmade/create-react-wp-project' ); + +run( 'plugin', packageJson ); diff --git a/packages/create-react-wp-plugin/package.json b/packages/create-react-wp-plugin/package.json new file mode 100644 index 0000000..244adc6 --- /dev/null +++ b/packages/create-react-wp-plugin/package.json @@ -0,0 +1,25 @@ +{ + "name": "create-react-wp-plugin", + "description": "Easily create a React-based WordPress plugin.", + "version": "0.0.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": { + "create-react-wp-plugin": "./index.js" + }, + "dependencies": { + "@humanmade/create-react-wp-project": "^0.0.1" + } +} diff --git a/packages/create-react-wp-project/index.js b/packages/create-react-wp-project/index.js new file mode 100644 index 0000000..d57ddd4 --- /dev/null +++ b/packages/create-react-wp-project/index.js @@ -0,0 +1,155 @@ +#!/usr/bin/env node + +const chalk = require( 'chalk' ); +const commander = require( 'commander' ); +const child_process = require( 'child_process' ); +const envinfo = require( 'envinfo' ); +const fs = require( 'fs-extra' ); +const path = require( 'path' ); +const upperCamelCase = require( 'uppercamelcase' ); + +const craPath = require.resolve( 'create-react-app' ); + +function runCRA( args, namespace ) { + // Run, with our default flags. + const opts = { + stdio: 'inherit', + }; + args.unshift( + '--using-crwp', + '--scripts-version', + 'file:' + __dirname + '/../react-wp-scripts', + '--php-namespace', + namespace, + ); + + return new Promise( resolve => { + const proc = child_process.spawn( craPath, args, opts ); + proc.on( 'close', code => { + if ( code !== 0 ) { + process.exit( code ); + } + + resolve(); + } ); + } ); +} + +function runAdditionalScripts( type, name, autoNamespace ) { + const rootDir = path.resolve( name ); + const appName = path.basename( rootDir ); + + const originalDirectory = process.cwd(); + process.chdir( rootDir ); + + // Run our follow-up. + const scriptsPath = path.resolve( + process.cwd(), + 'node_modules', + 'react-wp-scripts', + 'scripts', + 'init-extra.js' + ); + const initExtra = require( scriptsPath ); + initExtra( type, rootDir, appName, autoNamespace ); +} + +module.exports = function ( projectType, packageJson ) { + const args = process.argv; + + let projectName; + const program = new commander.Command( packageJson.name ) + .version( packageJson.version ) + .arguments( '' ) + .usage( `${chalk.green('')} [options]` ) + .action( name => { + projectName = name; + } ) + .option( '--verbose', 'print additional logs' ) + .option( '--info', 'print environment debug info' ) + .option( '--use-npm' ) + .allowUnknownOption() + .on( '--help', () => { + console.log( ` Only ${chalk.green('')} is required.` ); + console.log(); + console.log( + ` If you have any problems, do not hesitate to file an issue:` + ); + console.log( + ` ${chalk.cyan( + 'https://github.com/humanmade/react-wp-scripts/issues/new' + )}` + ); + console.log(); + } ) + .parse( process.argv ); + + if ( typeof projectName === 'undefined' ) { + if (program.info) { + envinfo.print( { + packages: ['react', 'react-dom', 'react-wp-scripts'], + noNativeIDE: true, + duplicates: true, + } ); + process.exit( 0 ); + } + console.error( 'Please specify the project directory:' ); + console.log( + ` ${chalk.cyan(program.name())} ${chalk.green('')}` + ); + console.log(); + console.log( 'For example:' ); + console.log( ` ${chalk.cyan(program.name())} ${chalk.green('my-react-app')}` ); + console.log(); + console.log( + `Run ${chalk.cyan(`${program.name()} --help`)} to see all options.` + ); + process.exit( 1 ); + } + + // Resolve the supplied path into an actual name. + const fullProjectPath = path.resolve( process.cwd(), projectName ); + const autoNamespace = upperCamelCase( path.basename( fullProjectPath ) ); + // console.log( autoNamespace ); + // return; + + // Run create-react-app with all the additional arguments. + runCRA( args.slice( 2 ), autoNamespace ) + .then( () => runAdditionalScripts( + projectType, + projectName, + autoNamespace, + ) ) + .catch( reason => { + console.log(); + console.log( 'Aborting installation.' ); + if ( reason.command ) { + console.log( ` ${chalk.cyan(reason.command)} has failed.` ); + } else { + console.log( chalk.red( 'Unexpected error. Please report it as a bug:' ) ); + console.log( reason ); + } + console.log(); + + // On 'exit' we will delete these files from target directory. + const knownGeneratedFiles = [ + 'functions.php', + 'style.css', + 'plugin.php', + ]; + const currentFiles = fs.readdirSync(path.join(root)); + currentFiles.forEach(file => { + knownGeneratedFiles.forEach(fileToMatch => { + // This will catch `(npm-debug|yarn-error|yarn-debug).log*` files + // and the rest of knownGeneratedFiles. + if ( + (fileToMatch.match(/.log/g) && file.indexOf(fileToMatch) === 0) || + file === fileToMatch + ) { + console.log(`Deleting generated file... ${chalk.cyan(file)}`); + fs.removeSync(path.join(root, file)); + } + }); + }); + } ); +} diff --git a/packages/create-react-wp-project/package.json b/packages/create-react-wp-project/package.json new file mode 100644 index 0000000..aa98c6b --- /dev/null +++ b/packages/create-react-wp-project/package.json @@ -0,0 +1,17 @@ +{ + "name": "@humanmade/create-react-wp-project", + "description": "Private tools shared between create-react-wp-plugin and create-react-wp-theme.", + "version": "0.0.1", + "dependencies": { + "chalk": "^1.1.1", + "commander": "^2.9.0", + "create-react-app": "^1.5.2", + "envinfo": "3.4.2", + "fs-extra": "^1.0.0", + "semver": "^5.0.3", + "tar-pack": "^3.4.0", + "tmp": "0.0.31", + "uppercamelcase": "^3.0.0", + "validate-npm-package-name": "^3.0.0" + } +} diff --git a/packages/react-wp-scripts/scripts/init-extra.js b/packages/react-wp-scripts/scripts/init-extra.js new file mode 100644 index 0000000..45532b9 --- /dev/null +++ b/packages/react-wp-scripts/scripts/init-extra.js @@ -0,0 +1,71 @@ +/** + * 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' ); + +module.exports = function ( + type, + appPath, + appName, + namespace +) { + const reactWPScriptsPath = path.join( appPath, 'node_modules', 'react-wp-scripts' ); + const appPackage = require( path.join( appPath, 'package.json' ) ); + + // Copy the template files. + const templateDir = path.join( reactWPScriptsPath, 'template', type ); + const replacements = { + '%%NAMESPACE%%': namespace, + '%%APP_NAME%%': appName, + }; + + fs.readdir( templateDir, ( err, files ) => { + const copied = files.map( file => { + const sourceFile = path.join( templateDir, file ); + const destinationFile = path.join( appPath, file ); + + return fs.copy( sourceFile, destinationFile ) + .then( () => new Promise( ( resolve, reject ) => { + // Replace %%NAMESPACE%% for the specified namespace + fs.readFile( destinationFile, 'utf8', function( err, data ) { + if ( err ) { + return reject( err ); + } + + let result = data; + Object.keys( replacements ).forEach( key => { + result = result.replace( key, replacements[ key ] ); + } ); + + if ( result === data ) { + return resolve(); + } + + fs.writeFile( destinationFile, result, 'utf8', function( err ) { + if ( err ) { + return reject( err ); + } + resolve(); + } ); + } ); + } ) ); + } ); + + Promise.all( copied ).then( () => { + if ( type === 'plugin' ) { + console.log( "Don't forget to activate your plugin " + chalk.green( appName ) + ' in the WordPress admin.' ); + } else { + console.log( "Don't forget to activate your theme " + chalk.green( appName ) + ' in the WordPress admin.' ); + } + } ); + } ); +}; diff --git a/packages/react-wp-scripts/template/plugin/plugin.php b/packages/react-wp-scripts/template/plugin/plugin.php new file mode 100644 index 0000000..d2c5778 --- /dev/null +++ b/packages/react-wp-scripts/template/plugin/plugin.php @@ -0,0 +1,19 @@ + Date: Fri, 9 Mar 2018 13:09:14 +1000 Subject: [PATCH 06/17] Rename scripts loader to loader.php --- packages/react-wp-scripts/scripts/init.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-wp-scripts/scripts/init.js b/packages/react-wp-scripts/scripts/init.js index 00ee54b..82c1861 100644 --- a/packages/react-wp-scripts/scripts/init.js +++ b/packages/react-wp-scripts/scripts/init.js @@ -51,7 +51,7 @@ module.exports = function( // Copy the loader.php const loaderPath = path.join( reactWPScriptsPath, 'template', 'common', 'loader.php' ); - const destinationFile = path.join( appPath, 'react-wp-scripts.php' ); + const destinationFile = path.join( appPath, 'loader.php' ); fs.copy( loaderPath, destinationFile ) .then( () => new Promise( ( resolve, reject ) => { // Replace %%NAMESPACE%% for the specified namespace From 5891d3c2c3f90a0d5868add0b19f954f1e6a39eb Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 13:09:36 +1000 Subject: [PATCH 07/17] Ignore node_modules anywhere in the packages --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index fb7a9e3..e0dbbfe 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ # dependencies -/node_modules +node_modules # misc .DS_Store From 5c9ca2790468b632b4a8018ba9d80f3d2070d850 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 13:11:46 +1000 Subject: [PATCH 08/17] Add theme command too --- packages/create-react-wp-theme/index.js | 6 +++++ packages/create-react-wp-theme/package.json | 25 +++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100755 packages/create-react-wp-theme/index.js create mode 100644 packages/create-react-wp-theme/package.json diff --git a/packages/create-react-wp-theme/index.js b/packages/create-react-wp-theme/index.js new file mode 100755 index 0000000..9e163d9 --- /dev/null +++ b/packages/create-react-wp-theme/index.js @@ -0,0 +1,6 @@ +#!/usr/bin/env node + +const packageJson = require( './package.json' ); +const run = require( '@humanmade/create-react-wp-project' ); + +run( 'theme', packageJson ); diff --git a/packages/create-react-wp-theme/package.json b/packages/create-react-wp-theme/package.json new file mode 100644 index 0000000..d37f98f --- /dev/null +++ b/packages/create-react-wp-theme/package.json @@ -0,0 +1,25 @@ +{ + "name": "create-react-wp-theme", + "description": "Easily create a React-based WordPress theme.", + "version": "0.0.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": { + "create-react-wp-theme": "./index.js" + }, + "dependencies": { + "@humanmade/create-react-wp-project": "^0.0.1" + } +} From 1500556ac9d83a4f485dc2e6b4bc87a2c1b6e935 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 13:28:18 +1000 Subject: [PATCH 09/17] Update the readme for the new commands --- README.md | 47 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 37a3c23..33199ab 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,50 @@ 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. +`react-wp-scripts` includes `create-react-wp-plugin` and `create-react-wp-theme`, which work just like [`create-react-app`](https://github.com/facebook/create-react-app). -## Installation & Usage +## Easy Setup -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. +The easiest way to get started with `react-wp-scripts` for new projects is to use the setup command to create a new project: -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`. +```sh +# For plugins: +npx create-react-wp-plugin my-app + +# For themes: +npx create-react-wp-theme my-app +``` + +You'll get a plugin or theme ready to activate in WordPress. You'll also want to start the JS development server: + +```sh +cd my-app +npm start +``` + +You can use any of the normal `react-scripts` [commands](https://github.com/facebookincubator/create-react-app/blob/master/README.md#npm-start-or-yarn-start) as normal while you develop. + +### Adding to an Existing Project + +If you already have a project created with `create-react-app`, you can easily switch it to `react-wp-scripts`: + +```sh +npm install --save react-wp-scripts +``` + +You'll need to edit the `scripts` in your `package.json`. Replace `react-scripts` with `react-wp-scripts`: + +```json + "scripts": { + "start": "react-wp-scripts start", + "build": "react-wp-scripts build", + "test": "react-wp-scripts test --env=jsdom", + "eject": "react-wp-scripts eject" + } +``` + +Finally, you'll need to load your assets into WordPress. Copy [the loader file](packages/react-wp-scripts/template/common/loader.php) into your project, and replace `%%NAMESPACE%%` with your desired namespace. Then, hook it in to WordPress: -Once installed, you can require this file from your theme or plugin code: ```php require __DIR__ . '/react-wp-scripts.php'; @@ -26,8 +61,6 @@ 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` From 6cfd18cf62b61eb86db44b76ff78f9a250ec4046 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 13:30:46 +1000 Subject: [PATCH 10/17] Add per-project readmes for the commands --- packages/create-react-wp-plugin/README.md | 7 +++++++ packages/create-react-wp-project/README.md | 7 +++++++ packages/create-react-wp-theme/README.md | 7 +++++++ 3 files changed, 21 insertions(+) create mode 100644 packages/create-react-wp-plugin/README.md create mode 100644 packages/create-react-wp-project/README.md create mode 100644 packages/create-react-wp-theme/README.md diff --git a/packages/create-react-wp-plugin/README.md b/packages/create-react-wp-plugin/README.md new file mode 100644 index 0000000..3c3d23c --- /dev/null +++ b/packages/create-react-wp-plugin/README.md @@ -0,0 +1,7 @@ +# create-react-wp-plugin + +This package includes the global plugin command for [react-wp-scripts](https://github.com/humanmade/react-wp-scripts). + +Please refer to its documentation: + +* [Getting Started](https://github.com/humanmade/react-wp-scripts/blob/master/README.md#easy-setup) – How to create a new app. diff --git a/packages/create-react-wp-project/README.md b/packages/create-react-wp-project/README.md new file mode 100644 index 0000000..4e13ec8 --- /dev/null +++ b/packages/create-react-wp-project/README.md @@ -0,0 +1,7 @@ +# create-react-wp-project + +This package includes the common core for [react-wp-scripts commands](https://github.com/humanmade/react-wp-scripts). + +Please refer to its documentation: + +* [Getting Started](https://github.com/humanmade/react-wp-scripts/blob/master/README.md#easy-setup) – How to create a new app. diff --git a/packages/create-react-wp-theme/README.md b/packages/create-react-wp-theme/README.md new file mode 100644 index 0000000..3e2e061 --- /dev/null +++ b/packages/create-react-wp-theme/README.md @@ -0,0 +1,7 @@ +# create-react-wp-theme + +This package includes the global theme command for [react-wp-scripts](https://github.com/humanmade/react-wp-scripts). + +Please refer to its documentation: + +* [Getting Started](https://github.com/humanmade/react-wp-scripts/blob/master/README.md#easy-setup) – How to create a new app. From f22e6a77bb2a801bcae70f3d0b8e0d5fb1880225 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 13:36:17 +1000 Subject: [PATCH 11/17] Split the react-wp-scripts guide --- README.md | 31 ++++---------------------- packages/react-wp-scripts/README.md | 34 +++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+), 27 deletions(-) create mode 100644 packages/react-wp-scripts/README.md diff --git a/README.md b/README.md index 33199ab..d9700ef 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,10 @@ # react-wp-scripts -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. +Create React-based WordPress plugins and themes with no build configuration, just like [Create React App](https://github.com/facebook/create-react-app). -`react-wp-scripts` includes `create-react-wp-plugin` and `create-react-wp-theme`, which work just like [`create-react-app`](https://github.com/facebook/create-react-app). +* [Creating a Plugin or Theme](#easy-setup) - How to create a React-based plugin or theme. +* [Adding to an Existing Project](#adding-to-an-existing-project) - How to add `react-wp-scripts` to your existing React project. +* [User Guide](packages/react-wp-scripts/README.md) - How to develop plugins and themes bootstrapped with `react-wp-scripts` ## Easy Setup @@ -61,17 +63,6 @@ add_action( 'wp_enqueue_scripts', 'myproject_enqueue_assets' ); This will load all generated JS and CSS into your theme or plugin. -## 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: - -- `base_url`: The URL of the project base that contains the `src` and `build` directories. If not specified, this URL will be inferred from the provided directory path string. -- `handle`: The handle to use when registering the app's script and stylesheet. This will default to the last part of the directory passed to enqueue_assets. -- `scripts`: An array of script dependencies to load before your bundle. -- `styles`: An array of stylesheet dependencies to load before your bundle. - ## How It Works This project solves two issues that prevent seamless usage of Webpack projects in WordPress themes and plugins: @@ -86,17 +77,3 @@ Running `npm start`, on the other hand, doesn't output a thing: this is because `react-wp-scripts` wraps the default `react-scripts` "start" command with code that tweaks the development Webpack and `webpack-dev-server` configuration objects, injecting cross-origin headers, a `webpack-manifest-plugin` plugin configured to output from within `webpack-dev-server`, and other optimizations to allow WordPress and the Webpack build to properly communicate. All successful builds will now create an `assets-manifest.json` file, either at the project root (when the development server is running) or in the `build/` directory (as part of a static build). Finally, the PHP in `loader.php` uses the location of the generated `assets-manifest.json` file to enqueue scripts either from the development server or from the static `build/` directory. - -## Troubleshooting - -### Server will not start - -If the development server will not start or WordPress is showing script errors, try deleting the `assets-manifest.json` in the project root then re-start the development server. - -### Scripts do not load - -If the development server is not running, the root `assets-manifest.json` is not present, and scripts still will not load, re-run `npm run build` to re-generate any build assets that may be missing. - -### Fatal Error: Cannot redeclare ReactWPScripts... - -If you get an error that you cannot reduplicate a method in the `ReactWPScripts` namespace, the cause is likely that two copies of `loader.php` are present in separate plugins or themes. Switch the copy in the plugin or theme under development to use a different namespace to avoid collision. diff --git a/packages/react-wp-scripts/README.md b/packages/react-wp-scripts/README.md new file mode 100644 index 0000000..d58c8c5 --- /dev/null +++ b/packages/react-wp-scripts/README.md @@ -0,0 +1,34 @@ +# react-wp-scripts User Guide + +`react-wp-scripts` is 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 in WordPress while developing a theme or plugin. + +`react-wp-scripts` projects are just like Create React App projects, so you should read [Create React App's User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) for most questions. + +This user guide is specifically for the `react-wp-scripts`-specific code. + + +## 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: + +- `base_url`: The URL of the project base that contains the `src` and `build` directories. If not specified, this URL will be inferred from the provided directory path string. +- `handle`: The handle to use when registering the app's script and stylesheet. This will default to the last part of the directory passed to enqueue_assets. +- `scripts`: An array of script dependencies to load before your bundle. +- `styles`: An array of stylesheet dependencies to load before your bundle. + + +## Troubleshooting + +### Server will not start + +If the development server will not start or WordPress is showing script errors, try deleting the `assets-manifest.json` in the project root then re-start the development server. + +### Scripts do not load + +If the development server is not running, the root `assets-manifest.json` is not present, and scripts still will not load, re-run `npm run build` to re-generate any build assets that may be missing. + +### Fatal Error: Cannot redeclare ReactWPScripts... + +If you get an error that you cannot reduplicate a method in the `ReactWPScripts` namespace, the cause is likely that two copies of `loader.php` are present in separate plugins or themes. Switch the copy in the plugin or theme under development to use a different namespace to avoid collision. From f54e2535b9b904bc08b31568396ca49399c6f82c Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 16:23:43 +1000 Subject: [PATCH 12/17] Ensure create-react-wp-project is publicly published --- packages/create-react-wp-project/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/create-react-wp-project/package.json b/packages/create-react-wp-project/package.json index aa98c6b..c711d85 100644 --- a/packages/create-react-wp-project/package.json +++ b/packages/create-react-wp-project/package.json @@ -2,6 +2,9 @@ "name": "@humanmade/create-react-wp-project", "description": "Private tools shared between create-react-wp-plugin and create-react-wp-theme.", "version": "0.0.1", + "publishConfig": { + "access": "public" + }, "dependencies": { "chalk": "^1.1.1", "commander": "^2.9.0", From c59affadf9fad6cd68f53e45c7bca88cecbb4377 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 16:56:57 +1000 Subject: [PATCH 13/17] Move the config directory too --- {config => packages/react-wp-scripts/config}/env.js | 0 .../react-wp-scripts/config}/jest/babelTransform.js | 0 {config => packages/react-wp-scripts/config}/jest/cssTransform.js | 0 .../react-wp-scripts/config}/jest/fileTransform.js | 0 {config => packages/react-wp-scripts/config}/paths.js | 0 {config => packages/react-wp-scripts/config}/polyfills.js | 0 .../react-wp-scripts/config}/webpack.config.dev.js | 0 .../react-wp-scripts/config}/webpack.config.prod.js | 0 .../react-wp-scripts/config}/webpackDevServer.config.js | 0 9 files changed, 0 insertions(+), 0 deletions(-) rename {config => packages/react-wp-scripts/config}/env.js (100%) rename {config => packages/react-wp-scripts/config}/jest/babelTransform.js (100%) rename {config => packages/react-wp-scripts/config}/jest/cssTransform.js (100%) rename {config => packages/react-wp-scripts/config}/jest/fileTransform.js (100%) rename {config => packages/react-wp-scripts/config}/paths.js (100%) rename {config => packages/react-wp-scripts/config}/polyfills.js (100%) rename {config => packages/react-wp-scripts/config}/webpack.config.dev.js (100%) rename {config => packages/react-wp-scripts/config}/webpack.config.prod.js (100%) rename {config => packages/react-wp-scripts/config}/webpackDevServer.config.js (100%) diff --git a/config/env.js b/packages/react-wp-scripts/config/env.js similarity index 100% rename from config/env.js rename to packages/react-wp-scripts/config/env.js diff --git a/config/jest/babelTransform.js b/packages/react-wp-scripts/config/jest/babelTransform.js similarity index 100% rename from config/jest/babelTransform.js rename to packages/react-wp-scripts/config/jest/babelTransform.js diff --git a/config/jest/cssTransform.js b/packages/react-wp-scripts/config/jest/cssTransform.js similarity index 100% rename from config/jest/cssTransform.js rename to packages/react-wp-scripts/config/jest/cssTransform.js diff --git a/config/jest/fileTransform.js b/packages/react-wp-scripts/config/jest/fileTransform.js similarity index 100% rename from config/jest/fileTransform.js rename to packages/react-wp-scripts/config/jest/fileTransform.js diff --git a/config/paths.js b/packages/react-wp-scripts/config/paths.js similarity index 100% rename from config/paths.js rename to packages/react-wp-scripts/config/paths.js diff --git a/config/polyfills.js b/packages/react-wp-scripts/config/polyfills.js similarity index 100% rename from config/polyfills.js rename to packages/react-wp-scripts/config/polyfills.js diff --git a/config/webpack.config.dev.js b/packages/react-wp-scripts/config/webpack.config.dev.js similarity index 100% rename from config/webpack.config.dev.js rename to packages/react-wp-scripts/config/webpack.config.dev.js diff --git a/config/webpack.config.prod.js b/packages/react-wp-scripts/config/webpack.config.prod.js similarity index 100% rename from config/webpack.config.prod.js rename to packages/react-wp-scripts/config/webpack.config.prod.js diff --git a/config/webpackDevServer.config.js b/packages/react-wp-scripts/config/webpackDevServer.config.js similarity index 100% rename from config/webpackDevServer.config.js rename to packages/react-wp-scripts/config/webpackDevServer.config.js From a32af8389d690c6252257647afc95530c15a009a Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 17:51:36 +1000 Subject: [PATCH 14/17] Avoid duplicate naming --- packages/react-wp-scripts/template/common/loader.php | 2 +- packages/react-wp-scripts/template/plugin/plugin.php | 2 +- packages/react-wp-scripts/template/theme/functions.php | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-wp-scripts/template/common/loader.php b/packages/react-wp-scripts/template/common/loader.php index dca7c66..010c55e 100644 --- a/packages/react-wp-scripts/template/common/loader.php +++ b/packages/react-wp-scripts/template/common/loader.php @@ -3,7 +3,7 @@ * Entrypoint for the theme. */ -namespace %%NAMESPACE%%; +namespace %%NAMESPACE%%\Loader; /** * Is this a development environment? diff --git a/packages/react-wp-scripts/template/plugin/plugin.php b/packages/react-wp-scripts/template/plugin/plugin.php index d2c5778..ab8fdfd 100644 --- a/packages/react-wp-scripts/template/plugin/plugin.php +++ b/packages/react-wp-scripts/template/plugin/plugin.php @@ -15,5 +15,5 @@ function enqueue_assets() { // Add additional options here: $options = []; - enqueue_assets( plugin_dir_path( __FILE__ ), $options ); + Loader\enqueue_assets( plugin_dir_path( __FILE__ ), $options ); } diff --git a/packages/react-wp-scripts/template/theme/functions.php b/packages/react-wp-scripts/template/theme/functions.php index a7a4d60..df8f046 100644 --- a/packages/react-wp-scripts/template/theme/functions.php +++ b/packages/react-wp-scripts/template/theme/functions.php @@ -16,5 +16,5 @@ function enqueue_assets() { // Add additional options here: $options = []; - enqueue_assets( get_stylesheet_directory(), $options ); + Loader\enqueue_assets( get_stylesheet_directory(), $options ); } From 8a1bc2a84afe68392d54dd53584dd6ca8f47af41 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 17:51:59 +1000 Subject: [PATCH 15/17] Add minimum viable theme files --- .../react-wp-scripts/template/theme/footer.php | 10 ++++++++++ .../react-wp-scripts/template/theme/header.php | 17 +++++++++++++++++ .../react-wp-scripts/template/theme/index.php | 13 +++++++++++++ 3 files changed, 40 insertions(+) create mode 100644 packages/react-wp-scripts/template/theme/footer.php create mode 100644 packages/react-wp-scripts/template/theme/header.php create mode 100644 packages/react-wp-scripts/template/theme/index.php diff --git a/packages/react-wp-scripts/template/theme/footer.php b/packages/react-wp-scripts/template/theme/footer.php new file mode 100644 index 0000000..3c056a7 --- /dev/null +++ b/packages/react-wp-scripts/template/theme/footer.php @@ -0,0 +1,10 @@ + + + + + diff --git a/packages/react-wp-scripts/template/theme/header.php b/packages/react-wp-scripts/template/theme/header.php new file mode 100644 index 0000000..065aa98 --- /dev/null +++ b/packages/react-wp-scripts/template/theme/header.php @@ -0,0 +1,17 @@ + + +> + + + + + + + + +> diff --git a/packages/react-wp-scripts/template/theme/index.php b/packages/react-wp-scripts/template/theme/index.php new file mode 100644 index 0000000..e165107 --- /dev/null +++ b/packages/react-wp-scripts/template/theme/index.php @@ -0,0 +1,13 @@ + + +
+ + Date: Fri, 9 Mar 2018 17:55:55 +1000 Subject: [PATCH 16/17] Remove dead code --- packages/create-react-wp-project/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/create-react-wp-project/index.js b/packages/create-react-wp-project/index.js index d57ddd4..37fccd4 100644 --- a/packages/create-react-wp-project/index.js +++ b/packages/create-react-wp-project/index.js @@ -110,8 +110,6 @@ module.exports = function ( projectType, packageJson ) { // Resolve the supplied path into an actual name. const fullProjectPath = path.resolve( process.cwd(), projectName ); const autoNamespace = upperCamelCase( path.basename( fullProjectPath ) ); - // console.log( autoNamespace ); - // return; // Run create-react-app with all the additional arguments. runCRA( args.slice( 2 ), autoNamespace ) From a942243afdd509a423e1eecba041dcbe63b66ba2 Mon Sep 17 00:00:00 2001 From: Ryan McCue Date: Fri, 9 Mar 2018 17:56:08 +1000 Subject: [PATCH 17/17] Switch scripts-version to npm-installed version --- packages/create-react-wp-project/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-wp-project/index.js b/packages/create-react-wp-project/index.js index 37fccd4..54a8396 100644 --- a/packages/create-react-wp-project/index.js +++ b/packages/create-react-wp-project/index.js @@ -18,7 +18,7 @@ function runCRA( args, namespace ) { args.unshift( '--using-crwp', '--scripts-version', - 'file:' + __dirname + '/../react-wp-scripts', + 'react-wp-scripts', '--php-namespace', namespace, );