From 94ef2228591eada79ebda4d913358b6248a55afd Mon Sep 17 00:00:00 2001 From: Caleb Ukle Date: Fri, 30 Jun 2023 09:17:44 -0500 Subject: [PATCH] feat(vite): add tsconfig paths resolution plugin --- e2e/vite/src/vite.test.ts | 70 ++++++++- packages/vite/migrations.json | 6 + packages/vite/package.json | 6 +- .../vite/plugins/nx-tsconfig-paths.plugin.ts | 89 +++++++++++ .../vite/src/executors/build/build.impl.ts | 7 +- .../executors/dev-server/dev-server.impl.ts | 4 +- .../__snapshots__/configuration.spec.ts.snap | 68 ++------ .../vitest/__snapshots__/vitest.spec.ts.snap | 45 ++---- .../change-ts-paths-plugin.spec.ts | 148 ++++++++++++++++++ .../change-ts-paths-plugin.ts | 65 ++++++++ packages/vite/src/utils/executor-utils.ts | 15 +- packages/vite/src/utils/generator-utils.ts | 15 +- 12 files changed, 421 insertions(+), 117 deletions(-) create mode 100644 packages/vite/plugins/nx-tsconfig-paths.plugin.ts create mode 100644 packages/vite/src/migrations/update-16-5-0-change-ts-paths-plugin/change-ts-paths-plugin.spec.ts create mode 100644 packages/vite/src/migrations/update-16-5-0-change-ts-paths-plugin/change-ts-paths-plugin.ts diff --git a/e2e/vite/src/vite.test.ts b/e2e/vite/src/vite.test.ts index d1087fd689919f..40bbdb626e1321 100644 --- a/e2e/vite/src/vite.test.ts +++ b/e2e/vite/src/vite.test.ts @@ -1,3 +1,4 @@ +import { names } from '@nx/devkit'; import { cleanupProject, createFile, @@ -240,6 +241,74 @@ describe('Vite Plugin', () => { 100_000; }); + describe.only('incremental building', () => { + const app = uniq('demo'); + const lib = uniq('my-lib'); + beforeAll(() => { + proj = newProject({ name: uniq('vite-incr-build') }); + runCLI(`generate @nx/react:app ${app} --bundler=vite --no-interactive`); + + // only this project will be directly used from dist + runCLI( + `generate @nx/react:lib ${lib}-buildable --unitTestRunner=none --bundler=vite --importPath="@acme/buildable" --no-interactive` + ); + + runCLI( + `generate @nx/react:lib ${lib} --unitTestRunner=none --bundler=none --importPath="@acme/non-buildable" --no-interactive` + ); + + // because the default js lib builds as cjs it cannot be loaded from dist + // so the paths plugin should always resolve to the libs source + runCLI( + `generate @nx/js:lib ${lib}-js --bundler=tsc --importPath="@acme/js-lib" --no-interactive` + ); + const buildableLibCmp = names(`${lib}-buildable`).className; + const nonBuildableLibCmp = names(lib).className; + const buildableJsLibFn = names(`${lib}-js`).propertyName; + + updateFile(`apps/${app}/src/app/app.tsx`, () => { + return `// eslint-disable-next-line @typescript-eslint/no-unused-vars +import styles from './app.module.css'; + +import NxWelcome from './nx-welcome'; +import { ${buildableLibCmp} } from '@acme/buildable'; +import { ${buildableJsLibFn} } from '@acme/js-lib'; +import { ${nonBuildableLibCmp} } from '@acme/non-buildable'; + +export function App() { + return ( +
+ <${buildableLibCmp} /> + <${nonBuildableLibCmp} /> +

{${buildableJsLibFn}()}

+ +
+ ); +} +export default App; +`; + }); + }); + + afterAll(() => { + cleanupProject(); + }); + + it('should build app from libs source', () => { + const results = runCLI(`build ${app} --buildLibsFromSource=true`); + expect(results).toContain('Successfully ran target build for project'); + // this should be more modules than build from dist + expect(results).toContain('40 modules transformed'); + }); + + it('should build app from libs dist', () => { + const results = runCLI(`build ${app} --buildLibsFromSource=false`); + expect(results).toContain('Successfully ran target build for project'); + // this should be less modules than building from source + expect(results).toContain('38 modules transformed'); + }); + }); + describe('should be able to create libs that use vitest', () => { const lib = uniq('my-lib'); beforeEach(() => { @@ -255,7 +324,6 @@ describe('Vite Plugin', () => { `Successfully ran target test for project ${lib}` ); - // TODO(caleb): run tests from project root and make sure they still work const nestedResults = await runCLIAsync(`test ${lib} --skip-nx-cache`, { cwd: `${tmpProjPath()}/libs/${lib}`, }); diff --git a/packages/vite/migrations.json b/packages/vite/migrations.json index b86d5bfcdee8bc..1c256af5d79267 100644 --- a/packages/vite/migrations.json +++ b/packages/vite/migrations.json @@ -29,6 +29,12 @@ "description": "Changes the testFile config in the vite:test exectutor from a string to an array of strings", "cli": "nx", "implementation": "./src/migrations/update-16-4-1-update-test-file-config/update-16-4-1-test-file-config" + }, + "16-5-0-change-ts-paths-plugin": { + "version": "16.5.0-beta.0", + "description": "Change vite-tsconfig-paths plugin for first party nx-vite-tsconfig-paths plugin", + "cli": "nx", + "implementation": "./src/migrations/update-16-5-0-change-ts-paths-plugin/change-ts-paths-plugin" } }, "packageJsonUpdates": { diff --git a/packages/vite/package.json b/packages/vite/package.json index 4a4eb6a9324dfd..59a2e6e432f2ec 100644 --- a/packages/vite/package.json +++ b/packages/vite/package.json @@ -34,7 +34,8 @@ "dotenv": "~10.0.0", "enquirer": "~2.3.6", "@nx/devkit": "file:../devkit", - "@nx/js": "file:../js" + "@nx/js": "file:../js", + "tsconfig-paths": "^4.1.2" }, "peerDependencies": { "vite": "^4.3.4", @@ -53,6 +54,7 @@ "./executors": "./executors.js", "./src/executors/*/schema.json": "./src/executors/*/schema.json", "./src/executors/*.impl": "./src/executors/*.impl.js", - "./src/executors/*/compat": "./src/executors/*/compat.js" + "./src/executors/*/compat": "./src/executors/*/compat.js", + "./plugins/nx-tsconfig-paths.plugin": "./plugins/nx-tsconfig-paths.plugin.js" } } diff --git a/packages/vite/plugins/nx-tsconfig-paths.plugin.ts b/packages/vite/plugins/nx-tsconfig-paths.plugin.ts new file mode 100644 index 00000000000000..afe9f478c0773b --- /dev/null +++ b/packages/vite/plugins/nx-tsconfig-paths.plugin.ts @@ -0,0 +1,89 @@ +import { stripIndents, workspaceRoot } from '@nx/devkit'; +import { existsSync } from 'node:fs'; +import { relative, join, resolve } from 'node:path'; +import { loadConfig, createMatchPath, MatchPath } from 'tsconfig-paths'; + +export function nxViteTsPaths() { + let matchTsPathEsm: MatchPath; + let matchTsPathFallback: MatchPath | undefined; + + return { + name: 'nx-vite-ts-paths', + configResolved(config: any) { + const projectRoot = config.root; + const projectRootFromWorkspaceRoot = relative(workspaceRoot, projectRoot); + + const foundTsConfigPath = getTsConfig( + join( + workspaceRoot, + 'tmp', + projectRootFromWorkspaceRoot, + 'tsconfig.generated.json' + ) + ); + if (!foundTsConfigPath) { + throw new Error(stripIndents`Unable to find a tsconfig in the workspace! +There should at least be a tsconfig.base.json or tsconfig.json in the root of the workspace ${workspaceRoot}`); + } + const parsed = loadConfig(foundTsConfigPath); + + logIt('first parsed tsconfig: ', parsed); + if (parsed.resultType === 'failed') { + throw new Error(`Failed loading tsonfig at ${foundTsConfigPath}`); + } + + matchTsPathEsm = createMatchPath(parsed.absoluteBaseUrl, parsed.paths, [ + ['exports', '.', 'import'], + 'module', + 'main', + ]); + + const rootLevelTsConfig = getTsConfig( + join(workspaceRoot, 'tsconfig.base.json') + ); + const rootLevelParsed = loadConfig(rootLevelTsConfig); + logIt('fallback parsed tsconfig: ', rootLevelParsed); + if (rootLevelParsed.resultType === 'success') { + matchTsPathFallback = createMatchPath( + rootLevelParsed.absoluteBaseUrl, + rootLevelParsed.paths, + ['main', 'module'] + ); + } + }, + resolveId(source: string) { + let resolvedFile: string; + try { + resolvedFile = matchTsPathEsm(source); + } catch (e) { + logIt('Using fallback path matching.'); + resolvedFile = matchTsPathFallback?.(source); + } + + if (!resolvedFile) { + logIt(`Unable to resolve ${source} with tsconfig paths`); + } + + return resolvedFile; + }, + }; +} + +function getTsConfig(preferredTsConfigPath: string): string { + return [ + resolve(preferredTsConfigPath), + resolve(join(workspaceRoot, 'tsconfig.base.json')), + resolve(join(workspaceRoot, 'tsconfig.json')), + ].find((tsPath) => { + if (existsSync(tsPath)) { + logIt('Found tsconfig at', tsPath); + return tsPath; + } + }); +} + +function logIt(...msg: any[]) { + if (process.env.NX_VERBOSE_LOGGING === 'true') { + console.debug('[Nx Vite TsPaths]', ...msg); + } +} diff --git a/packages/vite/src/executors/build/build.impl.ts b/packages/vite/src/executors/build/build.impl.ts index 015177879c8dda..e236912494a915 100644 --- a/packages/vite/src/executors/build/build.impl.ts +++ b/packages/vite/src/executors/build/build.impl.ts @@ -16,7 +16,10 @@ import { import { existsSync, writeFileSync } from 'fs'; import { resolve } from 'path'; import { createAsyncIterable } from '@nx/devkit/src/utils/async-iterable'; -import { registerPaths, validateTypes } from '../../utils/executor-utils'; +import { + createBuildableTsConfig, + validateTypes, +} from '../../utils/executor-utils'; export async function* viteBuildExecutor( options: ViteBuildExecutorOptions, @@ -25,7 +28,7 @@ export async function* viteBuildExecutor( const projectRoot = context.projectsConfigurations.projects[context.projectName].root; - registerPaths(projectRoot, options, context); + createBuildableTsConfig(projectRoot, options, context); const normalizedOptions = normalizeOptions(options); diff --git a/packages/vite/src/executors/dev-server/dev-server.impl.ts b/packages/vite/src/executors/dev-server/dev-server.impl.ts index f43342fa396627..2ed3171b35bf72 100644 --- a/packages/vite/src/executors/dev-server/dev-server.impl.ts +++ b/packages/vite/src/executors/dev-server/dev-server.impl.ts @@ -11,7 +11,7 @@ import { import { ViteDevServerExecutorOptions } from './schema'; import { ViteBuildExecutorOptions } from '../build/schema'; -import { registerPaths } from '../../utils/executor-utils'; +import { createBuildableTsConfig } from '../../utils/executor-utils'; export async function* viteDevServerExecutor( options: ViteDevServerExecutorOptions, @@ -20,7 +20,7 @@ export async function* viteDevServerExecutor( const projectRoot = context.projectsConfigurations.projects[context.projectName].root; - registerPaths(projectRoot, options, context); + createBuildableTsConfig(projectRoot, options, context); // Retrieve the option for the configured buildTarget. const buildTargetOptions: ViteBuildExecutorOptions = getNxTargetOptions( diff --git a/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap b/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap index 2690351e4f8748..13b7f088bbde14 100644 --- a/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap @@ -4,7 +4,7 @@ exports[`@nx/vite:configuration library mode should add config for building libr "/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import dts from 'vite-plugin-dts'; import * as path from 'path'; @@ -18,18 +18,12 @@ export default defineConfig({ skipDiagnostics: true, }), react(), - viteTsConfigPaths({ - root: '../', - }), + nxViteTsPaths(), ], // Uncomment this if you are using workers. // worker: { - // plugins: [ - // viteTsConfigPaths({ - // root: '../', - // }), - // ], + // plugins: [ nxViteTsPaths() ], // }, // Configuration for building your library. @@ -57,7 +51,7 @@ exports[`@nx/vite:configuration library mode should set up non buildable library "/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import dts from 'vite-plugin-dts'; import * as path from 'path'; @@ -71,18 +65,12 @@ export default defineConfig({ skipDiagnostics: true, }), react(), - viteTsConfigPaths({ - root: '../../', - }), + nxViteTsPaths(), ], // Uncomment this if you are using workers. // worker: { - // plugins: [ - // viteTsConfigPaths({ - // root: '../../', - // }), - // ], + // plugins: [ nxViteTsPaths() ], // }, // Configuration for building your library. @@ -301,7 +289,7 @@ exports[`@nx/vite:configuration transform React app to use Vite should create vi "/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ cacheDir: '../../node_modules/.vite/my-test-react-app', @@ -316,20 +304,11 @@ export default defineConfig({ host: 'localhost', }, - plugins: [ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], + plugins: [react(), nxViteTsPaths()], // Uncomment this if you are using workers. // worker: { - // plugins: [ - // viteTsConfigPaths({ - // root: '../../', - // }), - // ], + // plugins: [ nxViteTsPaths() ], // }, }); " @@ -451,7 +430,7 @@ exports[`@nx/vite:configuration transform Web app to use Vite should create vite "/// import { defineConfig } from 'vite'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ cacheDir: '../../node_modules/.vite/my-test-web-app', @@ -466,19 +445,11 @@ export default defineConfig({ host: 'localhost', }, - plugins: [ - viteTsConfigPaths({ - root: '../../', - }), - ], + plugins: [nxViteTsPaths()], // Uncomment this if you are using workers. // worker: { - // plugins: [ - // viteTsConfigPaths({ - // root: '../../', - // }), - // ], + // plugins: [ nxViteTsPaths() ], // }, }); " @@ -587,7 +558,7 @@ exports[`@nx/vite:configuration vitest should create a vitest configuration if " "/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ cacheDir: '../../node_modules/.vite/my-test-react-app', @@ -602,20 +573,11 @@ export default defineConfig({ host: 'localhost', }, - plugins: [ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], + plugins: [react(), nxViteTsPaths()], // Uncomment this if you are using workers. // worker: { - // plugins: [ - // viteTsConfigPaths({ - // root: '../../', - // }), - // ], + // plugins: [ nxViteTsPaths() ], // }, test: { diff --git a/packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap b/packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap index bb857108f62d3a..4087eb8e6d90aa 100644 --- a/packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap +++ b/packages/vite/src/generators/vitest/__snapshots__/vitest.spec.ts.snap @@ -4,25 +4,16 @@ exports[`vitest generator insourceTests should add the insourceSource option in "/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ cacheDir: '../../node_modules/.vite/my-test-react-app', - plugins: [ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], + plugins: [react(), nxViteTsPaths()], // Uncomment this if you are using workers. // worker: { - // plugins: [ - // viteTsConfigPaths({ - // root: '../../', - // }), - // ], + // plugins: [ nxViteTsPaths() ], // }, define: { @@ -45,25 +36,16 @@ exports[`vitest generator vite.config should create correct vite.config.ts file "/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ cacheDir: '../../node_modules/.vite/my-test-react-app', - plugins: [ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], + plugins: [react(), nxViteTsPaths()], // Uncomment this if you are using workers. // worker: { - // plugins: [ - // viteTsConfigPaths({ - // root: '../../', - // }), - // ], + // plugins: [ nxViteTsPaths() ], // }, test: { @@ -82,25 +64,16 @@ exports[`vitest generator vite.config should create correct vite.config.ts file "/// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; export default defineConfig({ cacheDir: '../../node_modules/.vite/react-lib-nonb-jest', - plugins: [ - react(), - viteTsConfigPaths({ - root: '../../', - }), - ], + plugins: [react(), nxViteTsPaths()], // Uncomment this if you are using workers. // worker: { - // plugins: [ - // viteTsConfigPaths({ - // root: '../../', - // }), - // ], + // plugins: [ nxViteTsPaths() ], // }, test: { diff --git a/packages/vite/src/migrations/update-16-5-0-change-ts-paths-plugin/change-ts-paths-plugin.spec.ts b/packages/vite/src/migrations/update-16-5-0-change-ts-paths-plugin/change-ts-paths-plugin.spec.ts new file mode 100644 index 00000000000000..8cbcac9d428f3e --- /dev/null +++ b/packages/vite/src/migrations/update-16-5-0-change-ts-paths-plugin/change-ts-paths-plugin.spec.ts @@ -0,0 +1,148 @@ +import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing'; +import { Tree, addProjectConfiguration } from '@nx/devkit'; + +import changeTsPathsPlugin from './change-ts-paths-plugin'; + +describe('change-vite-ts-paths-plugin migration', () => { + let tree: Tree; + + beforeEach(() => { + tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' }); + }); + + it('should update viteTsConfigPaths to nxViteTsPaths plugin', () => { + addProject(tree, 'demo'); + + changeTsPathsPlugin(tree); + + expect(tree.read('apps/demo/vite.config.ts', 'utf-8')) + .toMatchInlineSnapshot(` + " + /// + import { defineConfig } from 'vite'; + import react from '@vitejs/plugin-react'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + + export default defineConfig({ + cacheDir: '../../node_modules/.vite/demo', + server: { + port: 4200, + host: 'localhost', + }, + + preview: { + port: 4300, + host: 'localhost', + }, + + plugins: [ + react(), + nxViteTsPaths() + ], + + // Uncomment this if you are using workers. + // worker: { + // plugins: [ + // viteTsConfigPaths({ + // root: '../../', + // }), + // ], + // }, + + test: { + globals: true, + cache: { + dir: '../../node_modules/.vitest', + }, + environment: 'jsdom', + include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + }, + }); + + " + `); + }); + + it('should not change anything if viteTsConfigPaths is not used', () => { + addProject(tree, 'demo'); + tree.delete('apps/demo/vite.config.ts'); + + expect(() => changeTsPathsPlugin(tree)).not.toThrow(); + expect(tree.exists('apps/demo/vite.config.ts')).toBeFalsy(); + }); +}); + +function addProject(tree: Tree, name: string) { + addProjectConfiguration(tree, name, { + root: `apps/${name}`, + sourceRoot: `apps/${name}/src`, + targets: { + build: { + executor: '@nx/vite:build', + outputs: ['{options.outputPath}'], + defaultConfiguration: 'production', + options: { + outputPath: `dist/apps/${name}`, + buildLibsFromSource: false, + }, + configurations: { + development: { + mode: 'development', + }, + production: { + mode: 'production', + }, + }, + }, + }, + }); + + tree.write( + `apps/${name}/vite.config.ts`, + ` +/// +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import viteTsConfigPaths from 'vite-tsconfig-paths'; + +export default defineConfig({ + cacheDir: '../../node_modules/.vite/${name}', + server: { + port: 4200, + host: 'localhost', + }, + + preview: { + port: 4300, + host: 'localhost', + }, + + plugins: [ + react(), + viteTsConfigPaths({ + root: '../../' + }) + ], + + // Uncomment this if you are using workers. + // worker: { + // plugins: [ + // viteTsConfigPaths({ + // root: '../../', + // }), + // ], + // }, + + test: { + globals: true, + cache: { + dir: '../../node_modules/.vitest', + }, + environment: 'jsdom', + include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + }, +}); + +` + ); +} diff --git a/packages/vite/src/migrations/update-16-5-0-change-ts-paths-plugin/change-ts-paths-plugin.ts b/packages/vite/src/migrations/update-16-5-0-change-ts-paths-plugin/change-ts-paths-plugin.ts new file mode 100644 index 00000000000000..71c58766de25f8 --- /dev/null +++ b/packages/vite/src/migrations/update-16-5-0-change-ts-paths-plugin/change-ts-paths-plugin.ts @@ -0,0 +1,65 @@ +import { Tree, getProjects, joinPathFragments } from '@nx/devkit'; +import { forEachExecutorOptions } from '@nx/devkit/src/generators/executor-options-utils'; +import { ViteBuildExecutorOptions } from '../../executors/build/schema'; +import { tsquery } from '@phenomnomnominal/tsquery'; +import { ImportDeclaration } from 'typescript'; + +export default function update(tree: Tree) { + const projects = getProjects(tree); + forEachExecutorOptions( + tree, + '@nx/vite:build', + (options, projectName) => { + const projectConfig = projects.get(projectName); + const config = + options.configFile || findViteConfig(tree, projectConfig.root); + if (!config || !tree.exists(config)) { + return; + } + + const configContents = tree.read(config, 'utf-8'); + + const oldTsConfigPathPlugin = + tsquery.query( + configContents, + 'ImportDeclaration:has(StringLiteral[value="vite-tsconfig-paths"])' + ) ?? []; + + if (oldTsConfigPathPlugin.length === 0) { + return; + } + + const importName = + oldTsConfigPathPlugin[0]?.importClause?.name?.text ?? + 'viteTsConfigPaths'; + const updatedContent = tsquery.replace( + configContents, + `PropertyAssignment:has(Identifier[name="plugins"]) CallExpression:has(Identifier[name="${importName}"])`, + () => { + return `nxViteTsPaths()`; + } + ); + + const withImportChange = tsquery.replace( + updatedContent, + 'ImportDeclaration:has(StringLiteral[value="vite-tsconfig-paths"])', + () => { + return "import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';"; + } + ); + + // TODO(caleb): should we try to handle the commented out usage of viteTsConfigPaths()? + tree.write(config, withImportChange); + } + ); +} + +function findViteConfig(tree: Tree, searchRoot: string) { + const allowsExt = ['js', 'mjs', 'ts', 'cjs', 'mts', 'cts']; + + for (const ext of allowsExt) { + if (tree.exists(joinPathFragments(searchRoot, `vite.config.${ext}`))) { + return joinPathFragments(searchRoot, `vite.config.${ext}`); + } + } +} diff --git a/packages/vite/src/utils/executor-utils.ts b/packages/vite/src/utils/executor-utils.ts index 470f1ff73d8038..d80069746bde37 100644 --- a/packages/vite/src/utils/executor-utils.ts +++ b/packages/vite/src/utils/executor-utils.ts @@ -7,7 +7,6 @@ import { calculateProjectDependencies, createTmpTsConfig, } from '@nx/js/src/utils/buildable-libs-utils'; -import { registerTsConfigPaths } from '@nx/js/src/internal'; export async function validateTypes(opts: { workspaceRoot: string; @@ -27,7 +26,7 @@ export async function validateTypes(opts: { } } -export function registerPaths( +export function createBuildableTsConfig( projectRoot: string, options: ViteBuildExecutorOptions | ViteDevServerExecutorOptions, context: ExecutorContext @@ -43,15 +42,7 @@ export function registerPaths( context.targetName, context.configurationName ); - const tmpTsConfig = createTmpTsConfig( - tsConfig, - context.root, - projectRoot, - dependencies - ); - - registerTsConfigPaths(tmpTsConfig); - } else { - registerTsConfigPaths(tsConfig); + // this tsconfig is used via the vite ts paths plugin + createTmpTsConfig(tsConfig, context.root, projectRoot, dependencies); } } diff --git a/packages/vite/src/utils/generator-utils.ts b/packages/vite/src/utils/generator-utils.ts index 7c5ee1deec5703..f16646ed45339f 100644 --- a/packages/vite/src/utils/generator-utils.ts +++ b/packages/vite/src/utils/generator-utils.ts @@ -583,24 +583,21 @@ export function createOrEditViteConfig( host: 'localhost', },`; + // viteTsConfigPaths({ + // root: '${offsetFromRoot(projectConfig.root)}', + // }), const pluginOption = ` plugins: [ ${dtsPlugin} ${reactPlugin} - viteTsConfigPaths({ - root: '${offsetFromRoot(projectConfig.root)}', - }), + nxViteTsPaths(), ], `; const workerOption = ` // Uncomment this if you are using workers. // worker: { - // plugins: [ - // viteTsConfigPaths({ - // root: '${offsetFromRoot(projectConfig.root)}', - // }), - // ], + // plugins: [ nxViteTsPaths() ], // },`; const cacheDir = `cacheDir: '${offsetFromRoot( @@ -628,7 +625,7 @@ export function createOrEditViteConfig( /// import { defineConfig } from 'vite'; ${reactPluginImportLine} - import viteTsConfigPaths from 'vite-tsconfig-paths'; + import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; ${dtsImportLine} export default defineConfig({