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,9 +17,7 @@ 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',
-      JSON.stringify({
       projects: {
         webapp: {
           root: 'apps/webapp',
@@ -44,11 +42,8 @@ describe('Create missing .babelrc files', () => {
           projectType: 'library',
         },
       },
-      })
+    });
-    );
+    writeJson(tree, 'nx.json', {
-    tree.write(
-      'nx.json',
-      JSON.stringify({
       npmScope: 'proj',
       projects: {
         webapp: {},
@@ -56,8 +51,7 @@ describe('Create missing .babelrc files', () => {
         weblib: {},
         nodelib: {},
       },
-      })
+    });
-    );
     tree.write('apps/webapp/index.ts', `import '@proj/weblib';`);
 
     projectGraph = {
@@ -116,9 +110,7 @@ describe('Create missing .babelrc files', () => {
   });
 
   it('should not error if there are circular dependencies', async () => {
-    tree.write(
+    writeJson(tree, 'workspace.json', {
-      'workspace.json',
-      JSON.stringify({
       projects: {
         webapp: {
           root: 'apps/webapp',
@@ -143,11 +135,8 @@ describe('Create missing .babelrc files', () => {
           projectType: 'library',
         },
       },
-      })
+    });
-    );
+    writeJson(tree, 'nx.json', {
-    tree.write(
-      'nx.json',
-      JSON.stringify({
       npmScope: 'proj',
       projects: {
         webapp: {},
@@ -155,8 +144,7 @@ describe('Create missing .babelrc files', () => {
         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,9 +10,7 @@ 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',
-      JSON.stringify({
       projects: {
         'missing-babel-presets': {
           root: 'apps/missing-babel-presets',
@@ -39,11 +37,8 @@ describe('Create missing .babelrc files', () => {
           projectType: 'application',
         },
       },
-      })
+    });
-    );
+    writeJson(tree, 'nx.json', {
-    tree.write(
-      'nx.json',
-      JSON.stringify({
       projects: {
         'missing-babel-presets': {},
         'web-app': {},
@@ -52,31 +47,21 @@ describe('Create missing .babelrc files', () => {
         'not-using-babel': {},
         'next-app': {},
       },
-      })
+    });
-    );
+    writeJson(tree, 'babel.config.json', {
-    tree.write(
-      'babel.config.json',
-      JSON.stringify({
       presets: ['@nrwl/web/babel'],
-      })
+    });
-    );
+    writeJson(tree, 'apps/missing-babel-presets/.babelrc', {});
-    tree.write('apps/missing-babel-presets/.babelrc', JSON.stringify({}));
+    writeJson(tree, 'apps/web-app/.babelrc', { presets: ['@nrwl/web/babel'] });
-    tree.write(
+    writeJson(tree, 'apps/react-app/.babelrc', {
-      'apps/web-app/.babelrc',
+      presets: ['@nrwl/react/babel'],
-      JSON.stringify({ presets: ['@nrwl/web/babel'] })
+    });
-    );
+    writeJson(tree, 'apps/gatsby-app/.babelrc', {
-    tree.write(
+      presets: ['@nrwl/gatsby/babel'],
-      'apps/react-app/.babelrc',
+    });
-      JSON.stringify({ presets: ['@nrwl/react/babel'] })
+    writeJson(tree, 'apps/next-app/.babelrc', {
-    );
+      presets: ['@nrwl/next/babel'],
-    tree.write(
+    });
-      'apps/gatsby-app/.babelrc',
-      JSON.stringify({ presets: ['@nrwl/gatsby/babel'] })
-    );
-    tree.write(
-      'apps/next-app/.babelrc',
-      JSON.stringify({ 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',
-      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,9 +17,9 @@ 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: {
             demo: {
               root: 'apps/demo',
@@ -40,8 +34,10 @@ describe('Update 8-5-0', () => {
               },
             },
           },
-      })
+        })),
-    );
+        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,9 +17,9 @@ 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: {
             demo: {
               root: 'apps/demo',
@@ -32,8 +32,10 @@ describe('set buildLibsFromSource to true', () => {
               },
             },
           },
-      })
+        })),
-    );
+        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 {