@nx/vue 17.0.0-beta.4

package/src/generators/component/lib/utils.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertValidOptions = exports.getDirectory = exports.addExportsToBarrel = exports.getComponentClassName = exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const ast_utils_1 = require("../../../utils/ast-utils");
+let tsModule;
+async function normalizeOptions(host, options, isApp) {
+    assertValidOptions(options);
+    let { className, fileName } = (0, devkit_1.names)(options.name);
+    const componentFileName = options.fileName ?? (options.pascalCaseFiles ? className : fileName);
+    const project = (0, devkit_1.getProjects)(host).get(options.project);
+    if (!project) {
+        throw new Error(`Cannot find the ${options.project} project. Please double check the project name.`);
+    }
+    const { sourceRoot: projectSourceRoot, projectType } = project;
+    className = getComponentClassName(className, isApp, options.project, options.directory);
+    const directory = await getDirectory(options);
+    if (options.export && projectType === 'application') {
+        devkit_1.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,
+    };
+}
+exports.normalizeOptions = normalizeOptions;
+function getComponentClassName(componentName, isApp, projectName, directory) {
+    const { className } = (0, devkit_1.names)(projectName);
+    let prefix = isApp ? 'App' : className;
+    if (directory?.length > 0) {
+        prefix = directory
+            .split('/')
+            .map((segment) => segment
+            .split('-')
+            .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+            .join(''))
+            .join('');
+    }
+    return `${prefix}${componentName}`;
+}
+exports.getComponentClassName = getComponentClassName;
+function addExportsToBarrel(host, options, isApp) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    if (options.export && !isApp) {
+        const indexFilePath = (0, devkit_1.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 = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export { default as ${options.className} } from './${options.directory}/${options.fileName}.vue';`));
+            host.write(indexFilePath, changes);
+        }
+    }
+}
+exports.addExportsToBarrel = addExportsToBarrel;
+async function getDirectory(options) {
+    if (options.directory)
+        return options.directory;
+    if (options.flat)
+        return 'components';
+    const { className, fileName } = (0, devkit_1.names)(options.name);
+    const nestedDir = options.pascalCaseDirectory === true ? className : fileName;
+    return (0, devkit_1.joinPathFragments)('components', nestedDir);
+}
+exports.getDirectory = getDirectory;
+function assertValidOptions(options) {
+    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}\`)?`);
+        }
+    });
+}
+exports.assertValidOptions = assertValidOptions;

package/src/generators/component/schema.d.ts

@@ -0,0 +1,22 @@
+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;
+  unitTestRunner?: 'jest' | 'vitest' | 'none';
+}
+
+export interface NormalizedSchema extends Schema {
+  projectSourceRoot: string;
+  fileName: string;
+  className: string;
+}

package/src/generators/component/schema.json

@@ -0,0 +1,107 @@
+{
+  "$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"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["vitest", "jest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "x-prompt": "What unit test runner should be used?"
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/generators/init/init.d.ts

@@ -0,0 +1,4 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { InitSchema } from './schema';
+export declare function vueInitGenerator(host: Tree, schema: InitSchema): Promise<GeneratorCallback>;
+export default vueInitGenerator;

package/src/generators/init/init.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.vueInitGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const versions_1 = require("../../utils/versions");
+function updateDependencies(host, schema) {
+    (0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/vue'], []);
+    let dependencies = {
+        vue: versions_1.vueVersion,
+        'vue-tsc': versions_1.vueTscVersion,
+    };
+    let devDependencies = {
+        '@nx/vue': versions_1.nxVersion,
+        '@vue/tsconfig': versions_1.vueTsconfigVersion,
+        '@vue/test-utils': versions_1.vueTestUtilsVersion,
+        '@vitejs/plugin-vue': versions_1.vitePluginVueVersion,
+    };
+    if (schema.routing) {
+        dependencies['vue-router'] = versions_1.vueRouterVersion;
+    }
+    if (schema.style === 'scss') {
+        devDependencies['sass'] = versions_1.sassVersion;
+    }
+    else if (schema.style === 'less') {
+        devDependencies['less'] = versions_1.lessVersion;
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(host, dependencies, devDependencies);
+}
+async function vueInitGenerator(host, schema) {
+    const tasks = [];
+    tasks.push(await (0, js_1.initGenerator)(host, {
+        ...schema,
+        tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
+        skipFormat: true,
+    }));
+    tasks.push(updateDependencies(host, schema));
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.vueInitGenerator = vueInitGenerator;
+exports.default = vueInitGenerator;

package/src/generators/init/schema.d.ts

@@ -0,0 +1,7 @@
+export interface InitSchema {
+  skipFormat?: boolean;
+  js?: boolean;
+  rootProject?: boolean;
+  routing?: boolean;
+  style?: 'css' | 'scss' | 'less' | 'none';
+}

package/src/generators/init/schema.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "NxVueInit",
+  "title": "Init Vue Plugin",
+  "description": "Initialize a Vue Plugin.",
+  "cli": "nx",
+  "type": "object",
+  "properties": {
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "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
+    },
+    "routing": {
+      "type": "boolean",
+      "description": "Generate application with routes.",
+      "x-prompt": "Would you like to add React Router to this application?",
+      "default": false
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css"
+    }
+  },
+  "required": []
+}

package/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/).

package/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"
+    }
+  }
+}

package/src/generators/library/files/src/vue-shims.d.ts__tmpl__

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}

package/src/generators/library/files/tsconfig.lib.json__tmpl__

@@ -0,0 +1,34 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": [],
+    "lib": [
+      "ES2016",
+      "DOM",
+      "DOM.Iterable"
+      ],
+  },
+  "exclude": [
+    "src/**/__tests__/*", 
+    "src/**/*.spec.ts", 
+    "src/**/*.test.ts", 
+    "src/**/*.spec.tsx", 
+    "src/**/*.test.tsx", 
+    "src/**/*.spec.js", 
+    "src/**/*.test.js", 
+    "src/**/*.spec.jsx", 
+    "src/**/*.test.jsx"
+    ],
+  "include": [
+    "src/**/*.js", 
+    "src/**/*.jsx", 
+    "src/**/*.ts", 
+    "src/**/*.tsx", 
+    "src/**/*.vue"
+    ]
+}

package/src/generators/library/files/tsconfig.spec.json__tmpl__

@@ -0,0 +1,27 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [],
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "lib": [],
+    "types": [  
+      "vitest",
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/__tests__/*",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+    ]
+}

package/src/generators/library/lib/add-jest.d.ts

@@ -0,0 +1,3 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function addJest(tree: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

package/src/generators/library/lib/add-jest.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addJest = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+const setup_jest_1 = require("../../../utils/setup-jest");
+async function addJest(tree, options) {
+    const tasks = [];
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
+    const jestTask = await configurationGenerator(tree, {
+        project: options.name,
+        skipFormat: true,
+        testEnvironment: 'jsdom',
+        compiler: 'babel',
+    });
+    tasks.push(jestTask);
+    (0, setup_jest_1.setupJestProject)(tree, options.projectRoot);
+    tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+        '@vue/vue3-jest': versions_1.vueJest3Version,
+    }));
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.addJest = addJest;

package/src/generators/library/lib/add-vite.d.ts

@@ -0,0 +1,3 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function addVite(tree: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

package/src/generators/library/lib/add-vite.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addVite = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+async function addVite(tree, options) {
+    const tasks = [];
+    // Set up build target
+    if (options.bundler === 'vite') {
+        const { viteConfigurationGenerator, createOrEditViteConfig } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
+        const viteTask = await viteConfigurationGenerator(tree, {
+            uiFramework: 'none',
+            project: options.name,
+            newProject: true,
+            includeLib: true,
+            inSourceTests: options.inSourceTests,
+            includeVitest: options.unitTestRunner === 'vitest',
+            skipFormat: true,
+            testEnvironment: 'jsdom',
+        });
+        tasks.push(viteTask);
+        createOrEditViteConfig(tree, {
+            project: options.name,
+            includeLib: true,
+            includeVitest: options.unitTestRunner === 'vitest',
+            inSourceTests: options.inSourceTests,
+            imports: [`import vue from '@vitejs/plugin-vue'`],
+            plugins: ['vue()'],
+        }, false);
+    }
+    // Set up test target
+    if (options.unitTestRunner === 'vitest' &&
+        options.bundler !== 'vite' // tests are already configured if bundler is vite
+    ) {
+        const { vitestGenerator, createOrEditViteConfig } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
+        const vitestTask = await vitestGenerator(tree, {
+            uiFramework: 'none',
+            project: options.name,
+            coverageProvider: 'c8',
+            inSourceTests: options.inSourceTests,
+            skipFormat: true,
+            testEnvironment: 'jsdom',
+        });
+        tasks.push(vitestTask);
+        createOrEditViteConfig(tree, {
+            project: options.name,
+            includeLib: true,
+            includeVitest: true,
+            inSourceTests: options.inSourceTests,
+            imports: [`import vue from '@vitejs/plugin-vue'`],
+            plugins: ['vue()'],
+        }, true);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.addVite = addVite;

package/src/generators/library/lib/create-library-files.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function createLibraryFiles(host: Tree, options: NormalizedSchema): void;

package/src/generators/library/lib/create-library-files.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLibraryFiles = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const create_ts_config_1 = require("../../../utils/create-ts-config");
+function createLibraryFiles(host, options) {
+    const relativePathToRootTsConfig = (0, js_1.getRelativePathToRootTsConfig)(host, options.projectRoot);
+    const substitutions = {
+        ...options,
+        ...(0, devkit_1.names)(options.name),
+        tmpl: '',
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.projectRoot),
+        fileName: options.fileName,
+    };
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, '../files'), options.projectRoot, substitutions);
+    if (!options.publishable && options.bundler === 'none') {
+        host.delete(`${options.projectRoot}/package.json`);
+    }
+    if (options.unitTestRunner !== 'vitest') {
+        host.delete(`${options.projectRoot}/tsconfig.spec.json`);
+    }
+    if (options.js) {
+        (0, devkit_1.toJS)(host);
+    }
+    (0, create_ts_config_1.createTsConfig)(host, options.projectRoot, 'lib', options, relativePathToRootTsConfig);
+}
+exports.createLibraryFiles = createLibraryFiles;

package/src/generators/library/lib/normalize-options.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeOptions(host: Tree, options: Schema): Promise<NormalizedSchema>;

package/src/generators/library/lib/normalize-options.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+async function normalizeOptions(host, options) {
+    const { projectName, names: projectNames, projectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+        name: options.name,
+        projectType: 'library',
+        directory: options.directory,
+        importPath: options.importPath,
+        projectNameAndRootFormat: options.projectNameAndRootFormat,
+        callingGenerator: '@nx/vue:library',
+    });
+    const fileName = projectNames.projectFileName;
+    const parsedTags = options.tags
+        ? options.tags.split(',').map((s) => s.trim())
+        : [];
+    let bundler = options.bundler ?? 'none';
+    if (bundler === 'none') {
+        if (options.publishable) {
+            devkit_1.logger.warn(`Publishable libraries cannot be used with bundler: 'none'. Defaulting to 'vite'.`);
+            bundler = 'vite';
+        }
+    }
+    const normalized = {
+        ...options,
+        bundler,
+        fileName,
+        routePath: `/${projectNames.projectFileName}`,
+        name: projectName,
+        projectRoot,
+        parsedTags,
+        importPath,
+    };
+    // Libraries with a bundler or is publishable must also be buildable.
+    normalized.bundler =
+        normalized.bundler !== 'none' || options.publishable ? 'vite' : 'none';
+    normalized.inSourceTests === normalized.minimal || normalized.inSourceTests;
+    if (options.appProject) {
+        const appProjectConfig = (0, devkit_1.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 = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
+        }
+        catch (e) {
+            throw new Error(`Could not locate project main for ${options.appProject}`);
+        }
+    }
+    return normalized;
+}
+exports.normalizeOptions = normalizeOptions;

package/src/generators/library/library.d.ts

@@ -0,0 +1,4 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Schema } from './schema';
+export declare function libraryGenerator(tree: Tree, schema: Schema): Promise<GeneratorCallback>;
+export default libraryGenerator;