@typecms/sdk 0.1.0

package/dist/preview/vue.mjs

@@ -0,0 +1,587 @@
+// src/preview/vue.ts
+import {
+  shallowRef,
+  computed,
+  inject,
+  toValue
+} from "vue";
+
+// src/preview/client.ts
+var DEFAULT_ALLOWED_ORIGINS = [
+  "https://app.typecms.com",
+  "https://staging.typecms.com",
+  "http://localhost:3000",
+  "http://localhost:3001"
+];
+function createPreviewClient(config = {}) {
+  const {
+    allowedOrigins = DEFAULT_ALLOWED_ORIGINS,
+    onInit,
+    onUpdate,
+    onNavigate,
+    onFocus,
+    debug = false
+  } = config;
+  let state = {
+    enabled: false,
+    entryId: null,
+    projectId: null,
+    locale: null,
+    typeId: null,
+    values: {},
+    focusedPath: null
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  let isConnected = false;
+  let parentOrigin = null;
+  function log(...args) {
+    if (debug) {
+      console.log("[TypeCMS Preview]", ...args);
+    }
+  }
+  function setState(updates) {
+    state = { ...state, ...updates };
+    listeners.forEach((listener) => listener(state));
+  }
+  function isAllowedOrigin(origin) {
+    return allowedOrigins.some((allowed) => {
+      if (allowed === "*") return true;
+      const expected = allowed.endsWith("/*") ? allowed.slice(0, -2) : allowed;
+      return origin === expected;
+    });
+  }
+  function sendMessage(message) {
+    if (!parentOrigin) {
+      log("Cannot send message: no parent origin");
+      return;
+    }
+    if (typeof window === "undefined" || !window.parent) {
+      log("Cannot send message: not in iframe");
+      return;
+    }
+    log("Sending message:", message.type);
+    window.parent.postMessage(message, parentOrigin);
+  }
+  function handleMessage(event) {
+    if (!isAllowedOrigin(event.origin)) {
+      log("Ignored message from untrusted origin:", event.origin);
+      return;
+    }
+    const message = event.data;
+    if (!message?.type?.startsWith("typecms:preview:")) {
+      return;
+    }
+    log("Received message:", message.type, message);
+    parentOrigin = event.origin;
+    switch (message.type) {
+      case "typecms:preview:init": {
+        const initMsg = message;
+        setState({
+          enabled: true,
+          entryId: initMsg.payload.entryId,
+          projectId: initMsg.payload.projectId,
+          locale: initMsg.payload.locale,
+          typeId: initMsg.payload.typeId,
+          values: {},
+          focusedPath: null
+        });
+        onInit?.(initMsg.payload);
+        const readyMessage = {
+          type: "typecms:preview:ready",
+          timestamp: Date.now(),
+          payload: {
+            pathname: typeof window !== "undefined" ? window.location.pathname : "/"
+          }
+        };
+        sendMessage(readyMessage);
+        break;
+      }
+      case "typecms:preview:update": {
+        const updateMsg = message;
+        if (updateMsg.payload.values) {
+          setState({ values: updateMsg.payload.values });
+        } else {
+          const newValues = { ...state.values };
+          setNestedValue(newValues, updateMsg.payload.path, updateMsg.payload.value);
+          setState({ values: newValues });
+        }
+        onUpdate?.(updateMsg.payload);
+        break;
+      }
+      case "typecms:preview:navigate": {
+        onNavigate?.(message.payload.url);
+        break;
+      }
+      case "typecms:preview:focus": {
+        setState({ focusedPath: message.payload.path });
+        onFocus?.(message.payload.path);
+        break;
+      }
+    }
+  }
+  return {
+    /**
+     * Start listening for preview messages.
+     * Call this on mount.
+     */
+    connect() {
+      if (typeof window === "undefined") {
+        log("Cannot connect: not in browser");
+        return;
+      }
+      if (isConnected) {
+        log("Already connected");
+        return;
+      }
+      log("Connecting...");
+      window.addEventListener("message", handleMessage);
+      isConnected = true;
+      if (window.parent && window.parent !== window) {
+        const hello = {
+          type: "typecms:preview:ready",
+          timestamp: Date.now(),
+          payload: { pathname: window.location?.pathname ?? "/" }
+        };
+        for (const allowed of allowedOrigins) {
+          const target = allowed === "*" ? "*" : allowed.endsWith("/*") ? allowed.slice(0, -2) : allowed;
+          try {
+            window.parent.postMessage(hello, target);
+          } catch {
+          }
+        }
+      }
+    },
+    /**
+     * Stop listening for preview messages.
+     * Call this on unmount.
+     */
+    disconnect() {
+      if (typeof window === "undefined") return;
+      log("Disconnecting...");
+      window.removeEventListener("message", handleMessage);
+      isConnected = false;
+      parentOrigin = null;
+      setState({
+        enabled: false,
+        entryId: null,
+        projectId: null,
+        locale: null,
+        typeId: null,
+        values: {},
+        focusedPath: null
+      });
+    },
+    /**
+     * Get current preview state.
+     */
+    getState() {
+      return state;
+    },
+    /**
+     * Check if preview mode is active.
+     */
+    isEnabled() {
+      return state.enabled;
+    },
+    /**
+     * Get a preview value by path.
+     * Returns undefined if no preview value exists.
+     */
+    getValue(path) {
+      return getNestedValue(state.values, path);
+    },
+    /**
+     * Subscribe to state changes.
+     */
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    /**
+     * Notify the editor that the preview has navigated.
+     */
+    notifyNavigation(pathname) {
+      const message = {
+        type: "typecms:preview:ready",
+        timestamp: Date.now(),
+        payload: { pathname }
+      };
+      sendMessage(message);
+    },
+    /**
+     * Notify the editor that a field was clicked in the preview.
+     * The editor will scroll to the corresponding field.
+     *
+     * @example
+     * ```typescript
+     * // On click of an element with data-preview-field attribute:
+     * const path = el.closest('[data-preview-field]')?.dataset.previewField
+     * if (path) preview.notifyFieldFocus(path)
+     * ```
+     */
+    notifyFieldFocus(path) {
+      const message = {
+        type: "typecms:preview:focus",
+        timestamp: Date.now(),
+        payload: { path }
+      };
+      sendMessage(message);
+    }
+  };
+}
+var UNSAFE_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function setNestedValue(obj, path, value) {
+  const parts = path.split(".");
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    const arrayMatch2 = part.match(/^(\w+)\[(\d+)\]$/);
+    if (arrayMatch2) {
+      const [, name, indexStr] = arrayMatch2;
+      const index = parseInt(indexStr, 10);
+      if (UNSAFE_KEYS.has(name)) continue;
+      if (!current[name]) {
+        current[name] = [];
+      }
+      const arr = current[name];
+      if (!arr[index]) {
+        arr[index] = {};
+      }
+      current = arr[index];
+    } else {
+      if (UNSAFE_KEYS.has(part)) continue;
+      if (!current[part] || typeof current[part] !== "object") {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+  }
+  const lastPart = parts[parts.length - 1];
+  const arrayMatch = lastPart.match(/^(\w+)\[(\d+)\]$/);
+  if (arrayMatch) {
+    const [, name, indexStr] = arrayMatch;
+    const index = parseInt(indexStr, 10);
+    if (UNSAFE_KEYS.has(name)) return;
+    if (!current[name]) {
+      current[name] = [];
+    }
+    current[name][index] = value;
+  } else {
+    if (UNSAFE_KEYS.has(lastPart)) return;
+    current[lastPart] = value;
+  }
+}
+function getNestedValue(obj, path) {
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === void 0) {
+      return void 0;
+    }
+    const arrayMatch = part.match(/^(\w+)\[(\d+)\]$/);
+    if (arrayMatch) {
+      const [, name, indexStr] = arrayMatch;
+      const index = parseInt(indexStr, 10);
+      const arr = current[name];
+      if (!arr) return void 0;
+      current = arr[index];
+    } else {
+      current = current[part];
+    }
+  }
+  return current;
+}
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = result[key];
+    if (sourceValue && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue && typeof targetValue === "object" && !Array.isArray(targetValue)) {
+      result[key] = deepMerge(
+        targetValue,
+        sourceValue
+      );
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+
+// src/preview/overlay.ts
+var DEFAULT_OPTIONS = {
+  color: "#3b82f6",
+  zIndex: 9999,
+  scrollIntoView: true,
+  attribute: "data-preview-field"
+};
+function attachPreviewOverlay(client, options = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const { color, zIndex, scrollIntoView, attribute } = { ...DEFAULT_OPTIONS, ...options };
+  const box = document.createElement("div");
+  box.setAttribute("data-typecms-preview-overlay", "");
+  Object.assign(box.style, {
+    position: "fixed",
+    display: "none",
+    pointerEvents: "none",
+    boxSizing: "border-box",
+    border: `2px solid ${color}`,
+    borderRadius: "4px",
+    zIndex: String(zIndex),
+    transition: "top 120ms ease, left 120ms ease, width 120ms ease, height 120ms ease"
+  });
+  document.body.appendChild(box);
+  let target = null;
+  let lastPath = null;
+  function position() {
+    if (!target || !target.isConnected) {
+      box.style.display = "none";
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    Object.assign(box.style, {
+      display: "block",
+      top: `${rect.top - 2}px`,
+      left: `${rect.left - 2}px`,
+      width: `${rect.width + 4}px`,
+      height: `${rect.height + 4}px`
+    });
+  }
+  function update(state) {
+    const path = state.enabled ? state.focusedPath : null;
+    if (path === lastPath) return;
+    lastPath = path;
+    target = path ? document.querySelector(`[${attribute}="${CSS.escape(path)}"]`) : null;
+    if (target && scrollIntoView) {
+      target.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    position();
+  }
+  window.addEventListener("scroll", position, true);
+  window.addEventListener("resize", position);
+  const unsubscribe = client.subscribe(update);
+  update(client.getState());
+  return () => {
+    unsubscribe();
+    window.removeEventListener("scroll", position, true);
+    window.removeEventListener("resize", position);
+    box.remove();
+    target = null;
+  };
+}
+
+// src/preview/richtext.ts
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function shareStructure(prev, next) {
+  if (prev === next || prev === void 0) {
+    return next;
+  }
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    return shareArray(prev, next);
+  }
+  if (isPlainObject(prev) && isPlainObject(next)) {
+    return shareObject(prev, next);
+  }
+  return next;
+}
+function shareArray(prev, next) {
+  const prevLength = prev.length;
+  const nextLength = next.length;
+  const result = new Array(nextLength);
+  let tail = 0;
+  const maxTail = Math.min(prevLength, nextLength);
+  while (tail < maxTail) {
+    const prevItem = prev[prevLength - 1 - tail];
+    const shared = shareStructure(prevItem, next[nextLength - 1 - tail]);
+    if (shared !== prevItem) break;
+    result[nextLength - 1 - tail] = shared;
+    tail++;
+  }
+  const prevHeadLength = prevLength - tail;
+  for (let i = 0; i < nextLength - tail; i++) {
+    result[i] = i < prevHeadLength ? shareStructure(prev[i], next[i]) : next[i];
+  }
+  if (prevLength === nextLength) {
+    let allShared = true;
+    for (let i = 0; i < nextLength; i++) {
+      if (result[i] !== prev[i]) {
+        allShared = false;
+        break;
+      }
+    }
+    if (allShared) return prev;
+  }
+  return result;
+}
+function shareObject(prev, next) {
+  const nextKeys = Object.keys(next);
+  const result = {};
+  let allShared = nextKeys.length === Object.keys(prev).length;
+  for (const key of nextKeys) {
+    const hasPrev = Object.prototype.hasOwnProperty.call(prev, key);
+    const shared = hasPrev ? shareStructure(prev[key], next[key]) : next[key];
+    result[key] = shared;
+    if (!hasPrev || shared !== prev[key]) {
+      allShared = false;
+    }
+  }
+  return allShared ? prev : result;
+}
+function createRichTextPreview(options = {}) {
+  let lastDoc = options.initial;
+  return {
+    apply(nextDoc) {
+      const shared = shareStructure(lastDoc, nextDoc);
+      lastDoc = shared;
+      return shared;
+    },
+    reset() {
+      lastDoc = void 0;
+    }
+  };
+}
+
+// src/preview/vue.ts
+var PREVIEW_INJECTION_KEY = /* @__PURE__ */ Symbol("typecms-preview");
+function createPreviewContext(options = {}) {
+  const { overlay, ...config } = options;
+  const client = createPreviewClient(config);
+  const state = shallowRef(client.getState());
+  let unsubscribe = null;
+  let detachOverlay = null;
+  function connect() {
+    if (unsubscribe) return;
+    unsubscribe = client.subscribe((next) => {
+      state.value = next;
+    });
+    client.connect();
+    if (overlay) {
+      detachOverlay = attachPreviewOverlay(client, overlay === true ? {} : overlay);
+    }
+  }
+  function disconnect() {
+    unsubscribe?.();
+    unsubscribe = null;
+    detachOverlay?.();
+    detachOverlay = null;
+    client.disconnect();
+    state.value = client.getState();
+  }
+  const isPreview = computed(() => state.value.enabled);
+  function mergeContent(content) {
+    if (!state.value.enabled || Object.keys(state.value.values).length === 0) {
+      return content;
+    }
+    return deepMerge(content, state.value.values);
+  }
+  return {
+    state,
+    isPreview,
+    getValue: (path) => client.getValue(path),
+    mergeContent,
+    notifyNavigation: (pathname) => client.notifyNavigation(pathname),
+    notifyFieldFocus: (path) => client.notifyFieldFocus(path),
+    connect,
+    disconnect
+  };
+}
+var TypecmsPreview = {
+  install(app, options = {}) {
+    const context = createPreviewContext(options);
+    context.connect();
+    app.provide(PREVIEW_INJECTION_KEY, context);
+    const originalUnmount = app.unmount;
+    app.unmount = function unmount(...args) {
+      context.disconnect();
+      return originalUnmount.apply(this, args);
+    };
+  }
+};
+function usePreviewContext() {
+  const context = inject(PREVIEW_INJECTION_KEY, null);
+  if (!context) {
+    throw new Error("usePreviewContext requires the TypecmsPreview plugin to be installed");
+  }
+  return context;
+}
+function useIsPreview() {
+  const context = inject(PREVIEW_INJECTION_KEY, null);
+  return computed(() => context?.state.value.enabled ?? false);
+}
+function usePreviewState() {
+  const context = inject(PREVIEW_INJECTION_KEY, null);
+  return computed(() => context?.state.value ?? null);
+}
+function usePreviewValue(path, fallback) {
+  const context = inject(PREVIEW_INJECTION_KEY, null);
+  return computed(() => {
+    const fallbackValue = toValue(fallback);
+    if (!context || !context.state.value.enabled) {
+      return fallbackValue;
+    }
+    const previewValue = getNestedValue(context.state.value.values, toValue(path));
+    return previewValue !== void 0 ? previewValue : fallbackValue;
+  });
+}
+function usePreviewContent(content) {
+  const context = inject(PREVIEW_INJECTION_KEY, null);
+  return computed(() => {
+    const value = toValue(content);
+    if (!context || !context.state.value.enabled) {
+      return value;
+    }
+    return context.mergeContent(value);
+  });
+}
+function useFocusedField() {
+  const context = inject(PREVIEW_INJECTION_KEY, null);
+  return computed(() => context?.state.value.focusedPath ?? null);
+}
+function usePreviewNavigation() {
+  const context = inject(PREVIEW_INJECTION_KEY, null);
+  return context ? context.notifyNavigation : () => {
+  };
+}
+function usePreviewFieldFocus() {
+  const context = inject(PREVIEW_INJECTION_KEY, null);
+  return context ? context.notifyFieldFocus : () => {
+  };
+}
+function usePreviewRichText(path, fallback) {
+  const context = inject(PREVIEW_INJECTION_KEY, null);
+  const preview = createRichTextPreview();
+  let lastPath = null;
+  return computed(() => {
+    const pathValue = toValue(path);
+    if (lastPath !== null && lastPath !== pathValue) {
+      preview.reset();
+    }
+    lastPath = pathValue;
+    const fallbackValue = toValue(fallback);
+    if (!context || !context.state.value.enabled) {
+      return fallbackValue;
+    }
+    const previewValue = getNestedValue(context.state.value.values, pathValue);
+    return preview.apply(previewValue !== void 0 ? previewValue : fallbackValue);
+  });
+}
+export {
+  PREVIEW_INJECTION_KEY,
+  TypecmsPreview,
+  createPreviewContext,
+  useFocusedField,
+  useIsPreview,
+  usePreviewContent,
+  usePreviewContext,
+  usePreviewFieldFocus,
+  usePreviewNavigation,
+  usePreviewRichText,
+  usePreviewState,
+  usePreviewValue
+};
+//# sourceMappingURL=vue.mjs.map