Feature/ticket 1159 nxext stencil vue integration

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,7 @@
 ---
 name: '🐞 Bug Report'
 about: Create a report to help us improve
-title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | React | Angular: <your title>'
+title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | Vue | React  | Angular: <your title>'
 labels: bug
 assignees: ''
 ---

.github/ISSUE_TEMPLATE/documentation.md

@@ -1,7 +1,7 @@
 ---
 name: '📄 Documentation'
 about: Suggest an idea for the docs
-title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | React | Angular: <your title>'
+title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | Vue | React | Angular: <your title>'
 labels: documentation
 assignees: ''
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,7 +1,7 @@
 ---
 name: "\U0001F680 Feature Request"
 about: Suggest an idea for this project
-title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | React | Angular: <your title>'
+title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | Vue | React | Angular: <your title>'
 labels: feature request
 assignees: ''
 ---

.github/ISSUE_TEMPLATE/guides.md

@@ -1,7 +1,7 @@
 ---
 name: '⚙️ Guides'
 about: Suggest an idea for the guides
-title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | React | Angular: <your title>'
+title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | Vue | React | Angular: <your title>'
 labels: guides
 assignees: ''
 ---

docs/docs/stencil/generators.md

@@ -286,7 +286,7 @@ Type: `boolean`
 
 ## @nxext/stencil:add-outputtarget
 
-Add react/angular libraries for the component library
+Add react/angular/vue libraries for the component library
 
 ### Usage
 
@@ -314,7 +314,7 @@ nx g add-outputtarget ... --dry-run
 
 Type: `string`
 
-Possible values: `angular`, `react`, `svelte`
+Possible values: `angular`, `react`, `svelte`, `vue`
 
 Select what kind of library you want to generate.
 

e2e/stencil-e2e/tests/library.test.ts

@@ -120,6 +120,21 @@ describe('library e2e', () => {
       ).not.toThrow();
     });
 
+    it(`should generate vue lib`, async () => {
+      const plugin = uniq('lib');
+      await runNxCommandAsync(
+        `generate @nxext/stencil:lib ${plugin} --style='css' --buildable --e2eTestRunner='none' --junitTestRunner='none'`
+      );
+      await runNxCommandAsync(
+        `generate @nxext/stencil:add-outputtarget ${plugin} --outputType=vue`
+      );
+      await runNxCommandAsync(`build ${plugin}`);
+
+      expect(() =>
+        checkFilesExist(`libs/${plugin}-vue/src/index.ts`)
+      ).not.toThrow();
+    });
+
     it(`should generate angular lib`, async () => {
       const plugin = uniq('lib');
       await runNxCommandAsync(

package.json

@@ -62,6 +62,7 @@
     "@nx/playwright": "20.0.0",
     "@nx/plugin": "20.0.0",
     "@nx/react": "20.0.0",
+    "@nx/vue": "20.0.0",
     "@nx/storybook": "20.0.0",
     "@nx/vite": "20.0.0",
     "@nx/web": "20.0.0",

packages/stencil/README.md

@@ -148,12 +148,12 @@ nx storybook my-lib
 
 _The Storybook startup needs an successful `nx build` cause of the generated loaders to work_
 
-## React and Angular
+## React, Angular and Vue
 
-You're able to generate angular/react libraries for yout stencil libraries using stencils outputtargets:
+You're able to generate angular/react/vue libraries for yout stencil libraries using stencils outputtargets:
 
 ```
 nx g @nxext/stencil:add-outputtarget my-lib
 ```
 
-With the `--outputType='react'` or `--outputType='angular'` you can define the kind of library.
+With the `--outputType='react'` or `--outputType='angular'` or `--outputType='vue'` you can define the kind of library.

packages/stencil/generators.json

@@ -30,7 +30,7 @@
     "add-outputtarget": {
       "factory": "./src/generators/add-outputtarget/add-outputtarget",
       "schema": "./src/generators/add-outputtarget/schema.json",
-      "description": "Add react/angular libraries for the component library"
+      "description": "Add react/angular/vue libraries for the component library"
     },
     "add-outputtarget/add-angular": {
       "factory": "./src/generators/add-outputtarget/add-angular/generator",

packages/stencil/package.json

@@ -42,7 +42,8 @@
     "nx": "^20.0.0",
     "fs-extra": "^10.1.0",
     "@nx/angular": "^20.0.0",
-    "@nx/react": "^20.0.0"
+    "@nx/react": "^20.0.0",
+    "@nx/vue": "^20.0.0"
   },
   "peerDependencies": {},
   "peerDependenciesMeta": {
@@ -55,6 +56,9 @@
     "@nx/react": {
       "optional": true
     },
+    "@nx/vue": {
+      "optional": true
+    },
     "@nx/angular": {
       "optional": true
     },

packages/stencil/src/generators/add-outputtarget/add-outputtarget-vue.spec.ts

@@ -0,0 +1,80 @@
+import { createTestUILib } from '../../utils/testing';
+import { uniq } from '@nx/plugin/testing';
+import { Tree } from '@nx/devkit';
+import { outputtargetGenerator } from './add-outputtarget';
+import { AddOutputtargetSchematicSchema } from './schema';
+
+xdescribe('add-outputtarget vue', () => {
+  let tree: Tree;
+  const projectName = uniq('testprojekt');
+  const projectAppDirectory = `apps/${projectName}`;
+  const projectLibDirectory = `libs/${projectName}`;
+  const options = {
+    projectName: projectName,
+    publishable: false,
+    skipFormat: false,
+  };
+
+  beforeEach(async () => {
+    tree = await createTestUILib(projectLibDirectory);
+  });
+
+  describe('using vue', () => {
+    const vueOptions: AddOutputtargetSchematicSchema = {
+      ...options,
+      unitTestRunner: 'none',
+      outputType: 'vue',
+    };
+
+    it('should not generate default vue library', async () => {
+      await outputtargetGenerator(tree, vueOptions);
+
+      expect(
+        tree.exists(`libs/${projectName}-vue/src/lib/${projectName}-vue.tsx`)
+      ).toBeFalsy();
+      expect(
+        tree.exists(
+          `libs/${projectName}-vue/src/lib/${projectName}-vue.spec.tsx`
+        )
+      ).toBeFalsy();
+      expect(
+        tree.exists(`libs/${projectName}-vue/src/lib/${projectName}-vue.css`)
+      ).toBeFalsy();
+
+      const indexFile: Buffer = tree.read(
+        `libs/${projectName}-vue/src/index.ts`
+      );
+      expect(indexFile.toString()).toMatch(
+        `export * from './generated/components';`
+      );
+    });
+
+    it('should add vueOutputTarget', async () => {
+      await outputtargetGenerator(tree, vueOptions);
+
+      expect(
+        tree
+          .read(`libs/${projectName}/stencil.config.ts`)
+          .includes(
+            `import { vueOutputTarget } from '@stencil/vue-output-target';`
+          )
+      ).toBeTruthy();
+
+      expect(
+        tree
+          .read(`libs/${projectName}/stencil.config.ts`)
+          .includes(`vueOutputTarget({`)
+      ).toBeTruthy();
+    });
+
+    it('should be able to generate a publishable lib', async () => {
+      await outputtargetGenerator(tree, {
+        ...vueOptions,
+        publishable: true,
+        importPath: '@proj/mylib',
+      });
+
+      expect(tree.exists(`libs/${projectName}/package.json`)).toBeTruthy();
+    });
+  });
+});

packages/stencil/src/generators/add-outputtarget/add-outputtarget.ts

@@ -10,6 +10,7 @@ import { isBuildableStencilProject } from '../../utils/utillities';
 import { AddOutputtargetSchematicSchema } from './schema';
 import { addAngularGenerator } from './add-angular/generator';
 import { addReactGenerator } from './add-react/generator';
+import addVueGenerator from './add-vue/generator';
 import { assertNotUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
 
 export async function outputtargetGenerator(
@@ -30,6 +31,10 @@ export async function outputtargetGenerator(
       tasks.push(await addReactGenerator(host, options));
     }
 
+    if (options.outputType === 'vue') {
+      tasks.push(await addVueGenerator(host, options));
+    }
+
     if (!options.skipFormat) {
       await formatFiles(host);
     }

packages/stencil/src/generators/add-outputtarget/add-vue/generator.ts

@@ -0,0 +1,123 @@
+import {
+  addDependenciesToPackageJson,
+  applyChangesToString,
+  ensurePackage,
+  getWorkspaceLayout,
+  NX_VERSION,
+  readProjectConfiguration,
+  runTasksInSerial,
+  Tree,
+} from '@nx/devkit';
+import { initGenerator as jsInitGenerator } from '@nx/js';
+import { AddOutputtargetSchematicSchema } from '../schema';
+import { Linter } from '@nx/eslint';
+import { STENCIL_OUTPUTTARGET_VERSION } from '../../../utils/versions';
+import * as ts from 'typescript';
+import { getDistDir, getRelativePath } from '../../../utils/fileutils';
+import { addImport } from '@nxext/common';
+import { addOutputTarget } from '../../../stencil-core-utils';
+import { calculateStencilSourceOptions } from '../lib/calculate-stencil-source-options';
+
+async function prepareVueLibrary(
+  host: Tree,
+  options: AddOutputtargetSchematicSchema
+) {
+  const { libsDir } = getWorkspaceLayout(host);
+  const vueProjectName = `${options.projectName}-vue`;
+  const vueProjectDir = `libs/${vueProjectName}`;
+
+  const jsInitTask = await jsInitGenerator(host, {
+    ...options,
+    tsConfigName: 'tsconfig.base.json',
+    skipFormat: true,
+  });
+
+  ensurePackage('@nx/vue', NX_VERSION);
+  const { libraryGenerator } = await import('@nx/vue');
+  const libraryTarget = await libraryGenerator(host, {
+    directory: vueProjectDir,
+    publishable: options.publishable,
+    bundler: options.publishable ? 'vite' : 'none',
+    importPath: options.importPath,
+    component: false,
+    skipTsConfig: false,
+    skipFormat: true,
+    unitTestRunner: 'vitest',
+    linter: Linter.EsLint,
+  });
+
+  await addDependenciesToPackageJson(
+    host,
+    {},
+    {
+      '@stencil/vue-output-target': STENCIL_OUTPUTTARGET_VERSION['vue'],
+    }
+  );
+
+  host.write(
+    `${libsDir}/${vueProjectName}/src/index.ts`,
+    `export * from './generated/components';`
+  );
+
+  return runTasksInSerial(jsInitTask, libraryTarget);
+}
+
+function addVueOutputtarget(
+  tree: Tree,
+  projectName: string,
+  stencilProjectConfig,
+  stencilConfigPath: string,
+  stencilConfigSource: ts.SourceFile,
+  packageName: string
+) {
+  const vueProjectConfig = readProjectConfiguration(tree, `${projectName}-vue`);
+  const realtivePath = getRelativePath(
+    getDistDir(stencilProjectConfig.root),
+    vueProjectConfig.root
+  );
+
+  const changes = applyChangesToString(stencilConfigSource.text, [
+    ...addImport(
+      stencilConfigSource,
+      `import { vueOutputTarget } from '@stencil/vue-output-target';`
+    ),
+    ...addOutputTarget(
+      stencilConfigSource,
+      `
+      vueOutputTarget({
+        componentCorePackage: '${packageName}',
+        proxiesFile: '${realtivePath}/src/generated/components.ts',
+        includeDefineCustomElements: true,
+      })
+      `
+    ),
+  ]);
+  tree.write(stencilConfigPath, changes);
+}
+
+export async function addVueGenerator(
+  host: Tree,
+  options: AddOutputtargetSchematicSchema
+) {
+  const libraryTarget = await prepareVueLibrary(host, options);
+
+  const {
+    stencilProjectConfig,
+    stencilConfigPath,
+    stencilConfigSource,
+    packageName,
+  } = calculateStencilSourceOptions(host, options.projectName);
+
+  addVueOutputtarget(
+    host,
+    options.projectName,
+    stencilProjectConfig,
+    stencilConfigPath,
+    stencilConfigSource,
+    packageName
+  );
+
+  return libraryTarget;
+}
+
+export default addVueGenerator;

packages/stencil/src/generators/add-outputtarget/schema.d.ts

@@ -1,6 +1,6 @@
 import { OutputTargetType } from './lib/add-outputtarget-to-config';
 
-export type OutputTargetType = 'angular' | 'react' | 'vue' | 'svelte';
+export type OutputTargetType = 'angular' | 'react' | 'svelte' | 'vue';
 
 export interface AddOutputtargetSchematicSchema {
   projectName: string;

packages/stencil/src/generators/add-outputtarget/schema.json

@@ -15,7 +15,7 @@
     },
     "outputType": {
       "type": "string",
-      "enum": ["angular", "react", "svelte"],
+      "enum": ["angular", "react", "svelte", "vue"],
       "description": "Select what kind of library you want to generate.",
       "x-prompt": "Which framework do you use?"
     },

packages/stencil/src/utils/versions.ts

@@ -15,6 +15,7 @@ export const ESLINT_PLUGIN_VERSIONS = {
 export const STENCIL_OUTPUTTARGET_VERSION = {
   react: '^0.5.3',
   angular: '^0.8.3',
+  vue: '^0.9.0',
 };
 
 export const STENCIL_STYLE_PLUGIN_VERSION = {