diff --git a/libs/vue/src/builders/browser/builder.ts b/libs/vue/src/builders/browser/builder.ts index a58fe668..977e38e3 100644 --- a/libs/vue/src/builders/browser/builder.ts +++ b/libs/vue/src/builders/browser/builder.ts @@ -10,7 +10,8 @@ import { BrowserBuilderSchema } from './schema'; import { getNormalizedAssetPatterns, getProjectRoot, - getProjectSourceRoot + getProjectSourceRoot, + modifyChalkOutput } from '../../utils'; import { addFileReplacements, @@ -75,6 +76,20 @@ export function runBuilder( }; } + // The compiled files output by vue-cli are not relative to the + // root of the workspace. We can spy on chalk to intercept the + // console output and tranform any non-relative file paths. + // TODO: Find a better way to rewrite vue-cli console output + const chalkTransform = (arg: string) => { + const normalizedArg = normalize(arg); + return normalizedArg.includes(options.outputPath) + ? options.outputPath + normalizedArg.split(options.outputPath)[1] + : arg; + }; + ['green', 'cyan', 'blue'].forEach(color => + modifyChalkOutput(color, chalkTransform) + ); + return from(setup()).pipe( switchMap(({ projectRoot, inlineOptions }) => { const service = new Service(projectRoot, { diff --git a/libs/vue/src/builders/dev-server/builder.ts b/libs/vue/src/builders/dev-server/builder.ts index e33194e6..e8da0d32 100644 --- a/libs/vue/src/builders/dev-server/builder.ts +++ b/libs/vue/src/builders/dev-server/builder.ts @@ -10,6 +10,7 @@ import { JsonObject, normalize } from '@angular-devkit/core'; +import { cliCommand } from '@nrwl/workspace/src/core/file-utils'; import { from, Observable } from 'rxjs'; import { map, switchMap } from 'rxjs/operators'; import { DevServerBuilderSchema } from './schema'; @@ -17,7 +18,8 @@ import { BrowserBuilderSchema } from '../browser/schema'; import { getNormalizedAssetPatterns, getProjectRoot, - getProjectSourceRoot + getProjectSourceRoot, + modifyChalkOutput } from '../../utils'; import { addFileReplacements, @@ -115,6 +117,21 @@ export function runBuilder( }; } + // The vue-cli build command is not suitable for an nx project. + // We spy on chalk to intercept the console output and replace + // it with a nx command. + // TODO: Find a better way to rewrite vue-cli console output + const buildRegex = /([p]?npm run|yarn) build/; + modifyChalkOutput('cyan', arg => { + if (buildRegex.test(arg)) { + return arg.replace( + buildRegex, + `${cliCommand()} build ${context.target.project} --prod` + ); + } + return arg; + }); + return from(setup()).pipe( switchMap(({ projectRoot, browserOptions, inlineOptions }) => { const service = new Service(projectRoot, { diff --git a/libs/vue/src/utils.ts b/libs/vue/src/utils.ts index 8a4090c4..4641447a 100644 --- a/libs/vue/src/utils.ts +++ b/libs/vue/src/utils.ts @@ -4,6 +4,9 @@ import { normalize, resolve, virtualFs } from '@angular-devkit/core'; import { NodeJsSyncHost } from '@angular-devkit/core/node'; import { BrowserBuilderSchema } from './builders/browser/schema'; +// eslint-disable-next-line @typescript-eslint/no-var-requires +const { chalk } = require('@vue/cli-shared-utils'); + export async function getProjectRoot(context: BuilderContext): Promise { const projectMetadata = await context.getProjectMetadata( context.target.project @@ -43,3 +46,18 @@ export function getNormalizedAssetPatterns( projectSourceRoot === undefined ? undefined : normalize(projectSourceRoot) ); } + +export function modifyChalkOutput( + method: string, + transform: (arg: string) => string +) { + const originalChalkFn = chalk[method]; + Object.defineProperty(chalk, method, { + get() { + const newChalkFn = (...args: string[]) => + originalChalkFn(...args.map(transform)); + Object.setPrototypeOf(newChalkFn, originalChalkFn); + return newChalkFn; + } + }); +}