refactor: ensure dep and devDeps are always defined when retrievi…

…ng `package.json` Doing this just after having read the file enable us to remove duplication and unneeded calls to `writePackageJson`.
storybookjs · Jun 8, 2020 · 1504dd5 · 1504dd5
1 parent bec5f45
commit 1504dd5
Show file tree

Hide file tree

Showing 20 changed files with 20 additions and 103 deletions.
diff --git a/lib/cli/src/generators/ANGULAR/index.ts b/lib/cli/src/generators/ANGULAR/index.ts
@@ -9,7 +9,7 @@ import { getBabelDependencies, writeFileAsJson, copyTemplate } from '../../helpe
 import { StoryFormat } from '../../project_types';
 import { NpmOptions } from '../../NpmOptions';
 import { Generator, GeneratorOptions } from '../Generator';
-import { JsPackageManager, writePackageJson } from '../../js-package-manager';
+import { JsPackageManager } from '../../js-package-manager';
 
 async function addDependencies(
   packageManager: JsPackageManager,
@@ -31,11 +31,6 @@ async function addDependencies(
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/AURELIA/index.ts b/lib/cli/src/generators/AURELIA/index.ts
@@ -1,7 +1,6 @@
 import { getBabelDependencies, writeFileAsJson, copyTemplate, readFileAsJson } from '../../helpers';
 import { Generator } from '../Generator';
 import { StoryFormat } from '../../project_types';
-import { writePackageJson } from '../../js-package-manager';
 
 function addStorybookExcludeGlobToTsConfig() {
   const tsConfigJson = readFileAsJson('tsconfig.json', true);
@@ -43,9 +42,6 @@ const generator: Generator = async (
 
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
   const packageJson = packageManager.retrievePackageJson();
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-  writePackageJson(packageJson);
   addStorybookExcludeGlobToTsConfig();
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/EMBER/index.ts b/lib/cli/src/generators/EMBER/index.ts
@@ -1,6 +1,5 @@
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const [
@@ -24,12 +23,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   copyTemplate(__dirname, storyFormat);
 
   const packageJson = packageManager.retrievePackageJson();
-
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/HTML/index.ts b/lib/cli/src/generators/HTML/index.ts
@@ -1,7 +1,6 @@
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { StoryFormat } from '../../project_types';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const packages = ['@storybook/html', '@storybook/addon-actions', '@storybook/addon-links'];
@@ -14,10 +13,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
   copyTemplate(__dirname, storyFormat);
 
   const packageJson = packageManager.retrievePackageJson();
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
   packageManager.addDependencies({ ...npmOptions, packageJson }, [
     ...versionedPackages,

diff --git a/lib/cli/src/generators/MARIONETTE/index.ts b/lib/cli/src/generators/MARIONETTE/index.ts
@@ -2,19 +2,13 @@ import fse from 'fs-extra';
 import path from 'path';
 import { getBabelDependencies } from '../../helpers';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions) => {
   const storybookVersion = await packageManager.getVersion('@storybook/marionette');
   fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/MARKO/index.ts b/lib/cli/src/generators/MARKO/index.ts
@@ -1,6 +1,5 @@
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const [
@@ -17,11 +16,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/METEOR/index.ts b/lib/cli/src/generators/METEOR/index.ts
@@ -31,9 +31,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.devDependencies = packageJson.devDependencies || {};
-  packageJson.dependencies = packageJson.dependencies || {};
-
   const devDependencies = [
     `@storybook/react@${storybookVersion}`,
     `@storybook/addon-actions@${actionsVersion}`,

diff --git a/lib/cli/src/generators/MITHRIL/index.ts b/lib/cli/src/generators/MITHRIL/index.ts
@@ -1,6 +1,5 @@
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const [
@@ -21,11 +20,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/PREACT/index.ts b/lib/cli/src/generators/PREACT/index.ts
@@ -1,6 +1,5 @@
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const [
@@ -19,11 +18,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/RAX/index.ts b/lib/cli/src/generators/RAX/index.ts
@@ -21,9 +21,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
   const raxVersion = packageJson.dependencies.rax || latestRaxVersion;
 
   // in case Rax project is not detected, `rax` package is not available either

diff --git a/lib/cli/src/generators/REACT/index.ts b/lib/cli/src/generators/REACT/index.ts
@@ -1,7 +1,6 @@
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { StoryFormat } from '../../project_types';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const packages = [
@@ -20,11 +19,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/lib/cli/src/generators/REACT_SCRIPTS/index.ts
@@ -3,7 +3,6 @@ import fs from 'fs';
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { StoryFormat } from '../../project_types';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const packages = [
@@ -24,11 +23,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/SFC_VUE/index.ts b/lib/cli/src/generators/SFC_VUE/index.ts
@@ -1,7 +1,6 @@
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { StoryFormat } from '../../project_types';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const packages = [
@@ -19,11 +18,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts
@@ -1,6 +1,5 @@
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const [
@@ -23,11 +22,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/VUE/index.ts b/lib/cli/src/generators/VUE/index.ts
@@ -24,9 +24,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
   const packageBabelCoreVersion =
     packageJson.dependencies['babel-core'] || packageJson.devDependencies['babel-core'];
 

diff --git a/lib/cli/src/generators/WEB-COMPONENTS/index.ts b/lib/cli/src/generators/WEB-COMPONENTS/index.ts
@@ -3,7 +3,6 @@ import path from 'path';
 import { getBabelDependencies } from '../../helpers';
 import { StoryFormat } from '../../project_types';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const packages = [
@@ -23,11 +22,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/generators/WEBPACK_REACT/index.ts b/lib/cli/src/generators/WEBPACK_REACT/index.ts
@@ -1,7 +1,6 @@
 import { getBabelDependencies, copyTemplate } from '../../helpers';
 import { StoryFormat } from '../../project_types';
 import { Generator } from '../Generator';
-import { writePackageJson } from '../../js-package-manager';
 
 const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
   const packages = [
@@ -19,11 +18,6 @@ const generator: Generator = async (packageManager, npmOptions, { storyFormat })
 
   const packageJson = packageManager.retrievePackageJson();
 
-  packageJson.dependencies = packageJson.dependencies || {};
-  packageJson.devDependencies = packageJson.devDependencies || {};
-
-  writePackageJson(packageJson);
-
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   packageManager.addDependencies({ ...npmOptions, packageJson }, [

diff --git a/lib/cli/src/helpers.ts b/lib/cli/src/helpers.ts
@@ -7,7 +7,7 @@ import { satisfies } from '@storybook/semver';
 import stripJsonComments from 'strip-json-comments';
 
 import { StoryFormat } from './project_types';
-import { JsPackageManager, PackageJson } from './js-package-manager';
+import { JsPackageManager, PackageJson, PackageJsonWithDepsAndDevDeps } from './js-package-manager';
 
 const logger = console;
 
@@ -118,7 +118,7 @@ export function codeLog(codeLines: string[], leftPadAmount?: number) {
  */
 export async function getBabelDependencies(
   packageManager: JsPackageManager,
-  packageJson: PackageJson
+  packageJson: PackageJsonWithDepsAndDevDeps
 ) {
   const dependenciesToAdd = [];
   let babelLoaderVersion = '^8.0.0-0';

diff --git a/lib/cli/src/js-package-manager/JsPackageManager.ts b/lib/cli/src/js-package-manager/JsPackageManager.ts
@@ -2,7 +2,7 @@ import chalk from 'chalk';
 import { gt, satisfies } from '@storybook/semver';
 import { sync as spawnSync } from 'cross-spawn';
 import { commandLog } from '../helpers';
-import { PackageJson } from './PackageJson';
+import { PackageJson, PackageJsonWithDepsAndDevDeps } from './PackageJson';
 import { readPackageJson, writePackageJson } from './PackageJsonHelper';
 
 const logger = console;
@@ -34,17 +34,21 @@ export abstract class JsPackageManager {
     done();
   }
 
-  public retrievePackageJson(): PackageJson {
-    const existing = readPackageJson();
-    if (existing) {
-      return existing;
-    }
+  public retrievePackageJson(): PackageJsonWithDepsAndDevDeps {
+    let packageJson = readPackageJson();
+    if (!packageJson) {
+      // It will create a new package.json file
+      this.initPackageJson();
 
-    // It will create a new package.json file
-    this.initPackageJson();
+      // read the newly created package.json file
+      packageJson = readPackageJson() || {};
+    }
 
-    // read the newly created package.json file
-    return readPackageJson() || {};
+    return {
+      ...packageJson,
+      dependencies: { ...packageJson.dependencies },
+      devDependencies: { ...packageJson.devDependencies },
+    };
   }
 
   /**

diff --git a/lib/cli/src/js-package-manager/PackageJson.ts b/lib/cli/src/js-package-manager/PackageJson.ts
@@ -4,3 +4,6 @@ export type PackageJson = {
   peerDependencies?: Record<string, string>;
   scripts?: Record<string, string>;
 };
+
+export type PackageJsonWithDepsAndDevDeps = PackageJson &
+  Required<Pick<PackageJson, 'dependencies' | 'devDependencies'>>;