cleanup(web): use json utils (#5944)

packages/web/src/executors/build/build.impl.ts

@@ -1,4 +1,4 @@
-import { ExecutorContext } from '@nrwl/devkit';
+import type { ExecutorContext } from '@nrwl/devkit';
 import * as webpack from 'webpack';
 import { Stats } from 'webpack';
 

packages/web/src/executors/package/package.impl.ts

@@ -1,4 +1,5 @@
-import { ExecutorContext, logger, names } from '@nrwl/devkit';
+import { readJsonFile, writeJsonFile, logger, names } from '@nrwl/devkit';
+import type { ExecutorContext, ProjectGraphNode } from '@nrwl/devkit';
 
 import * as rollup from 'rollup';
 import * as peerDepsExternal from 'rollup-plugin-peer-deps-external';
@@ -21,14 +22,7 @@ import { catchError, concatMap, last, tap } from 'rxjs/operators';
 import { eachValueFrom } from 'rxjs-for-await';
 import * as autoprefixer from 'autoprefixer';
 
-import {
+import { createProjectGraph } from '@nrwl/workspace/src/core/project-graph';
-  readJsonFile,
-  writeJsonFile,
-} from '@nrwl/workspace/src/utilities/fileutils';
-import {
-  createProjectGraph,
-  ProjectGraphNode,
-} from '@nrwl/workspace/src/core/project-graph';
 import {
   calculateProjectDependencies,
   checkDependentProjectsHaveBeenBuilt,

packages/web/src/migrations/update-11-5-2/create-babelrc-for-workspace-libs.spec.ts

@@ -1,5 +1,5 @@
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { readJson, DependencyType } from '@nrwl/devkit';
+import { readJson, writeJson, DependencyType } from '@nrwl/devkit';
 import { createBabelrcForWorkspaceLibs } from './create-babelrc-for-workspace-libs';
 import type { ProjectGraph, Tree } from '@nrwl/devkit';
 
@@ -17,47 +17,41 @@ describe('Create missing .babelrc files', () => {
   });
 
   it(`should create .babelrc files for libs that are used in '@nrwl/web:build'`, async () => {
-    tree.write(
+    writeJson(tree, 'workspace.json', {
-      'workspace.json',
+      projects: {
-      JSON.stringify({
+        webapp: {
-        projects: {
+          root: 'apps/webapp',
-          webapp: {
+          projectType: 'application',
-            root: 'apps/webapp',
+          targets: {
-            projectType: 'application',
+            build: { executor: '@nrwl/web:build' },
-            targets: {
-              build: { executor: '@nrwl/web:build' },
-            },
-          },
-          nodeapp: {
-            root: 'apps/nodeapp',
-            projectType: 'application',
-            targets: {
-              build: { executor: '@nrwl/node:build' },
-            },
-          },
-          weblib: {
-            root: 'libs/weblib',
-            projectType: 'library',
-          },
-          nodelib: {
-            root: 'libs/nodelib',
-            projectType: 'library',
           },
         },
-      })
+        nodeapp: {
-    );
+          root: 'apps/nodeapp',
-    tree.write(
+          projectType: 'application',
-      'nx.json',
+          targets: {
-      JSON.stringify({
+            build: { executor: '@nrwl/node:build' },
-        npmScope: 'proj',
+          },
-        projects: {
-          webapp: {},
-          nodeapp: {},
-          weblib: {},
-          nodelib: {},
         },
-      })
+        weblib: {
-    );
+          root: 'libs/weblib',
+          projectType: 'library',
+        },
+        nodelib: {
+          root: 'libs/nodelib',
+          projectType: 'library',
+        },
+      },
+    });
+    writeJson(tree, 'nx.json', {
+      npmScope: 'proj',
+      projects: {
+        webapp: {},
+        nodeapp: {},
+        weblib: {},
+        nodelib: {},
+      },
+    });
     tree.write('apps/webapp/index.ts', `import '@proj/weblib';`);
 
     projectGraph = {
@@ -116,47 +110,41 @@ describe('Create missing .babelrc files', () => {
   });
 
   it('should not error if there are circular dependencies', async () => {
-    tree.write(
+    writeJson(tree, 'workspace.json', {
-      'workspace.json',
+      projects: {
-      JSON.stringify({
+        webapp: {
-        projects: {
+          root: 'apps/webapp',
-          webapp: {
+          projectType: 'application',
-            root: 'apps/webapp',
+          targets: {
-            projectType: 'application',
+            build: { executor: '@nrwl/web:build' },
-            targets: {
-              build: { executor: '@nrwl/web:build' },
-            },
-          },
-          nodeapp: {
-            root: 'apps/nodeapp',
-            projectType: 'application',
-            targets: {
-              build: { executor: '@nrwl/node:build' },
-            },
-          },
-          weblib: {
-            root: 'libs/weblib',
-            projectType: 'library',
-          },
-          nodelib: {
-            root: 'libs/nodelib',
-            projectType: 'library',
           },
         },
-      })
+        nodeapp: {
-    );
+          root: 'apps/nodeapp',
-    tree.write(
+          projectType: 'application',
-      'nx.json',
+          targets: {
-      JSON.stringify({
+            build: { executor: '@nrwl/node:build' },
-        npmScope: 'proj',
+          },
-        projects: {
-          webapp: {},
-          nodeapp: {},
-          weblib: {},
-          nodelib: {},
         },
-      })
+        weblib: {
-    );
+          root: 'libs/weblib',
+          projectType: 'library',
+        },
+        nodelib: {
+          root: 'libs/nodelib',
+          projectType: 'library',
+        },
+      },
+    });
+    writeJson(tree, 'nx.json', {
+      npmScope: 'proj',
+      projects: {
+        webapp: {},
+        nodeapp: {},
+        weblib: {},
+        nodelib: {},
+      },
+    });
     tree.write('apps/webapp/index.ts', `import '@proj/weblib';`);
 
     projectGraph = {

packages/web/src/migrations/update-11-5-2/create-babelrc-for-workspace-libs.ts

@@ -1,4 +1,4 @@
-import { formatFiles, getProjects, Tree } from '@nrwl/devkit';
+import { formatFiles, getProjects, Tree, writeJson } from '@nrwl/devkit';
 import {
   createProjectGraph,
   reverse,
@@ -18,10 +18,7 @@ export async function createBabelrcForWorkspaceLibs(host: Tree) {
     if (p.projectType === 'library' && !host.exists(babelrcPath)) {
       // Library is included in applications that require .babelrc to
       // exist and contain '@nrwl/web/babel' preset.
-      host.write(
+      writeJson(host, babelrcPath, { presets: ['@nrwl/web/babel'] });
-        babelrcPath,
-        JSON.stringify({ presets: ['@nrwl/web/babel'] }, null, 2)
-      );
     }
   }
 

packages/web/src/migrations/update-11-5-2/update-existing-babelrc-files.spec.ts

@@ -1,5 +1,5 @@
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { readJson, Tree } from '@nrwl/devkit';
+import { readJson, writeJson, Tree } from '@nrwl/devkit';
 import { updateExistingBabelrcFiles } from './update-existing-babelrc-files';
 
 describe('Create missing .babelrc files', () => {
@@ -10,73 +10,58 @@ describe('Create missing .babelrc files', () => {
   });
 
   it(`should add web babel preset if it does not exist`, async () => {
-    tree.write(
+    writeJson(tree, 'workspace.json', {
-      'workspace.json',
+      projects: {
-      JSON.stringify({
+        'missing-babel-presets': {
-        projects: {
+          root: 'apps/missing-babel-presets',
-          'missing-babel-presets': {
+          projectType: 'application',
-            root: 'apps/missing-babel-presets',
-            projectType: 'application',
-          },
-          'web-app': {
-            root: 'apps/web-app',
-            projectType: 'application',
-          },
-          'react-app': {
-            root: 'apps/react-app',
-            projectType: 'application',
-          },
-          'gatsby-app': {
-            root: 'apps/gatsby-app',
-            projectType: 'application',
-          },
-          'not-using-babel': {
-            root: 'apps/not-using-babel',
-            projectType: 'application',
-          },
-          'next-app': {
-            root: 'apps/next-app',
-            projectType: 'application',
-          },
         },
-      })
+        'web-app': {
-    );
+          root: 'apps/web-app',
-    tree.write(
+          projectType: 'application',
-      'nx.json',
-      JSON.stringify({
-        projects: {
-          'missing-babel-presets': {},
-          'web-app': {},
-          'react-app': {},
-          'gatsby-app': {},
-          'not-using-babel': {},
-          'next-app': {},
         },
-      })
+        'react-app': {
-    );
+          root: 'apps/react-app',
-    tree.write(
+          projectType: 'application',
-      'babel.config.json',
+        },
-      JSON.stringify({
+        'gatsby-app': {
-        presets: ['@nrwl/web/babel'],
+          root: 'apps/gatsby-app',
-      })
+          projectType: 'application',
-    );
+        },
-    tree.write('apps/missing-babel-presets/.babelrc', JSON.stringify({}));
+        'not-using-babel': {
-    tree.write(
+          root: 'apps/not-using-babel',
-      'apps/web-app/.babelrc',
+          projectType: 'application',
-      JSON.stringify({ presets: ['@nrwl/web/babel'] })
+        },
-    );
+        'next-app': {
-    tree.write(
+          root: 'apps/next-app',
-      'apps/react-app/.babelrc',
+          projectType: 'application',
-      JSON.stringify({ presets: ['@nrwl/react/babel'] })
+        },
-    );
+      },
-    tree.write(
+    });
-      'apps/gatsby-app/.babelrc',
+    writeJson(tree, 'nx.json', {
-      JSON.stringify({ presets: ['@nrwl/gatsby/babel'] })
+      projects: {
-    );
+        'missing-babel-presets': {},
-    tree.write(
+        'web-app': {},
-      'apps/next-app/.babelrc',
+        'react-app': {},
-      JSON.stringify({ presets: ['@nrwl/next/babel'] })
+        'gatsby-app': {},
-    );
+        'not-using-babel': {},
+        'next-app': {},
+      },
+    });
+    writeJson(tree, 'babel.config.json', {
+      presets: ['@nrwl/web/babel'],
+    });
+    writeJson(tree, 'apps/missing-babel-presets/.babelrc', {});
+    writeJson(tree, 'apps/web-app/.babelrc', { presets: ['@nrwl/web/babel'] });
+    writeJson(tree, 'apps/react-app/.babelrc', {
+      presets: ['@nrwl/react/babel'],
+    });
+    writeJson(tree, 'apps/gatsby-app/.babelrc', {
+      presets: ['@nrwl/gatsby/babel'],
+    });
+    writeJson(tree, 'apps/next-app/.babelrc', {
+      presets: ['@nrwl/next/babel'],
+    });
 
     await updateExistingBabelrcFiles(tree);
 

packages/web/src/migrations/update-11-5-2/update-existing-babelrc-files.ts

@@ -10,7 +10,7 @@ export async function updateExistingBabelrcFiles(host: Tree) {
     // This is needed because we removed it from the root.
     if (host.exists(babelrcPath)) {
       updateJson(host, babelrcPath, (json) => {
-        json.presets = json.presets || [];
+        json.presets ||= [];
         if (
           -1 ===
           json.presets.findIndex(

packages/web/src/migrations/update-11-5-2/update-root-babel-config.spec.ts

@@ -1,5 +1,5 @@
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-import { readJson, Tree } from '@nrwl/devkit';
+import { readJson, writeJson, Tree } from '@nrwl/devkit';
 import { updateRootBabelConfig } from './update-root-babel-config';
 
 describe('Update root babel config', () => {
@@ -10,12 +10,9 @@ describe('Update root babel config', () => {
   });
 
   it(`should add web babel preset if it does not exist`, async () => {
-    tree.write(
+    writeJson(tree, 'babel.config.json', {
-      'babel.config.json',
+      presets: ['@nrwl/web/babel'],
-      JSON.stringify({
+    });
-        presets: ['@nrwl/web/babel'],
-      })
-    );
 
     await updateRootBabelConfig(tree);
 

packages/web/src/migrations/update-8-5-0/update-builder-8-5-0.spec.ts

@@ -1,12 +1,6 @@
 import { Tree } from '@angular-devkit/schematics';
 import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
-import {
+import { readWorkspace, updateJsonInTree } from '@nrwl/workspace';
-  updateJsonInTree,
-  readJsonInTree,
-  updateWorkspaceInTree,
-  readWorkspace,
-  getWorkspacePath,
-} from '@nrwl/workspace';
 
 import * as path from 'path';
 
@@ -23,25 +17,27 @@ describe('Update 8-5-0', () => {
   });
 
   it(`should remove differentialLoading as an option for build builder`, async () => {
-    tree.create(
+    tree = await schematicRunner
-      'workspace.json',
+      .callRule(
-      JSON.stringify({
+        updateJsonInTree('workspace.json', () => ({
-        projects: {
+          projects: {
-          demo: {
+            demo: {
-            root: 'apps/demo',
+              root: 'apps/demo',
-            sourceRoot: 'apps/demo/src',
+              sourceRoot: 'apps/demo/src',
-            architect: {
+              architect: {
-              build: {
+                build: {
-                builder: '@nrwl/web:build',
+                  builder: '@nrwl/web:build',
-                options: {
+                  options: {
-                  differentialLoading: true,
+                    differentialLoading: true,
+                  },
                 },
               },
             },
           },
-        },
+        })),
-      })
+        tree
-    );
+      )
+      .toPromise();
 
     tree = await schematicRunner
       .runSchematicAsync('update-builder-8.5.0', {}, tree)

packages/web/src/migrations/update-9-2-0/set-build-libs-from-source.spec.ts

@@ -1,6 +1,6 @@
 import { Tree } from '@angular-devkit/schematics';
 import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
-import { readWorkspace } from '@nrwl/workspace';
+import { readWorkspace, updateJsonInTree } from '@nrwl/workspace';
 
 import * as path from 'path';
 
@@ -17,23 +17,25 @@ describe('set buildLibsFromSource to true', () => {
   });
 
   it(`should set buildLibsFromSource to true`, async () => {
-    tree.create(
+    tree = await schematicRunner
-      'workspace.json',
+      .callRule(
-      JSON.stringify({
+        updateJsonInTree('workspace.json', () => ({
-        projects: {
+          projects: {
-          demo: {
+            demo: {
-            root: 'apps/demo',
+              root: 'apps/demo',
-            sourceRoot: 'apps/demo/src',
+              sourceRoot: 'apps/demo/src',
-            architect: {
+              architect: {
-              build: {
+                build: {
-                builder: '@nrwl/web:build',
+                  builder: '@nrwl/web:build',
-                options: {},
+                  options: {},
+                },
               },
             },
           },
-        },
+        })),
-      })
+        tree
-    );
+      )
+      .toPromise();
 
     tree = await schematicRunner
       .runSchematicAsync('set-build-libs-from-source', {}, tree)

packages/web/src/utils/web-babel-loader.ts

@@ -1,4 +1,4 @@
-module.exports = require('babel-loader').custom((babel) => {
+module.exports = require('babel-loader').custom(() => {
   return {
     customOptions({ isModern, emitDecoratorMetadata, ...loader }) {
       return {