@nx/vite
Version:
541 lines (534 loc) • 23.9 kB
JavaScript
;
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
addBuildTarget: function() {
return addBuildTarget;
},
addOrChangeTestTarget: function() {
return addOrChangeTestTarget;
},
addPreviewTarget: function() {
return addPreviewTarget;
},
addServeTarget: function() {
return addServeTarget;
},
createOrEditViteConfig: function() {
return createOrEditViteConfig;
},
deleteWebpackConfig: function() {
return deleteWebpackConfig;
},
editTsConfig: function() {
return editTsConfig;
},
findExistingJsBuildTargetInProject: function() {
return findExistingJsBuildTargetInProject;
},
getViteConfigPathForProject: function() {
return getViteConfigPathForProject;
},
handleUnknownConfiguration: function() {
return handleUnknownConfiguration;
},
handleUnsupportedUserProvidedTargets: function() {
return handleUnsupportedUserProvidedTargets;
},
moveAndEditIndexHtml: function() {
return moveAndEditIndexHtml;
},
normalizeViteConfigFilePathWithTree: function() {
return normalizeViteConfigFilePathWithTree;
}
});
const _devkit = require("@nx/devkit");
const _targetdefaultsutils = require("@nx/devkit/src/generators/target-defaults-utils");
const _tssolutionsetup = require("@nx/js/src/utils/typescript/ts-solution-setup");
const _viteconfigeditutils = require("./vite-config-edit-utils");
function findExistingJsBuildTargetInProject(targets) {
const output = {};
const supportedExecutors = {
build: [
'@nx/js:babel',
'@nx/js:swc',
'@nx/rollup:rollup'
]
};
const unsupportedExecutors = [
'@nx/angular:ng-packagr-lite',
'@nx/angular:package',
'@nx/angular:webpack-browser',
'@nx/esbuild:esbuild',
'@nx/react-native:run-ios',
'@nx/react-native:start',
'@nx/react-native:run-android',
'@nx/react-native:bundle',
'@nx/react-native:build-android',
'@nx/react-native:bundle',
'@nx/next:build',
'@nx/js:tsc',
'@nrwl/angular:ng-packagr-lite',
'@nrwl/angular:package',
'@nrwl/angular:webpack-browser',
'@nrwl/esbuild:esbuild',
'@nrwl/react-native:run-ios',
'@nrwl/react-native:start',
'@nrwl/react-native:run-android',
'@nrwl/react-native:bundle',
'@nrwl/react-native:build-android',
'@nrwl/react-native:bundle',
'@nrwl/next:build',
'@nrwl/js:tsc',
'@angular-devkit/build-angular:browser',
'@angular-devkit/build-angular:browser-esbuild',
'@angular-devkit/build-angular:application'
];
// We try to find the target that is using the supported executors
// for build since this is the one we will be converting
for(const target in targets){
const executorName = targets[target].executor;
if (supportedExecutors.build.includes(executorName)) {
output.supported = target;
} else if (unsupportedExecutors.includes(executorName)) {
output.unsupported = target;
}
}
return output;
}
function addOrChangeTestTarget(tree, options, hasPlugin) {
var _nxJson_plugins;
var _project;
const nxJson = (0, _devkit.readNxJson)(tree);
hasPlugin = (_nxJson_plugins = nxJson.plugins) == null ? void 0 : _nxJson_plugins.some((p)=>typeof p === 'string' ? p === '@nx/vite/plugin' : p.plugin === '@nx/vite/plugin' || hasPlugin);
if (hasPlugin) {
return;
}
const project = (0, _devkit.readProjectConfiguration)(tree, options.project);
var _options_testTarget;
const target = (_options_testTarget = options.testTarget) != null ? _options_testTarget : 'test';
const reportsDirectory = (0, _devkit.joinPathFragments)((0, _devkit.offsetFromRoot)(project.root), 'coverage', project.root === '.' ? options.project : project.root);
const testOptions = {
reportsDirectory
};
var _targets;
(_targets = (_project = project).targets) != null ? _targets : _project.targets = {};
if (project.targets[target]) {
throw new Error(`Target "${target}" already exists in the project.`);
} else {
project.targets[target] = {
executor: '@nx/vite:test',
outputs: [
'{options.reportsDirectory}'
],
options: testOptions
};
}
(0, _devkit.updateProjectConfiguration)(tree, options.project, project);
}
function addBuildTarget(tree, options, target) {
var _project;
(0, _targetdefaultsutils.addBuildTargetDefaults)(tree, '@nx/vite:build');
const project = (0, _devkit.readProjectConfiguration)(tree, options.project);
const isTsSolutionSetup = (0, _tssolutionsetup.isUsingTsSolutionSetup)(tree);
const buildOptions = {
outputPath: isTsSolutionSetup ? (0, _devkit.joinPathFragments)(project.root, 'dist') : (0, _devkit.joinPathFragments)('dist', project.root != '.' ? project.root : options.project)
};
var _targets;
(_targets = (_project = project).targets) != null ? _targets : _project.targets = {};
project.targets[target] = {
executor: '@nx/vite:build',
outputs: [
'{options.outputPath}'
],
defaultConfiguration: 'production',
options: buildOptions,
configurations: {
development: {
mode: 'development'
},
production: {
mode: 'production'
}
}
};
(0, _devkit.updateProjectConfiguration)(tree, options.project, project);
}
function addServeTarget(tree, options, target) {
var _project;
const project = (0, _devkit.readProjectConfiguration)(tree, options.project);
var _targets;
(_targets = (_project = project).targets) != null ? _targets : _project.targets = {};
project.targets[target] = {
executor: '@nx/vite:dev-server',
defaultConfiguration: 'development',
options: {
buildTarget: `${options.project}:build`
},
configurations: {
development: {
buildTarget: `${options.project}:build:development`,
hmr: true
},
production: {
buildTarget: `${options.project}:build:production`,
hmr: false
}
}
};
(0, _devkit.updateProjectConfiguration)(tree, options.project, project);
}
function addPreviewTarget(tree, options, serveTarget) {
var _project;
const project = (0, _devkit.readProjectConfiguration)(tree, options.project);
const previewOptions = {
buildTarget: `${options.project}:build`
};
var _targets;
(_targets = (_project = project).targets) != null ? _targets : _project.targets = {};
// Update the options from the passed serve target.
if (project.targets[serveTarget]) {
var _target_options, _target_options1;
const target = project.targets[serveTarget];
if (target.executor === '@nxext/vite:dev') {
previewOptions.proxyConfig = target.options.proxyConfig;
}
previewOptions['https'] = (_target_options = target.options) == null ? void 0 : _target_options.https;
previewOptions['open'] = (_target_options1 = target.options) == null ? void 0 : _target_options1.open;
}
// Adds a preview target.
project.targets.preview = {
dependsOn: [
'build'
],
executor: '@nx/vite:preview-server',
defaultConfiguration: 'development',
options: previewOptions,
configurations: {
development: {
buildTarget: `${options.project}:build:development`
},
production: {
buildTarget: `${options.project}:build:production`
}
}
};
(0, _devkit.updateProjectConfiguration)(tree, options.project, project);
}
function editTsConfig(tree, options) {
const projectConfig = (0, _devkit.readProjectConfiguration)(tree, options.project);
let tsconfigPath = (0, _devkit.joinPathFragments)(projectConfig.root, 'tsconfig.json');
const isTsSolutionSetup = (0, _tssolutionsetup.isUsingTsSolutionSetup)(tree);
if (isTsSolutionSetup) {
tsconfigPath = [
(0, _devkit.joinPathFragments)(projectConfig.root, 'tsconfig.app.json'),
(0, _devkit.joinPathFragments)(projectConfig.root, 'tsconfig.lib.json')
].find((p)=>tree.exists(p));
}
const config = (0, _devkit.readJson)(tree, tsconfigPath);
switch(options.uiFramework){
case 'react':
config.compilerOptions = {
jsx: 'react-jsx',
allowJs: false,
esModuleInterop: false,
allowSyntheticDefaultImports: true,
strict: true
};
break;
case 'none':
if (!isTsSolutionSetup) {
config.compilerOptions = {
module: 'commonjs',
forceConsistentCasingInFileNames: true,
strict: true,
noImplicitOverride: true,
noPropertyAccessFromIndexSignature: true,
noImplicitReturns: true,
noFallthroughCasesInSwitch: true
};
}
break;
default:
break;
}
(0, _devkit.writeJson)(tree, tsconfigPath, config);
}
function deleteWebpackConfig(tree, projectRoot, webpackConfigFilePath) {
const webpackConfigPath = webpackConfigFilePath && tree.exists(webpackConfigFilePath) ? webpackConfigFilePath : tree.exists(`${projectRoot}/webpack.config.js`) ? `${projectRoot}/webpack.config.js` : tree.exists(`${projectRoot}/webpack.config.ts`) ? `${projectRoot}/webpack.config.ts` : null;
if (webpackConfigPath) {
tree.delete(webpackConfigPath);
}
}
function moveAndEditIndexHtml(tree, options) {
const projectConfig = (0, _devkit.readProjectConfiguration)(tree, options.project);
let indexHtmlPath = `${projectConfig.root}/src/index.html`;
let mainPath = `${projectConfig.root}/src/main.ts${options.uiFramework === 'react' ? 'x' : ''}`;
if (projectConfig.root !== '.') {
mainPath = mainPath.replace(projectConfig.root, '');
}
if (!tree.exists(indexHtmlPath) && tree.exists(`${projectConfig.root}/index.html`)) {
indexHtmlPath = `${projectConfig.root}/index.html`;
}
if (tree.exists(indexHtmlPath)) {
const indexHtmlContent = tree.read(indexHtmlPath, 'utf8');
if (!indexHtmlContent.includes(`<script type='module' src='${mainPath}'></script>`)) {
tree.write(`${projectConfig.root}/index.html`, indexHtmlContent.replace('</body>', `<script type='module' src='${mainPath}'></script>
</body>`));
if (tree.exists(`${projectConfig.root}/src/index.html`)) {
tree.delete(`${projectConfig.root}/src/index.html`);
}
}
} else {
tree.write(`${projectConfig.root}/index.html`, `<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<link rel='icon' href='/favicon.ico' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>Vite</title>
</head>
<body>
<div id='root'></div>
<script type='module' src='${mainPath}'></script>
</body>
</html>`);
}
}
function createOrEditViteConfig(tree, options, onlyVitest, projectAlreadyHasViteTargets, vitestFileName) {
const { root: projectRoot } = (0, _devkit.readProjectConfiguration)(tree, options.project);
const extension = options.useEsmExtension ? 'mts' : 'ts';
const viteConfigPath = vitestFileName ? `${projectRoot}/vitest.config.${extension}` : `${projectRoot}/vite.config.${extension}`;
const isUsingTsPlugin = (0, _tssolutionsetup.isUsingTsSolutionSetup)(tree);
const buildOutDir = isUsingTsPlugin ? './dist' : projectRoot === '.' ? `./dist/${options.project}` : `${(0, _devkit.offsetFromRoot)(projectRoot)}dist/${projectRoot}`;
var _options_rollupOptionsExternal;
const buildOption = onlyVitest ? '' : options.includeLib ? ` // Configuration for building your library.
// See: https://vitejs.dev/guide/build.html#library-mode
build: {
outDir: '${buildOutDir}',
emptyOutDir: true,
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true,
},
lib: {
// Could also be a dictionary or array of multiple entry points.
entry: 'src/index.ts',
name: '${options.project}',
fileName: 'index',
// Change this to the formats you want to support.
// Don't forget to update your package.json as well.
formats: ['es' as const]
},
rollupOptions: {
// External packages that should not be bundled into your library.
external: [${(_options_rollupOptionsExternal = options.rollupOptionsExternal) != null ? _options_rollupOptionsExternal : ''}]
},
},` : ` build: {
outDir: '${buildOutDir}',
emptyOutDir: true,
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true,
},
},`;
const imports = options.imports ? [
...options.imports
] : [];
const plugins = options.plugins ? [
...options.plugins
] : [];
if (!onlyVitest && options.includeLib) {
imports.push(`import dts from 'vite-plugin-dts'`, `import * as path from 'path'`);
}
if (!isUsingTsPlugin) {
imports.push(`import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'`, `import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'`);
plugins.push(`nxViteTsPaths()`, `nxCopyAssetsPlugin(['*.md'])`);
}
if (!onlyVitest && options.includeLib) {
plugins.push(`dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })`);
}
const reportsDirectory = isUsingTsPlugin ? './test-output/vitest/coverage' : projectRoot === '.' ? `./coverage/${options.project}` : `${(0, _devkit.offsetFromRoot)(projectRoot)}coverage/${projectRoot}`;
var _options_testEnvironment;
const testOption = options.includeVitest ? ` test: {
watch: false,
globals: true,
environment: '${(_options_testEnvironment = options.testEnvironment) != null ? _options_testEnvironment : 'jsdom'}',
include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
${options.setupFile ? ` setupFiles: ['${options.setupFile}'],\n` : ''}\
${options.inSourceTests ? ` includeSource: ['src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],\n` : ''}\
reporters: ['default'],
coverage: {
reportsDirectory: '${reportsDirectory}',
provider: ${options.coverageProvider ? `'${options.coverageProvider}' as const` : `'v8' as const`},
}
},` : '';
const defineOption = options.inSourceTests ? ` define: {
'import.meta.vitest': undefined
},` : '';
const devServerOption = onlyVitest ? '' : options.includeLib ? '' : ` server:{
port: 4200,
host: 'localhost',
},`;
const previewServerOption = onlyVitest ? '' : options.includeLib ? '' : ` preview:{
port: 4300,
host: 'localhost',
},`;
const workerOption = ` // Uncomment this if you are using workers.
// worker: {
// plugins: [ nxViteTsPaths() ],
// },`;
const cacheDir = `cacheDir: '${normalizedJoinPaths((0, _devkit.offsetFromRoot)(projectRoot), 'node_modules', '.vite', projectRoot === '.' ? options.project : projectRoot)}',`;
if (tree.exists(viteConfigPath)) {
handleViteConfigFileExists(tree, viteConfigPath, options, buildOption, buildOutDir, imports, plugins, testOption, reportsDirectory, cacheDir, projectRoot, (0, _devkit.offsetFromRoot)(projectRoot), projectAlreadyHasViteTargets);
return;
}
const viteConfigContent = `/// <reference types='vitest' />
import { defineConfig } from 'vite';
${imports.join(';\n')}${imports.length ? ';' : ''}
export default defineConfig(() => ({
root: __dirname,
${printOptions(cacheDir, devServerOption, previewServerOption, ` plugins: [${plugins.join(', ')}],`, workerOption, buildOption, defineOption, testOption)}
}));
`.replace(/\s+(?=(\n|$))/gm, '\n');
tree.write(viteConfigPath, viteConfigContent);
}
function printOptions(...options) {
return options.filter(Boolean).join('\n');
}
function normalizeViteConfigFilePathWithTree(tree, projectRoot, configFile) {
return configFile && tree.exists(configFile) ? configFile : tree.exists((0, _devkit.joinPathFragments)(`${projectRoot}/vite.config.ts`)) ? (0, _devkit.joinPathFragments)(`${projectRoot}/vite.config.ts`) : tree.exists((0, _devkit.joinPathFragments)(`${projectRoot}/vite.config.js`)) ? (0, _devkit.joinPathFragments)(`${projectRoot}/vite.config.js`) : undefined;
}
function getViteConfigPathForProject(tree, projectName, target) {
let viteConfigPath;
const { targets, root } = (0, _devkit.readProjectConfiguration)(tree, projectName);
if (target) {
var _targets_target_options, _targets_target;
viteConfigPath = targets == null ? void 0 : (_targets_target = targets[target]) == null ? void 0 : (_targets_target_options = _targets_target.options) == null ? void 0 : _targets_target_options.configFile;
} else {
var _config_options;
const config = Object.values(targets).find((config)=>config.executor === '@nrwl/nx:build' || config.executor === '@nrwl/vite:build');
viteConfigPath = config == null ? void 0 : (_config_options = config.options) == null ? void 0 : _config_options.configFile;
}
return normalizeViteConfigFilePathWithTree(tree, root, viteConfigPath);
}
async function handleUnsupportedUserProvidedTargets(userProvidedTargetIsUnsupported, userProvidedTargetName, validFoundTargetName) {
if (userProvidedTargetIsUnsupported.build && validFoundTargetName.build) {
await handleUnsupportedUserProvidedTargetsErrors(userProvidedTargetName.build, validFoundTargetName.build, 'build', 'build');
}
if (userProvidedTargetIsUnsupported.serve && validFoundTargetName.serve) {
await handleUnsupportedUserProvidedTargetsErrors(userProvidedTargetName.serve, validFoundTargetName.serve, 'serve', 'dev-server');
}
if (userProvidedTargetIsUnsupported.test && validFoundTargetName.test) {
await handleUnsupportedUserProvidedTargetsErrors(userProvidedTargetName.test, validFoundTargetName.test, 'test', 'test');
}
}
async function handleUnsupportedUserProvidedTargetsErrors(userProvidedTargetName, validFoundTargetName, target, executor) {
_devkit.logger.warn(`The custom ${target} target you provided (${userProvidedTargetName}) cannot be converted to use the @nx/vite:${executor} executor.
However, we found the following ${target} target in your project that can be converted: ${validFoundTargetName}
Please note that converting a potentially non-compatible project to use Vite.js may result in unexpected behavior. Always commit
your changes before converting a project to use Vite.js, and test the converted project thoroughly before deploying it.
`);
const { Confirm } = require('enquirer');
const prompt = new Confirm({
name: 'question',
message: `Should we convert the ${validFoundTargetName} target to use the @nx/vite:${executor} executor?`,
initial: true
});
const shouldConvert = await prompt.run();
if (!shouldConvert) {
throw new Error(`The ${target} target ${userProvidedTargetName} cannot be converted to use the @nx/vite:${executor} executor.
Please try again, either by providing a different ${target} target or by not providing a target at all (Nx will
convert the first one it finds, most probably this one: ${validFoundTargetName})
Please note that converting a potentially non-compatible project to use Vite.js may result in unexpected behavior. Always commit
your changes before converting a project to use Vite.js, and test the converted project thoroughly before deploying it.
`);
}
}
async function handleUnknownConfiguration(projectName) {
if (process.env.NX_INTERACTIVE === 'false') {
return;
}
_devkit.logger.warn(`
We could not find any configuration in project ${projectName} that
indicates whether we can definitely convert to Vite.
If you still want to convert your project to use Vite,
please make sure to commit your changes before running this generator.
`);
const { Confirm } = require('enquirer');
const prompt = new Confirm({
name: 'question',
message: `Should Nx convert your project to use Vite?`,
initial: true
});
const shouldConvert = await prompt.run();
if (!shouldConvert) {
throw new Error(`
Nx could not verify that your project can be converted to use Vite.
Please try again with a different project.
`);
}
}
function handleViteConfigFileExists(tree, viteConfigPath, options, buildOption, buildOutDir, imports, plugins, testOption, reportsDirectory, cacheDir, projectRoot, offsetFromRoot, projectAlreadyHasViteTargets) {
if ((projectAlreadyHasViteTargets == null ? void 0 : projectAlreadyHasViteTargets.build) && (projectAlreadyHasViteTargets == null ? void 0 : projectAlreadyHasViteTargets.test)) {
return;
}
if (process.env.NX_VERBOSE_LOGGING === 'true') {
_devkit.logger.info(`vite.config.ts already exists for project ${options.project}.`);
}
var _options_rollupOptionsExternal;
const buildOptionObject = options.includeLib ? {
lib: {
entry: 'src/index.ts',
name: options.project,
fileName: 'index',
formats: [
'es'
]
},
rollupOptions: {
external: (_options_rollupOptionsExternal = options.rollupOptionsExternal) != null ? _options_rollupOptionsExternal : []
},
outDir: buildOutDir,
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true
}
} : {
outDir: buildOutDir,
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true
}
};
var _options_testEnvironment, _options_coverageProvider;
const testOptionObject = {
globals: true,
environment: (_options_testEnvironment = options.testEnvironment) != null ? _options_testEnvironment : 'jsdom',
include: [
'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
],
reporters: [
'default'
],
coverage: {
reportsDirectory: reportsDirectory,
provider: `'${(_options_coverageProvider = options.coverageProvider) != null ? _options_coverageProvider : 'v8'}'`
}
};
const changed = (0, _viteconfigeditutils.ensureViteConfigIsCorrect)(tree, viteConfigPath, buildOption, buildOptionObject, imports, plugins, testOption, testOptionObject, cacheDir, projectAlreadyHasViteTargets != null ? projectAlreadyHasViteTargets : {});
if (!changed) {
_devkit.logger.warn(`Make sure the following setting exists in your Vite configuration file (${viteConfigPath}):
${buildOption}
`);
}
}
function normalizedJoinPaths(...paths) {
const path = (0, _devkit.joinPathFragments)(...paths);
return path.startsWith('.') ? path : `./${path}`;
}
//# sourceMappingURL=generator-utils.js.map