From 178f0903954989450f3520960301d14a193eda23 Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:23:08 +0000 Subject: [PATCH 01/14] #1159 package.json including @nx/vue for stencil vue integration --- package.json | 1 + packages/stencil/package.json | 6 +++++- pnpm-lock.yaml | 40 +++++++++++++++++++++++++++++++---- 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index fe99cb91..a2f020ce 100644 --- a/package.json +++ b/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", diff --git a/packages/stencil/package.json b/packages/stencil/package.json index 75c7035e..71aba862 100644 --- a/packages/stencil/package.json +++ b/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 }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4dd3a000..717b7c9c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,7 +38,7 @@ importers: version: 8.49.0 '@nx/angular': specifier: 20.0.0 - version: 20.0.0(zsgtivp7lq6p5dd2iitr7624my) + version: 20.0.0(@angular-devkit/build-angular@18.2.8(@angular/compiler-cli@18.2.8(@angular/compiler@18.2.8)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@18.19.55)(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(typescript@5.5.4)))(stylus@0.59.0)(typescript@5.5.4))(@angular-devkit/core@16.0.0(chokidar@3.6.0))(@angular-devkit/schematics@16.0.0(chokidar@3.6.0))(@babel/traverse@7.25.7)(@schematics/angular@16.0.0(chokidar@3.6.0))(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(@zkochan/js-yaml@0.0.7)(esbuild@0.23.1)(eslint@8.57.0)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rxjs@7.8.1)(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0)) '@nx/cypress': specifier: 20.0.0 version: 20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(@zkochan/js-yaml@0.0.7)(eslint@8.57.0)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0)) @@ -75,6 +75,9 @@ importers: '@nx/vite': specifier: 20.0.0 version: 20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0))(vite@5.4.8(@types/node@18.19.55)(less@4.1.3)(sass@1.79.5)(stylus@0.59.0)(terser@5.31.6))(vitest@2.1.2(@types/node@18.19.55)(jsdom@20.0.3)(less@4.1.3)(sass@1.79.5)(stylus@0.59.0)(terser@5.31.6)) + '@nx/vue': + specifier: 20.0.0 + version: 20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(@zkochan/js-yaml@0.0.7)(eslint@8.57.0)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0))(vite@5.4.8(@types/node@18.19.55)(less@4.1.3)(sass@1.79.5)(stylus@0.59.0)(terser@5.31.6))(vitest@2.1.2(@types/node@18.19.55)(jsdom@20.0.3)(less@4.1.3)(sass@1.79.5)(stylus@0.59.0)(terser@5.31.6)) '@nx/web': specifier: 20.0.0 version: 20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0)) @@ -2290,6 +2293,9 @@ packages: vite: ^5.0.0 vitest: ^1.3.1 || ^2.0.0 + '@nx/vue@20.0.0': + resolution: {integrity: sha512-c9d0KXe/gD6yTg7rG6NaCcSBsdnD1Cei9HRoddoB6ONh4qqfvzhV/RM48bqrQlT5p1sr64GE9l8JI9IU8/Nr/Q==} + '@nx/web@20.0.0': resolution: {integrity: sha512-LrALXwu2lRK18uJrZygTp8E5YznaodYkM2q6VWzz8NP3bujqer5hhzNcH1JilWR5qPqGHfUNxUKibiy2Q16wrg==} @@ -4264,6 +4270,7 @@ packages: critters@0.0.24: resolution: {integrity: sha512-Oyqew0FGM0wYUSNqR0L6AteO5MpMoUU0rhKRieXeiKs+PmRTxiJMyaunYB2KF6fQ3dzChXKCpbFOEJx3OQ1v/Q==} + deprecated: Ownership of Critters has moved to the Nuxt team, who will be maintaining the project going forward. If you'd like to keep using Critters, please switch to the actively-maintained fork at https://github.com/danielroe/beasties cron-parser@4.9.0: resolution: {integrity: sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==} @@ -11963,8 +11970,8 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.17.1 - '@nx/angular@20.0.0(zsgtivp7lq6p5dd2iitr7624my)': - dependencies: + ? '@nx/angular@20.0.0(@angular-devkit/build-angular@18.2.8(@angular/compiler-cli@18.2.8(@angular/compiler@18.2.8)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@18.19.55)(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(typescript@5.5.4)))(stylus@0.59.0)(typescript@5.5.4))(@angular-devkit/core@16.0.0(chokidar@3.6.0))(@angular-devkit/schematics@16.0.0(chokidar@3.6.0))(@babel/traverse@7.25.7)(@schematics/angular@16.0.0(chokidar@3.6.0))(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(@zkochan/js-yaml@0.0.7)(esbuild@0.23.1)(eslint@8.57.0)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rxjs@7.8.1)(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0))' + : dependencies: '@angular-devkit/build-angular': 18.2.8(@angular/compiler-cli@18.2.8(@angular/compiler@18.2.8)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(chokidar@3.6.0)(jest-environment-jsdom@29.7.0)(jest@29.7.0(@types/node@18.19.55)(ts-node@10.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(typescript@5.5.4)))(stylus@0.59.0)(typescript@5.5.4) '@angular-devkit/core': 16.0.0(chokidar@3.6.0) '@angular-devkit/schematics': 16.0.0(chokidar@3.6.0) @@ -12432,6 +12439,31 @@ snapshots: - typescript - verdaccio + '@nx/vue@20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(@zkochan/js-yaml@0.0.7)(eslint@8.57.0)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0))(vite@5.4.8(@types/node@18.19.55)(less@4.1.3)(sass@1.79.5)(stylus@0.59.0)(terser@5.31.6))(vitest@2.1.2(@types/node@18.19.55)(jsdom@20.0.3)(less@4.1.3)(sass@1.79.5)(stylus@0.59.0)(terser@5.31.6))': + dependencies: + '@nx/devkit': 20.0.0(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))) + '@nx/eslint': 20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(@zkochan/js-yaml@0.0.7)(eslint@8.57.0)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(verdaccio@5.18.0(typanion@3.14.0)) + '@nx/js': 20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0)) + '@nx/vite': 20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0))(vite@5.4.8(@types/node@18.19.55)(less@4.1.3)(sass@1.79.5)(stylus@0.59.0)(terser@5.31.6))(vitest@2.1.2(@types/node@18.19.55)(jsdom@20.0.3)(less@4.1.3)(sass@1.79.5)(stylus@0.59.0)(terser@5.31.6)) + '@nx/web': 20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0)) + minimatch: 9.0.3 + tslib: 2.7.0 + transitivePeerDependencies: + - '@babel/traverse' + - '@swc-node/register' + - '@swc/core' + - '@swc/wasm' + - '@types/node' + - '@zkochan/js-yaml' + - debug + - eslint + - nx + - supports-color + - typescript + - verdaccio + - vite + - vitest + '@nx/web@20.0.0(@babel/traverse@7.25.7)(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))(@types/node@18.19.55)(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(typescript@5.5.4)(verdaccio@5.18.0(typanion@3.14.0))': dependencies: '@nx/devkit': 20.0.0(nx@20.0.0(@swc-node/register@1.9.2(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.4))(@swc/core@1.5.7(@swc/helpers@0.5.11))) @@ -20091,7 +20123,7 @@ snapshots: serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack-dev-middleware: 7.4.2(webpack@5.95.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.1)) + webpack-dev-middleware: 7.4.2(webpack@5.94.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.0)) ws: 8.18.0 optionalDependencies: webpack: 5.95.0(@swc/core@1.5.7(@swc/helpers@0.5.11))(esbuild@0.23.1) From 327e3e1808d79310036bda6a5c3faca78c84ef0e Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:23:50 +0000 Subject: [PATCH 02/14] #1159 versions.ts STENCIL_OUTPUTTARGET_VERSION including vue --- packages/stencil/src/utils/versions.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/stencil/src/utils/versions.ts b/packages/stencil/src/utils/versions.ts index c1d5df23..cb1905d0 100644 --- a/packages/stencil/src/utils/versions.ts +++ b/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 = { From 5e2ce0f30c87b90f3f2b2705f0f1d48479857c22 Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:27:32 +0000 Subject: [PATCH 03/14] #1159 fetch-latest-versions.ts including @stencil/vue-output-target --- tools/scripts/fetch-latest-versions.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tools/scripts/fetch-latest-versions.ts b/tools/scripts/fetch-latest-versions.ts index f360647f..fc03688e 100644 --- a/tools/scripts/fetch-latest-versions.ts +++ b/tools/scripts/fetch-latest-versions.ts @@ -60,10 +60,10 @@ const stencilpkgs = [ pkg: '@stencil/react-output-target', version: STENCIL_OUTPUTTARGET_VERSION['react'], }, - // { - // pkg: '@stencil/vue-output-target', - // version: STENCIL_OUTPUTTARGET_VERSION['vue'], - // }, + { + pkg: '@stencil/vue-output-target', + version: STENCIL_OUTPUTTARGET_VERSION['vue'], + }, { pkg: '@stencil/angular-output-target', version: STENCIL_OUTPUTTARGET_VERSION['angular'], From e261df02c0904a95cfae63debc15044322578760 Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:28:51 +0000 Subject: [PATCH 04/14] #1159 add-outputtarget/add-vue generator.ts for vue --- .../add-outputtarget/add-vue/generator.ts | 123 ++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 packages/stencil/src/generators/add-outputtarget/add-vue/generator.ts diff --git a/packages/stencil/src/generators/add-outputtarget/add-vue/generator.ts b/packages/stencil/src/generators/add-outputtarget/add-vue/generator.ts new file mode 100644 index 00000000..aba9a5be --- /dev/null +++ b/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; From d8ebde8ceb5990827dbc5c28869bcd4219fcde82 Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:39:49 +0000 Subject: [PATCH 05/14] #1159 schema.d.ts and schema.json OutputTargetType including vue --- packages/stencil/src/generators/add-outputtarget/schema.d.ts | 2 +- packages/stencil/src/generators/add-outputtarget/schema.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/stencil/src/generators/add-outputtarget/schema.d.ts b/packages/stencil/src/generators/add-outputtarget/schema.d.ts index 03b3cdae..10facda7 100644 --- a/packages/stencil/src/generators/add-outputtarget/schema.d.ts +++ b/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; diff --git a/packages/stencil/src/generators/add-outputtarget/schema.json b/packages/stencil/src/generators/add-outputtarget/schema.json index d72fc725..373d489f 100644 --- a/packages/stencil/src/generators/add-outputtarget/schema.json +++ b/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?" }, From b261e414e85a978a789f6ec4c0cfccdfd421387c Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:40:21 +0000 Subject: [PATCH 06/14] #1159 .github ISSUE_TEMPLATE - including Vue --- .github/ISSUE_TEMPLATE/bug_report.md | 2 +- .github/ISSUE_TEMPLATE/documentation.md | 2 +- .github/ISSUE_TEMPLATE/feature_request.md | 2 +- .github/ISSUE_TEMPLATE/guides.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index f59bc662..9b88e984 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.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: ' +title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | Vue | React | Angular: ' labels: bug assignees: '' --- diff --git a/.github/ISSUE_TEMPLATE/documentation.md b/.github/ISSUE_TEMPLATE/documentation.md index 449f2757..68ae9b2d 100644 --- a/.github/ISSUE_TEMPLATE/documentation.md +++ b/.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: ' +title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | Vue | React | Angular: ' labels: documentation assignees: '' --- diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index f05920c0..7548309b 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.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: ' +title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | Vue | React | Angular: ' labels: feature request assignees: '' --- diff --git a/.github/ISSUE_TEMPLATE/guides.md b/.github/ISSUE_TEMPLATE/guides.md index e3554566..25493fe3 100644 --- a/.github/ISSUE_TEMPLATE/guides.md +++ b/.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: ' +title: 'Stencil | Svelte | Sveltekit | Solid | Vite | Vitest | Vue | React | Angular: ' labels: guides assignees: '' --- From 7370578614c9876e3c8e6631d262d56f574b06f5 Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:42:57 +0000 Subject: [PATCH 07/14] #1159 add-outputtarget.ts outputtargetGenerator extend with addVueGenerator, including related tests --- .../add-outputtarget-vue.spec.ts | 80 +++++++++++++++++++ .../add-outputtarget/add-outputtarget.ts | 7 +- 2 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 packages/stencil/src/generators/add-outputtarget/add-outputtarget-vue.spec.ts diff --git a/packages/stencil/src/generators/add-outputtarget/add-outputtarget-vue.spec.ts b/packages/stencil/src/generators/add-outputtarget/add-outputtarget-vue.spec.ts new file mode 100644 index 00000000..4f45005a --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/packages/stencil/src/generators/add-outputtarget/add-outputtarget.ts b/packages/stencil/src/generators/add-outputtarget/add-outputtarget.ts index af328144..cf53d854 100644 --- a/packages/stencil/src/generators/add-outputtarget/add-outputtarget.ts +++ b/packages/stencil/src/generators/add-outputtarget/add-outputtarget.ts @@ -10,11 +10,12 @@ 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( host: Tree, - options: AddOutputtargetSchematicSchema + options: AddOutputtargetSchematicSchema, ) { assertNotUsingTsSolutionSetup(host, '@nxext/stencil', 'add-outputtarget'); @@ -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); } From b286f77c30fea6e65f3dc4c260cf5afd537eeedc Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:43:49 +0000 Subject: [PATCH 08/14] #1159 generators.md mention vue in @nxext/stencil:add-outputtarget section, likewise for outputType --- docs/docs/stencil/generators.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/stencil/generators.md b/docs/docs/stencil/generators.md index 4c841326..bc636454 100644 --- a/docs/docs/stencil/generators.md +++ b/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`, `vue`, `svelte` Select what kind of library you want to generate. From 4d2a0c38900ae90c9d8b9d1c631ca1273e896824 Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:45:03 +0000 Subject: [PATCH 09/14] #1159 e2e stencil e2e library.test.ts - include test 'should generate vue lib' --- e2e/stencil-e2e/tests/library.test.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/e2e/stencil-e2e/tests/library.test.ts b/e2e/stencil-e2e/tests/library.test.ts index 6ffeab37..504d1ccf 100644 --- a/e2e/stencil-e2e/tests/library.test.ts +++ b/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( From dfdba422893d17e574d5b427f32ca8c74c011b4c Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:45:36 +0000 Subject: [PATCH 10/14] #1159 README.md mention vue as part of stencil integration --- packages/stencil/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/stencil/README.md b/packages/stencil/README.md index e5c8afe7..620e1223 100644 --- a/packages/stencil/README.md +++ b/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. From b2360418c4e2f61fe9ffb63664e3b2ece72929f0 Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:48:37 +0000 Subject: [PATCH 11/14] #1159 pnpm format code --- .../add-outputtarget-vue.spec.ts | 18 +++++++++--------- .../add-outputtarget/add-outputtarget.ts | 2 +- .../add-outputtarget/add-vue/generator.ts | 18 +++++++++--------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/stencil/src/generators/add-outputtarget/add-outputtarget-vue.spec.ts b/packages/stencil/src/generators/add-outputtarget/add-outputtarget-vue.spec.ts index 4f45005a..332fa5b6 100644 --- a/packages/stencil/src/generators/add-outputtarget/add-outputtarget-vue.spec.ts +++ b/packages/stencil/src/generators/add-outputtarget/add-outputtarget-vue.spec.ts @@ -30,22 +30,22 @@ xdescribe('add-outputtarget vue', () => { await outputtargetGenerator(tree, vueOptions); expect( - tree.exists(`libs/${projectName}-vue/src/lib/${projectName}-vue.tsx`), + tree.exists(`libs/${projectName}-vue/src/lib/${projectName}-vue.tsx`) ).toBeFalsy(); expect( tree.exists( - `libs/${projectName}-vue/src/lib/${projectName}-vue.spec.tsx`, - ), + `libs/${projectName}-vue/src/lib/${projectName}-vue.spec.tsx` + ) ).toBeFalsy(); expect( - tree.exists(`libs/${projectName}-vue/src/lib/${projectName}-vue.css`), + tree.exists(`libs/${projectName}-vue/src/lib/${projectName}-vue.css`) ).toBeFalsy(); const indexFile: Buffer = tree.read( - `libs/${projectName}-vue/src/index.ts`, + `libs/${projectName}-vue/src/index.ts` ); expect(indexFile.toString()).toMatch( - `export * from './generated/components';`, + `export * from './generated/components';` ); }); @@ -56,14 +56,14 @@ xdescribe('add-outputtarget vue', () => { tree .read(`libs/${projectName}/stencil.config.ts`) .includes( - `import { vueOutputTarget } from '@stencil/vue-output-target';`, - ), + `import { vueOutputTarget } from '@stencil/vue-output-target';` + ) ).toBeTruthy(); expect( tree .read(`libs/${projectName}/stencil.config.ts`) - .includes(`vueOutputTarget({`), + .includes(`vueOutputTarget({`) ).toBeTruthy(); }); diff --git a/packages/stencil/src/generators/add-outputtarget/add-outputtarget.ts b/packages/stencil/src/generators/add-outputtarget/add-outputtarget.ts index cf53d854..2deeff80 100644 --- a/packages/stencil/src/generators/add-outputtarget/add-outputtarget.ts +++ b/packages/stencil/src/generators/add-outputtarget/add-outputtarget.ts @@ -15,7 +15,7 @@ import { assertNotUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-so export async function outputtargetGenerator( host: Tree, - options: AddOutputtargetSchematicSchema, + options: AddOutputtargetSchematicSchema ) { assertNotUsingTsSolutionSetup(host, '@nxext/stencil', 'add-outputtarget'); diff --git a/packages/stencil/src/generators/add-outputtarget/add-vue/generator.ts b/packages/stencil/src/generators/add-outputtarget/add-vue/generator.ts index aba9a5be..f7d2f2f9 100644 --- a/packages/stencil/src/generators/add-outputtarget/add-vue/generator.ts +++ b/packages/stencil/src/generators/add-outputtarget/add-vue/generator.ts @@ -20,7 +20,7 @@ import { calculateStencilSourceOptions } from '../lib/calculate-stencil-source-o async function prepareVueLibrary( host: Tree, - options: AddOutputtargetSchematicSchema, + options: AddOutputtargetSchematicSchema ) { const { libsDir } = getWorkspaceLayout(host); const vueProjectName = `${options.projectName}-vue`; @@ -51,12 +51,12 @@ async function prepareVueLibrary( {}, { '@stencil/vue-output-target': STENCIL_OUTPUTTARGET_VERSION['vue'], - }, + } ); host.write( `${libsDir}/${vueProjectName}/src/index.ts`, - `export * from './generated/components';`, + `export * from './generated/components';` ); return runTasksInSerial(jsInitTask, libraryTarget); @@ -68,18 +68,18 @@ function addVueOutputtarget( stencilProjectConfig, stencilConfigPath: string, stencilConfigSource: ts.SourceFile, - packageName: string, + packageName: string ) { const vueProjectConfig = readProjectConfiguration(tree, `${projectName}-vue`); const realtivePath = getRelativePath( getDistDir(stencilProjectConfig.root), - vueProjectConfig.root, + vueProjectConfig.root ); const changes = applyChangesToString(stencilConfigSource.text, [ ...addImport( stencilConfigSource, - `import { vueOutputTarget } from '@stencil/vue-output-target';`, + `import { vueOutputTarget } from '@stencil/vue-output-target';` ), ...addOutputTarget( stencilConfigSource, @@ -89,7 +89,7 @@ function addVueOutputtarget( proxiesFile: '${realtivePath}/src/generated/components.ts', includeDefineCustomElements: true, }) - `, + ` ), ]); tree.write(stencilConfigPath, changes); @@ -97,7 +97,7 @@ function addVueOutputtarget( export async function addVueGenerator( host: Tree, - options: AddOutputtargetSchematicSchema, + options: AddOutputtargetSchematicSchema ) { const libraryTarget = await prepareVueLibrary(host, options); @@ -114,7 +114,7 @@ export async function addVueGenerator( stencilProjectConfig, stencilConfigPath, stencilConfigSource, - packageName, + packageName ); return libraryTarget; From 92a9bd0572037e215e202b58565ca330335fb3b1 Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:50:10 +0000 Subject: [PATCH 12/14] #1159 generators.md outputType format --- docs/docs/stencil/generators.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/stencil/generators.md b/docs/docs/stencil/generators.md index bc636454..95fe06cc 100644 --- a/docs/docs/stencil/generators.md +++ b/docs/docs/stencil/generators.md @@ -314,7 +314,7 @@ nx g add-outputtarget ... --dry-run Type: `string` -Possible values: `angular`, `react`, `vue`, `svelte` +Possible values: `angular`, `react`, `svelte`, `vue` Select what kind of library you want to generate. From 966d84636f239175c72de5c57ecf762cb2b290be Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:53:27 +0000 Subject: [PATCH 13/14] #1159 generators.md and json for stencil outputtarget --- docs/docs/stencil/generators.md | 2 +- packages/stencil/generators.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/stencil/generators.md b/docs/docs/stencil/generators.md index 95fe06cc..820abfd0 100644 --- a/docs/docs/stencil/generators.md +++ b/docs/docs/stencil/generators.md @@ -286,7 +286,7 @@ Type: `boolean` ## @nxext/stencil:add-outputtarget -Add react/angular/vue libraries for the component library +Add react/angular libraries for the component library ### Usage diff --git a/packages/stencil/generators.json b/packages/stencil/generators.json index c2e283c4..bf11922e 100644 --- a/packages/stencil/generators.json +++ b/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", From 2f64ac7cfcad480fc9d41088de29c95e9d3981b3 Mon Sep 17 00:00:00 2001 From: Nick W Date: Tue, 10 Dec 2024 15:54:21 +0000 Subject: [PATCH 14/14] #1159 generators.md stencil output target; including vue --- docs/docs/stencil/generators.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/stencil/generators.md b/docs/docs/stencil/generators.md index 820abfd0..95fe06cc 100644 --- a/docs/docs/stencil/generators.md +++ b/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