fix: update config for application generator (#19)

Author: dmitry-stepanenko

package.json

@@ -16,15 +16,15 @@
     "@commitlint/config-angular": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
     "@jscutlery/semver": "^2.29.0",
-    "@nrwl/cli": "15.3.0",
-    "@nrwl/devkit": "15.3.0",
-    "@nrwl/eslint-plugin-nx": "15.3.0",
-    "@nrwl/jest": "15.3.0",
-    "@nrwl/js": "15.3.0",
-    "@nrwl/linter": "15.3.0",
-    "@nrwl/nx-plugin": "^15.3.0",
-    "@nrwl/vite": "15.3.0",
-    "@nrwl/workspace": "15.3.0",
+    "@nrwl/cli": "15.4.0",
+    "@nrwl/devkit": "15.4.0",
+    "@nrwl/eslint-plugin-nx": "15.4.0",
+    "@nrwl/jest": "15.4.0",
+    "@nrwl/js": "15.4.0",
+    "@nrwl/linter": "15.4.0",
+    "@nrwl/nx-plugin": "^15.4.0",
+    "@nrwl/vite": "15.4.0",
+    "@nrwl/workspace": "15.4.0",
     "@swc-node/register": "^1.4.2",
     "@swc/cli": "~0.1.55",
     "@swc/core": "^1.2.173",
@@ -43,7 +43,7 @@
     "jest-environment-jsdom": "28.1.1",
     "jsonc-eslint-parser": "^2.1.0",
     "ngx-deploy-npm": "^4.3.9",
-    "nx": "15.3.0",
+    "nx": "15.4.0",
     "prettier": "^2.8.0",
     "pretty-quick": "^3.1.3",
     "ts-jest": "28.0.5",

packages/qwik-nx/package.json

@@ -21,6 +21,6 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "dependencies": {
-    "@nrwl/vite": "~15.3.0"
+    "@nrwl/vite": "~15.4.0"
   }
 }

packages/qwik-nx/src/generators/application/files/.eslintrc.json__template__

@@ -1,13 +1,13 @@
 {
   "extends": [
-    "<%= offsetFromRoot %>.eslintrc.json",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:qwik/recommended"
+    "plugin:qwik/recommended",
+    "<%= offsetFromRoot %>.eslintrc.json"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": ["<%= appProjectRoot %>/tsconfig.*?.json"],
+    "project": ["<%= projectRoot %>/tsconfig.*?.json"],
     "ecmaVersion": 2021,
     "sourceType": "module",
     "ecmaFeatures": {

packages/qwik-nx/src/generators/application/files/.gitignore__template__

@@ -0,0 +1,3 @@
+{
+    "name": "<%= name %>"
+}

packages/qwik-nx/src/generators/application/files/package.json__template__

@@ -1,21 +1,27 @@
-<% if(setupVitest) { %>
-/// <reference types="vitest" />
-<% } %>
+<% if(setupVitest) { %> /// <reference types="vitest" /> <% } %>
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
+  plugins: [
+    qwikCity(), 
+    qwikVite({
+			client: {
+				outDir: '<%= offsetFromRoot %>dist/<%= projectRoot %>/client',
+			},
+			ssr: {
+				outDir: '<%= offsetFromRoot %>dist/<%= projectRoot %>/server',
+			},
+		}),
+    tsconfigPaths()
+  ],
   preview: {
     headers: {
       'Cache-Control': 'public, max-age=600',
     },
   },
-  server: {
-    open: true
-  },
   <% if(setupVitest) { %> test: {
     globals: true,
     cache: {
@@ -24,7 +30,7 @@ export default defineConfig({
     environment: 'node',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     coverage: {
-      reportsDirectory: '<%= offsetFromRoot %>coverage/<%= appProjectRoot %>'
+      reportsDirectory: '<%= offsetFromRoot %>coverage/<%= projectRoot %>'
     }
   }
   <% } %>

packages/qwik-nx/src/generators/application/files/vite.config.ts__template__

@@ -5,9 +5,7 @@ import {
   GeneratorCallback,
   joinPathFragments,
   names,
-  readProjectConfiguration,
   Tree,
-  updateProjectConfiguration,
 } from '@nrwl/devkit';
 import { NormalizedSchema, normalizeOptions } from './utils/normalize-options';
 import { viteConfigurationGenerator } from '@nrwl/vite';
@@ -17,6 +15,7 @@ import { addStyledModuleDependencies } from '../../utils/add-styled-dependencies
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
 import { configureEslint } from '../../utils/configure-eslint';
 import { addCommonQwikDependencies } from '../../utils/add-common-qwik-dependencies';
+import { updateQwikApplicationProjectParams } from './utils/update-qwik-application-project-params';
 
 function addFiles(tree: Tree, options: NormalizedSchema) {
   const templateOptions = {
@@ -27,7 +26,7 @@ function addFiles(tree: Tree, options: NormalizedSchema) {
   generateFiles(
     tree,
     joinPathFragments(__dirname, 'files'),
-    options.appProjectRoot,
+    options.projectRoot,
     templateOptions
   );
 }
@@ -36,10 +35,7 @@ async function configureVite(
   tree: Tree,
   options: NormalizedSchema
 ): Promise<GeneratorCallback> {
-  const tsConfigPath = joinPathFragments(
-    options.appProjectRoot,
-    'tsconfig.json'
-  );
+  const tsConfigPath = joinPathFragments(options.projectRoot, 'tsconfig.json');
   const tsConfig = tree.read(tsConfigPath);
   const includeVitest = options.unitTestRunner === 'vitest';
 
@@ -51,17 +47,12 @@ async function configureVite(
     uiFramework: 'none',
     inSourceTests: false,
   });
-  tree.delete(joinPathFragments(options.appProjectRoot, 'index.html'));
+  tree.delete(joinPathFragments(options.projectRoot, 'index.html'));
 
   // overwrite tsconfig back after "viteConfigurationGenerator"
   tree.write(tsConfigPath, tsConfig);
 
-  if (includeVitest) {
-    const projectConfig = readProjectConfiguration(tree, options.projectName);
-    const testTarget = projectConfig.targets['test'];
-    testTarget.outputs = ['{workspaceRoot}/coverage/{projectRoot}'];
-    updateProjectConfiguration(tree, options.projectName, projectConfig);
-  }
+  updateQwikApplicationProjectParams(tree, options);
 
   return callback;
 }
@@ -71,12 +62,12 @@ export default async function (tree: Tree, options: QwikAppGeneratorSchema) {
   const tasks: GeneratorCallback[] = [];
 
   addProjectConfiguration(tree, normalizedOptions.projectName, {
-    root: normalizedOptions.appProjectRoot,
+    root: normalizedOptions.projectRoot,
     name: normalizedOptions.projectName,
     projectType: 'application',
-    sourceRoot: `${normalizedOptions.appProjectRoot}/src`,
-    // TODO: revisit later, now "viteConfigurationGenerator" will fail if there's no build target specified
-    targets: { build: { options: {} } },
+    sourceRoot: `${normalizedOptions.projectRoot}/src`,
+    // TODO: revisit later, @nrwl/vite configuration will throw if no relevant targets found
+    targets: { build: { executor: '@nrwl/webpack:webpack', options: {} } },
     tags: normalizedOptions.parsedTags,
   });
 

packages/qwik-nx/src/generators/application/generator.ts

@@ -10,7 +10,7 @@ import { getRelativePathToRootTsConfig } from '@nrwl/workspace/src/utilities/typ
 
 export interface NormalizedSchema extends QwikAppGeneratorSchema {
   projectName: string;
-  appProjectRoot: string;
+  projectRoot: string;
   offsetFromRoot: string;
   rootTsConfigPath: string;
   setupVitest: boolean;
@@ -36,7 +36,7 @@ export const normalizeOptions = (
   const appProjectName = normalizeProjectName(options);
 
   const { appsDir } = getWorkspaceLayout(host);
-  const appProjectRoot = normalizePath(`${appsDir}/${appDirectory}`);
+  const projectRoot = normalizePath(`${appsDir}/${appDirectory}`);
 
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())
@@ -50,9 +50,9 @@ export const normalizeOptions = (
   return {
     ...options,
     projectName: appProjectName,
-    appProjectRoot,
-    offsetFromRoot: offsetFromRoot(appProjectRoot),
-    rootTsConfigPath: getRelativePathToRootTsConfig(host, appProjectRoot),
+    projectRoot,
+    offsetFromRoot: offsetFromRoot(projectRoot),
+    rootTsConfigPath: getRelativePathToRootTsConfig(host, projectRoot),
     styleExtension,
     setupVitest: options.unitTestRunner === 'vitest',
     parsedTags,

packages/qwik-nx/src/generators/application/utils/normalize-options.ts

@@ -0,0 +1,76 @@
+import {
+  readProjectConfiguration,
+  Tree,
+  updateProjectConfiguration,
+  TargetConfiguration,
+} from '@nrwl/devkit';
+
+export interface UpdateQwikAppConfigurationParams {
+  projectName: string;
+  projectRoot: string;
+}
+
+export function updateQwikApplicationProjectParams(
+  tree: Tree,
+  params: UpdateQwikAppConfigurationParams
+): void {
+  const projectConfig = readProjectConfiguration(tree, params.projectName);
+
+  projectConfig.targets['build'] = getBuildTarget(params);
+  projectConfig.targets['build-ssr'] = getBuildSsrTarget(params);
+  projectConfig.targets['preview'] = getPreviewTarget(params);
+
+  const serveTarget = projectConfig.targets['serve'];
+  serveTarget.options['mode'] = 'ssr';
+
+  const testTarget = projectConfig.targets['test'];
+  if (testTarget?.executor === '@nrwl/vite:test') {
+    testTarget.outputs = ['{workspaceRoot}/coverage/{projectRoot}'];
+  }
+
+  updateProjectConfiguration(tree, params.projectName, projectConfig);
+}
+
+function getBuildTarget(
+  params: UpdateQwikAppConfigurationParams
+): TargetConfiguration {
+  return {
+    executor: '@nrwl/vite:build',
+    options: {
+      outputPath: `dist/${params.projectRoot}`,
+      configFile: `${params.projectRoot}/vite.config.ts`,
+    },
+  };
+}
+
+function getBuildSsrTarget(
+  params: UpdateQwikAppConfigurationParams
+): TargetConfiguration {
+  return {
+    executor: '@nrwl/vite:build',
+    defaultConfiguration: 'preview',
+    options: {
+      outputPath: `dist/${params.projectRoot}`,
+    },
+    configurations: {
+      preview: {
+        ssr: 'src/entry.preview.tsx',
+        mode: 'production',
+      },
+    },
+    dependsOn: ['build'],
+  };
+}
+
+function getPreviewTarget(
+  params: UpdateQwikAppConfigurationParams
+): TargetConfiguration {
+  return {
+    executor: 'nx:run-commands',
+    options: {
+      command: 'vite preview',
+      cwd: `${params.projectRoot}`,
+    },
+    dependsOn: ['build-ssr'],
+  };
+}

packages/qwik-nx/src/generators/application/utils/update-qwik-application-project-params.ts

@@ -1,9 +1,9 @@
 {
   "extends": [
-    "<%= offsetFromRoot %>.eslintrc.json",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:qwik/recommended"
+    "plugin:qwik/recommended",
+    "<%= offsetFromRoot %>.eslintrc.json",
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {