create-shapio 0.5.0 → 0.5.1

package/templates/sveltekit/src/lib/server/shapio.ts

@@ -1,12 +1,17 @@
 import { createClient, ShapioApiError, type DeliveryListQuery, type DeliverySite } from '@shapio/client';
+import { dev } from '$app/env';
 import type { Locale } from '../site';
 import type { Article, Page, SiteSettings } from '../types';
-import { configuredSnapshot, deliveryToken, shapioUrl, siteKey } from './config';
+import { configuredSnapshot, deliveryToken, isDraftsMode, shapioUrl, siteKey } from './config';
+import { cachedRead, cacheWindow, createSnapshotResolver } from './snapshotResolver';
 
 /**
  * The site's read side: Shapio's delivery API through `@shapio/client`, pinned to one publication snapshot
  * for the whole build. The snapshot is read once, when prerendering starts (or taken from SHAPIO_SNAPSHOT),
  * and sent with every request, so a publish during the build never yields a site that mixes old and new.
+ * Under `vite dev` the snapshot and every read are reused for a second at most, so a publish shows on reload
+ * (src/lib/server/snapshotResolver.ts). Drafts mode (SHAPIO_DRAFTS=true) reads saved drafts, which have no
+ * snapshot: no read sends one.
  */
 const PAGE_SIZE = 100;
 
@@ -20,26 +25,36 @@ const PAGE_FIELDS = ['title', 'slug', 'description', 'sections', 'seo'];
 const ARTICLE_FIELDS = ['title', 'slug', 'excerpt', 'body', 'cover', 'author', 'publishedOn', 'seo'];
 const SITE_SETTINGS_FIELDS = ['siteName', 'tagline', 'footer', 'colophon'];
 
-const createShapio = () => createClient({ baseUrl: shapioUrl(), token: deliveryToken(), site: siteKey() });
+const createShapio = () =>
+  createClient({ baseUrl: shapioUrl(), token: deliveryToken(), site: siteKey(), drafts: isDraftsMode() });
 
 let client: ReturnType<typeof createShapio> | undefined;
 const shapio = () => (client ??= createShapio());
 
-let pinned: Promise<number> | undefined;
+let resolver: (() => Promise<number>) | undefined;
 
-/** The snapshot every request of this build reads. */
-const snapshot = (): Promise<number> =>
-  (pinned ??= (async () => configuredSnapshot() ?? (await shapio().snapshots.current()).snapshot)());
+/**
+ * The snapshot every request reads: one for the whole build; in dev, the current one (re-read after 1 s); in
+ * drafts mode, none (drafts cannot be pinned).
+ */
+const snapshot = async (): Promise<number | undefined> =>
+  isDraftsMode()
+    ? undefined
+    : (resolver ??= createSnapshotResolver({
+        dev,
+        configured: configuredSnapshot(),
+        current: async () => (await shapio().snapshots.current()).snapshot,
+      }))();
 
-/** Each collection is read once per locale, however many pages render from it. */
-const memo = new Map<string, Promise<unknown>>();
+/** Each collection is read once per locale however many pages render from it (in dev, at most 1 s apart). */
+const memo = new Map<string, () => Promise<unknown>>();
 const once = <T>(key: string, read: () => Promise<T>): Promise<T> => {
-  let value = memo.get(key) as Promise<T> | undefined;
-  if (!value) {
-    value = read();
-    memo.set(key, value);
+  let cached = memo.get(key) as (() => Promise<T>) | undefined;
+  if (!cached) {
+    cached = cachedRead(read, cacheWindow(dev));
+    memo.set(key, cached);
   }
-  return value;
+  return cached();
 };
 
 /** Every published entry of a collection in one locale, page by page, at the pinned snapshot. */

package/templates/sveltekit/src/lib/server/snapshotResolver.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it, vi } from 'vitest';
+import { cachedRead, createSnapshotResolver, DEV_WINDOW_MS } from './snapshotResolver';
+
+const clock = (start = 0) => {
+  let time = start;
+  return { now: () => time, advance: (ms: number) => (time += ms) };
+};
+
+describe('createSnapshotResolver', () => {
+  it('pins the first snapshot for the whole build', async () => {
+    const { now, advance } = clock();
+    const current = vi.fn().mockResolvedValueOnce(7).mockResolvedValue(8);
+    const snapshot = createSnapshotResolver({ dev: false, configured: undefined, current, now });
+
+    expect(await snapshot()).toBe(7);
+    advance(60 * 60 * 1000);
+    expect(await snapshot()).toBe(7);
+    expect(current).toHaveBeenCalledTimes(1);
+  });
+
+  it('reuses a dev read within the window and reads the current snapshot again after it', async () => {
+    const { now, advance } = clock();
+    const current = vi.fn().mockResolvedValueOnce(7).mockResolvedValue(8);
+    const snapshot = createSnapshotResolver({ dev: true, configured: undefined, current, now });
+
+    expect(await snapshot()).toBe(7);
+    advance(DEV_WINDOW_MS - 1);
+    expect(await snapshot()).toBe(7);
+    expect(current).toHaveBeenCalledTimes(1);
+
+    advance(1);
+    expect(await snapshot()).toBe(8);
+    expect(current).toHaveBeenCalledTimes(2);
+  });
+
+  it('keeps SHAPIO_SNAPSHOT in dev and in builds, without asking Shapio', async () => {
+    const current = vi.fn().mockResolvedValue(8);
+    for (const dev of [true, false]) {
+      const snapshot = createSnapshotResolver({ dev, configured: 3, current });
+      expect(await snapshot()).toBe(3);
+    }
+    expect(current).not.toHaveBeenCalled();
+  });
+});
+
+describe('cachedRead', () => {
+  it('shares one read between calls that overlap it', async () => {
+    const read = vi.fn().mockResolvedValue('value');
+    const cached = cachedRead(read, DEV_WINDOW_MS, clock().now);
+
+    const [first, second] = await Promise.all([cached(), cached()]);
+    expect([first, second]).toEqual(['value', 'value']);
+    expect(read).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not keep a failed read', async () => {
+    const read = vi.fn().mockRejectedValueOnce(new Error('down')).mockResolvedValue('value');
+    const cached = cachedRead(read, Number.POSITIVE_INFINITY, clock().now);
+
+    await expect(cached()).rejects.toThrow('down');
+    expect(await cached()).toBe('value');
+    expect(read).toHaveBeenCalledTimes(2);
+  });
+});

package/templates/sveltekit/src/lib/server/snapshotResolver.ts

@@ -0,0 +1,52 @@
+/**
+ * Which publication snapshot the site reads, and for how long a read is reused. A build pins one snapshot
+ * for all its pages (SHAPIO_SNAPSHOT, else the current one when the build starts). The dev server reads the
+ * current snapshot again once the last read is older than DEV_WINDOW_MS, so a publish shows on reload while
+ * the reads of one page render still share a snapshot.
+ */
+export const DEV_WINDOW_MS = 1000;
+
+/** How long a cached read is reused: for the whole process in a build, DEV_WINDOW_MS in dev. */
+export const cacheWindow = (dev: boolean): number => (dev ? DEV_WINDOW_MS : Number.POSITIVE_INFINITY);
+
+/** `read`, reused for `windowMs` after it starts. A read that fails is not kept: the next call tries again. */
+export const cachedRead = <T>(
+  read: () => Promise<T>,
+  windowMs: number,
+  now: () => number = Date.now,
+): (() => Promise<T>) => {
+  let cached: { value: Promise<T>; at: number } | undefined;
+  return () => {
+    const at = now();
+    if (cached && at - cached.at < windowMs) {
+      return cached.value;
+    }
+    const entry = { value: read(), at };
+    cached = entry;
+    entry.value.catch(() => {
+      if (cached === entry) {
+        cached = undefined;
+      }
+    });
+    return entry.value;
+  };
+};
+
+type SnapshotResolverOptions = {
+  /** True under the dev server. */
+  dev: boolean;
+  /** SHAPIO_SNAPSHOT: when set, the site shows exactly this snapshot, in dev too. */
+  configured: number | undefined;
+  /** Reads Shapio's current publication snapshot. */
+  current: () => Promise<number>;
+  now?: () => number;
+};
+
+/** The snapshot every delivery read sends. */
+export const createSnapshotResolver = ({
+  dev,
+  configured,
+  current,
+  now,
+}: SnapshotResolverOptions): (() => Promise<number>) =>
+  configured === undefined ? cachedRead(current, cacheWindow(dev), now) : () => Promise.resolve(configured);

package/templates/sveltekit/src/lib/site.css

@@ -197,3 +197,17 @@ main {
   text-align: center;
   font-weight: 600;
 }
+/* Drafts mode (SHAPIO_DRAFTS=true): a corner badge, so a drafts build is never mistaken for the real site. */
+.drafts-badge {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 10;
+  margin: 0;
+  background: #78350f;
+  color: #fef3c7;
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 700;
+}

package/templates/sveltekit/src/lib/site.ts

@@ -19,6 +19,8 @@ const STRINGS = {
     by: 'By',
     switchTo: 'Français',
     skipToContent: 'Skip to content',
+    drafts: 'Drafts',
+    draftsNote: 'Drafts mode: this server shows saved drafts, not the published site.',
     footer: 'Built with Shapio',
     previewBanner: 'Preview: this is a draft, not the published page.',
     previewLoading: 'Loading the draft…',
@@ -32,6 +34,8 @@ const STRINGS = {
     by: 'Par',
     switchTo: 'English',
     skipToContent: 'Aller au contenu',
+    drafts: 'Brouillons',
+    draftsNote: 'Mode brouillons : ce serveur montre les brouillons enregistrés, pas le site publié.',
     footer: 'Construit avec Shapio',
     previewBanner: 'Aperçu : ceci est un brouillon, pas la page publiée.',
     previewLoading: 'Chargement du brouillon…',

package/templates/sveltekit/src/routes/[locale]/+layout.server.ts

@@ -1,12 +1,12 @@
 import { error } from '@sveltejs/kit';
-import { siteUrl } from '#lib/server/config.ts';
+import { isDraftsMode, siteUrl } from '#lib/server/config.ts';
 import { getSite, getSiteSettings } from '#lib/server/shapio.ts';
 import { isLocale, stringsFor } from '#lib/site.ts';
 import type { LayoutServerLoad } from './$types';
 
 /**
  * The locale's site settings (the siteSettings singleton) and UI strings, for the header and footer; the site's
- * SEO defaults and public URL, for every page's <head>.
+ * SEO defaults and public URL, for every page's <head>; whether drafts mode is on, for its badge.
  */
 export const load: LayoutServerLoad = async ({ params }) => {
   if (!isLocale(params.locale)) {
@@ -18,5 +18,6 @@ export const load: LayoutServerLoad = async ({ params }) => {
     settings: await getSiteSettings(params.locale),
     site: await getSite(),
     siteUrl: siteUrl() ?? null,
+    drafts: isDraftsMode(),
   };
 };

package/templates/sveltekit/src/routes/[locale]/+layout.svelte

@@ -28,5 +28,8 @@
 <footer class="site-footer">
   <p>{siteName} · {data.settings?.footer ?? data.strings.footer} · SvelteKit</p>
 </footer>
+{#if data.drafts}
+  <p class="drafts-badge" title={data.strings.draftsNote} data-shapio-drafts="">{data.strings.drafts}</p>
+{/if}
 <!-- Visual editing (@shapio/visual) plugs in here: its script and the data-shapio attributes on content arrive
      with Shapio's visual-editing SDK, together with draft preview. -->