feat(qwik-nx): setup ssg generator

Author: sebastiandg7

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "eslint.validate": ["json"],
-  "git.pullTags": false
+  "git.pullTags": false,
+  "liveServer.settings.port": 5501
 }

package.json

@@ -12,7 +12,7 @@
   },
   "private": true,
   "devDependencies": {
-    "@builder.io/qwik": "0.17.4",
+    "@builder.io/qwik": "0.17.5",
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-angular": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",

packages/qwik-nx/generators.json

@@ -58,7 +58,7 @@
     "setup-ssg": {
       "factory": "./src/generators/setup-ssg/generator",
       "schema": "./src/generators/setup-ssg/schema.json",
-      "description": "setup-ssg generator"
+      "description": "Add Static Site Generation (SSG) to a Qwik app"
     }
   }
 }

packages/qwik-nx/src/generators/setup-ssg/files/adapters/static/vite.config.ts__template__

@@ -0,0 +1,19 @@
+import { staticAdapter } from '@builder.io/qwik-city/adapters/static/vite';
+import { extendConfig } from '@builder.io/qwik-city/vite';
+import baseConfig from '../../vite.config';
+
+export default extendConfig(baseConfig, () => {
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ['@qwik-city-plan'],
+      },
+    },
+    plugins: [
+      staticAdapter({
+        origin: 'https://yoursite.qwik.dev',
+      }),
+    ],
+  };
+});

packages/qwik-nx/src/generators/setup-ssg/files/src/index.ts__template__

@@ -1,73 +1,68 @@
 import {
-  addProjectConfiguration,
   formatFiles,
-  generateFiles,
-  getWorkspaceLayout,
-  names,
-  offsetFromRoot,
+  joinPathFragments,
+  logger,
+  readProjectConfiguration,
   Tree,
+  updateProjectConfiguration,
 } from '@nrwl/devkit';
-import * as path from 'path';
-import { SetupSsgGeneratorSchema } from './schema';
-
-interface NormalizedSchema extends SetupSsgGeneratorSchema {
-  projectName: string;
-  projectRoot: string;
-  projectDirectory: string;
-  parsedTags: string[];
-}
+import { addSsgFiles } from './lib/add-ssg-files';
+import { NormalizedSchema, SetupSsgGeneratorSchema } from './schema';
 
 function normalizeOptions(
   tree: Tree,
   options: SetupSsgGeneratorSchema
 ): NormalizedSchema {
-  const name = names(options.name).fileName;
-  const projectDirectory = options.directory
-    ? `${names(options.directory).fileName}/${name}`
-    : name;
-  const projectName = projectDirectory.replace(new RegExp('/', 'g'), '-');
-  const projectRoot = `${getWorkspaceLayout(tree).libsDir}/${projectDirectory}`;
-  const parsedTags = options.tags
-    ? options.tags.split(',').map((s) => s.trim())
-    : [];
+  const project = readProjectConfiguration(tree, options.project);
+  const projectRoot = project.root;
 
   return {
     ...options,
-    projectName,
     projectRoot,
-    projectDirectory,
-    parsedTags,
   };
 }
 
-function addFiles(tree: Tree, options: NormalizedSchema) {
-  const templateOptions = {
-    ...options,
-    ...names(options.name),
-    offsetFromRoot: offsetFromRoot(options.projectRoot),
-    template: '',
-  };
-  generateFiles(
-    tree,
-    path.join(__dirname, 'files'),
-    options.projectRoot,
-    templateOptions
+export async function setupSsgGenerator(
+  tree: Tree,
+  options: SetupSsgGeneratorSchema
+) {
+  const normalizedOptions = normalizeOptions(tree, options);
+
+  const { projectRoot } = normalizedOptions;
+
+  const ssgConfigPath = joinPathFragments(
+    projectRoot,
+    'adapters',
+    'static',
+    'vite.config.ts'
   );
-}
 
-export default async function (tree: Tree, options: SetupSsgGeneratorSchema) {
-  const normalizedOptions = normalizeOptions(tree, options);
-  addProjectConfiguration(tree, normalizedOptions.projectName, {
-    root: normalizedOptions.projectRoot,
-    projectType: 'library',
-    sourceRoot: `${normalizedOptions.projectRoot}/src`,
+  if (tree.exists(ssgConfigPath)) {
+    logger.info(
+      `Skipping setup since there is an existing static adapter configuration. For more configuration, see https://qwik.builder.io/qwikcity/guides/static-site-generation/.`
+    );
+    return;
+  }
+
+  const projectConfig = readProjectConfiguration(tree, options.project);
+
+  addSsgFiles(tree, normalizedOptions);
+
+  updateProjectConfiguration(tree, options.project, {
+    ...projectConfig,
     targets: {
-      build: {
-        executor: 'qwik-nx:build',
+      ...projectConfig.targets,
+      'build-server': {
+        executor: '@nrwl/vite:build',
+        options: {
+          outputPath: 'dist/docs',
+          configFile: ssgConfigPath,
+        },
       },
     },
-    tags: normalizedOptions.parsedTags,
   });
-  addFiles(tree, normalizedOptions);
+
   await formatFiles(tree);
 }
+
+export default setupSsgGenerator;

packages/qwik-nx/src/generators/setup-ssg/generator.ts

@@ -0,0 +1,17 @@
+import { generateFiles, offsetFromRoot, Tree } from '@nrwl/devkit';
+import * as path from 'path';
+import { NormalizedSchema } from '../schema';
+
+export function addSsgFiles(tree: Tree, options: NormalizedSchema) {
+  const templateOptions = {
+    ...options,
+    offsetFromRoot: offsetFromRoot(options.projectRoot),
+    template: '',
+  };
+  generateFiles(
+    tree,
+    path.join(__dirname, '..', 'files'),
+    options.projectRoot,
+    templateOptions
+  );
+}

packages/qwik-nx/src/generators/setup-ssg/lib/add-ssg-files.ts

@@ -1,5 +1,7 @@
 export interface SetupSsgGeneratorSchema {
-  name: string;
-  tags?: string;
-  directory?: string;
+  project: string;
+}
+
+interface NormalizedSchema extends SetupSsgGeneratorSchema {
+  projectRoot: string;
 }

packages/qwik-nx/src/generators/setup-ssg/schema.d.ts

@@ -5,24 +5,18 @@
   "title": "",
   "type": "object",
   "properties": {
-    "name": {
+    "project": {
       "type": "string",
-      "description": "",
+      "description": "The name of the project to add the SSG setup for.",
+      "alias": "p",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use?"
-    },
-    "tags": {
-      "type": "string",
-      "description": "Add tags to the project (used for linting)",
-      "alias": "t"
-    },
-    "directory": {
-      "type": "string",
-      "description": "A directory where the project is placed"
+      "x-dropdown": "projects",
+      "x-prompt": "What project would you like to add the SSG setup?"
     }
   },
-  "required": ["name"]
+  "additionalProperties": false,
+  "required": ["project"]
 }

packages/qwik-nx/src/generators/setup-ssg/schema.json

@@ -7,6 +7,7 @@ import {
   nodeFetchVersion,
   qwikCityVersion,
   qwikVersion,
+  undiciVersion,
   viteTsconfigPathsVersion,
   viteVersion,
 } from './versions';
@@ -21,6 +22,7 @@ export function addCommonQwikDependencies(host: Tree): GeneratorCallback {
       vite: viteVersion,
       'vite-tsconfig-paths': viteTsconfigPathsVersion,
       'node-fetch': nodeFetchVersion,
+      undici: undiciVersion,
       // TODO: dependencies below should be setup correctly by Nx's generator, so not needed to provide them here?
       // "@types/eslint": typesEslint,
       // '@types/node': 'latest',

packages/qwik-nx/src/utils/add-common-qwik-dependencies.ts

@@ -1,8 +1,11 @@
 // qwik packages
-export const qwikVersion = '0.16.2';
-export const qwikCityVersion = '0.0.128';
+export const qwikVersion = '0.17.5';
+export const qwikCityVersion = '0.1.0';
 export const qwikEslintPluginVersion = '0.16.2';
 
+// qwik dependencies
+export const undiciVersion = '5.18.0';
+
 // css preprocessors
 export const sassVersion = '1.56.1';
 export const lessVersion = '4.1.3';