@caretcms/core 0.3.0 → 0.4.0

package/static/cms/studio/sync-client.js

@@ -0,0 +1,107 @@
+import { deepClone } from './field-model.js';
+
+const SYNC_CHANNEL = 'caretcms:content';
+
+/** @typedef {{ postMessage: (message: unknown) => void, addEventListener: (type: 'message', listener: (event: MessageEvent) => void) => void, close: () => void }} Channel */
+
+/**
+ * @param {{
+ *   collection: string,
+ *   id: string,
+ *   previewPath: string | null,
+ *   origin: string,
+ *   isEmbedded: boolean,
+ *   studioPath: () => string,
+ *   postToParent: (message: unknown) => void,
+ *   onSelection: (message: Record<string, unknown>) => void,
+ *   addWindowMessageListener: (listener: (event: MessageEvent) => void) => void,
+ *   addPagehideListener: (listener: () => void) => void,
+ *   openChannel?: (name: string) => Channel,
+ *   schedule?: (callback: () => void, delay: number) => number,
+ *   cancel?: (timer: number) => void,
+ *   now?: () => number,
+ * }} options
+ */
+export function createStudioSync(options) {
+  const {
+    collection, id, previewPath, origin, isEmbedded, studioPath,
+    postToParent, onSelection, addWindowMessageListener, addPagehideListener,
+    openChannel, schedule = (callback, delay) => window.setTimeout(callback, delay),
+    cancel = timer => window.clearTimeout(timer), now = Date.now,
+  } = options;
+  let previewTimer = 0;
+  /** @type {Channel | null} */
+  let channel = null;
+
+  if (openChannel) {
+    try {
+      channel = openChannel(SYNC_CHANNEL);
+      channel.addEventListener('message', event => {
+        const message = event.data;
+        if (message && typeof message === 'object' && message.type === 'cms:field-selected') {
+          onSelection(message);
+        }
+      });
+      addPagehideListener(() => channel?.close());
+    } catch {
+      channel = null;
+    }
+  }
+
+  addWindowMessageListener(event => {
+    const message = event.data;
+    if (event.origin === origin && message && typeof message === 'object'
+      && message.type === 'cms:field-selected') {
+      onSelection(message);
+    }
+  });
+
+  /** @param {unknown} data */
+  function queuePreview(data) {
+    if (!isEmbedded || !data) return;
+    if (previewTimer) cancel(previewTimer);
+    previewTimer = schedule(() => {
+      try {
+        postToParent({
+          type: 'cms:preview', collection, id, data: deepClone(data),
+          embedded: true, studioPath: studioPath(),
+        });
+      } catch {
+        // Visual preview is a progressive enhancement.
+      }
+    }, 80);
+  }
+
+  /** @param {string} type @param {unknown} data */
+  function announceChange(type, data) {
+    const message = {
+      type, collection, id, data: data ? deepClone(data) : null,
+      embedded: isEmbedded, studioPath: studioPath(), savedAt: now(),
+    };
+    if (isEmbedded) {
+      try { postToParent(message); } catch { /* Progressive enhancement. */ }
+    }
+    try { channel?.postMessage(message); } catch { /* Progressive enhancement. */ }
+  }
+
+  /** @param {string} path */
+  function announceFieldSelection(path) {
+    const message = {
+      type: 'cms:field-selected', collection, id, field: path,
+      source: 'studio', previewPath,
+    };
+    if (isEmbedded) {
+      try { postToParent({ ...message, embedded: true }); } catch { /* Progressive enhancement. */ }
+      return;
+    }
+    try { channel?.postMessage(message); } catch { /* Progressive enhancement. */ }
+  }
+
+  function announceReady() {
+    if (!isEmbedded) return;
+    try { postToParent({ type: 'cms:entry-ready', collection, id, embedded: true }); }
+    catch { /* Progressive enhancement. */ }
+  }
+
+  return { queuePreview, announceChange, announceFieldSelection, announceReady };
+}

package/static/cms/studio/upload-client.js

@@ -0,0 +1,109 @@
+const IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/webp', 'image/avif']);
+
+export class StudioUploadError extends Error {
+  /** @param {'unauthorized' | 'failed' | 'invalid-response'} kind */
+  constructor(kind) {
+    super(kind === 'unauthorized' ? 'Unauthorized' : 'Upload failed');
+    this.name = 'StudioUploadError';
+    this.kind = kind;
+  }
+}
+
+/** @param {{ type?: string }} file */
+export function isSupportedImage(file) {
+  return IMAGE_TYPES.has(file.type || '');
+}
+
+/**
+ * @param {{
+ *   apiBasePath: string,
+ *   fetchImpl?: typeof fetch,
+ *   createBitmap?: typeof createImageBitmap,
+ *   createCanvas?: () => HTMLCanvasElement,
+ *   onUnauthorized?: () => void,
+ * }} options
+ */
+export function createStudioUploadClient({
+  apiBasePath,
+  fetchImpl = fetch,
+  createBitmap = file => createImageBitmap(file),
+  createCanvas = () => document.createElement('canvas'),
+  onUnauthorized = () => {},
+}) {
+  /** @param {File} file @param {number} [maxWidth] @param {number} [quality] */
+  async function compress(file, maxWidth = 1600, quality = 0.82) {
+    if (file.size < 200000 && file.type === 'image/webp') return file;
+    const bitmap = await createBitmap(file);
+    let width = bitmap.width;
+    let height = bitmap.height;
+    const needsResize = width > maxWidth;
+    if (file.type === 'image/png' && !needsResize) {
+      bitmap.close();
+      return file;
+    }
+    if (needsResize) {
+      height = Math.round((height * maxWidth) / width);
+      width = maxWidth;
+    }
+    const canvas = createCanvas();
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d');
+    if (!context) {
+      bitmap.close();
+      return file;
+    }
+    context.drawImage(bitmap, 0, 0, width, height);
+    bitmap.close();
+    const isPng = file.type === 'image/png';
+    const outputType = isPng ? 'image/png' : 'image/webp';
+    return new Promise(resolve => {
+      canvas.toBlob(blob => {
+        if (!blob || blob.size >= file.size) return resolve(file);
+        const extension = isPng ? '.png' : '.webp';
+        resolve(new File([blob], file.name.replace(/\.[^.]+$/, extension), { type: outputType }));
+      }, outputType, isPng ? undefined : quality);
+    });
+  }
+
+  /** @param {File} file */
+  async function readDimensions(file) {
+    try {
+      const bitmap = await createBitmap(file);
+      let width = bitmap.width;
+      let height = bitmap.height;
+      bitmap.close();
+      if (width > 1600) {
+        height = Math.round((height * 1600) / width);
+        width = 1600;
+      }
+      return { width, height };
+    } catch {
+      return null;
+    }
+  }
+
+  /** @param {File} file */
+  async function upload(file) {
+    const form = new FormData();
+    form.append('file', await compress(file));
+    const response = await fetchImpl(`${apiBasePath}/upload`, {
+      method: 'POST',
+      body: form,
+      headers: { 'x-caret-request': '1' },
+      credentials: 'same-origin',
+    });
+    if (response.status === 401) {
+      onUnauthorized();
+      throw new StudioUploadError('unauthorized');
+    }
+    if (!response.ok) throw new StudioUploadError('failed');
+    const body = await response.json().catch(() => null);
+    if (!body || typeof body !== 'object' || !('url' in body) || typeof body.url !== 'string') {
+      throw new StudioUploadError('invalid-response');
+    }
+    return body.url;
+  }
+
+  return { compress, readDimensions, upload };
+}