chore(stencil): align package to nx 20

BREAKING CHANGE: generator option 'name' is optional in favor of 'directory' one
nxext · Oct 13, 2024 · 1823cfe · 1823cfe
1 parent 1f0afa5
commit 1823cfe
Show file tree

Hide file tree

Showing 19 changed files with 224 additions and 211 deletions.
diff --git a/docs/docs/stencil/generators.md b/docs/docs/stencil/generators.md
@@ -28,17 +28,13 @@ nx g application ... --dry-run
 
 ### Options
 
-#### name (_**required**_)
-
-Type: `string`
-
-#### directory
+#### directory (_**required**_)
 
 Alias(es): d
 
 Type: `string`
 
-A directory where the project is placed
+A directory where the project is placed.
 
 #### e2eTestRunner
 
@@ -60,6 +56,14 @@ Possible values: `eslint`, `none`
 
 The tool to use for running lint checks.
 
+#### name
+
+Alias(es): n
+
+Type: `string`
+
+A name of the project.
+
 #### skipFormat
 
 Default: `false`
@@ -126,10 +130,14 @@ nx g library ... --dry-run
 
 ### Options
 
-#### name (_**required**_)
+#### directory (_**required**_)
+
+Alias(es): d
 
 Type: `string`
 
+A directory where the project is placed.
+
 #### buildable
 
 Default: `false`
@@ -144,14 +152,6 @@ Type: `boolean`
 
 Generate a default component.
 
-#### directory
-
-Alias(es): d
-
-Type: `string`
-
-A directory where the project is placed
-
 #### e2eTestRunner
 
 Default: `puppeteer`
@@ -178,6 +178,14 @@ Possible values: `eslint`, `none`
 
 The tool to use for running lint checks.
 
+#### name
+
+Alias(es): n
+
+Type: `string`
+
+A name of the project.
+
 #### publishable
 
 Type: `boolean`
@@ -268,7 +276,7 @@ Alias(es): d
 
 Type: `string`
 
-A directory where the project is placed
+A directory where the project is placed.
 
 #### skipFormat
 

diff --git a/packages/stencil/package.json b/packages/stencil/package.json
@@ -27,22 +27,22 @@
   "executors": "./executors.json",
   "dependencies": {
     "@nxext/common": "^19.0.0",
-    "@nx/devkit": "19.8.3",
+    "@nx/devkit": "20.0.0",
     "@stencil/core": "4.12.6",
-    "@nx/workspace": "19.8.3",
-    "@nx/js": "19.8.3",
+    "@nx/workspace": "20.0.0",
+    "@nx/js": "20.0.0",
     "typescript": "5.5.4",
-    "@nx/eslint": "19.8.3",
-    "@nx/web": "19.8.3",
-    "@nx/cypress": "19.8.3",
-    "@nx/jest": "19.8.3",
-    "@nx/storybook": "19.8.3",
+    "@nx/eslint": "20.0.0",
+    "@nx/web": "20.0.0",
+    "@nx/cypress": "20.0.0",
+    "@nx/jest": "20.0.0",
+    "@nx/storybook": "20.0.0",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "tslib": "^2.3.0",
-    "nx": "19.8.3",
+    "nx": "20.0.0",
     "fs-extra": "^10.1.0",
-    "@nx/angular": "19.8.3",
-    "@nx/react": "19.8.3"
+    "@nx/angular": "20.0.0",
+    "@nx/react": "20.0.0"
   },
   "peerDependencies": {},
   "peerDependenciesMeta": {

diff --git a/packages/stencil/src/generators/add-outputtarget/add-angular/generator.ts b/packages/stencil/src/generators/add-outputtarget/add-angular/generator.ts
@@ -30,12 +30,12 @@ async function prepareAngularLibrary(
   options: AddOutputtargetSchematicSchema
 ) {
   const angularProjectName = `${options.projectName}-angular`;
-  const { libsDir } = getWorkspaceLayout(host);
+  const angularProjectDir = `libs/${angularProjectName}`;
 
   await ensurePackage('@nx/angular', NX_VERSION);
   const generators = await import('@nx/angular/generators');
   const libraryTarget = await generators.libraryGenerator(host, {
-    name: angularProjectName,
+    directory: angularProjectDir,
     skipFormat: true,
     publishable: options.publishable,
     importPath: options.importPath,

diff --git a/packages/stencil/src/generators/add-outputtarget/add-outputtarget-angular.spec.ts b/packages/stencil/src/generators/add-outputtarget/add-outputtarget-angular.spec.ts
@@ -6,15 +6,17 @@ import { AddOutputtargetSchematicSchema } from './schema';
 
 xdescribe('add-outputtarget angular', () => {
   let tree: Tree;
-  const projectName = uniq('testproject');
+  const projectName = uniq('testprojekt');
+  const projectAppDirectory = `apps/${projectName}`;
+  const projectLibDirectory = `libs/${projectName}`;
   const options = {
     projectName: projectName,
     publishable: false,
     skipFormat: false,
   };
 
   beforeEach(async () => {
-    tree = await createTestUILib(projectName);
+    tree = await createTestUILib(projectLibDirectory);
   });
 
   describe('using angular', () => {

diff --git a/packages/stencil/src/generators/add-outputtarget/add-outputtarget-react.spec.ts b/packages/stencil/src/generators/add-outputtarget/add-outputtarget-react.spec.ts
@@ -6,15 +6,17 @@ import { AddOutputtargetSchematicSchema } from './schema';
 
 xdescribe('add-outputtarget react', () => {
   let tree: Tree;
-  const projectName = uniq('testproject');
+  const projectName = uniq('testprojekt');
+  const projectAppDirectory = `apps/${projectName}`;
+  const projectLibDirectory = `libs/${projectName}`;
   const options = {
     projectName: projectName,
     publishable: false,
     skipFormat: false,
   };
 
   beforeEach(async () => {
-    tree = await createTestUILib(projectName);
+    tree = await createTestUILib(projectLibDirectory);
   });
 
   describe('using react', () => {

diff --git a/packages/stencil/src/generators/add-outputtarget/add-react/generator.ts b/packages/stencil/src/generators/add-outputtarget/add-react/generator.ts
@@ -24,6 +24,7 @@ async function prepareReactLibrary(
 ) {
   const { libsDir } = getWorkspaceLayout(host);
   const reactProjectName = `${options.projectName}-react`;
+  const reactProjectDir = `libs/${reactProjectName}`;
 
   const jsInitTask = await jsInitGenerator(host, {
     ...options,
@@ -34,7 +35,7 @@ async function prepareReactLibrary(
   ensurePackage('@nx/react', NX_VERSION);
   const { libraryGenerator } = await import('@nx/react');
   const libraryTarget = await libraryGenerator(host, {
-    name: reactProjectName,
+    directory: reactProjectDir,
     style: 'css',
     publishable: options.publishable,
     bundler: options.publishable ? 'rollup' : 'none',

diff --git a/packages/stencil/src/generators/application/generator.spec.ts b/packages/stencil/src/generators/application/generator.spec.ts
@@ -24,7 +24,10 @@ describe('schematic:application', () => {
   jest.spyOn(readNxVersionModule, 'readNxVersion').mockReturnValue('17.0.0');
 
   let host: Tree;
-  const options: RawApplicationSchema = { name: 'test', linter: Linter.None };
+  const options: RawApplicationSchema = {
+    directory: 'apps/test',
+    linter: Linter.None,
+  };
 
   beforeEach(() => {
     host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
@@ -39,7 +42,10 @@ describe('schematic:application', () => {
   it('should add tags to nx.json', async () => {
     await applicationGenerator(host, { ...options, tags: 'e2etag,e2ePackage' });
 
-    const projectConfig = readProjectConfiguration(host, options.name);
+    const projectConfig = readProjectConfiguration(
+      host,
+      options.directory.replace('apps/', '')
+    );
     expect(projectConfig.tags).toEqual(['e2etag', 'e2ePackage']);
   });
 
@@ -55,7 +61,7 @@ describe('schematic:application', () => {
     await applicationGenerator(host, { ...options, linter: Linter.EsLint });
 
     const fileList = fileListForAppType(
-      options.name,
+      options.directory,
       SupportedStyles.css,
       'application'
     );
@@ -74,10 +80,9 @@ describe('schematic:application', () => {
     await applicationGenerator(host, { ...options, directory: 'subdir' });
 
     const fileList = fileListForAppType(
-      options.name,
+      options.directory,
       SupportedStyles.css,
-      'application',
-      'subdir'
+      'application'
     );
     fileList.forEach((file) => expect(host.exists(file)));
   });
@@ -106,7 +111,10 @@ describe('schematic:application', () => {
         style: SupportedStyles[style],
       });
 
-      const projectConfig = readProjectConfiguration(host, options.name);
+      const projectConfig = readProjectConfiguration(
+        host,
+        options.directory.replace('apps/', '')
+      );
       expect(projectConfig.generators).toEqual({
         '@nxext/stencil:component': {
           style: style,

diff --git a/packages/stencil/src/generators/application/generator.ts b/packages/stencil/src/generators/application/generator.ts
@@ -16,17 +16,25 @@ import { join } from 'path';
 import { addProject } from './lib/add-project';
 import { addLinting } from './lib/add-linting';
 import { addCypress } from './lib/add-cypress';
+import {
+  determineProjectNameAndRootOptions,
+  ensureProjectName,
+} from '@nx/devkit/src/generators/project-name-and-root-utils';
 
-function normalizeOptions(
+async function normalizeOptions(
   host: Tree,
   options: RawApplicationSchema
-): ApplicationSchema {
-  const { appsDir } = getWorkspaceLayout(host);
-  const projectName = names(options.name).fileName;
-  const projectDirectory = options.directory
-    ? `${names(options.directory).fileName}/${projectName}`
-    : projectName;
-  const projectRoot = `${appsDir}/${projectDirectory}`;
+): Promise<ApplicationSchema> {
+  await ensureProjectName(host, options, 'application');
+  const { projectName, projectRoot } = await determineProjectNameAndRootOptions(
+    host,
+    {
+      name: options.name,
+      projectType: 'application',
+      directory: options.directory,
+    }
+  );
+
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())
     : [];
@@ -52,9 +60,10 @@ function normalizeOptions(
 
   return {
     ...options,
+    name: projectName,
     projectName,
     projectRoot,
-    projectDirectory,
+    projectDirectory: projectRoot,
     parsedTags,
     e2eProjectName,
     e2eProjectRoot,
@@ -89,7 +98,7 @@ export async function applicationGenerator(
   host: Tree,
   schema: RawApplicationSchema
 ) {
-  const options = normalizeOptions(host, schema);
+  const options = await normalizeOptions(host, schema);
   const initTask = await initGenerator(host, {
     ...options,
     skipFormat: true,

diff --git a/packages/stencil/src/generators/application/schema.d.ts b/packages/stencil/src/generators/application/schema.d.ts
@@ -3,9 +3,9 @@ import { SupportedStyles } from '../../stencil-core-utils';
 import { Linter } from '@nx/eslint';
 
 export interface RawApplicationSchema {
-  name: string;
+  directory: string;
+  name?: string;
   tags?: string;
-  directory?: string;
   style?: SupportedStyles;
   skipFormat?: boolean;
   appType?: AppType;
@@ -16,6 +16,7 @@ export interface RawApplicationSchema {
 }
 
 export interface ApplicationSchema extends RawApplicationSchema {
+  name: string;
   projectName: string;
   projectRoot: string;
   projectDirectory: string;

diff --git a/packages/stencil/src/generators/application/schema.json b/packages/stencil/src/generators/application/schema.json
@@ -1,27 +1,34 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "$id": "Nxext-Application",
+  "$id": "Stencil-Application",
   "title": "",
   "type": "object",
   "properties": {
-    "name": {
+    "directory": {
       "type": "string",
-      "description": "",
+      "description": "A directory where the project is placed.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use?"
+      "x-prompt": "What directory would you like to use? (full path; e.g. apps/<my-app-name>)",
+      "alias": "d"
+    },
+    "name": {
+      "type": "string",
+      "description": "A name of the project.",
+      "alias": "n"
     },
     "tags": {
       "type": "string",
       "description": "Add tags to the project (used for linting)",
       "alias": "t"
     },
-    "directory": {
+    "linter": {
+      "description": "The tool to use for running lint checks.",
       "type": "string",
-      "description": "A directory where the project is placed",
-      "alias": "d"
+      "enum": ["eslint", "none"],
+      "default": "eslint"
     },
     "e2eTestRunner": {
       "type": "string",
@@ -39,12 +46,6 @@
       "type": "boolean",
       "default": false
     },
-    "linter": {
-      "description": "The tool to use for running lint checks.",
-      "type": "string",
-      "enum": ["eslint", "none"],
-      "default": "eslint"
-    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
@@ -66,5 +67,5 @@
       }
     }
   },
-  "required": ["name"]
+  "required": ["directory"]
 }