From c3d036d172506dc15495dfdbdefeb4f66e1feb52 Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Wed, 6 Sep 2023 18:11:29 +0300 Subject: [PATCH] feat(vue): init and lib generators --- .../vite/generators/configuration.json | 2 +- .../packages/vite/generators/init.json | 2 +- .../packages/vite/generators/vitest.json | 2 +- docs/map.json | 14 + docs/packages.json | 10 + docs/shared/packages/vue/vue-plugin.md | 64 +++ .../src/generators/configuration/schema.d.ts | 2 +- .../src/generators/configuration/schema.json | 2 +- packages/vite/src/generators/init/schema.d.ts | 2 +- packages/vite/src/generators/init/schema.json | 2 +- .../vite/src/generators/vitest/schema.d.ts | 2 +- .../vite/src/generators/vitest/schema.json | 2 +- .../src/generators/vitest/vitest-generator.ts | 25 +- packages/vue/docs/.gitkeep | 0 packages/vue/generators.json | 18 +- packages/vue/index.ts | 5 + packages/vue/package.json | 6 +- packages/vue/src/generators/.gitkeep | 0 .../__snapshots__/component.spec.ts.snap | 40 ++ .../generators/component/component.spec.ts | 180 ++++++ .../vue/src/generators/component/component.ts | 189 +++++++ .../component/files/__fileName__.vue__tmpl__ | 15 + .../__tests__/__fileName__.spec.ts__tmpl__ | 11 + .../generators/component/normalized-schema.ts | 7 + .../vue/src/generators/component/schema.d.ts | 15 + .../vue/src/generators/component/schema.json | 101 ++++ packages/vue/src/generators/init/init.spec.ts | 27 + packages/vue/src/generators/init/init.ts | 70 +++ packages/vue/src/generators/init/schema.d.ts | 9 + packages/vue/src/generators/init/schema.json | 43 ++ .../__snapshots__/library.spec.ts.snap | 94 ++++ .../src/generators/library/files/README.md | 7 + .../library/files/package.json__tmpl__ | 12 + .../library/files/src/index.ts__tmpl__ | 0 .../library/files/tsconfig.lib.json__tmpl__ | 23 + .../library/files/tsconfig.node.json__tmpl__ | 16 + .../files/tsconfig.vitest.json__tmpl__ | 9 + .../vue/src/generators/library/lib/.gitkeep | 0 .../src/generators/library/lib/add-linting.ts | 45 ++ .../generators/library/lib/create-files.ts | 49 ++ .../library/lib/normalize-options.spec.ts | 100 ++++ .../library/lib/normalize-options.ts | 86 +++ .../src/generators/library/library.spec.ts | 529 ++++++++++++++++++ .../vue/src/generators/library/library.ts | 143 +++++ .../vue/src/generators/library/schema.d.ts | 41 ++ .../vue/src/generators/library/schema.json | 150 +++++ packages/vue/src/migrations/.gitkeep | 0 packages/vue/src/utils/.gitkeep | 0 packages/vue/src/utils/ast-utils.ts | 35 ++ packages/vue/src/utils/create-ts-config.ts | 76 +++ packages/vue/src/utils/lint.ts | 16 + packages/vue/src/utils/testing-generators.ts | 28 + packages/vue/src/utils/versions.ts | 7 + 53 files changed, 2315 insertions(+), 18 deletions(-) create mode 100644 docs/shared/packages/vue/vue-plugin.md create mode 100644 packages/vue/docs/.gitkeep create mode 100644 packages/vue/src/generators/.gitkeep create mode 100644 packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap create mode 100644 packages/vue/src/generators/component/component.spec.ts create mode 100644 packages/vue/src/generators/component/component.ts create mode 100644 packages/vue/src/generators/component/files/__fileName__.vue__tmpl__ create mode 100644 packages/vue/src/generators/component/files/__tests__/__fileName__.spec.ts__tmpl__ create mode 100644 packages/vue/src/generators/component/normalized-schema.ts create mode 100644 packages/vue/src/generators/component/schema.d.ts create mode 100644 packages/vue/src/generators/component/schema.json create mode 100644 packages/vue/src/generators/init/init.spec.ts create mode 100755 packages/vue/src/generators/init/init.ts create mode 100644 packages/vue/src/generators/init/schema.d.ts create mode 100644 packages/vue/src/generators/init/schema.json create mode 100644 packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap create mode 100644 packages/vue/src/generators/library/files/README.md create mode 100644 packages/vue/src/generators/library/files/package.json__tmpl__ create mode 100644 packages/vue/src/generators/library/files/src/index.ts__tmpl__ create mode 100644 packages/vue/src/generators/library/files/tsconfig.lib.json__tmpl__ create mode 100644 packages/vue/src/generators/library/files/tsconfig.node.json__tmpl__ create mode 100644 packages/vue/src/generators/library/files/tsconfig.vitest.json__tmpl__ create mode 100644 packages/vue/src/generators/library/lib/.gitkeep create mode 100644 packages/vue/src/generators/library/lib/add-linting.ts create mode 100644 packages/vue/src/generators/library/lib/create-files.ts create mode 100644 packages/vue/src/generators/library/lib/normalize-options.spec.ts create mode 100644 packages/vue/src/generators/library/lib/normalize-options.ts create mode 100644 packages/vue/src/generators/library/library.spec.ts create mode 100644 packages/vue/src/generators/library/library.ts create mode 100644 packages/vue/src/generators/library/schema.d.ts create mode 100644 packages/vue/src/generators/library/schema.json create mode 100644 packages/vue/src/migrations/.gitkeep create mode 100644 packages/vue/src/utils/.gitkeep create mode 100644 packages/vue/src/utils/ast-utils.ts create mode 100644 packages/vue/src/utils/create-ts-config.ts create mode 100644 packages/vue/src/utils/lint.ts create mode 100644 packages/vue/src/utils/testing-generators.ts create mode 100644 packages/vue/src/utils/versions.ts diff --git a/docs/generated/packages/vite/generators/configuration.json b/docs/generated/packages/vite/generators/configuration.json index 8cb1a608bce394..9963592cdf1e28 100644 --- a/docs/generated/packages/vite/generators/configuration.json +++ b/docs/generated/packages/vite/generators/configuration.json @@ -28,7 +28,7 @@ "uiFramework": { "type": "string", "description": "UI Framework to use for Vite.", - "enum": ["react", "none"], + "enum": ["react", "vue", "none"], "default": "none", "x-prompt": "What UI framework plugin should Vite use?" }, diff --git a/docs/generated/packages/vite/generators/init.json b/docs/generated/packages/vite/generators/init.json index 1c16fcdd107158..ee74ce0b219228 100644 --- a/docs/generated/packages/vite/generators/init.json +++ b/docs/generated/packages/vite/generators/init.json @@ -11,7 +11,7 @@ "uiFramework": { "type": "string", "description": "UI Framework to use for Vite.", - "enum": ["react", "none"], + "enum": ["react", "vue", "none"], "default": "react", "x-prompt": "What UI framework plugin should Vite use?" }, diff --git a/docs/generated/packages/vite/generators/vitest.json b/docs/generated/packages/vite/generators/vitest.json index f9b72140e3a37e..e44f873ff64291 100644 --- a/docs/generated/packages/vite/generators/vitest.json +++ b/docs/generated/packages/vite/generators/vitest.json @@ -16,7 +16,7 @@ }, "uiFramework": { "type": "string", - "enum": ["react", "none"], + "enum": ["react", "vue", "none"], "default": "none", "description": "UI framework to use with vitest." }, diff --git a/docs/map.json b/docs/map.json index 773732fc8d6786..245917fe4e136b 100644 --- a/docs/map.json +++ b/docs/map.json @@ -2069,6 +2069,20 @@ } ] }, + { + "name": "vue", + "id": "vue", + "description": "Vue package.", + "itemList": [ + { + "id": "overview", + "path": "/packages/vue", + "name": "Overview of the Nx Vue Plugin", + "description": "The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.", + "file": "shared/packages/vue/vue-plugin" + } + ] + }, { "name": "webpack", "id": "webpack", diff --git a/docs/packages.json b/docs/packages.json index e48b86656430ad..11483d176b7abd 100644 --- a/docs/packages.json +++ b/docs/packages.json @@ -361,6 +361,16 @@ "generators": ["init", "configuration", "vitest"] } }, + { + "name": "vue", + "packageName": "vue", + "description": "The Vue plugin for Nx contains executors and generators for managing Vue applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.", + "path": "generated/packages/vite.json", + "schemas": { + "executors": [], + "generators": ["init", "library", "application", "component"] + } + }, { "name": "web", "packageName": "web", diff --git a/docs/shared/packages/vue/vue-plugin.md b/docs/shared/packages/vue/vue-plugin.md new file mode 100644 index 00000000000000..c60ab9355220ae --- /dev/null +++ b/docs/shared/packages/vue/vue-plugin.md @@ -0,0 +1,64 @@ +--- +title: Overview of the Nx Vue Plugin +description: The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace. +--- + +{% callout type="caution" title="`@nx/vue` is not available yet" %} +The `@nx/vue` plugin is not available yet. It will be released soon. +{% /callout %} + +The Nx plugin for [Vue](https://vuejs.org/). + +## Setting up a new Nx workspace with Vue + +You can create a new workspace that uses Vue with one of the following commands: + +- Generate a new monorepo with a Vue app set up with Vue + +```shell +npx create-nx-workspace@latest --preset=vue +``` + +## Add Vue to an existing workspace + +There is a number of ways to use Vue in your existing workspace. + +### Install the `@nx/vue` plugin + +{% tabs %} +{% tab label="npm" %} + +```shell +npm install -D @nx/vue +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/vue +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm install -D @nx/vue +``` + +{% /tab %} +{% /tabs %} + +### Generate a new project using Vue + +To generate a Vue application, run the following: + +```bash +nx g @nx/vue:app my-app +``` + +To generate a Vue library, run the following: + +```bash +nx g @nx/vue:lib my-lib +``` diff --git a/packages/vite/src/generators/configuration/schema.d.ts b/packages/vite/src/generators/configuration/schema.d.ts index cf848029a2a909..98d1f05d9ae0cd 100644 --- a/packages/vite/src/generators/configuration/schema.d.ts +++ b/packages/vite/src/generators/configuration/schema.d.ts @@ -1,5 +1,5 @@ export interface ViteConfigurationGeneratorSchema { - uiFramework: 'react' | 'none'; + uiFramework: 'react' | 'vue' | 'none'; compiler?: 'babel' | 'swc'; project: string; newProject?: boolean; diff --git a/packages/vite/src/generators/configuration/schema.json b/packages/vite/src/generators/configuration/schema.json index e6d89c42f3ff70..f7dd7f2faf9bc8 100644 --- a/packages/vite/src/generators/configuration/schema.json +++ b/packages/vite/src/generators/configuration/schema.json @@ -28,7 +28,7 @@ "uiFramework": { "type": "string", "description": "UI Framework to use for Vite.", - "enum": ["react", "none"], + "enum": ["react", "vue", "none"], "default": "none", "x-prompt": "What UI framework plugin should Vite use?" }, diff --git a/packages/vite/src/generators/init/schema.d.ts b/packages/vite/src/generators/init/schema.d.ts index 8710fbf49a2c5a..500035c3597aa5 100644 --- a/packages/vite/src/generators/init/schema.d.ts +++ b/packages/vite/src/generators/init/schema.d.ts @@ -1,5 +1,5 @@ export interface InitGeneratorSchema { - uiFramework: 'react' | 'none'; + uiFramework: 'react' | 'vue' | 'none'; compiler?: 'babel' | 'swc'; includeLib?: boolean; testEnvironment?: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string; diff --git a/packages/vite/src/generators/init/schema.json b/packages/vite/src/generators/init/schema.json index c4901473fb1952..998ec4a4007961 100644 --- a/packages/vite/src/generators/init/schema.json +++ b/packages/vite/src/generators/init/schema.json @@ -8,7 +8,7 @@ "uiFramework": { "type": "string", "description": "UI Framework to use for Vite.", - "enum": ["react", "none"], + "enum": ["react", "vue", "none"], "default": "react", "x-prompt": "What UI framework plugin should Vite use?" }, diff --git a/packages/vite/src/generators/vitest/schema.d.ts b/packages/vite/src/generators/vitest/schema.d.ts index 5b5039be218551..2b317849bf3e64 100644 --- a/packages/vite/src/generators/vitest/schema.d.ts +++ b/packages/vite/src/generators/vitest/schema.d.ts @@ -1,6 +1,6 @@ export interface VitestGeneratorSchema { project: string; - uiFramework: 'react' | 'none'; + uiFramework: 'react' | 'vue' | 'none'; coverageProvider: 'v8' | 'c8' | 'istanbul'; inSourceTests?: boolean; skipViteConfig?: boolean; diff --git a/packages/vite/src/generators/vitest/schema.json b/packages/vite/src/generators/vitest/schema.json index 6f98e0f49bcb28..f80f8f60c32dfd 100644 --- a/packages/vite/src/generators/vitest/schema.json +++ b/packages/vite/src/generators/vitest/schema.json @@ -15,7 +15,7 @@ }, "uiFramework": { "type": "string", - "enum": ["react", "none"], + "enum": ["react", "vue", "none"], "default": "none", "description": "UI framework to use with vitest." }, diff --git a/packages/vite/src/generators/vitest/vitest-generator.ts b/packages/vite/src/generators/vitest/vitest-generator.ts index 92388d8d0aef6d..baefafd0bf2392 100644 --- a/packages/vite/src/generators/vitest/vitest-generator.ts +++ b/packages/vite/src/generators/vitest/vitest-generator.ts @@ -90,13 +90,24 @@ function updateTsConfig( projectRoot: string ) { updateJson(tree, joinPathFragments(projectRoot, 'tsconfig.json'), (json) => { - if ( - json.references && - !json.references.some((r) => r.path === './tsconfig.spec.json') - ) { - json.references.push({ - path: './tsconfig.spec.json', - }); + if (options.uiFramework === 'vue') { + if ( + json.references && + !json.references.some((r) => r.path === './tsconfig.vitest.json') + ) { + json.references.push({ + path: './tsconfig.vitest.json', + }); + } + } else { + if ( + json.references && + !json.references.some((r) => r.path === './tsconfig.spec.json') + ) { + json.references.push({ + path: './tsconfig.spec.json', + }); + } } if (!json.compilerOptions?.types?.includes('vitest')) { diff --git a/packages/vue/docs/.gitkeep b/packages/vue/docs/.gitkeep new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/vue/generators.json b/packages/vue/generators.json index f07d4711fb3fc1..cfab78d76cc682 100644 --- a/packages/vue/generators.json +++ b/packages/vue/generators.json @@ -1,5 +1,21 @@ { "name": "Nx Vue", "version": "0.1", - "generators": {} + "generators": { + "init": { + "factory": "./src/generators/init/init#vueInitSchematic", + "schema": "./src/generators/init/schema.json", + "description": "Initialize the `@nrwl/vue` plugin.", + "aliases": ["ng-add"], + "hidden": true + }, + + "library": { + "factory": "./src/generators/library/library", + "schema": "./src/generators/library/schema.json", + "aliases": ["lib"], + "x-type": "library", + "description": "Create a Vue library." + } + } } diff --git a/packages/vue/index.ts b/packages/vue/index.ts index e69de29bb2d1d6..046a425889e33b 100644 --- a/packages/vue/index.ts +++ b/packages/vue/index.ts @@ -0,0 +1,5 @@ +export * from './src/utils/versions'; +export { libraryGenerator } from './src/generators/library/library'; +export { componentGenerator } from './src/generators/component/component'; +export { type InitSchema } from './src/generators/init/schema'; +export { vueInitGenerator } from './src/generators/init/init'; diff --git a/packages/vue/package.json b/packages/vue/package.json index 0d7dec7d5a2f43..448c4a17109260 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -28,7 +28,11 @@ "migrations": "./migrations.json" }, "dependencies": { - "tslib": "^2.3.0" + "tslib": "^2.3.0", + "@nx/devkit": "file:../devkit", + "@nx/js": "file:../js", + "@nx/linter": "file:../linter", + "@nx/vite": "file:../web" }, "publishConfig": { "access": "public" diff --git a/packages/vue/src/generators/.gitkeep b/packages/vue/src/generators/.gitkeep new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap b/packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap new file mode 100644 index 00000000000000..a5adeb27390a72 --- /dev/null +++ b/packages/vue/src/generators/component/__snapshots__/component.spec.ts.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`component --export should add to index.ts barrel 1`] = ` +"export * from './lib/hello/hello'; +" +`; + +exports[`component should generate files 1`] = ` +" + + + + +" +`; + +exports[`component should generate files 2`] = ` +"import { describe, it, expect } from 'vitest'; + +import { mount } from '@vue/test-utils'; +import Hello from '../hello'; + +describe('Hello', () => { + it('renders properly', () => { + const wrapper = mount(Hello, { props: {} }); + expect(wrapper.text()).toContain('Welcome to Hello'); + }); +}); +" +`; diff --git a/packages/vue/src/generators/component/component.spec.ts b/packages/vue/src/generators/component/component.spec.ts new file mode 100644 index 00000000000000..72078731d4ae45 --- /dev/null +++ b/packages/vue/src/generators/component/component.spec.ts @@ -0,0 +1,180 @@ +import { installedCypressVersion } from '@nx/cypress/src/utils/cypress-version'; +import { logger, readJson, Tree } from '@nx/devkit'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { componentGenerator } from './component'; +import { createLib } from '../../utils/testing-generators'; + +// need to mock cypress otherwise it'll use the nx installed version from package.json +// which is v9 while we are testing for the new v10 version +jest.mock('@nx/cypress/src/utils/cypress-version'); + +describe('component', () => { + let appTree: Tree; + let projectName: string; + let mockedInstalledCypressVersion: jest.Mock< + ReturnType + > = installedCypressVersion as never; + + beforeEach(async () => { + mockedInstalledCypressVersion.mockReturnValue(10); + projectName = 'my-lib'; + appTree = createTreeWithEmptyWorkspace(); + // await createApp(appTree, 'my-app'); + await createLib(appTree, projectName); + jest.spyOn(logger, 'warn').mockImplementation(() => {}); + jest.spyOn(logger, 'debug').mockImplementation(() => {}); + }); + + afterEach(() => { + jest.restoreAllMocks(); + }); + + it('should generate files', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + }); + + expect(appTree.exists('my-lib/src/lib/hello/hello.vue')).toBeTruthy(); + expect( + appTree.exists('my-lib/src/lib/hello/__tests__/hello.spec.ts') + ).toBeTruthy(); + + expect( + appTree.read('my-lib/src/lib/hello/hello.vue', 'utf-8') + ).toMatchSnapshot(); + expect( + appTree.read('my-lib/src/lib/hello/__tests__/hello.spec.ts', 'utf-8') + ).toMatchSnapshot(); + }); + + // we don't have app generator yet + xit('should generate files for an app', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: 'my-app', + }); + + expect(appTree.exists('my-app/src/app/hello/hello.tsx')).toBeTruthy(); + expect(appTree.exists('my-app/src/app/hello/hello.spec.ts')).toBeTruthy(); + expect( + appTree.exists('my-app/src/app/hello/hello.module.css') + ).toBeTruthy(); + }); + + describe('--export', () => { + it('should add to index.ts barrel', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + export: true, + }); + expect(appTree.read('my-lib/src/index.ts', 'utf-8')).toMatchSnapshot(); + }); + + // no app generator yet + xit('should not export from an app', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: 'my-app', + export: true, + }); + + expect(appTree.read('my-app/src/index.ts', 'utf-8')).toMatchSnapshot(); + }); + }); + + describe('--pascalCaseFiles', () => { + it('should generate component files with upper case names', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + pascalCaseFiles: true, + }); + expect(appTree.exists('my-lib/src/lib/hello/Hello.vue')).toBeTruthy(); + expect( + appTree.exists('my-lib/src/lib/hello/__tests__/Hello.spec.ts') + ).toBeTruthy(); + }); + }); + + describe('--pascalCaseDirectory', () => { + it('should generate component files with pascal case directories', async () => { + await componentGenerator(appTree, { + name: 'hello-world', + project: projectName, + pascalCaseFiles: true, + pascalCaseDirectory: true, + }); + expect( + appTree.exists('my-lib/src/lib/HelloWorld/HelloWorld.vue') + ).toBeTruthy(); + expect( + appTree.exists('my-lib/src/lib/HelloWorld/__tests__/HelloWorld.spec.ts') + ).toBeTruthy(); + }); + }); + + // TODO: figure out routing + xdescribe('--routing', () => { + it('should add routes to the component', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + routing: true, + }); + + const content = appTree.read('my-lib/src/lib/hello/hello.tsx').toString(); + expect(content).toContain('react-router-dom'); + expect(content).toMatch(/ { + it('should create component under the directory', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + directory: 'components', + }); + + expect(appTree.exists('/my-lib/src/components/hello/hello.vue')); + }); + + it('should create with nested directories', async () => { + await componentGenerator(appTree, { + name: 'helloWorld', + project: projectName, + directory: 'lib/foo', + }); + + expect(appTree.exists('/my-lib/src/lib/foo/hello-world/hello-world.vue')); + }); + }); + + describe('--flat', () => { + it('should create in project directory rather than in its own folder', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + flat: true, + }); + + expect(appTree.exists('/my-lib/src/lib/hello.vue')); + }); + it('should work with custom directory path', async () => { + await componentGenerator(appTree, { + name: 'hello', + project: projectName, + flat: true, + directory: 'components', + }); + + expect(appTree.exists('/my-lib/src/components/hello.vue')); + }); + }); +}); diff --git a/packages/vue/src/generators/component/component.ts b/packages/vue/src/generators/component/component.ts new file mode 100644 index 00000000000000..a27465adda7b6c --- /dev/null +++ b/packages/vue/src/generators/component/component.ts @@ -0,0 +1,189 @@ +import { + addDependenciesToPackageJson, + applyChangesToString, + convertNxGenerator, + formatFiles, + generateFiles, + GeneratorCallback, + getProjects, + joinPathFragments, + logger, + names, + runTasksInSerial, + toJS, + Tree, +} from '@nx/devkit'; +import { NormalizedSchema } from './normalized-schema'; +import { Schema } from './schema'; +import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript'; +import { join } from 'path'; +import { addImport } from '../../utils/ast-utils'; + +export async function componentGenerator(host: Tree, schema: Schema) { + const options = await normalizeOptions(host, schema); + createComponentFiles(host, options); + + const tasks: GeneratorCallback[] = []; + + addExportsToBarrel(host, options); + + // TODO: figure out routing + // if (options.routing) { + // const routingTask = addDependenciesToPackageJson( + // host, + // { 'react-router-dom': reactRouterDomVersion }, + // {} + // ); + // tasks.push(routingTask); + // } + + if (!options.skipFormat) { + await formatFiles(host); + } + + return runTasksInSerial(...tasks); +} + +function createComponentFiles(host: Tree, options: NormalizedSchema) { + const componentDir = joinPathFragments( + options.projectSourceRoot, + options.directory + ); + + generateFiles(host, join(__dirname, './files'), componentDir, { + ...options, + tmpl: '', + }); + + for (const c of host.listChanges()) { + let deleteFile = false; + + if ( + (options.skipTests || options.inSourceTests) && + /.*spec.ts/.test(c.path) + ) { + deleteFile = true; + } + + if (deleteFile) { + host.delete(c.path); + } + } + + if (options.js) { + toJS(host); + } +} + +let tsModule: typeof import('typescript'); + +function addExportsToBarrel(host: Tree, options: NormalizedSchema) { + if (!tsModule) { + tsModule = ensureTypescript(); + } + const workspace = getProjects(host); + const isApp = workspace.get(options.project).projectType === 'application'; + + if (options.export && !isApp) { + const indexFilePath = joinPathFragments( + options.projectSourceRoot, + options.js ? 'index.js' : 'index.ts' + ); + const indexSource = host.read(indexFilePath, 'utf-8'); + if (indexSource !== null) { + const indexSourceFile = tsModule.createSourceFile( + indexFilePath, + indexSource, + tsModule.ScriptTarget.Latest, + true + ); + const changes = applyChangesToString( + indexSource, + addImport( + indexSourceFile, + `export * from './${options.directory}/${options.fileName}';` + ) + ); + host.write(indexFilePath, changes); + } + } +} + +async function normalizeOptions( + host: Tree, + options: Schema +): Promise { + assertValidOptions(options); + + const { className, fileName } = names(options.name); + const componentFileName = + options.fileName ?? (options.pascalCaseFiles ? className : fileName); + const project = getProjects(host).get(options.project); + + if (!project) { + logger.error( + `Cannot find the ${options.project} project. Please double check the project name.` + ); + throw new Error(); + } + + const { sourceRoot: projectSourceRoot, projectType } = project; + + const directory = await getDirectory(host, options); + + if (options.export && projectType === 'application') { + logger.warn( + `The "--export" option should not be used with applications and will do nothing.` + ); + } + + options.routing = options.routing ?? false; + options.inSourceTests = options.inSourceTests ?? false; + + return { + ...options, + directory, + className, + fileName: componentFileName, + projectSourceRoot, + }; +} + +async function getDirectory(host: Tree, options: Schema) { + const genNames = names(options.name); + const fileName = + options.pascalCaseDirectory === true + ? genNames.className + : genNames.fileName; + const workspace = getProjects(host); + let baseDir: string; + if (options.directory) { + baseDir = options.directory; + } else { + baseDir = + workspace.get(options.project).projectType === 'application' + ? 'app' + : 'lib'; + } + return options.flat ? baseDir : joinPathFragments(baseDir, fileName); +} + +function assertValidOptions(options: Schema) { + const slashes = ['/', '\\']; + slashes.forEach((s) => { + if (options.name.indexOf(s) !== -1) { + const [name, ...rest] = options.name.split(s).reverse(); + let suggestion = rest.map((x) => x.toLowerCase()).join(s); + if (options.directory) { + suggestion = `${options.directory}${s}${suggestion}`; + } + throw new Error( + `Found "${s}" in the component name. Did you mean to use the --directory option (e.g. \`nx g c ${name} --directory ${suggestion}\`)?` + ); + } + }); +} + +export default componentGenerator; + +export const componentSchematic = convertNxGenerator(componentGenerator); diff --git a/packages/vue/src/generators/component/files/__fileName__.vue__tmpl__ b/packages/vue/src/generators/component/files/__fileName__.vue__tmpl__ new file mode 100644 index 00000000000000..08f17aeb6ee0d0 --- /dev/null +++ b/packages/vue/src/generators/component/files/__fileName__.vue__tmpl__ @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/packages/vue/src/generators/component/files/__tests__/__fileName__.spec.ts__tmpl__ b/packages/vue/src/generators/component/files/__tests__/__fileName__.spec.ts__tmpl__ new file mode 100644 index 00000000000000..c520ce2fb1e13a --- /dev/null +++ b/packages/vue/src/generators/component/files/__tests__/__fileName__.spec.ts__tmpl__ @@ -0,0 +1,11 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import <%= className %> from '../<%= fileName %>'; + +describe('<%= className %>', () => { + it('renders properly', () => { + const wrapper = mount(<%= className %>, { props: {} }) + expect(wrapper.text()).toContain('Welcome to <%= className %>') + }) +}); diff --git a/packages/vue/src/generators/component/normalized-schema.ts b/packages/vue/src/generators/component/normalized-schema.ts new file mode 100644 index 00000000000000..e41b6b48bccdac --- /dev/null +++ b/packages/vue/src/generators/component/normalized-schema.ts @@ -0,0 +1,7 @@ +import { Schema } from './schema'; + +export interface NormalizedSchema extends Schema { + projectSourceRoot: string; + fileName: string; + className: string; +} diff --git a/packages/vue/src/generators/component/schema.d.ts b/packages/vue/src/generators/component/schema.d.ts new file mode 100644 index 00000000000000..8b100fdaddb15c --- /dev/null +++ b/packages/vue/src/generators/component/schema.d.ts @@ -0,0 +1,15 @@ +export interface Schema { + name: string; + project: string; + skipTests?: boolean; + directory?: string; + export?: boolean; + pascalCaseFiles?: boolean; + pascalCaseDirectory?: boolean; + routing?: boolean; + js?: boolean; + flat?: boolean; + fileName?: string; + inSourceTests?: boolean; + skipFormat?: boolean; +} diff --git a/packages/vue/src/generators/component/schema.json b/packages/vue/src/generators/component/schema.json new file mode 100644 index 00000000000000..6618cb017721d4 --- /dev/null +++ b/packages/vue/src/generators/component/schema.json @@ -0,0 +1,101 @@ +{ + "$schema": "http://json-schema.org/schema", + "cli": "nx", + "$id": "NxVueComponent", + "title": "Create a Vue Component", + "description": "Create a Vue Component for Nx.", + "type": "object", + "examples": [ + { + "command": "nx g component my-component --project=mylib", + "description": "Generate a component in the `mylib` library" + }, + { + "command": "nx g component my-component --project=mylib --classComponent", + "description": "Generate a class component in the `mylib` library" + } + ], + "properties": { + "project": { + "type": "string", + "description": "The name of the project.", + "alias": "p", + "$default": { + "$source": "projectName" + }, + "x-prompt": "What is the name of the project for this component?", + "x-priority": "important" + }, + "name": { + "type": "string", + "description": "The name of the component.", + "$default": { + "$source": "argv", + "index": 0 + }, + "x-prompt": "What name would you like to use for the component?", + "x-priority": "important" + }, + "js": { + "type": "boolean", + "description": "Generate JavaScript files rather than TypeScript files.", + "default": false + }, + "skipTests": { + "type": "boolean", + "description": "When true, does not create `spec.ts` test files for the new component.", + "default": false, + "x-priority": "internal" + }, + "directory": { + "type": "string", + "description": "Create the component under this directory (can be nested).", + "alias": "dir", + "x-priority": "important" + }, + "flat": { + "type": "boolean", + "description": "Create component at the source root rather than its own directory.", + "default": false + }, + "export": { + "type": "boolean", + "description": "When true, the component is exported from the project `index.ts` (if it exists).", + "alias": "e", + "default": false, + "x-prompt": "Should this component be exported in the project?" + }, + "pascalCaseFiles": { + "type": "boolean", + "description": "Use pascal case component file name (e.g. `App.tsx`).", + "alias": "P", + "default": false + }, + "pascalCaseDirectory": { + "type": "boolean", + "description": "Use pascal case directory name (e.g. `App/App.tsx`).", + "alias": "R", + "default": false + }, + "routing": { + "type": "boolean", + "description": "Generate a library with routes." + }, + "fileName": { + "type": "string", + "description": "Create a component with this file name." + }, + "inSourceTests": { + "type": "boolean", + "default": false, + "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html" + }, + "skipFormat": { + "description": "Skip formatting files.", + "type": "boolean", + "default": false, + "x-priority": "internal" + } + }, + "required": ["name", "project"] +} diff --git a/packages/vue/src/generators/init/init.spec.ts b/packages/vue/src/generators/init/init.spec.ts new file mode 100644 index 00000000000000..b6a5e4eb5945ee --- /dev/null +++ b/packages/vue/src/generators/init/init.spec.ts @@ -0,0 +1,27 @@ +import { readJson, Tree } from '@nx/devkit'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { vueInitGenerator } from './init'; +import { InitSchema } from './schema'; + +// TODO: more or different to be added here +describe('init', () => { + let tree: Tree; + let schema: InitSchema = { + skipFormat: false, + }; + + beforeEach(() => { + tree = createTreeWithEmptyWorkspace(); + }); + + it('should add react dependencies', async () => { + await vueInitGenerator(tree, schema); + const packageJson = readJson(tree, 'package.json'); + expect(packageJson.dependencies['vue']).toBeDefined(); + }); + + it('should not add jest config if unitTestRunner is none', async () => { + await vueInitGenerator(tree, { ...schema, unitTestRunner: 'none' }); + expect(tree.exists('jest.config.js')).toEqual(false); + }); +}); diff --git a/packages/vue/src/generators/init/init.ts b/packages/vue/src/generators/init/init.ts new file mode 100755 index 00000000000000..9f936609a11a37 --- /dev/null +++ b/packages/vue/src/generators/init/init.ts @@ -0,0 +1,70 @@ +import { + addDependenciesToPackageJson, + convertNxGenerator, + GeneratorCallback, + readNxJson, + removeDependenciesFromPackageJson, + runTasksInSerial, + Tree, + updateNxJson, +} from '@nx/devkit'; + +import { initGenerator as jsInitGenerator } from '@nx/js'; +import { nxVersion, vueVersion } from '../../utils/versions'; +import { InitSchema } from './schema'; + +function setDefault(host: Tree) { + const workspace = readNxJson(host); + + workspace.generators = workspace.generators || {}; + const vueGenerators = workspace.generators['@nx/vue'] || {}; + const generators = { + ...workspace.generators, + '@nx/vue': { + ...vueGenerators, + application: { + ...vueGenerators.application, + babel: true, + }, + }, + }; + + updateNxJson(host, { ...workspace, generators }); +} + +function updateDependencies(host: Tree, _schema: InitSchema) { + removeDependenciesFromPackageJson(host, ['@nx/vue'], []); + + const dependencies = { + vue: vueVersion, + }; + + return addDependenciesToPackageJson(host, dependencies, { + '@nx/vue': nxVersion, + }); +} + +export async function vueInitGenerator(host: Tree, schema: InitSchema) { + const tasks: GeneratorCallback[] = []; + + const jsInitTask = await jsInitGenerator(host, { + ...schema, + tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json', + skipFormat: true, + }); + + tasks.push(jsInitTask); + + setDefault(host); + + if (!schema.skipPackageJson) { + const installTask = updateDependencies(host, schema); + tasks.push(installTask); + } + + return runTasksInSerial(...tasks); +} + +export default vueInitGenerator; + +export const vueInitSchematic = convertNxGenerator(vueInitGenerator); diff --git a/packages/vue/src/generators/init/schema.d.ts b/packages/vue/src/generators/init/schema.d.ts new file mode 100644 index 00000000000000..fd2e1db972b4ff --- /dev/null +++ b/packages/vue/src/generators/init/schema.d.ts @@ -0,0 +1,9 @@ +export interface InitSchema { + unitTestRunner?: 'vitest' | 'none'; // TODO: more or different to be added here + e2eTestRunner?: 'cypress' | 'playwright' | 'none'; // TODO: more or different to be added here + skipFormat?: boolean; + skipPackageJson?: boolean; + js?: boolean; + rootProject?: boolean; + // TODO: more or different to be added here +} diff --git a/packages/vue/src/generators/init/schema.json b/packages/vue/src/generators/init/schema.json new file mode 100644 index 00000000000000..4502f0ef3c08b7 --- /dev/null +++ b/packages/vue/src/generators/init/schema.json @@ -0,0 +1,43 @@ +{ + "$schema": "http://json-schema.org/schema", + "$id": "NxVueInit", + "title": "Init Vue Plugin", + "description": "Initialize a Vue Plugin.", + "cli": "nx", + "type": "object", + "properties": { + "unitTestRunner": { + "description": "Adds the specified unit test runner.", + "type": "string", + "enum": ["vitest", "none"], + "default": "vitest" + }, + "e2eTestRunner": { + "description": "Adds the specified E2E test runner.", + "type": "string", + "enum": ["cypress", "playwright", "none"], + "default": "cypress" + }, + "skipFormat": { + "description": "Skip formatting files.", + "type": "boolean", + "default": false + }, + "skipPackageJson": { + "description": "Do not add dependencies to `package.json`.", + "type": "boolean", + "default": false + }, + "js": { + "type": "boolean", + "description": "Use JavaScript instead of TypeScript", + "default": false + }, + "rootProject": { + "description": "Create a project at the root of the workspace", + "type": "boolean", + "default": false + } + }, + "required": [] +} diff --git a/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap b/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap new file mode 100644 index 00000000000000..eed518b3463062 --- /dev/null +++ b/packages/vue/src/generators/library/__snapshots__/library.spec.ts.snap @@ -0,0 +1,94 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`lib nested should create a local tsconfig.json 1`] = ` +{ + "compilerOptions": { + "types": [ + "vitest", + ], + }, + "extends": "../../tsconfig.base.json", + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json", + }, + { + "path": "./tsconfig.node.json", + }, + { + "path": "./tsconfig.vitest.json", + }, + ], +} +`; + +exports[`lib should add vue, vite and vitest to package.json 1`] = ` +{ + "dependencies": { + "vue": "^3.3.4", + }, + "devDependencies": { + "@nx/cypress": "0.0.1", + "@nx/eslint-plugin": "0.0.1", + "@nx/js": "0.0.1", + "@nx/linter": "0.0.1", + "@nx/rollup": "0.0.1", + "@nx/vite": "0.0.1", + "@nx/vue": "0.0.1", + "@typescript-eslint/eslint-plugin": "^5.60.1", + "@typescript-eslint/parser": "^5.60.1", + "@vitest/coverage-c8": "~0.32.0", + "@vitest/ui": "~0.32.0", + "@vue/eslint-config-prettier": "^8.0.0", + "@vue/eslint-config-typescript": "^11.0.3", + "eslint": "~8.46.0", + "eslint-config-prettier": "8.1.0", + "eslint-plugin-vue": "^9.16.1", + "jsdom": "~22.1.0", + "prettier": "^2.6.2", + "typescript": "~5.1.3", + "vite": "~4.3.9", + "vitest": "~0.32.0", + }, + "name": "test-name", +} +`; + +exports[`lib should generate files 1`] = ` +{ + "extends": [ + "plugin:@nx/vue", + "../.eslintrc.json", + ], + "ignorePatterns": [ + "!**/*", + ], + "overrides": [ + { + "files": [ + "*.ts", + "*.tsx", + "*.js", + "*.jsx", + ], + "rules": {}, + }, + { + "files": [ + "*.ts", + "*.tsx", + ], + "rules": {}, + }, + { + "files": [ + "*.js", + "*.jsx", + ], + "rules": {}, + }, + ], +} +`; diff --git a/packages/vue/src/generators/library/files/README.md b/packages/vue/src/generators/library/files/README.md new file mode 100644 index 00000000000000..8c7900842716ee --- /dev/null +++ b/packages/vue/src/generators/library/files/README.md @@ -0,0 +1,7 @@ +# <%= name %> + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test <%= name %>` to execute the unit tests via [Vitest](https://vitest.dev/). diff --git a/packages/vue/src/generators/library/files/package.json__tmpl__ b/packages/vue/src/generators/library/files/package.json__tmpl__ new file mode 100644 index 00000000000000..507420ee308347 --- /dev/null +++ b/packages/vue/src/generators/library/files/package.json__tmpl__ @@ -0,0 +1,12 @@ +{ + "name": "<%= name %>", + "version": "0.0.1", + "main": "./index.js", + "types": "./index.d.ts", + "exports": { + ".": { + "import": "./index.mjs", + "require": "./index.js" + } + } +} diff --git a/packages/vue/src/generators/library/files/src/index.ts__tmpl__ b/packages/vue/src/generators/library/files/src/index.ts__tmpl__ new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/vue/src/generators/library/files/tsconfig.lib.json__tmpl__ b/packages/vue/src/generators/library/files/tsconfig.lib.json__tmpl__ new file mode 100644 index 00000000000000..9cfc471922ad4e --- /dev/null +++ b/packages/vue/src/generators/library/files/tsconfig.lib.json__tmpl__ @@ -0,0 +1,23 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "compilerOptions": { + "outDir": "<%= offsetFromRoot %>dist/out-tsc", + "composite": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + }, + "types": ["node"] + }, + "exclude": [ + "src/**/__tests__/*", + "**/*.spec.ts", + "**/*.test.ts", + "**/*.spec.tsx", + "**/*.test.tsx", + "**/*.spec.js", + "**/*.test.js", + "**/*.spec.jsx", + "**/*.test.jsx"], + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"] +} diff --git a/packages/vue/src/generators/library/files/tsconfig.node.json__tmpl__ b/packages/vue/src/generators/library/files/tsconfig.node.json__tmpl__ new file mode 100644 index 00000000000000..dee96bed470be6 --- /dev/null +++ b/packages/vue/src/generators/library/files/tsconfig.node.json__tmpl__ @@ -0,0 +1,16 @@ +{ + "extends": "@tsconfig/node18/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*" + ], + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/packages/vue/src/generators/library/files/tsconfig.vitest.json__tmpl__ b/packages/vue/src/generators/library/files/tsconfig.vitest.json__tmpl__ new file mode 100644 index 00000000000000..80be606c41b0fc --- /dev/null +++ b/packages/vue/src/generators/library/files/tsconfig.vitest.json__tmpl__ @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.lib.json", + "exclude": [], + "compilerOptions": { + "composite": true, + "lib": [], + "types": ["node", "jsdom"] + } +} diff --git a/packages/vue/src/generators/library/lib/.gitkeep b/packages/vue/src/generators/library/lib/.gitkeep new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/vue/src/generators/library/lib/add-linting.ts b/packages/vue/src/generators/library/lib/add-linting.ts new file mode 100644 index 00000000000000..b9f1da0a2eba08 --- /dev/null +++ b/packages/vue/src/generators/library/lib/add-linting.ts @@ -0,0 +1,45 @@ +import { Tree } from 'nx/src/generators/tree'; +import { Linter, lintProjectGenerator } from '@nx/linter'; +import { joinPathFragments } from 'nx/src/utils/path'; +import { addDependenciesToPackageJson, runTasksInSerial } from '@nx/devkit'; + +import { NormalizedSchema } from '../schema'; +import { extraEslintDependencies } from '../../../utils/lint'; +import { + addExtendsToLintConfig, + isEslintConfigSupported, +} from '@nx/linter/src/generators/utils/eslint-file'; + +export async function addLinting(host: Tree, options: NormalizedSchema) { + if (options.linter === Linter.EsLint) { + const lintTask = await lintProjectGenerator(host, { + linter: options.linter, + project: options.name, + tsConfigPaths: [ + joinPathFragments(options.projectRoot, 'tsconfig.lib.json'), + ], + unitTestRunner: options.unitTestRunner, + eslintFilePatterns: [`${options.projectRoot}/**/*.{ts,tsx,js,jsx,vue}`], + skipFormat: true, + skipPackageJson: options.skipPackageJson, + setParserOptionsProject: options.setParserOptionsProject, + }); + + if (isEslintConfigSupported(host)) { + addExtendsToLintConfig(host, options.projectRoot, 'plugin:@nx/vue'); + } + + let installTask = () => {}; + if (!options.skipPackageJson) { + installTask = await addDependenciesToPackageJson( + host, + extraEslintDependencies.dependencies, + extraEslintDependencies.devDependencies + ); + } + + return runTasksInSerial(lintTask, installTask); + } else { + return () => {}; + } +} diff --git a/packages/vue/src/generators/library/lib/create-files.ts b/packages/vue/src/generators/library/lib/create-files.ts new file mode 100644 index 00000000000000..276481771e2e6a --- /dev/null +++ b/packages/vue/src/generators/library/lib/create-files.ts @@ -0,0 +1,49 @@ +import type { Tree } from '@nx/devkit'; +import { + generateFiles, + joinPathFragments, + names, + offsetFromRoot, + toJS, + writeJson, +} from '@nx/devkit'; +import { getRelativePathToRootTsConfig } from '@nx/js'; +import { NormalizedSchema } from '../schema'; +import { createTsConfig } from '../../../utils/create-ts-config'; + +export function createFiles(host: Tree, options: NormalizedSchema) { + const relativePathToRootTsConfig = getRelativePathToRootTsConfig( + host, + options.projectRoot + ); + const substitutions = { + ...options, + ...names(options.name), + tmpl: '', + offsetFromRoot: offsetFromRoot(options.projectRoot), + fileName: options.fileName, + }; + + generateFiles( + host, + joinPathFragments(__dirname, '../files'), + options.projectRoot, + substitutions + ); + + if (!options.publishable && !options.buildable) { + host.delete(`${options.projectRoot}/package.json`); + } + + if (options.js) { + toJS(host); + } + + createTsConfig( + host, + options.projectRoot, + 'lib', + options, + relativePathToRootTsConfig + ); +} diff --git a/packages/vue/src/generators/library/lib/normalize-options.spec.ts b/packages/vue/src/generators/library/lib/normalize-options.spec.ts new file mode 100644 index 00000000000000..8ef16fbe48a154 --- /dev/null +++ b/packages/vue/src/generators/library/lib/normalize-options.spec.ts @@ -0,0 +1,100 @@ +import type { Tree } from '@nx/devkit'; +import { Linter } from '@nx/linter'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { normalizeOptions } from './normalize-options'; + +describe('normalizeOptions', () => { + let tree: Tree; + + beforeEach(() => { + tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); + }); + + it('should set unitTestRunner=jest and bundler=none by default', async () => { + const options = await normalizeOptions(tree, { + name: 'test', + linter: Linter.None, + unitTestRunner: 'vitest', + }); + + expect(options).toMatchObject({ + buildable: false, + bundler: 'none', + unitTestRunner: 'vitest', + }); + }); + + it('should set buildable to true when bundler is not "none"', async () => { + const options = await normalizeOptions(tree, { + name: 'test', + linter: Linter.None, + bundler: 'vite', + }); + + expect(options).toMatchObject({ + buildable: true, + bundler: 'vite', + }); + }); + + it('should set unitTestRunner=vitest by default when bundler is vite', async () => { + const options = await normalizeOptions(tree, { + name: 'test', + linter: Linter.None, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + + expect(options).toMatchObject({ + buildable: true, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + }); + + it('should set maintain unitTestRunner when bundler is vite', async () => { + const options = await normalizeOptions(tree, { + name: 'test', + linter: Linter.None, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + + expect(options).toMatchObject({ + buildable: true, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + }); + + it('should set bundler to rollup if buildable is true not no bundler is passed', async () => { + const options = await normalizeOptions(tree, { + name: 'test', + linter: Linter.None, + buildable: true, + unitTestRunner: 'vitest', + }); + + expect(options).toMatchObject({ + buildable: true, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + }); + + it('should set bundler to rollup if buildable is true and bundler is none ', async () => { + const options = await normalizeOptions(tree, { + name: 'test', + linter: Linter.None, + buildable: true, + bundler: 'none', + unitTestRunner: 'vitest', + }); + + expect(options).toMatchObject({ + buildable: true, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + }); +}); diff --git a/packages/vue/src/generators/library/lib/normalize-options.ts b/packages/vue/src/generators/library/lib/normalize-options.ts new file mode 100644 index 00000000000000..4e2e8fd30d94bd --- /dev/null +++ b/packages/vue/src/generators/library/lib/normalize-options.ts @@ -0,0 +1,86 @@ +import { getProjects, logger, normalizePath, Tree } from '@nx/devkit'; +import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils'; +import { NormalizedSchema, Schema } from '../schema'; + +export async function normalizeOptions( + host: Tree, + options: Schema +): Promise { + const { + projectName, + names: projectNames, + projectRoot, + importPath, + } = await determineProjectNameAndRootOptions(host, { + name: options.name, + projectType: 'library', + directory: options.directory, + importPath: options.importPath, + projectNameAndRootFormat: options.projectNameAndRootFormat, + callingGenerator: '@nx/vue:library', + }); + + const fileName = options.simpleName + ? projectNames.projectSimpleName + : projectNames.projectFileName; + + const parsedTags = options.tags + ? options.tags.split(',').map((s) => s.trim()) + : []; + + let bundler = options.bundler ?? 'none'; + + if (bundler === 'none') { + if (options.publishable) { + logger.warn( + `Publishable libraries cannot be used with bundler: 'none'. Defaulting to 'rollup'.` + ); + bundler = 'vite'; + } + if (options.buildable) { + logger.warn( + `Buildable libraries cannot be used with bundler: 'none'. Defaulting to 'rollup'.` + ); + bundler = 'vite'; + } + } + + const normalized = { + ...options, + bundler, + fileName, + routePath: `/${projectNames.projectSimpleName}`, + name: projectName, + projectRoot, + parsedTags, + importPath, + } as NormalizedSchema; + + // Libraries with a bundler or is publishable must also be buildable. + normalized.buildable = Boolean( + normalized.bundler !== 'none' || options.buildable || options.publishable + ); + + normalized.inSourceTests === normalized.minimal || normalized.inSourceTests; + + if (options.appProject) { + const appProjectConfig = getProjects(host).get(options.appProject); + + if (appProjectConfig.projectType !== 'application') { + throw new Error( + `appProject expected type of "application" but got "${appProjectConfig.projectType}"` + ); + } + + try { + normalized.appMain = appProjectConfig.targets.build.options.main; + normalized.appSourceRoot = normalizePath(appProjectConfig.sourceRoot); + } catch (e) { + throw new Error( + `Could not locate project main for ${options.appProject}` + ); + } + } + + return normalized; +} diff --git a/packages/vue/src/generators/library/library.spec.ts b/packages/vue/src/generators/library/library.spec.ts new file mode 100644 index 00000000000000..d25072e49debb8 --- /dev/null +++ b/packages/vue/src/generators/library/library.spec.ts @@ -0,0 +1,529 @@ +import { installedCypressVersion } from '@nx/cypress/src/utils/cypress-version'; +import { + getProjects, + readJson, + readProjectConfiguration, + Tree, + updateJson, +} from '@nx/devkit'; +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { Linter } from '@nx/linter'; +import { nxVersion } from '../../utils/versions'; +// import applicationGenerator from '../application/application'; +import libraryGenerator from './library'; +import { Schema } from './schema'; +// need to mock cypress otherwise it'll use the nx installed version from package.json +// which is v9 while we are testing for the new v10 version +jest.mock('@nx/cypress/src/utils/cypress-version'); +describe('lib', () => { + let tree: Tree; + let mockedInstalledCypressVersion: jest.Mock< + ReturnType + > = installedCypressVersion as never; + let defaultSchema: Schema = { + name: 'myLib', + linter: Linter.EsLint, + skipFormat: false, + skipTsConfig: false, + unitTestRunner: 'vitest', + component: true, + strict: true, + simpleName: false, + }; + + beforeEach(() => { + mockedInstalledCypressVersion.mockReturnValue(10); + tree = createTreeWithEmptyWorkspace(); + updateJson(tree, '/package.json', (json) => { + json.devDependencies = { + '@nx/cypress': nxVersion, + '@nx/rollup': nxVersion, + '@nx/vite': nxVersion, + }; + return json; + }); + }); + + it('should update project configuration', async () => { + await libraryGenerator(tree, defaultSchema); + const project = readProjectConfiguration(tree, 'my-lib'); + expect(project.root).toEqual('my-lib'); + expect(project.targets.build).toBeUndefined(); + expect(project.targets.lint).toEqual({ + executor: '@nx/linter:eslint', + outputs: ['{options.outputFile}'], + options: { + lintFilePatterns: ['my-lib/**/*.{ts,tsx,js,jsx,vue}'], + }, + }); + }); + + it('should add vite types to tsconfigs', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + bundler: 'vite', + unitTestRunner: 'vitest', + }); + const tsconfigApp = readJson(tree, 'my-lib/tsconfig.lib.json'); + expect(tsconfigApp.compilerOptions.types).toEqual(['node', 'vite/client']); + const tsconfigSpec = readJson(tree, 'my-lib/tsconfig.vitest.json'); + expect(tsconfigSpec.compilerOptions.types).toEqual(['node', 'jsdom']); + }); + + it('should update tags', async () => { + await libraryGenerator(tree, { ...defaultSchema, tags: 'one,two' }); + const project = readProjectConfiguration(tree, 'my-lib'); + expect(project).toEqual( + expect.objectContaining({ + tags: ['one', 'two'], + }) + ); + }); + + it('should add vue, vite and vitest to package.json', async () => { + await libraryGenerator(tree, defaultSchema); + const packageJson = readJson(tree, '/package.json'); + expect(packageJson).toMatchSnapshot(); + }); + + it('should update root tsconfig.base.json', async () => { + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, '/tsconfig.base.json'); + expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([ + 'my-lib/src/index.ts', + ]); + }); + + it('should create tsconfig.base.json out of tsconfig.json', async () => { + tree.rename('tsconfig.base.json', 'tsconfig.json'); + + await libraryGenerator(tree, defaultSchema); + + expect(tree.exists('tsconfig.base.json')).toEqual(true); + const tsconfigJson = readJson(tree, 'tsconfig.base.json'); + expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([ + 'my-lib/src/index.ts', + ]); + }); + + it('should update root tsconfig.base.json (no existing path mappings)', async () => { + updateJson(tree, 'tsconfig.base.json', (json) => { + json.compilerOptions.paths = undefined; + return json; + }); + + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, '/tsconfig.base.json'); + expect(tsconfigJson.compilerOptions.paths['@proj/my-lib']).toEqual([ + 'my-lib/src/index.ts', + ]); + }); + + it('should create a local tsconfig.json', async () => { + await libraryGenerator(tree, defaultSchema); + + const tsconfigJson = readJson(tree, 'my-lib/tsconfig.json'); + expect(tsconfigJson.extends).toBe('../tsconfig.base.json'); + expect(tsconfigJson.references).toEqual([ + { + path: './tsconfig.lib.json', + }, + { + path: './tsconfig.node.json', + }, + { + path: './tsconfig.vitest.json', + }, + ]); + }); + + it('should extend the tsconfig.lib.json with tsconfig.vitest.json', async () => { + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, 'my-lib/tsconfig.vitest.json'); + expect(tsconfigJson.extends).toEqual('./tsconfig.lib.json'); + }); + + it('should extend @vue/tsconfig/tsconfig.dom.json with tsconfig.lib.json', async () => { + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, 'my-lib/tsconfig.lib.json'); + expect(tsconfigJson.extends).toEqual('@vue/tsconfig/tsconfig.dom.json'); + }); + + it('should ignore test files in tsconfig.lib.json', async () => { + await libraryGenerator(tree, defaultSchema); + const tsconfigJson = readJson(tree, 'my-lib/tsconfig.lib.json'); + expect(tsconfigJson.exclude).toEqual([ + 'src/**/__tests__/*', + '**/*.spec.ts', + '**/*.test.ts', + '**/*.spec.tsx', + '**/*.test.tsx', + '**/*.spec.js', + '**/*.test.js', + '**/*.spec.jsx', + '**/*.test.jsx', + ]); + }); + + it('should generate files', async () => { + await libraryGenerator(tree, defaultSchema); + expect(tree.exists('my-lib/package.json')).toBeFalsy(); + // expect(tree.exists(`my-lib/jest.config.ts`)).toBeTruthy(); + expect(tree.exists('my-lib/src/index.ts')).toBeTruthy(); + expect(tree.exists('my-lib/src/lib/my-lib.vue')).toBeTruthy(); + expect(tree.exists('my-lib/src/lib/__tests__/my-lib.spec.ts')).toBeTruthy(); + const eslintJson = readJson(tree, 'my-lib/.eslintrc.json'); + expect(eslintJson).toMatchSnapshot(); + }); + + describe('nested', () => { + it('should update tags and implicitDependencies', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + directory: 'myDir', + tags: 'one', + }); + const myLib = readProjectConfiguration(tree, 'my-dir-my-lib'); + expect(myLib).toEqual( + expect.objectContaining({ + tags: ['one'], + }) + ); + + await libraryGenerator(tree, { + ...defaultSchema, + name: 'myLib2', + directory: 'myDir', + tags: 'one,two', + }); + + const myLib2 = readProjectConfiguration(tree, 'my-dir-my-lib2'); + expect(myLib2).toEqual( + expect.objectContaining({ + tags: ['one', 'two'], + }) + ); + }); + + it('should generate files', async () => { + await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); + expect(tree.exists('my-dir/my-lib/src/index.ts')).toBeTruthy(); + expect( + tree.exists('my-dir/my-lib/src/lib/my-dir-my-lib.vue') + ).toBeTruthy(); + expect( + tree.exists('my-dir/my-lib/src/lib/__tests__/my-dir-my-lib.spec.ts') + ).toBeTruthy(); + }); + + it('should update project configurations', async () => { + await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); + const config = readProjectConfiguration(tree, 'my-dir-my-lib'); + + expect(config.root).toEqual('my-dir/my-lib'); + expect(config.targets.lint).toEqual({ + executor: '@nx/linter:eslint', + outputs: ['{options.outputFile}'], + options: { + lintFilePatterns: ['my-dir/my-lib/**/*.{ts,tsx,js,jsx,vue}'], + }, + }); + }); + + it('should update root tsconfig.base.json', async () => { + await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); + const tsconfigJson = readJson(tree, '/tsconfig.base.json'); + expect(tsconfigJson.compilerOptions.paths['@proj/my-dir/my-lib']).toEqual( + ['my-dir/my-lib/src/index.ts'] + ); + expect( + tsconfigJson.compilerOptions.paths['my-dir-my-lib/*'] + ).toBeUndefined(); + }); + + it('should create a local tsconfig.json', async () => { + await libraryGenerator(tree, { ...defaultSchema, directory: 'myDir' }); + + const tsconfigJson = readJson(tree, 'my-dir/my-lib/tsconfig.json'); + expect(tsconfigJson).toMatchSnapshot(); + }); + }); + + describe('--no-component', () => { + it('should not generate components or styles', async () => { + await libraryGenerator(tree, { ...defaultSchema, component: false }); + + expect(tree.exists('my-lib/src/lib')).toBeFalsy(); + }); + }); + + describe('--unit-test-runner none', () => { + it('should not generate test configuration', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + unitTestRunner: 'none', + }); + + expect(tree.exists('my-lib/tsconfig.spec.json')).toBeFalsy(); + expect(tree.exists('my-lib/jest.config.ts')).toBeFalsy(); + const config = readProjectConfiguration(tree, 'my-lib'); + expect(config.targets.test).toBeUndefined(); + expect(config.targets.lint).toMatchInlineSnapshot(` + { + "executor": "@nx/linter:eslint", + "options": { + "lintFilePatterns": [ + "my-lib/**/*.{ts,tsx,js,jsx,vue}", + ], + }, + "outputs": [ + "{options.outputFile}", + ], + } + `); + }); + }); + + // no app generator yet + xdescribe('--appProject', () => { + it('should add new route to existing routing code', async () => { + // await applicationGenerator(tree, { + // compiler: 'babel', + // e2eTestRunner: 'none', + // linter: Linter.EsLint, + // skipFormat: true, + // unitTestRunner: 'jest', + // name: 'myApp', + // routing: true, + // style: 'css', + // bundler: 'webpack', + // projectNameAndRootFormat: 'as-provided', + // }); + + await libraryGenerator(tree, { + ...defaultSchema, + appProject: 'my-app', + projectNameAndRootFormat: 'as-provided', + }); + + const appSource = tree.read('my-app/src/app/app.tsx', 'utf-8'); + const mainSource = tree.read('my-app/src/main.tsx', 'utf-8'); + + expect(mainSource).toContain('react-router-dom'); + expect(mainSource).toContain(''); + expect(appSource).toContain('@proj/my-lib'); + expect(appSource).toContain('react-router-dom'); + expect(appSource).toMatch(/ { + // await applicationGenerator(tree, { + // e2eTestRunner: 'none', + // linter: Linter.EsLint, + // skipFormat: true, + // unitTestRunner: 'jest', + // name: 'myApp', + // style: 'css', + // bundler: 'webpack', + // projectNameAndRootFormat: 'as-provided', + // }); + + await libraryGenerator(tree, { + ...defaultSchema, + appProject: 'my-app', + projectNameAndRootFormat: 'as-provided', + }); + + const appSource = tree.read('my-app/src/app/app.tsx', 'utf-8'); + const mainSource = tree.read('my-app/src/main.tsx', 'utf-8'); + + expect(mainSource).toContain('react-router-dom'); + expect(mainSource).toContain(''); + expect(appSource).toContain('@proj/my-lib'); + expect(appSource).toContain('react-router-dom'); + expect(appSource).toMatch(/ { + it('should have a builder defined', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + buildable: true, + }); + + const projectsConfigurations = getProjects(tree); + + expect(projectsConfigurations.get('my-lib').targets.build).toBeDefined(); + }); + }); + + describe('--publishable', () => { + // TODO(katerina): Fix the targets + xit('should add build targets', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + publishable: true, + importPath: '@proj/my-lib', + }); + + const projectsConfigurations = getProjects(tree); + + expect(projectsConfigurations.get('my-lib').targets.build).toMatchObject({ + executor: '@nx/vite:build', + outputs: ['{options.outputPath}'], + options: { + external: ['react', 'react-dom', 'react/jsx-runtime'], + entryFile: 'my-lib/src/index.ts', + outputPath: 'dist/my-lib', + project: 'my-lib/package.json', + tsConfig: 'my-lib/tsconfig.lib.json', + rollupConfig: '@nx/react/plugins/bundle-rollup', + }, + }); + }); + + it('should fail if no importPath is provided with publishable', async () => { + expect.assertions(1); + + try { + await libraryGenerator(tree, { + ...defaultSchema, + directory: 'myDir', + publishable: true, + }); + } catch (e) { + expect(e.message).toContain( + 'For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)' + ); + } + }); + + it('should add package.json and .babelrc', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + publishable: true, + importPath: '@proj/my-lib', + }); + + const packageJson = readJson(tree, '/my-lib/package.json'); + expect(packageJson.name).toEqual('@proj/my-lib'); + expect(tree.exists('/my-lib/.babelrc')); + }); + }); + + describe('--js', () => { + it('should generate JS files', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + js: true, + }); + + expect(tree.exists('/my-lib/src/index.js')).toBe(true); + }); + }); + + describe('--importPath', () => { + it('should update the package.json & tsconfig with the given import path', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + publishable: true, + directory: 'myDir', + importPath: '@myorg/lib', + }); + const packageJson = readJson(tree, 'my-dir/my-lib/package.json'); + const tsconfigJson = readJson(tree, '/tsconfig.base.json'); + + expect(packageJson.name).toBe('@myorg/lib'); + expect( + tsconfigJson.compilerOptions.paths[packageJson.name] + ).toBeDefined(); + }); + + it('should fail if the same importPath has already been used', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + name: 'myLib1', + publishable: true, + importPath: '@myorg/lib', + }); + + try { + await libraryGenerator(tree, { + ...defaultSchema, + name: 'myLib2', + publishable: true, + importPath: '@myorg/lib', + }); + } catch (e) { + expect(e.message).toContain( + 'You already have a library using the import path' + ); + } + + expect.assertions(1); + }); + }); + + // TBD + xdescribe('--no-strict', () => { + it('should not add options for strict mode', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + strict: false, + }); + const tsconfigJson = readJson(tree, '/my-lib/tsconfig.json'); + + expect(tsconfigJson.compilerOptions.strict).toEqual(false); + }); + }); + + // Vite generator does not have this option + xdescribe('--skipPackageJson', () => { + it('should not add dependencies to package.json when true', async () => { + const packageJsonBeforeGenerator = tree.read('package.json', 'utf-8'); + await libraryGenerator(tree, { + ...defaultSchema, + skipPackageJson: true, + }); + expect(tree.read('package.json', 'utf-8')).toEqual( + packageJsonBeforeGenerator + ); + }); + }); + + describe('--setParserOptionsProject', () => { + it('should set the parserOptions.project in the eslintrc.json file', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + setParserOptionsProject: true, + }); + + const eslintConfig = readJson(tree, 'my-lib/.eslintrc.json'); + + expect(eslintConfig.overrides[0].parserOptions.project).toEqual([ + 'my-lib/tsconfig.*?.json', + ]); + }); + }); + + describe('--simpleName', () => { + it('should generate a library with a simple name', async () => { + await libraryGenerator(tree, { + ...defaultSchema, + simpleName: true, + directory: 'myDir', + }); + + const indexFile = tree.read('my-dir/my-lib/src/index.ts', 'utf-8'); + + expect(indexFile).toContain(`export * from './lib/my-lib';`); + + expect( + tree.exists('my-dir/my-lib/src/lib/__tests__/my-lib.spec.ts') + ).toBeTruthy(); + + expect(tree.exists('my-dir/my-lib/src/lib/my-lib.vue')).toBeTruthy(); + }); + }); +}); diff --git a/packages/vue/src/generators/library/library.ts b/packages/vue/src/generators/library/library.ts new file mode 100644 index 00000000000000..673bd17eb3aa21 --- /dev/null +++ b/packages/vue/src/generators/library/library.ts @@ -0,0 +1,143 @@ +import { + addProjectConfiguration, + convertNxGenerator, + ensurePackage, + formatFiles, + GeneratorCallback, + joinPathFragments, + runTasksInSerial, + Tree, + updateJson, +} from '@nx/devkit'; + +import { addTsConfigPath } from '@nx/js'; + +import { nxVersion } from '../../utils/versions'; +// import componentGenerator from '../component/component'; +import initGenerator from '../init/init'; +import { Schema } from './schema'; +import { normalizeOptions } from './lib/normalize-options'; +import { addLinting } from './lib/add-linting'; +import { createFiles } from './lib/create-files'; +import { extractTsConfigBase } from '../../utils/create-ts-config'; +import componentGenerator from '../component/component'; + +export async function libraryGenerator(host: Tree, schema: Schema) { + const tasks: GeneratorCallback[] = []; + + const options = await normalizeOptions(host, schema); + if (options.publishable === true && !schema.importPath) { + throw new Error( + `For publishable libs you have to provide a proper "--importPath" which needs to be a valid npm package name (e.g. my-awesome-lib or @myorg/my-lib)` + ); + } + + const initTask = await initGenerator(host, { + ...options, + e2eTestRunner: 'none', + skipFormat: true, + }); + tasks.push(initTask); + + addProjectConfiguration(host, options.name, { + root: options.projectRoot, + sourceRoot: joinPathFragments(options.projectRoot, 'src'), + projectType: 'library', + tags: options.parsedTags, + targets: {}, + }); + + const lintTask = await addLinting(host, options); + tasks.push(lintTask); + + createFiles(host, options); + + // Set up build target + if (options.buildable && options.bundler === 'vite') { + const { viteConfigurationGenerator } = ensurePackage< + typeof import('@nx/vite') + >('@nx/vite', nxVersion); + const viteTask = await viteConfigurationGenerator(host, { + uiFramework: 'vue', + project: options.name, + newProject: true, + includeLib: true, + inSourceTests: options.inSourceTests, + includeVitest: options.unitTestRunner === 'vitest', + skipFormat: true, + testEnvironment: 'jsdom', + }); + tasks.push(viteTask); + } + + // Set up test target + if ( + options.unitTestRunner === 'vitest' && + options.bundler !== 'vite' // tests are already configured if bundler is vite + ) { + const { vitestGenerator } = ensurePackage( + '@nx/vite', + nxVersion + ); + const vitestTask = await vitestGenerator(host, { + uiFramework: 'vue', + project: options.name, + coverageProvider: 'c8', + inSourceTests: options.inSourceTests, + skipFormat: true, + testEnvironment: 'jsdom', + }); + tasks.push(vitestTask); + } + + if (options.component) { + const componentTask = await componentGenerator(host, { + name: options.fileName, + project: options.name, + flat: true, + skipTests: + options.unitTestRunner === 'none' || + (options.unitTestRunner === 'vitest' && options.inSourceTests == true), + export: true, + routing: options.routing, + js: options.js, + pascalCaseFiles: options.pascalCaseFiles, + inSourceTests: options.inSourceTests, + skipFormat: true, + }); + tasks.push(componentTask); + } + + if (options.publishable || options.buildable) { + updateJson(host, `${options.projectRoot}/package.json`, (json) => { + json.name = options.importPath; + return json; + }); + } + + // TODO(katerina): tbd + // const routeTask = updateAppRoutes(host, options); + // tasks.push(routeTask); + // setDefaults(host, options); + + extractTsConfigBase(host); + + if (!options.skipTsConfig) { + addTsConfigPath(host, options.importPath, [ + joinPathFragments( + options.projectRoot, + './src', + 'index.' + (options.js ? 'js' : 'ts') + ), + ]); + } + + if (!options.skipFormat) { + await formatFiles(host); + } + + return runTasksInSerial(...tasks); +} + +export default libraryGenerator; +export const librarySchematic = convertNxGenerator(libraryGenerator); diff --git a/packages/vue/src/generators/library/schema.d.ts b/packages/vue/src/generators/library/schema.d.ts new file mode 100644 index 00000000000000..40e3c69ace241f --- /dev/null +++ b/packages/vue/src/generators/library/schema.d.ts @@ -0,0 +1,41 @@ +import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils'; +import type { Linter } from '@nx/linter'; +import type { SupportedStyles } from '../../../typings/style'; + +export interface Schema { + appProject?: string; + buildable?: boolean; + bundler?: 'none' | 'vite'; + component?: boolean; + directory?: string; + projectNameAndRootFormat?: ProjectNameAndRootFormat; + importPath?: string; + inSourceTests?: boolean; + js?: boolean; + linter: Linter; + name: string; + pascalCaseFiles?: boolean; + publishable?: boolean; + routing?: boolean; + setParserOptionsProject?: boolean; + skipFormat?: boolean; + skipPackageJson?: boolean; + skipTsConfig?: boolean; + strict?: boolean; + tags?: string; + unitTestRunner?: 'vitest' | 'none'; + minimal?: boolean; + simpleName?: boolean; +} + +export interface NormalizedSchema extends Schema { + js: boolean; + name: string; + fileName: string; + projectRoot: string; + routePath: string; + parsedTags: string[]; + appMain?: string; + appSourceRoot?: string; + unitTestRunner: 'vitest' | 'none'; +} diff --git a/packages/vue/src/generators/library/schema.json b/packages/vue/src/generators/library/schema.json new file mode 100644 index 00000000000000..e30d593201242e --- /dev/null +++ b/packages/vue/src/generators/library/schema.json @@ -0,0 +1,150 @@ +{ + "$schema": "http://json-schema.org/schema", + "cli": "nx", + "$id": "NxVueLibrary", + "title": "Create a Vue Library", + "description": "Create a Vue Library for an Nx workspace.", + "type": "object", + "examples": [ + { + "command": "nx g lib mylib --directory=myapp", + "description": "Generate `libs/myapp/mylib`" + }, + { + "command": "nx g lib mylib --appProject=myapp", + "description": "Generate a library with routes and add them to `myapp`" + } + ], + "properties": { + "name": { + "type": "string", + "description": "Library name", + "$default": { + "$source": "argv", + "index": 0 + }, + "x-prompt": "What name would you like to use for the library?", + "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$", + "x-priority": "important" + }, + "directory": { + "type": "string", + "description": "A directory where the lib is placed.", + "alias": "dir", + "x-priority": "important" + }, + "projectNameAndRootFormat": { + "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).", + "type": "string", + "enum": ["as-provided", "derived"] + }, + "linter": { + "description": "The tool to use for running lint checks.", + "type": "string", + "enum": ["eslint", "none"], + "default": "eslint" + }, + "unitTestRunner": { + "type": "string", + "enum": ["vitest", "none"], + "description": "Test runner to use for unit tests.", + "x-prompt": "What unit test runner should be used?" + }, + "inSourceTests": { + "type": "boolean", + "default": false, + "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files." + }, + "tags": { + "type": "string", + "description": "Add tags to the library (used for linting).", + "alias": "t" + }, + "skipFormat": { + "description": "Skip formatting files.", + "type": "boolean", + "default": false, + "x-priority": "internal" + }, + "skipTsConfig": { + "type": "boolean", + "default": false, + "description": "Do not update `tsconfig.json` for development experience.", + "x-priority": "internal" + }, + "pascalCaseFiles": { + "type": "boolean", + "description": "Use pascal case component file name (e.g. `App.tsx`).", + "alias": "P", + "default": false + }, + "routing": { + "type": "boolean", + "description": "Generate library with routes." + }, + "appProject": { + "type": "string", + "description": "The application project to add the library route to.", + "alias": "a" + }, + "publishable": { + "type": "boolean", + "description": "Create a publishable library." + }, + "buildable": { + "type": "boolean", + "default": false, + "description": "Generate a buildable library that uses rollup to bundle.", + "x-deprecated": "Use the `bundler` option for greater control (none, vite, rollup)." + }, + "importPath": { + "type": "string", + "description": "The library name used to import it, like `@myorg/my-awesome-lib`." + }, + "component": { + "type": "boolean", + "description": "Generate a default component.", + "default": true + }, + "js": { + "type": "boolean", + "description": "Generate JavaScript files rather than TypeScript files.", + "default": false + }, + "strict": { + "type": "boolean", + "description": "Whether to enable tsconfig strict mode or not.", + "default": true + }, + "setParserOptionsProject": { + "type": "boolean", + "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.", + "default": false + }, + "bundler": { + "type": "string", + "description": "The bundler to use. Choosing 'none' means this library is not buildable.", + "enum": ["none", "vite"], + "default": "none", + "x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup.", + "x-priority": "important" + }, + "skipPackageJson": { + "description": "Do not add dependencies to `package.json`.", + "type": "boolean", + "default": false, + "x-priority": "internal" + }, + "minimal": { + "description": "Create a Vue library with a minimal setup, no separate test files.", + "type": "boolean", + "default": false + }, + "simpleName": { + "description": "Don't include the directory in the name of the module of the library.", + "type": "boolean", + "default": false + } + }, + "required": ["name"] +} diff --git a/packages/vue/src/migrations/.gitkeep b/packages/vue/src/migrations/.gitkeep new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/vue/src/utils/.gitkeep b/packages/vue/src/utils/.gitkeep new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/vue/src/utils/ast-utils.ts b/packages/vue/src/utils/ast-utils.ts new file mode 100644 index 00000000000000..2a20d08ecd052e --- /dev/null +++ b/packages/vue/src/utils/ast-utils.ts @@ -0,0 +1,35 @@ +import type * as ts from 'typescript'; +import { findNodes } from '@nx/js'; +import { ChangeType, StringChange } from '@nx/devkit'; +import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript'; + +let tsModule: typeof import('typescript'); + +export function addImport( + source: ts.SourceFile, + statement: string +): StringChange[] { + if (!tsModule) { + tsModule = ensureTypescript(); + } + + const allImports = findNodes(source, tsModule.SyntaxKind.ImportDeclaration); + if (allImports.length > 0) { + const lastImport = allImports[allImports.length - 1]; + return [ + { + type: ChangeType.Insert, + index: lastImport.end + 1, + text: `\n${statement}\n`, + }, + ]; + } else { + return [ + { + type: ChangeType.Insert, + index: 0, + text: `\n${statement}\n`, + }, + ]; + } +} diff --git a/packages/vue/src/utils/create-ts-config.ts b/packages/vue/src/utils/create-ts-config.ts new file mode 100644 index 00000000000000..63102cab34f51b --- /dev/null +++ b/packages/vue/src/utils/create-ts-config.ts @@ -0,0 +1,76 @@ +import { Tree } from 'nx/src/generators/tree'; +import * as shared from '@nx/js/src/utils/typescript/create-ts-config'; +import { updateJson, writeJson } from 'nx/src/generators/utils/json'; + +export function createTsConfig( + host: Tree, + projectRoot: string, + type: 'app' | 'lib', + options: { + strict?: boolean; + style?: string; + bundler?: string; + rootProject?: boolean; + unitTestRunner?: string; + }, + relativePathToRootTsConfig: string +) { + const json = { + compilerOptions: {}, + files: [], + include: [], + references: [ + { + path: type === 'app' ? './tsconfig.app.json' : './tsconfig.lib.json', + }, + { + path: './tsconfig.node.json', + }, + { + path: './tsconfig.vitest.json', + }, + ], + } as any; + + // inline tsconfig.base.json into the project + if (options.rootProject) { + json.compileOnSave = false; + json.compilerOptions = { + ...shared.tsConfigBaseOptions, + ...json.compilerOptions, + }; + json.exclude = ['node_modules', 'tmp']; + } else { + json.extends = relativePathToRootTsConfig; + } + + writeJson(host, `${projectRoot}/tsconfig.json`, json); + + const tsconfigProjectPath = `${projectRoot}/tsconfig.${type}.json`; + if (options.bundler === 'vite' && host.exists(tsconfigProjectPath)) { + updateJson(host, tsconfigProjectPath, (json) => { + json.compilerOptions ??= {}; + + const types = new Set(json.compilerOptions.types ?? []); + types.add('node'); + types.add('vite/client'); + + json.compilerOptions.types = Array.from(types); + + return json; + }); + } else { + } +} + +export function extractTsConfigBase(host: Tree) { + shared.extractTsConfigBase(host); + + if (host.exists('vite.config.ts')) { + const vite = host.read('vite.config.ts').toString(); + host.write( + 'vite.config.ts', + vite.replace(`projects: []`, `projects: ['tsconfig.base.json']`) + ); + } +} diff --git a/packages/vue/src/utils/lint.ts b/packages/vue/src/utils/lint.ts new file mode 100644 index 00000000000000..6d603ded4cd0ee --- /dev/null +++ b/packages/vue/src/utils/lint.ts @@ -0,0 +1,16 @@ +import { + eslintPluginVueVersion, + eslintVersion, + vueEslintConfigPrettierVersion, + vueEslintConfigTypescriptVersion, +} from './versions'; + +export const extraEslintDependencies = { + dependencies: {}, + devDependencies: { + '@vue/eslint-config-prettier': vueEslintConfigPrettierVersion, + '@vue/eslint-config-typescript': vueEslintConfigTypescriptVersion, + eslint: eslintVersion, + 'eslint-plugin-vue': eslintPluginVueVersion, + }, +}; diff --git a/packages/vue/src/utils/testing-generators.ts b/packages/vue/src/utils/testing-generators.ts new file mode 100644 index 00000000000000..b06f3295d1c094 --- /dev/null +++ b/packages/vue/src/utils/testing-generators.ts @@ -0,0 +1,28 @@ +import { addProjectConfiguration, names, Tree } from '@nx/devkit'; +import { Linter } from '@nx/linter'; + +// export async function createApp(tree: Tree, appName: string): Promise { +// await applicationGenerator(tree, { +// e2eTestRunner: 'none', +// linter: Linter.EsLint, +// skipFormat: true, +// style: 'css', +// unitTestRunner: 'none', +// name: appName, +// projectNameAndRootFormat: 'as-provided', +// }); +// } + +export async function createLib(tree: Tree, libName: string): Promise { + const { fileName } = names(libName); + + tree.write(`/${fileName}/src/index.ts`, ``); + + addProjectConfiguration(tree, fileName, { + tags: [], + root: `${fileName}`, + projectType: 'library', + sourceRoot: `${fileName}/src`, + targets: {}, + }); +} diff --git a/packages/vue/src/utils/versions.ts b/packages/vue/src/utils/versions.ts new file mode 100644 index 00000000000000..f1f7f469092e0a --- /dev/null +++ b/packages/vue/src/utils/versions.ts @@ -0,0 +1,7 @@ +export const nxVersion = require('../../package.json').version; +export const vueVersion = '^3.3.4'; + +export const vueEslintConfigPrettierVersion = '^8.0.0'; +export const vueEslintConfigTypescriptVersion = '^11.0.3'; +export const eslintVersion = '^8.46.0'; +export const eslintPluginVueVersion = '^9.16.1';