@kopflos-cms/vite 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @kopflos-cms/vite
 
+## 0.3.0
+
+### Minor Changes
+
+- c1a1f48: Plugin configuration: `root`/`entrypoints`/`outDir` options moved to `build`, which can be single object or an array. If absent, nothing will be built. This way multiple builds can be configured.
+- c1a1f48: `@kopflos-cms/vite/template.js` now does not require a previous step but loads a file provided in argument. The file path will be resolved against the correct root/build path depending on running `dev`/prod` environment
+
+### Patch Changes
+
+- c1a1f48: Plugin authors can now derive from `VitePlugin` to provide build configurations
+- c1a1f48: Build: `entrypoints` will be resolved against the `root` option of its respective build configuration
+- c1a1f48: Updated `@zazuko/env` to v3
+
 ## 0.2.2
 
 ### Patch Changes

package/index.d.ts

@@ -2,34 +2,39 @@ import type { Kopflos, KopflosEnvironment, KopflosPlugin } from '@kopflos-cms/co
 import express from 'express';
 import type { InlineConfig, ViteDevServer } from 'vite';
 export { defineConfig } from 'vite';
-export interface Options {
-    configPath?: string;
-    config?: InlineConfig;
-    root?: string;
+export interface BuildConfiguration {
+    root: string;
+    entrypoints: string[];
     outDir?: string;
-    entrypoints?: string[];
-}
-interface VitePlugin extends KopflosPlugin {
-    viteDevServer?: ViteDevServer;
 }
 declare module '@kopflos-cms/core' {
-    interface PluginConfig {
-        '@kopflos-cms/vite'?: Options;
-    }
     interface Plugins {
-        '@kopflos-cms/vite': VitePlugin;
+        '@kopflos-cms/vite': DefaultPlugin;
     }
 }
-export default class implements VitePlugin {
-    private readonly options;
-    readonly name = "@kopflos-cms/vite";
-    private readonly rootDir;
-    private readonly buildDir;
-    private readonly outDir;
-    private _viteDevServer?;
-    constructor(options: Options);
-    get viteDevServer(): ViteDevServer | undefined;
-    onStart({ env }: Kopflos): Promise<void> | void;
-    beforeMiddleware(host: express.Router, { env }: Kopflos): Promise<void>;
-    build(env: KopflosEnvironment): Promise<void>;
+export declare abstract class VitePlugin implements KopflosPlugin {
+    readonly name: string;
+    protected readonly buildConfigurations: Array<BuildConfiguration>;
+    private readonly log;
+    private _viteDevServer;
+    protected constructor(name: string, buildConfigurations: Array<BuildConfiguration>);
+    protected getDefaultPlugin(plugins: readonly KopflosPlugin[]): DefaultPlugin;
+    protected getViteDevServer(env: KopflosEnvironment, vitePlugin: DefaultPlugin, options: BuildConfiguration): Promise<ViteDevServer>;
+    private createConfig;
+    private resolveOutDir;
+    beforeMiddleware(host: express.Router, { env, plugins }: Kopflos): Promise<void>;
+    build(env: KopflosEnvironment, plugins: readonly KopflosPlugin[]): Promise<void>;
+}
+interface DefaultPluginOptions {
+    build?: Array<BuildConfiguration> | BuildConfiguration;
+    configPath?: string;
+    config?: InlineConfig;
+}
+export default class DefaultPlugin extends VitePlugin {
+    readonly config: InlineConfig | undefined;
+    readonly configPath: string | undefined;
+    readonly buildConfiguration?: BuildConfiguration;
+    constructor({ build, config, configPath }: DefaultPluginOptions);
+    protected getDefaultPlugin(): this;
+    getDefaultViteDevServer(env: KopflosEnvironment): Promise<ViteDevServer>;
 }

package/index.js

@@ -1,57 +1,96 @@
 import { resolve } from 'node:path';
 import express from 'express';
-import { build } from 'vite';
-import { createViteServer } from './lib/server.js';
+import { createServer, build } from 'vite';
+import { createLogger } from '@kopflos-cms/logger';
 import { prepareConfig } from './lib/config.js';
-import { log } from './lib/log.js';
 export { defineConfig } from 'vite';
-export default class {
-    constructor(options) {
-        this.options = options;
-        this.name = '@kopflos-cms/vite';
-        this.outDir = options.outDir || 'dist';
-        this.rootDir = options.root || '';
-        this.buildDir = this.outDir;
-    }
-    get viteDevServer() {
-        return this._viteDevServer;
-    }
-    onStart({ env }) {
-        const viteVars = {
-            basePath: resolve(env.kopflos.basePath, env.kopflos.config.mode === 'development' ? this.rootDir : this.buildDir),
-        };
-        log.info('Variables', viteVars);
-        env.kopflos.variables.VITE = Object.freeze(viteVars);
-    }
-    async beforeMiddleware(host, { env }) {
-        if (env.kopflos.config.mode === 'development') {
-            log.info('Development UI mode. Creating Vite server...');
-            const configPath = this.options.configPath
-                ? resolve(env.kopflos.basePath, this.options.configPath)
-                : this.options.configPath;
-            this._viteDevServer = await createViteServer({
-                ...this.options,
-                configPath,
-            });
-            host.use(this._viteDevServer.middlewares);
+export class VitePlugin {
+    constructor(name, buildConfigurations) {
+        this.name = name;
+        this.buildConfigurations = buildConfigurations;
+        this._viteDevServer = new WeakMap();
+        this.log = createLogger(this.name.replace(/^@kopflos-cms\//, ''));
+    }
+    getDefaultPlugin(plugins) {
+        const defaultPlugin = plugins.find(plugin => plugin instanceof DefaultPlugin);
+        if (!defaultPlugin) {
+            throw new Error('No default plugin found. Please add @kopflos-cms/vite to your plugins list');
         }
-        else {
-            const buildDir = resolve(env.kopflos.basePath, this.buildDir);
-            log.info('Serving UI from build directory');
-            log.debug('Build directory:', buildDir);
-            host.use(express.static(buildDir));
+        return defaultPlugin;
+    }
+    async getViteDevServer(env, vitePlugin, options) {
+        if (!this._viteDevServer.has(options)) {
+            const viteDevServer = await createServer(await this.createConfig(env, vitePlugin, options));
+            this._viteDevServer.set(options, viteDevServer);
         }
+        return this._viteDevServer.get(options);
     }
-    async build(env) {
-        log.info('Building UI...');
-        const outDir = resolve(env.kopflos.basePath, this.outDir);
-        const configPath = this.options.configPath
-            ? resolve(env.kopflos.basePath, this.options.configPath)
-            : this.options.configPath;
-        await build(await prepareConfig({
-            ...this.options,
+    createConfig(env, vitePlugin, options) {
+        const root = resolve(env.kopflos.basePath, options.root);
+        const outDir = this.resolveOutDir(env, options);
+        return prepareConfig({
+            ...options,
+            root,
             outDir,
-            configPath,
-        }));
+            config: vitePlugin.config,
+            configPath: vitePlugin.configPath,
+        });
+    }
+    resolveOutDir(env, options) {
+        return resolve(env.kopflos.basePath, env.kopflos.buildDir, options.outDir || '');
+    }
+    async beforeMiddleware(host, { env, plugins }) {
+        const vitePlugin = this.getDefaultPlugin(plugins);
+        for (const options of this.buildConfigurations) {
+            if (env.kopflos.config.mode === 'development') {
+                this.log.info('Development UI mode. Creating Vite server...');
+                const viteDevServer = await this.getViteDevServer(env, vitePlugin, options);
+                host.use(viteDevServer.middlewares);
+            }
+            else {
+                const buildDir = this.resolveOutDir(env, options);
+                this.log.info('Serving from build directory');
+                this.log.debug('Build directory:', buildDir);
+                host.use(express.static(buildDir));
+            }
+        }
+    }
+    async build(env, plugins) {
+        const vitePlugin = this.getDefaultPlugin(plugins);
+        for (const options of this.buildConfigurations) {
+            if (!options.entrypoints?.length) {
+                this.log.debug('No entrypoints specified. Skipping build');
+                return;
+            }
+            this.log.info('Building UI...');
+            const config = await this.createConfig(env, vitePlugin, options);
+            await build(config);
+        }
+    }
+}
+export default class DefaultPlugin extends VitePlugin {
+    constructor({ build = [], config, configPath }) {
+        if (!Array.isArray(build)) {
+            super('@kopflos-cms/vite', [build]);
+            this.buildConfiguration = build;
+        }
+        else {
+            super('@kopflos-cms/vite', build);
+            if (build.length === 1) {
+                this.buildConfiguration = build[0];
+            }
+        }
+        this.config = config;
+        this.configPath = configPath;
+    }
+    getDefaultPlugin() {
+        return this;
+    }
+    getDefaultViteDevServer(env) {
+        // only work when there is exactly one build configuration
+        if (!this.buildConfiguration) {
+            throw new Error('No build configuration found. Please add a build configuration to your vite plugin');
+        }
+        return this.getViteDevServer(env, this, this.buildConfiguration);
     }
 }

package/lib/config.d.ts

@@ -1,2 +1,8 @@
-import type { Options } from '../index.js';
-export declare function prepareConfig({ root, configPath, entrypoints, outDir, config }: Omit<Options, 'mode'>): Promise<Record<string, any>>;
+import type { InlineConfig } from 'vite';
+import type { BuildConfiguration } from '../index.js';
+type ConfigOptions = BuildConfiguration & {
+    configPath: string | undefined;
+    config: InlineConfig | undefined;
+};
+export declare function prepareConfig({ root, configPath, entrypoints, outDir, config }: ConfigOptions): Promise<Record<string, any>>;
+export {};

package/lib/config.js

@@ -10,11 +10,11 @@ export async function prepareConfig({ root, configPath, entrypoints, outDir, con
         },
     };
     if (outDir) {
-        inputConfig.build.outDir = resolve(process.cwd(), outDir);
+        inputConfig.build.outDir = resolve(root, outDir);
     }
-    if (entrypoints) {
+    if (entrypoints.length > 0) {
         inputConfig.build.rollupOptions = {
-            input: entrypoints.flatMap(entry => glob.sync(entry)),
+            input: entrypoints.flatMap(entry => glob.sync(resolve(root, entry))),
         };
     }
     if (configPath) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopflos-cms/vite",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "type": "module",
   "main": "index.js",
   "author": "Zazuko GmbH",
@@ -34,8 +34,8 @@
     "vite": "^6.4.1"
   },
   "devDependencies": {
-    "@kopflos-cms/core": "^0.6.1",
-    "@zazuko/env-node": "^2.0.0",
+    "@kopflos-cms/core": "^0.7.0",
+    "@zazuko/env-node": "^3.0.0",
     "@types/glob": "^8.1.0",
     "chai": "^5.1.1"
   },

package/template.d.ts

@@ -1,2 +1,2 @@
 import type { Kopflos, SubjectHandler } from '@kopflos-cms/core';
-export declare const transform: (this: Kopflos) => SubjectHandler;
+export declare const transform: (this: Kopflos, path: string) => SubjectHandler;

package/template.js

@@ -1,34 +1,33 @@
-import { log } from './lib/log.js';
-export const transform = function () {
+import * as fs from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { createLogger } from '@kopflos-cms/logger';
+const log = createLogger('template');
+export const transform = function (path) {
+    const vitePlugin = this.getPlugin('@kopflos-cms/vite');
     const prepareDevTemplate = async (subject, template) => {
-        const vite = this.getPlugin('@kopflos-cms/vite');
-        if (!vite?.viteDevServer) {
-            throw new Error('Vite dev server not initialized. Check vite plugin configuration.');
+        if (!vitePlugin) {
+            throw new Error('Vite plugin not found. Did you forget to add it to the config?');
         }
+        const viteDevServer = await vitePlugin.getDefaultViteDevServer(this.env);
         const subjectPath = new URL(subject.value).pathname;
-        return vite.viteDevServer.transformIndexHtml(subjectPath, template);
+        return viteDevServer.transformIndexHtml(subjectPath, template);
     };
     return async ({ subject, env }, response) => {
-        if (!isHtmlResponse(response)) {
-            throw new Error('Vite handler must be chained after another which returns a HTML response');
-        }
         if (env.kopflos.config.mode === 'production') {
-            return response;
+            const template = await fs.readFile(resolve(env.kopflos.basePath, env.kopflos.buildDir, path));
+            return {
+                status: 200,
+                body: template.toString(),
+                headers: {
+                    'Content-Type': 'text/html',
+                },
+            };
         }
         log.debug('Compiling page template');
+        const template = await fs.readFile(resolve(env.kopflos.basePath, vitePlugin.buildConfiguration.root, path));
         return {
             ...response,
-            body: await prepareDevTemplate(subject, response.body),
+            body: await prepareDevTemplate(subject, template.toString()),
         };
     };
 };
-function isHtmlResponse(response) {
-    return typeof response?.body === 'string' || hasHeader(response?.headers, 'Content-Type', 'text/html');
-}
-function hasHeader(headers, headerName, headerValue) {
-    const normalizedHeaderName = headerName.toLowerCase();
-    return !!headers && Object.entries(headers)
-        .some(([key, value]) => {
-        return key.toLowerCase() === normalizedHeaderName && (value === headerValue || (Array.isArray(value) && value.includes(headerValue)));
-    });
-}

package/lib/log.d.ts

@@ -1 +0,0 @@
-export declare const log: import("anylogger").Logger<import("anylogger").BaseLevels>;

package/lib/log.js

@@ -1,2 +0,0 @@
-import { createLogger } from '@kopflos-cms/logger';
-export const log = createLogger('vite');

package/lib/server.d.ts

@@ -1,2 +0,0 @@
-import type { Options } from '../index.js';
-export declare const createViteServer: (options: Pick<Options, "configPath" | "entrypoints">) => Promise<import("vite").ViteDevServer>;

package/lib/server.js

@@ -1,7 +0,0 @@
-import { createServer } from 'vite';
-import onetime from 'onetime';
-import { prepareConfig } from './config.js';
-export const createViteServer = onetime(async (options) => {
-    const config = await prepareConfig(options);
-    return createServer(config);
-});