Fix package.json not getting updated correctly

Author: devloco

packages/react-scripts/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@devloco/react-scripts-wptheme",
-  "version": "3.3.0-wp.3",
+  "version": "3.3.0-wp.11",
   "description": "Configuration and scripts for Create React WP Theme.",
-  "repository": "devloco/create-react-wptheme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devloco/create-react-wptheme-scripts.git",
+    "directory": "packages/react-scripts"
+  },
   "author": "devloco",
   "license": "MIT",
   "keywords": [
@@ -30,10 +34,7 @@
     "bin",
     "config",
     "lib",
-    "scripts",
-    "template",
-    "template-typescript",
-    "utils"
+    "scripts"
   ],
   "bin": {
     "react-scripts": "./bin/react-scripts.js",

packages/react-scripts/scripts/init-wptheme.js

@@ -15,25 +15,20 @@ process.on('unhandledRejection', err => {
 });
 
 const fs = require('fs-extra');
-const os = require('os');
 const path = require('path');
 const chalk = require('chalk');
 const shelljs = require('@devloco/create-react-wptheme-utils/shell-js');
-const spawn = require('react-dev-utils/crossSpawn');
 
-module.exports = function(
+const fnUpdateAppPackage = function(
+  appPackage,
   appPath,
   appName,
   verbose,
   originalDirectory,
   templateName,
   readmeExists,
-  useTypeScript,
   useYarn
 ) {
-  const appPackage = require(path.join(appPath, 'package.json'));
-  const reactSrcName = 'react-src';
-
   let aOriginalDirectory = originalDirectory.replace(/\\/g, '/').split('/');
   let originalThemeName = aOriginalDirectory[aOriginalDirectory.length - 1];
 
@@ -62,11 +57,22 @@ module.exports = function(
   // Set the app name correctly
   appPackage.name = originalThemeName;
 
-  // rewrite package.json
-  fs.writeFileSync(
-    path.join(appPath, 'package.json'),
-    JSON.stringify(appPackage, null, 2) + os.EOL
-  );
+  return appPackage;
+};
+
+const fnFinish = function(
+  appPackage,
+  appPath,
+  appName,
+  verbose,
+  originalDirectory,
+  templateName,
+  readmeExists,
+  useYarn
+) {
+  const reactSrcName = 'react-src';
+  let aOriginalDirectory = originalDirectory.replace(/\\/g, '/').split('/');
+  let originalThemeName = aOriginalDirectory[aOriginalDirectory.length - 1];
 
   // Update the theme's style.css file with the Theme Name
   let styleCssFile = path.join(appPath, '/public/style.css');
@@ -77,22 +83,6 @@ module.exports = function(
   );
   fs.writeFileSync(styleCssFile, result, 'utf8', 'w');
 
-  // To use TypeScript, we need the types from Facebook's react-scripts.
-  if (useTypeScript === true) {
-    let command = useYarn ? 'yarn add' : 'npm install';
-    let args = [verbose && '--verbose'].filter(e => e);
-    args.push('react-scripts');
-
-    console.log(`Installing react-scripts using: ${command}...`);
-    console.log();
-
-    const proc = spawn.sync(command, args, { stdio: 'inherit' });
-    if (proc.status !== 0) {
-      console.error(`\`${command} ${args.join(' ')}\` failed`);
-      return;
-    }
-  }
-
   // if we're not on Windows, then try to chmod the folder so that the PHP portion of
   // the setup can complete (the webserver needs write access to package.json)
   if (process.platform !== 'win32') {
@@ -139,6 +129,8 @@ module.exports = function(
 
   // Change displayed command to yarn instead of yarnPkg
   const displayedCommand = useYarn ? 'yarn' : 'npm run';
+  const buildCommandName = 'build';
+  const startCommandName = 'start';
 
   console.log();
   console.log(`Success! Created ${originalThemeName} at ${appPath}`);
@@ -171,3 +163,8 @@ module.exports = function(
   console.log();
   console.log('Happy hacking!');
 };
+
+module.exports = {
+  fnFinish,
+  fnUpdateAppPackage,
+};

packages/react-scripts/scripts/init.js

@@ -24,6 +24,8 @@ const os = require('os');
 const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
 const initWpTheme = require('./init-wptheme');
 
+let _readmeExists = false;
+
 function isInGitRepository() {
   try {
     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
@@ -83,7 +85,7 @@ module.exports = function(
   originalDirectory,
   templateName
 ) {
-  const appPackage = require(path.join(appPath, 'package.json'));
+  let appPackage = require(path.join(appPath, 'package.json'));
   const useYarn = fs.existsSync(path.join(appPath, 'yarn.lock'));
 
   if (!templateName) {
@@ -153,13 +155,25 @@ module.exports = function(
   // Setup the browsers list
   appPackage.browserslist = defaultBrowsers;
 
+  _readmeExists = fs.existsSync(path.join(appPath, 'README.md'));
+
+  appPackage = initWpTheme.fnUpdateAppPackage(
+    appPackage,
+    appPath,
+    appName,
+    verbose,
+    originalDirectory,
+    templateName,
+    _readmeExists,
+    useYarn
+  );
+
   fs.writeFileSync(
     path.join(appPath, 'package.json'),
     JSON.stringify(appPackage, null, 2) + os.EOL
   );
 
-  const readmeExists = fs.existsSync(path.join(appPath, 'README.md'));
-  if (readmeExists) {
+  if (_readmeExists) {
     fs.renameSync(
       path.join(appPath, 'README.md'),
       path.join(appPath, 'README.old.md')
@@ -252,11 +266,9 @@ module.exports = function(
     }
   }
 
-  let useTypeScript = false;
   if (args.find(arg => arg.includes('typescript'))) {
     console.log();
     verifyTypeScriptSetup();
-    useTypeScript = true;
   }
 
   // Remove template
@@ -277,16 +289,17 @@ module.exports = function(
   }
 
   // wptheme intercept -- stop the standard create-react-app init here... wptheme will take over and display the final message.
-  return initWpTheme(
+  initWpTheme.fnFinish(
+    appPackage,
     appPath,
     appName,
     verbose,
     originalDirectory,
     templateName,
-    readmeExists,
-    useTypeScript,
+    _readmeExists,
     useYarn
   );
+  return;
 
   // Display the most elegant way to cd.
   // This needs to handle an undefined originalDirectory for
@@ -330,7 +343,7 @@ module.exports = function(
   console.log();
   console.log(chalk.cyan('  cd'), cdpath);
   console.log(`  ${chalk.cyan(`${displayedCommand} start`)}`);
-  if (readmeExists) {
+  if (_readmeExists) {
     console.log();
     console.log(
       chalk.yellow(

packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

@@ -12,7 +12,7 @@ const chalk = require('react-dev-utils/chalk');
 const fs = require('fs');
 const resolve = require('resolve');
 const path = require('path');
-const paths = require('../../config/paths');
+const paths = require('../../config/paths-wptheme');
 const os = require('os');
 const immer = require('react-dev-utils/immer').produce;
 const globby = require('react-dev-utils/globby').sync;
@@ -252,11 +252,11 @@ function verifyTypeScriptSetup() {
     writeJson(paths.appTsConfig, appTsConfig);
   }
 
-  // Reference `react-scripts` types
+  // Reference `@devloco/react-scripts-wptheme` types
   if (!fs.existsSync(paths.appTypeDeclarations)) {
     fs.writeFileSync(
       paths.appTypeDeclarations,
-      `/// <reference types="react-scripts" />${os.EOL}`
+      `/// <reference types="@devloco/react-scripts-wptheme" />${os.EOL}`
     );
   }
 }