@lilaquadrat/design-core 0.2.1 → 0.3.0

package/tooling/ssr-test/index.mjs

@@ -19,10 +19,10 @@ import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
 
 const DEFAULT_PATHS = {
-  serverEntry : 'dist/server/server-entry.js',
-  manifest    : 'dist/server/.vite/ssr-manifest.json',
-  template    : 'dist/server/index.server.html',
-  mailTemplate: 'dist/server/index.mail.html',
+    serverEntry: 'dist/server/server-entry.js',
+    manifest: 'dist/server/.vite/ssr-manifest.json',
+    template: 'dist/server/index.server.html',
+    mailTemplate: 'dist/server/index.mail.html',
 };
 /**
  * the app logs its startup through mixins/logger, which is console.log - only
@@ -34,21 +34,24 @@ const VUE_WARN = '[Vue warn]';
  * mirrors RenderClass.createGenericContext: the shape the STUDIO renderer hands
  * to render(), minus the parts that only matter for asset urls.
  */
-function createContext (content, options = {}) {
-
-  return {
-    data        : content,
-    layout      : options.layout,
-    settings    : {
-      name   : content.company ? `${content.company}-${content.project}` : 'preflight',
-      company: content.company ?? 'preflight',
-      project: content.project ?? 'preflight',
-      mode   : content.settings?.mode ?? 'presentation',
-    },
-    tags        : content.tags,
-    cdn         : '',
-    renderTarget: options.renderTarget ?? 'web',
-  };
+function createContext(content, options = {}) {
+
+    return {
+        content: content,
+        layout: options.layout,
+        contextContent: options.contextContent,
+        recipient: options.recipient,
+        list: options.list,
+        editor: {
+            name: content.company ? `${content.company}-${content.project}` : 'preflight',
+            company: content.company ?? 'preflight',
+            project: content.project ?? 'preflight',
+            mode: content.settings?.mode ?? 'presentation',
+        },
+        tags: content.tags,
+        cdn: '',
+        renderTarget: options.renderTarget ?? 'web',
+    };
 
 }
 
@@ -56,26 +59,27 @@ function createContext (content, options = {}) {
  * turns a fixture into a site the renderer can address: a filename to look up
  * and a url that resolves to it, exactly as Publish.action stores one.
  */
-function createSite (name, content, options = {}) {
-  const target = options.target ?? content.target;
-  const filename = target === 'mail'
-    ? ['mail']
-    : content.settings?.filename ?? [name];
-  const site = {
-    ...content,
-    id      : content.id ?? name,
-    state   : content.state ?? 'publish',
-    settings: {
-      mode : 'presentation',
-      title: name,
-      ...content.settings,
-      filename,
-    },
-  };
-
-  if (target) site.target = target;
-
-  return { name, site, url: site.settings.url || filename[0] };
+function createSite(name, content, options = {}) {
+
+    const target = options.target ?? content.target;
+    const filename = target === 'mail'
+        ? ['mail']
+        : content.settings?.filename ?? [name];
+    const site = {
+        ...content,
+        id: content.id ?? name,
+        state: content.state ?? 'publish',
+        settings: {
+            mode: 'presentation',
+            title: name,
+            ...content.settings,
+            filename,
+        },
+    };
+
+    if (target) site.target = target;
+
+    return { name, site, url: site.settings.url || filename[0] };
 
 }
 
@@ -83,53 +87,54 @@ function createSite (name, content, options = {}) {
  * vue reports a failed serverPrefetch and an unresolved component through the
  * console rather than by rejecting, so the console is part of the assertion.
  */
-async function captureConsole (run) {
+async function captureConsole(run) {
 
-  const captured = { errors: [], warnings: [] };
-  const originalError = console.error;
-  const originalWarn = console.warn;
+    const captured = { errors: [], warnings: [] };
+    const originalError = console.error;
+    const originalWarn = console.warn;
 
-  console.error = (...args) => captured.errors.push(args.map(stringify).join(' '));
-  console.warn = (...args) => captured.warnings.push(args.map(stringify).join(' '));
+    console.error = (...args) => captured.errors.push(args.map(stringify).join(' '));
+    console.warn = (...args) => captured.warnings.push(args.map(stringify).join(' '));
 
-  try {
+    try {
 
-    const result = await run();
+        const result = await run();
 
-    return { result, captured };
+        return { result, captured };
 
-  } finally {
+    } finally {
 
-    console.error = originalError;
-    console.warn = originalWarn;
+        console.error = originalError;
+        console.warn = originalWarn;
 
-  }
+    }
 
 }
 
-function stringify (value) {
+function stringify(value) {
 
-  if (value instanceof Error) return `${value.message}\n${value.stack}`;
-  if (typeof value === 'string') return value;
+    if (value instanceof Error) return `${value.message}\n${value.stack}`;
+    if (typeof value === 'string') return value;
 
-  try {
+    try {
 
-    return JSON.stringify(value);
+        return JSON.stringify(value);
 
-  } catch {
+    } catch {
 
-    return String(value);
+        return String(value);
 
-  }
+    }
 
 }
 
-function assembleDocument (template, rendered) {
+function assembleDocument(template, rendered) {
 
-  return template
-    .replace('<!--preload-links-->', rendered.preloadLinks)
-    .replace('<!--ssr-outlet-->', rendered.html)
-    .replace('<!--pinia-state-->', `<script>window.__INITIAL_STATE__ = ${rendered.initialState}</script>`);
+    return template
+        .replace('<!--preload-links-->', rendered.preloadLinks)
+        .replace('<!--ssr-outlet-->', rendered.html)
+        .replace('<!--pinia-state-->', `<script>window.__INITIAL_STATE__ = ${rendered.initialState}</script>`)
+        .replace('</head>', `${rendered.head ?? ''}</head>`);
 
 }
 
@@ -138,13 +143,13 @@ function assembleDocument (template, rendered) {
  * convention, not a contract - a handful of modules render no wrapper at all -
  * so a miss is reported, never asserted.
  */
-function moduleMarkers (type, overrides = {}) {
+function moduleMarkers(type, overrides = {}) {
 
-  if (overrides[type]) return overrides[type];
+    if (overrides[type]) return overrides[type];
 
-  const base = type.replace(/-module$/, '');
+    const base = type.replace(/-module$/, '');
 
-  return [`lila-${base}-module`, `${base}-module`, `lila-${base}`];
+    return [`lila-${base}-module`, `${base}-module`, `lila-${base}`];
 
 }
 
@@ -154,89 +159,89 @@ function moduleMarkers (type, overrides = {}) {
  * has (a structure declaration, a payment provider) complains offline, and that
  * complaint is not a regression.
  */
-function splitAllowed (messages, allowed) {
+function splitAllowed(messages, allowed) {
 
-  const unexpected = [];
-  const expected = [];
+    const unexpected = [];
+    const expected = [];
 
-  messages.forEach((single) => {
+    messages.forEach((single) => {
 
-    if (allowed.some((pattern) => pattern.test(single))) {
+        if (allowed.some((pattern) => pattern.test(single))) {
 
-      expected.push(single);
+            expected.push(single);
 
-    } else {
+        } else {
 
-      unexpected.push(single);
+            unexpected.push(single);
 
-    }
+        }
 
-  });
+    });
 
-  return { unexpected, expected };
+    return { unexpected, expected };
 
 }
 
-function assertRendered (name, rendered, captured, options = {}) {
+function assertRendered(name, rendered, captured, options = {}) {
 
-  const allowed = options.allowedConsole ?? [];
-  const errors = splitAllowed(captured.errors, allowed);
-  const warnings = splitAllowed(
-    captured.warnings.filter((single) => single.includes(VUE_WARN)),
-    allowed,
-  );
+    const allowed = options.allowedConsole ?? [];
+    const errors = splitAllowed(captured.errors, allowed);
+    const warnings = splitAllowed(
+        captured.warnings.filter((single) => single.includes(VUE_WARN)),
+        allowed,
+    );
 
-  assert.ok(rendered, `${name}: render returned nothing`);
-  assert.equal(
-    errors.unexpected.length,
-    0,
-    `${name}: console.error during render\n${errors.unexpected.join('\n')}`,
-  );
-  assert.equal(
-    warnings.unexpected.length,
-    0,
-    `${name}: vue warnings during render\n${warnings.unexpected.join('\n')}`,
-  );
+    assert.ok(rendered, `${name}: render returned nothing`);
+    assert.equal(
+        errors.unexpected.length,
+        0,
+        `${name}: console.error during render\n${errors.unexpected.join('\n')}`,
+    );
+    assert.equal(
+        warnings.unexpected.length,
+        0,
+        `${name}: vue warnings during render\n${warnings.unexpected.join('\n')}`,
+    );
 
-  if (options.onExpected && (errors.expected.length || warnings.expected.length)) {
+    if (options.onExpected && (errors.expected.length || warnings.expected.length)) {
 
-    options.onExpected([...errors.expected, ...warnings.expected]);
+        options.onExpected([...errors.expected, ...warnings.expected]);
 
-  }
-  assert.equal(typeof rendered.html, 'string', `${name}: html is not a string`);
+    }
+    assert.equal(typeof rendered.html, 'string', `${name}: html is not a string`);
 
-  const contentMarker = options.contentMarker ?? 'lila-content-module';
+    const contentMarker = options.contentMarker ?? 'lila-content-module';
 
-  if (contentMarker) {
+    if (contentMarker) {
 
-    assert.ok(
-      rendered.html.includes(contentMarker),
-      `${name}: ${contentMarker} did not render - the page would publish as an empty shell`,
-    );
+        assert.ok(
+            rendered.html.includes(contentMarker),
+            `${name}: ${contentMarker} did not render - the page would publish as an empty shell`,
+        );
 
-  }
+    }
 
-  assert.doesNotThrow(
-    () => JSON.parse(rendered.initialState),
-    `${name}: initialState is not valid json, hydration would fail`,
-  );
+    assert.doesNotThrow(
+        () => JSON.parse(rendered.initialState),
+        `${name}: initialState is not valid json, hydration would fail`,
+    );
 
 }
 
-async function loadRenderer (root, paths) {
+async function loadRenderer(root, paths) {
 
-  const serverEntry = resolve(root, paths.serverEntry);
-  const renderer = await import(serverEntry);
+    const serverEntry = resolve(root, paths.serverEntry);
+    const renderer = await import(serverEntry);
 
-  assert.equal(typeof renderer.render, 'function', `${paths.serverEntry} does not export render()`);
+    assert.equal(typeof renderer.render, 'function', `${paths.serverEntry} does not export render()`);
 
-  return renderer;
+    return renderer;
 
 }
 
-async function loadJson (root, path) {
+async function loadJson(root, path) {
 
-  return JSON.parse(await readFile(resolve(root, path), 'utf-8'));
+    return JSON.parse(await readFile(resolve(root, path), 'utf-8'));
 
 }
 
@@ -251,140 +256,137 @@ async function loadJson (root, path) {
  * @param {RegExp[]} [options.allowedConsole] console output the project expects offline, reported instead of failed
  * @param {Record<string, string[]>} [options.markers] root markers for modules whose class does not follow from their type
  */
-export async function runSsrSuite (options) {
+export async function runSsrSuite(options) {
+
+    const root = options.root ?? process.cwd();
+    const paths = { ...DEFAULT_PATHS, ...options.paths };
+    const fixtures = options.fixtures;
+    const withVariants = options.variants !== false;
+    const allowedConsole = options.allowedConsole ?? [];
+    const markers = options.markers ?? {};
+    const renderer = await loadRenderer(root, paths);
+    const manifest = await loadJson(root, paths.manifest);
+    const template = await readFile(resolve(root, paths.template), 'utf-8');
+
+    async function render(entry, renderOptions = {}) {
+
+        return captureConsole(() => renderer.render({
+            url: entry.url,
+            context: createContext(entry.site, renderOptions),
+            manifest,
+            cdnUrl: '',
+        }));
 
-  const root = options.root ?? process.cwd();
-  const paths = { ...DEFAULT_PATHS, ...options.paths };
-  const fixtures = options.fixtures;
-  const withVariants = options.variants !== false;
-  const allowedConsole = options.allowedConsole ?? [];
-  const markers = options.markers ?? {};
-  const renderer = await loadRenderer(root, paths);
-  const manifest = await loadJson(root, paths.manifest);
-  const template = await readFile(resolve(root, paths.template), 'utf-8');
+    }
 
-  async function render (entry, renderOptions = {}) {
+    describe('ssr: viewData renders as its own site', () => {
 
-    return captureConsole(() => renderer.render(
-      entry.url,
-      createContext(entry.site, renderOptions),
-      renderOptions.contextData ?? null,
-      renderOptions.recipient ?? null,
-      renderOptions.list ?? null,
-      manifest,
-      { cdnUrl: '' },
-    ));
+        Object.entries(fixtures.viewData ?? {}).forEach(([name, content]) => {
 
-  }
+            it(name, async (t) => {
 
-  describe('ssr: viewData renders as its own site', () => {
+                if (!Array.isArray(content?.modules)) {
 
-    Object.entries(fixtures.viewData ?? {}).forEach(([name, content]) => {
+                    t.diagnostic(`${name} is not page content (no modules array) - skipped`);
+                    return;
 
-      it(name, async (t) => {
+                }
 
-        if (!Array.isArray(content?.modules)) {
+                const entry = createSite(name, content);
+                const { result, captured } = await render(entry);
 
-          t.diagnostic(`${name} is not page content (no modules array) - skipped`);
-          return;
+                assertRendered(name, result, captured, {
+                    allowedConsole,
+                    onExpected: (messages) => t.diagnostic(`${name}: expected offline complaints\n${messages.join('\n')}`),
+                });
 
-        }
+                const document = assembleDocument(template, result);
 
-        const entry = createSite(name, content);
-        const { result, captured } = await render(entry);
+                assert.ok(
+                    !document.includes('<!--ssr-outlet-->'),
+                    `${name}: the html template still holds its placeholder`,
+                );
 
-        assertRendered(name, result, captured, {
-          allowedConsole,
-          onExpected: (messages) => t.diagnostic(`${name}: expected offline complaints\n${messages.join('\n')}`),
-        });
+                content.modules.forEach((single) => {
 
-        const document = assembleDocument(template, result);
-
-        assert.ok(
-          !document.includes('<!--ssr-outlet-->'),
-          `${name}: the html template still holds its placeholder`,
-        );
+                    if (!single?.type) return;
 
-        content.modules.forEach((single) => {
+                    const found = moduleMarkers(single.type, markers).some((marker) => result.html.includes(marker));
 
-          if (!single?.type) return;
+                    if (!found) t.diagnostic(`${name}: no root marker found for ${single.type}`);
 
-          const found = moduleMarkers(single.type, markers).some((marker) => result.html.includes(marker));
+                });
 
-          if (!found) t.diagnostic(`${name}: no root marker found for ${single.type}`);
+            });
 
         });
 
-      });
-
     });
 
-  });
+    describe('ssr: every module renders with no data at all', () => {
 
-  describe('ssr: every module renders with no data at all', () => {
+        (fixtures.modules ?? []).forEach((single) => {
 
-    (fixtures.modules ?? []).forEach((single) => {
+            const type = `${single.name}-module`;
 
-      const type = `${single.name}-module`;
+            it(type, async () => {
 
-      it(type, async () => {
+                const entry = createSite(`empty-${single.name}`, {
+                    modules: [{ type, uuid: `empty-${single.name}` }],
+                });
+                const { result, captured } = await render(entry);
 
-        const entry = createSite(`empty-${single.name}`, {
-          modules: [{ type, uuid: `empty-${single.name}` }],
-        });
-        const { result, captured } = await render(entry);
+                assertRendered(type, result, captured, { allowedConsole });
 
-        assertRendered(type, result, captured, { allowedConsole });
+            });
 
-      });
+            if (!withVariants) return;
 
-      if (!withVariants) return;
+            (single.variants ?? []).forEach((variant) => {
 
-      (single.variants ?? []).forEach((variant) => {
+                if (!variant?.key) return;
 
-        if (!variant?.key) return;
+                it(`${type} [${variant.key}]`, async () => {
 
-        it(`${type} [${variant.key}]`, async () => {
+                    const entry = createSite(`empty-${single.name}-${variant.key}`, {
+                        modules: [{ type, uuid: `empty-${single.name}-${variant.key}`, variant: [variant.key] }],
+                    });
+                    const { result, captured } = await render(entry);
 
-          const entry = createSite(`empty-${single.name}-${variant.key}`, {
-            modules: [{ type, uuid: `empty-${single.name}-${variant.key}`, variant: [variant.key] }],
-          });
-          const { result, captured } = await render(entry);
+                    assertRendered(`${type} [${variant.key}]`, result, captured, { allowedConsole });
 
-          assertRendered(`${type} [${variant.key}]`, result, captured, { allowedConsole });
+                });
 
-        });
+            });
 
-      });
+        });
 
     });
 
-  });
+    if (!fixtures.mailModules?.length) return;
 
-  if (!fixtures.mailModules?.length) return;
+    describe('ssr: every mail module renders with no data at all', () => {
 
-  describe('ssr: every mail module renders with no data at all', () => {
+        fixtures.mailModules.forEach((single) => {
 
-    fixtures.mailModules.forEach((single) => {
+            const type = `${single.name}-module`;
 
-      const type = `${single.name}-module`;
+            it(type, async () => {
 
-      it(type, async () => {
+                const entry = createSite(`empty-mail-${single.name}`, {
+                    target: 'mail',
+                    modules: [{ type, uuid: `empty-mail-${single.name}` }],
+                }, { target: 'mail' });
+                const { result, captured } = await render(entry);
 
-        const entry = createSite(`empty-mail-${single.name}`, {
-          target : 'mail',
-          modules: [{ type, uuid: `empty-mail-${single.name}` }],
-        }, { target: 'mail' });
-        const { result, captured } = await render(entry);
+                assertRendered(type, result, captured, { allowedConsole });
 
-        assertRendered(type, result, captured, { allowedConsole });
+            });
 
-      });
+        });
 
     });
 
-  });
-
 }
 
 export default runSsrSuite;

package/tooling/vite.d.ts

@@ -0,0 +1,36 @@
+import type { Plugin, UserConfig, UserConfigFnObject } from 'vite';
+
+export type Target = 'local' | 'next' | 'live';
+
+export interface ViteFactoryOptions {
+  /**
+   * absolute path to the project root (the folder holding index.html)
+   */
+  root: string
+  /**
+   * project relative path to the less folder holding variables, mixins and
+   * fonts - these are the design and never ship with the package
+   */
+  lessDir?: string
+  /**
+   * project relative entry for the ssr build
+   */
+  ssrEntry?: string
+  /**
+   * project relative entry for the ssr preflight fixtures (mode ssr-test).
+   * it exports the design's viewData and module registries so the test suite
+   * can read them without a bundler of its own
+   */
+  ssrFixturesEntry?: string
+  /**
+   * additional defines merged over the framework ones
+   */
+  define?: Record<string, string>
+}
+
+export function createViteConfig (options: ViteFactoryOptions): UserConfigFnObject;
+export default createViteConfig;
+
+export function previewBundle (): Plugin;
+export function dropPreviewAssets (): Plugin;
+export function previewBuildOptions (base: UserConfig['build']): UserConfig['build'];