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 diff --git a/README.md b/README.md index 37a3c23..d9700ef 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,53 @@ # 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). -**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. +* [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` -## 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,19 +63,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` - -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: @@ -53,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/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 index d291692..156b820 100644 --- a/package.json +++ b/package.json @@ -1,28 +1,9 @@ { - "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" - } + "private": true, + "workspaces": [ + "packages/*" + ], + "devDependencies": { + "lerna": "^2.9.0" + } } 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-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/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-project/index.js b/packages/create-react-wp-project/index.js new file mode 100644 index 0000000..54a8396 --- /dev/null +++ b/packages/create-react-wp-project/index.js @@ -0,0 +1,153 @@ +#!/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', + '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 ) ); + + // 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..c711d85 --- /dev/null +++ b/packages/create-react-wp-project/package.json @@ -0,0 +1,20 @@ +{ + "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", + "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/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. 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" + } +} 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. 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/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 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/packages/react-wp-scripts/package.json b/packages/react-wp-scripts/package.json new file mode 100644 index 0000000..d291692 --- /dev/null +++ b/packages/react-wp-scripts/package.json @@ -0,0 +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": { + "chalk": "^2.3.2", + "minimist": "^1.2.0", + "react-scripts": "1.0.17", + "signal-exit": "^3.0.2" + } +} 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/scripts/init.js b/packages/react-wp-scripts/scripts/init.js similarity index 78% rename from scripts/init.js rename to packages/react-wp-scripts/scripts/init.js index 5a07d8f..82c1861 100644 --- a/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 ); @@ -48,9 +49,9 @@ 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' ); + const destinationFile = path.join( appPath, 'loader.php' ); fs.copy( loaderPath, destinationFile ) .then( () => new Promise( ( resolve, reject ) => { // Replace %%NAMESPACE%% for the specified namespace @@ -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:' ) ); 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 diff --git a/loader.php b/packages/react-wp-scripts/template/common/loader.php similarity index 99% rename from loader.php rename to packages/react-wp-scripts/template/common/loader.php index dca7c66..010c55e 100644 --- a/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 new file mode 100644 index 0000000..ab8fdfd --- /dev/null +++ b/packages/react-wp-scripts/template/plugin/plugin.php @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/react-wp-scripts/template/theme/functions.php b/packages/react-wp-scripts/template/theme/functions.php new file mode 100644 index 0000000..df8f046 --- /dev/null +++ b/packages/react-wp-scripts/template/theme/functions.php @@ -0,0 +1,20 @@ + + +> + + + + + + + + +> 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 @@ + + +
+ +