From 1b8a2bc3e5d57c33a9a36392bfc449cdb81ff59b Mon Sep 17 00:00:00 2001 From: Tomasz Pluskiewicz Date: Thu, 7 Nov 2024 13:54:15 +0100 Subject: [PATCH] feat: small vite+template improvements --- .changeset/olive-carrots-fetch.md | 5 +++++ .changeset/rotten-cameras-check.md | 5 +++++ .changeset/unlucky-suns-sniff.md | 5 +++++ example/kopflos.config.ts | 3 --- example/package.json | 2 +- example/resources/api/index.ttl | 2 +- example/{ => ui}/public/foo.txt | 0 labs/html-template/index.ts | 18 ++++++++++-------- packages/core/lib/env/KopflosFactory.ts | 18 ++++++++++++------ packages/core/lib/handler.ts | 2 +- packages/vite/index.ts | 15 ++++++++++++--- 11 files changed, 52 insertions(+), 23 deletions(-) create mode 100644 .changeset/olive-carrots-fetch.md create mode 100644 .changeset/rotten-cameras-check.md create mode 100644 .changeset/unlucky-suns-sniff.md rename example/{ => ui}/public/foo.txt (100%) diff --git a/.changeset/olive-carrots-fetch.md b/.changeset/olive-carrots-fetch.md new file mode 100644 index 0000000..4aa9f69 --- /dev/null +++ b/.changeset/olive-carrots-fetch.md @@ -0,0 +1,5 @@ +--- +"@kopflos-labs/html-template": patch +--- + +By default, pass Core Representation of the page resource to template func diff --git a/.changeset/rotten-cameras-check.md b/.changeset/rotten-cameras-check.md new file mode 100644 index 0000000..f8b17b6 --- /dev/null +++ b/.changeset/rotten-cameras-check.md @@ -0,0 +1,5 @@ +--- +"@kopflos-cms/core": patch +--- + +Added `env.kopflos.variables` to allow accessing and setting variables diff --git a/.changeset/unlucky-suns-sniff.md b/.changeset/unlucky-suns-sniff.md new file mode 100644 index 0000000..58b6455 --- /dev/null +++ b/.changeset/unlucky-suns-sniff.md @@ -0,0 +1,5 @@ +--- +"@kopflos-cms/vite": patch +--- + +Serve the entire UI build statically. Before, `public` vite resources would not be accessible diff --git a/example/kopflos.config.ts b/example/kopflos.config.ts index 160da5d..71d7658 100644 --- a/example/kopflos.config.ts +++ b/example/kopflos.config.ts @@ -10,9 +10,6 @@ export default { updateUrl: 'http://localhost:7878/update', }, }, - variables: { - uiRoot: 'ui', - }, plugins: { '@kopflos-cms/plugin-deploy-resources': { paths: ['resources', 'resources.dev'], diff --git a/example/package.json b/example/package.json index b8b271f..a6c3787 100644 --- a/example/package.json +++ b/example/package.json @@ -7,7 +7,7 @@ "build": "kopflos build", "start": "kopflos serve --mode development --trust-proxy", "prestart:prod": "npm run build", - "start:prod": "kopflos serve --trust-proxy --variable uiRoot=dist" + "start:prod": "kopflos serve --trust-proxy" }, "dependencies": { "@kopflos-cms/vite": "0.0.1-beta.1", diff --git a/example/resources/api/index.ttl b/example/resources/api/index.ttl index d95f085..e01103a 100644 --- a/example/resources/api/index.ttl +++ b/example/resources/api/index.ttl @@ -36,7 +36,7 @@ PREFIX kl: [ a code:EcmaScriptModule ; code:link ; - code:arguments ( "${uiRoot}/${type}.html"^^code:EcmaScriptTemplateLiteral ) ; + code:arguments ( "${VITE.basePath}/${type}.html"^^code:EcmaScriptTemplateLiteral ) ; ] [ a code:EcmaScriptModule ; diff --git a/example/public/foo.txt b/example/ui/public/foo.txt similarity index 100% rename from example/public/foo.txt rename to example/ui/public/foo.txt diff --git a/labs/html-template/index.ts b/labs/html-template/index.ts index 70376d3..5dbaab7 100644 --- a/labs/html-template/index.ts +++ b/labs/html-template/index.ts @@ -17,7 +17,7 @@ export interface TemplateDataFunc { (context: HandlerArgs): Promise | DatasetCore | Stream } -export default function bindTemplate(evaluateTemplate: TemplateFunc, fetchData?: (...args: A) => TemplateDataFunc, ...args: A): Handler { +export default function bindTemplate(evaluateTemplate: TemplateFunc, fetchData: (...args: A) => TemplateDataFunc = coreRepresentation, ...args: A): Handler { return async (context, response) => { if (typeof response?.body !== 'string') { return new Error('Template handler must be chained after another which returns a HTML response') @@ -25,13 +25,11 @@ export default function bindTemplate(evaluateTe let dataset: DatasetCore | undefined - if (fetchData) { - const templateData = fetchData(...args)(context) - if ('then' in templateData || 'size' in templateData) { - dataset = await templateData - } else { - dataset = await context.env.dataset().import(templateData) - } + const templateData = fetchData(...args)(context) + if ('then' in templateData || 'size' in templateData) { + dataset = await templateData + } else { + dataset = await context.env.dataset().import(templateData) } const graph = context.env.clownface({ dataset }) @@ -45,3 +43,7 @@ export default function bindTemplate(evaluateTe } } } + +function coreRepresentation(): TemplateDataFunc { + return ({ subject }) => subject.dataset +} diff --git a/packages/core/lib/env/KopflosFactory.ts b/packages/core/lib/env/KopflosFactory.ts index f3931bf..7a0a132 100644 --- a/packages/core/lib/env/KopflosFactory.ts +++ b/packages/core/lib/env/KopflosFactory.ts @@ -3,15 +3,21 @@ import type { KopflosConfig } from '../Kopflos.js' export interface KopflosFactory { readonly kopflos: { readonly config: KopflosConfig + readonly variables: Record } } -export default (config: KopflosConfig) => class implements KopflosFactory { - get kopflos() { - return { - config: Object.freeze(config), +export default (config: KopflosConfig) => { + const variables = config.variables || {} + + return class implements KopflosFactory { + get kopflos() { + return { + config: Object.freeze(config), + variables, + } } - } - static exports = ['kopflos'] + static exports = ['kopflos'] + } } diff --git a/packages/core/lib/handler.ts b/packages/core/lib/handler.ts index 633b48d..5b0e5db 100644 --- a/packages/core/lib/handler.ts +++ b/packages/core/lib/handler.ts @@ -54,7 +54,7 @@ export const loadHandlers: HandlerLookup = ({ resourceShape, ...rest }: Resource .out(env.ns.kopflos.handler) .filter(matchingMethod(env, method)) - const vars = new Map(Object.entries(env.kopflos.config.variables || {})) + const vars = new Map(Object.entries(env.kopflos.variables)) if ('subjectVariables' in rest) { for (const [k, v] of rest.subjectVariables) { vars.set(k, v) diff --git a/packages/vite/index.ts b/packages/vite/index.ts index d8d0eff..68b2803 100644 --- a/packages/vite/index.ts +++ b/packages/vite/index.ts @@ -1,5 +1,5 @@ import { resolve } from 'node:path' -import type { KopflosPlugin } from '@kopflos-cms/core' +import type { Kopflos, KopflosPlugin } from '@kopflos-cms/core' import express from 'express' import { build } from 'vite' import { createViteServer } from './lib/server.js' @@ -22,7 +22,17 @@ declare module '@kopflos-cms/core' { } export default function ({ outDir = 'dist', ...options }: Options): KopflosPlugin { + const rootDir = resolve(process.cwd(), options.root || '') + const buildDir = resolve(process.cwd(), outDir) + return { + onStart({ env }: Kopflos): Promise | void { + const viteVars = { + basePath: env.kopflos.config.mode === 'development' ? rootDir : buildDir, + } + log.info('Variables', viteVars) + env.kopflos.variables.VITE = Object.freeze(viteVars) + }, async beforeMiddleware(host: express.Router, { env }) { if (env.kopflos.config.mode === 'development') { log.info('Development UI mode. Creating Vite server...') @@ -30,9 +40,8 @@ export default function ({ outDir = 'dist', ...options }: Options): KopflosPlugi host.use(viteServer.middlewares) } else { log.info('Serving UI from build directory') - const buildDir = resolve(process.cwd(), outDir) log.debug('Build directory:', buildDir) - host.use('/assets', express.static(resolve(buildDir, 'assets'))) + host.use(express.static(buildDir)) } }, async build() {