refactor dep installation

packages/browser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gb-nx/browser",
-  "version": "8.1.0-alpha.0",
+  "version": "8.2.0",
   "main": "src/index.js",
   "repository": {
     "type": "git",

packages/browser/src/generators/extension/generator.spec.ts

@@ -1,7 +1,12 @@
 jest.mock('@nx/eslint');
 jest.mock('@nx/jest');
 
-import { readJson, readProjectConfiguration, type Tree } from '@nx/devkit';
+import {
+  addDependenciesToPackageJson,
+  readJson,
+  readProjectConfiguration,
+  type Tree,
+} from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import * as nxeslint from '@nx/eslint';
 import * as nxjest from '@nx/jest';
@@ -14,6 +19,8 @@ describe('extension', () => {
   beforeEach(async () => {
     tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
 
+    addDependenciesToPackageJson(tree, {}, { nx: '>1.0.0' });
+
     (nxeslint.lintProjectGenerator as jest.Mock).mockImplementation(
       (_a: Tree, b) => {
         if (b.linter !== nxeslint.Linter.EsLint) {

packages/browser/src/generators/extension/generator.ts

@@ -1,17 +1,20 @@
 import type { GeneratorCallback, Tree } from '@nx/devkit';
 import {
+  addDependenciesToPackageJson,
   addProjectConfiguration,
   formatFiles,
   generateFiles,
   installPackagesTask,
   names,
   offsetFromRoot,
   readProjectConfiguration,
-  updateProjectConfiguration,
+  runTasksInSerial,
+  updateProjectConfiguration
 } from '@nx/devkit';
 import { Linter, lintProjectGenerator } from '@nx/eslint';
 import { configurationGenerator as jestConfigGenerator } from '@nx/jest';
 import { join } from 'path';
+import { chromeTypingsVersion } from '../../utils/versions';
 import { normalizeOptions } from './lib/normalize-options';
 import type { ExtensionGeneratorOptions, NormalizedOptions } from './schema';
 
@@ -51,13 +54,12 @@ async function addLint(
   tree: Tree,
   options: NormalizedOptions
 ): Promise<GeneratorCallback> {
-  const generateLint = lintProjectGenerator(tree, {
+  return lintProjectGenerator(tree, {
     project: options.appProjectName,
     linter: Linter.EsLint,
     skipFormat: true,
     addPlugin: true,
   });
-  return generateLint;
 }
 
 function addFiles(tree: Tree, options: NormalizedOptions) {
@@ -85,6 +87,23 @@ export default async function (
     root: normalizedOptions.appProjectRoot,
   });
   // await initGenerator(tree, { ...normalizedOptions, skipFormat: true });
+
+  const tasks: GeneratorCallback[] = [];
+
+  tasks.push(
+    addDependenciesToPackageJson(
+      tree,
+      {},
+      {
+        'adm-zip': '^0.5.10',
+        ajv: '^8.0.0',
+        '@types/chrome': chromeTypingsVersion,
+        'html-webpack-plugin': '^5.0.0',
+        'mini-css-extract-plugin': '^2.0.0', // TODO install only when needed
+      }
+    )
+  );
+
   addFiles(tree, normalizedOptions);
 
   const proj = readProjectConfiguration(tree, normalizedOptions.appProjectName);
@@ -93,16 +112,17 @@ export default async function (
     tags: options.tags ? options.tags.split(',').map((s) => s.trim()) : [],
   });
   if (normalizedOptions.unitTestRunner === 'jest') {
-    await addJest(tree, normalizedOptions);
+    tasks.push(await addJest(tree, normalizedOptions));
   }
   if (normalizedOptions.linter === Linter.EsLint) {
-    await addLint(tree, normalizedOptions);
+    tasks.push(await addLint(tree, normalizedOptions));
   }
   updateGitIgnore(tree);
   if (!options.skipFormat) {
     await formatFiles(tree);
   }
   return () => {
-    installPackagesTask(tree, true);
+    runTasksInSerial(...tasks);
+    installPackagesTask(tree);
   };
 }

packages/browser/src/generators/init/generator.spec.ts

@@ -1,5 +1,5 @@
 import type { Tree } from '@nx/devkit';
-import { readJson, writeJson } from '@nx/devkit';
+import { NX_VERSION, readJson } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import generator from './generator';
 import type { Schema as InitGeneratorSchema } from './schema';
@@ -10,12 +10,17 @@ describe('init generator', () => {
 
   beforeEach(() => {
     appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
-    writeJson(appTree, 'package.json', { devDependencies: { nx: '65.43.21' } });
+    // writeJson(appTree, 'package.json', { devDependencies: { nx: '65.43.21' } });
   });
 
   it('should run successfully', async () => {
     await generator(appTree, options);
     const { devDependencies } = readJson(appTree, 'package.json');
-    expect(devDependencies['@nx/webpack']).toBeDefined();
+    expect(devDependencies).toEqual({
+      '@nx/devkit': NX_VERSION,
+      '@nx/eslint': NX_VERSION,
+      '@nx/jest': NX_VERSION,
+      '@nx/webpack': NX_VERSION,
+    });
   });
 });

packages/browser/src/generators/init/generator.ts

@@ -1,37 +1,27 @@
 import {
+  NX_VERSION,
   addDependenciesToPackageJson,
   formatFiles,
   installPackagesTask,
-  readJson,
   type Tree,
 } from '@nx/devkit';
-import {
-  chromeTypingsVersion,
-  sassVersion,
-  eslintVersion,
-} from '../../utils/versions';
 import type { Schema as InitGeneratorSchema } from './schema';
 
 export default async function (
   tree: Tree,
   options: InitGeneratorSchema
 ): Promise<() => void> {
-  const { devDependencies } = readJson<{
-    devDependencies: Record<string, string>;
-  }>(tree, 'package.json');
-  const nxVersion = devDependencies['nx'];
-
   const installTask = addDependenciesToPackageJson(
     tree,
     {},
     {
-      '@nx/webpack': nxVersion,
-      '@types/chrome': chromeTypingsVersion,
-      'html-webpack-plugin': '^5.0.0',
-      'mini-css-extract-plugin': '^2.0.0',
-      eslint: eslintVersion,
-      sass: sassVersion,
-    }
+      ['@nx/devkit']: NX_VERSION,
+      ['@nx/eslint']: NX_VERSION,
+      ['@nx/jest']: NX_VERSION,
+      ['@nx/webpack']: NX_VERSION,
+    },
+    undefined,
+    false
   );
   if (!options.skipFormat) {
     await formatFiles(tree);