@smoothstream/vue 0.1.0

package/dist/index.js

@@ -0,0 +1,706 @@
+// src/index.ts
+import "@smoothstream/styles/base.css";
+import "@smoothstream/styles/styles.css";
+
+// src/Smoothstream.ts
+import {
+  codeBlockRequestKey,
+  resolveCodeHighlight,
+  StreamingSession,
+  unitsReadyForCodeHighlights
+} from "@smoothstream/core";
+import {
+  createWebPresentation,
+  createWebPresentationCache
+} from "@smoothstream/core/web";
+import {
+  computed,
+  defineComponent as defineComponent2,
+  Fragment,
+  h as h2,
+  mergeProps,
+  nextTick,
+  onBeforeUnmount as onBeforeUnmount2,
+  onMounted,
+  onUpdated,
+  shallowRef,
+  Teleport,
+  ref as ref2,
+  watch as watch2
+} from "vue";
+
+// src/render-web.ts
+import { find, html, svg } from "property-information";
+import {
+  defineComponent,
+  createTextVNode,
+  h,
+  onBeforeUnmount,
+  ref,
+  watch
+} from "vue";
+var htmlPropertyInfoByName = /* @__PURE__ */ new Map();
+var svgPropertyInfoByName = /* @__PURE__ */ new Map();
+var tableContainers = /* @__PURE__ */ new Set(["table", "tbody", "tfoot", "thead", "tr"]);
+var vuePropertyInfo = (property, namespace) => {
+  const cache = namespace === "svg" ? svgPropertyInfoByName : htmlPropertyInfoByName;
+  const cached = cache.get(property);
+  if (cached) return cached;
+  const information = find(namespace === "svg" ? svg : html, property);
+  const result = {
+    commaSeparated: information.commaSeparated,
+    name: information.attribute
+  };
+  cache.set(property, result);
+  return result;
+};
+var vueElementProperties = (node) => {
+  const result = {};
+  for (const [property, originalValue] of Object.entries(node.properties)) {
+    if (property === "children" || originalValue === null || originalValue === void 0 || typeof originalValue === "number" && Number.isNaN(originalValue)) {
+      continue;
+    }
+    const information = vuePropertyInfo(property, node.namespace);
+    result[information.name] = Array.isArray(originalValue) ? originalValue.map(String).join(information.commaSeparated ? ", " : " ").trim() : originalValue;
+  }
+  return result;
+};
+var textContent = (node) => node.type === "text" ? node.value : node.children.map(textContent).join("");
+var codeBlockValue = (node) => {
+  const code = node.children.find(
+    (child) => child.type === "element" && child.tagName === "code"
+  );
+  const value = code ? textContent(code) : "";
+  return value.endsWith("\n") ? value.slice(0, -1) : value;
+};
+var writeClipboardText = async (button, value) => {
+  const document = button.ownerDocument;
+  const view = document.defaultView;
+  if (!view) throw new Error("Clipboard copy requires a browser window.");
+  if (view.navigator.clipboard?.writeText) {
+    await view.navigator.clipboard.writeText(value);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = value;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.append(textarea);
+  textarea.select();
+  const copied = document.execCommand?.("copy") === true;
+  textarea.remove();
+  if (!copied) throw new Error("Clipboard copy is unavailable.");
+};
+var webChildrenToVue = (children, filterTableWhitespace, copyContext) => children.flatMap((child) => {
+  if (filterTableWhitespace && child.type === "text" && /^\s*$/u.test(child.value)) {
+    return [];
+  }
+  return [webNodeToVue(child, copyContext)];
+});
+var webElementToVue = (node, copyContext) => {
+  const properties = vueElementProperties(node);
+  if (copyContext) {
+    if (node.properties["data-smoothstream-code-copy"] === true) {
+      properties.onClick = copyContext.copy;
+      if (copyContext.copied) properties["aria-label"] = "Code copied";
+    }
+    if (node.properties["data-smoothstream-code-icon-swap"] === true) {
+      properties["data-state"] = copyContext.copied ? "check" : "copy";
+    }
+  }
+  return h(
+    node.tagName,
+    { ...properties, key: node.key },
+    webChildrenToVue(
+      node.children,
+      tableContainers.has(node.tagName),
+      copyContext
+    )
+  );
+};
+var WebCodeBlock = defineComponent({
+  name: "SmoothstreamCodeBlock",
+  props: {
+    node: {
+      required: true,
+      type: Object
+    }
+  },
+  setup(props) {
+    const copied = ref(false);
+    let resetTimer;
+    const clearResetTimer = () => {
+      if (resetTimer === void 0) return;
+      const view = typeof window === "undefined" ? void 0 : window;
+      view?.clearTimeout(resetTimer);
+      resetTimer = void 0;
+    };
+    watch(
+      () => codeBlockValue(props.node),
+      () => {
+        copied.value = false;
+        clearResetTimer();
+      }
+    );
+    onBeforeUnmount(clearResetTimer);
+    const copy = (event) => {
+      if (props.node.properties["data-smoothstream-code-copy-ready"] !== true) {
+        return;
+      }
+      const button = event.currentTarget;
+      if (!button || button.localName !== "button") return;
+      const code = codeBlockValue(props.node);
+      void writeClipboardText(button, code).then(
+        () => {
+          copied.value = true;
+          clearResetTimer();
+          const view = button.ownerDocument.defaultView;
+          if (!view) return;
+          resetTimer = view.setTimeout(() => {
+            copied.value = false;
+            resetTimer = void 0;
+          }, 2e3);
+        },
+        () => {
+          copied.value = false;
+        }
+      );
+    };
+    return () => webElementToVue(props.node, {
+      copied: copied.value,
+      copy
+    });
+  }
+});
+var webNodeToVue = (node, copyContext) => {
+  if (node.type === "text") {
+    const text = createTextVNode(node.value);
+    text.key = node.key;
+    return text;
+  }
+  if (!copyContext && node.tagName === "pre" && node.properties["data-smoothstream-code-block"] === true) {
+    return h(WebCodeBlock, { key: node.key, node });
+  }
+  return webElementToVue(node, copyContext);
+};
+var webNodesToVue = (nodes) => nodes.map((node) => webNodeToVue(node));
+
+// src/Smoothstream.ts
+var COMPLETION_ANNOUNCEMENT = "Content ready.";
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var PHASE_SELECTOR = "[data-smoothstream-animation-start]";
+var PHASE_PROPERTY = "--smoothstream-animation-delay";
+var screenReaderOnlyStyle = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+};
+var browserClock = {
+  now: () => typeof window === "undefined" ? 0 : window.performance?.now() ?? Date.now()
+};
+var emptyPlayback = () => ({
+  animationComplete: true,
+  immediate: false,
+  now: 0,
+  schedules: /* @__PURE__ */ new Map(),
+  visibleUnitCount: 0
+});
+var Smoothstream = defineComponent2({
+  name: "Smoothstream",
+  inheritAttrs: false,
+  props: {
+    codeHighlighter: Object,
+    duration: {
+      default: 1e3,
+      type: Number
+    },
+    interval: {
+      default: 3,
+      type: Number
+    },
+    markdown: {
+      default: "",
+      type: String
+    },
+    mode: {
+      default: "streaming",
+      type: String
+    },
+    receiving: {
+      default: false,
+      type: Boolean
+    },
+    reducedMotion: {
+      default: "system",
+      type: String
+    },
+    reveal: {
+      default: "character",
+      type: String
+    },
+    unstyled: {
+      default: false,
+      type: Boolean
+    }
+  },
+  setup(props, { attrs }) {
+    const root = ref2(null);
+    const mounted = ref2(false);
+    const motionDisabled = ref2(props.reducedMotion === "always");
+    const currentInput = shallowRef();
+    const currentPlayback = shallowRef(
+      emptyPlayback()
+    );
+    const codeHighlights = shallowRef(
+      /* @__PURE__ */ new Map()
+    );
+    const imageReadiness = shallowRef(
+      /* @__PURE__ */ new Map()
+    );
+    const resourceNow = ref2(0);
+    const completionAnnouncement = ref2("");
+    let session = new StreamingSession(browserClock, {
+      duration: props.duration,
+      interval: props.interval
+    });
+    let presentationCache = createWebPresentationCache();
+    let lastPresentation;
+    let requestedSource = props.markdown;
+    let pendingInput = {
+      receiving: props.receiving,
+      source: props.markdown
+    };
+    let inputFrame;
+    let playbackFrame;
+    let mediaQuery;
+    let destroyed = false;
+    let announcedSource;
+    let completionRendered = false;
+    const codeRequestsByBlock = /* @__PURE__ */ new Map();
+    const codeSessionsByBlock = /* @__PURE__ */ new Map();
+    const imageLoaders = /* @__PURE__ */ new Map();
+    const resourceTimers = /* @__PURE__ */ new Set();
+    const synchronizedPhases = /* @__PURE__ */ new WeakMap();
+    let phasedElements = /* @__PURE__ */ new Set();
+    const resolvedMotion = computed(() => {
+      if (props.reducedMotion === "always") return "none";
+      if (props.reducedMotion === "never") return "animate";
+      if (!mounted.value) return "pending";
+      return motionDisabled.value ? "none" : "animate";
+    });
+    const presentationImmediate = () => props.mode === "static" || resolvedMotion.value === "none";
+    const requestFrame = (callback) => typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(callback) : window.setTimeout(() => callback(browserClock.now()), 16);
+    const cancelFrame = (frame) => {
+      if (typeof window.cancelAnimationFrame === "function") {
+        window.cancelAnimationFrame(frame);
+      } else {
+        window.clearTimeout(frame);
+      }
+    };
+    const playbackUnits = (input) => presentationImmediate() ? input.plan.units : unitsReadyForCodeHighlights(
+      input.plan.units,
+      props.codeHighlighter,
+      codeHighlights.value
+    );
+    const cancelPlaybackFrame = () => {
+      if (playbackFrame === void 0 || typeof window === "undefined") return;
+      cancelFrame(playbackFrame);
+      playbackFrame = void 0;
+    };
+    const ensurePlaybackFrame = () => {
+      if (destroyed || typeof window === "undefined" || presentationImmediate() || currentPlayback.value.animationComplete || playbackFrame !== void 0) {
+        return;
+      }
+      playbackFrame = requestFrame(() => {
+        playbackFrame = void 0;
+        const previous = currentPlayback.value;
+        const next = session.advance();
+        if (next.visibleUnitCount !== previous.visibleUnitCount || next.animationComplete && !completionRendered) {
+          completionRendered = next.animationComplete;
+          currentPlayback.value = next;
+        }
+        ensurePlaybackFrame();
+      });
+    };
+    const refreshPlayback = (input = currentInput.value) => {
+      if (!input) return;
+      cancelPlaybackFrame();
+      const units = playbackUnits(input);
+      if (presentationImmediate()) {
+        currentPlayback.value = session.immediate(input, units);
+      } else if (mounted.value && resolvedMotion.value === "animate") {
+        currentPlayback.value = session.schedule(input, units);
+      } else {
+        currentPlayback.value = emptyPlayback();
+      }
+      completionRendered = currentPlayback.value.animationComplete;
+      ensurePlaybackFrame();
+    };
+    const publishResourceChange = () => {
+      resourceNow.value = browserClock.now();
+    };
+    const ensureImages = (descriptors) => {
+      if (typeof window === "undefined" || presentationImmediate()) {
+        return;
+      }
+      for (const descriptor of descriptors) {
+        if (imageLoaders.has(descriptor.id) || imageReadiness.value.has(descriptor.id)) {
+          continue;
+        }
+        let finished = false;
+        const finish = (status, image2) => {
+          if (finished || destroyed) return;
+          finished = true;
+          imageLoaders.delete(descriptor.id);
+          const readyAt = browserClock.now();
+          const width = image2?.naturalWidth ?? 0;
+          const height = image2?.naturalHeight ?? 0;
+          const next = new Map(imageReadiness.value);
+          next.set(
+            descriptor.id,
+            status === "ready" && width > 0 && height > 0 ? { height, readyAt, status, width } : { readyAt, status }
+          );
+          imageReadiness.value = next;
+          publishResourceChange();
+          const timer = window.setTimeout(() => {
+            resourceTimers.delete(timer);
+            publishResourceChange();
+          }, props.duration + 20);
+          resourceTimers.add(timer);
+        };
+        if (descriptor.src.length === 0) {
+          finish("error");
+          continue;
+        }
+        const image = new window.Image();
+        imageLoaders.set(descriptor.id, image);
+        image.decoding = "async";
+        image.onerror = () => finish("error");
+        let decodeStarted = false;
+        const handleLoad = () => {
+          if (decodeStarted || finished) return;
+          decodeStarted = true;
+          const decoded = typeof image.decode === "function" ? image.decode().catch(() => void 0) : Promise.resolve();
+          void decoded.then(() => finish("ready", image));
+        };
+        image.onload = handleLoad;
+        image.src = descriptor.src;
+        if (image.complete && image.naturalWidth > 0) handleLoad();
+      }
+    };
+    const commitCodeHighlight = (highlighter, request, key, result) => {
+      if (destroyed || props.codeHighlighter !== highlighter || codeRequestsByBlock.get(request.blockStart) !== key) {
+        return;
+      }
+      const next = new Map(codeHighlights.value);
+      next.set(
+        request.blockStart,
+        resolveCodeHighlight(
+          request,
+          result,
+          codeHighlights.value.get(request.blockStart)
+        )
+      );
+      codeHighlights.value = next;
+      refreshPlayback();
+    };
+    const ensureCodeHighlights = (requests) => {
+      const highlighter = props.codeHighlighter;
+      if (!mounted.value || !highlighter) return;
+      for (const request of requests) {
+        const key = codeBlockRequestKey(request);
+        const current = codeHighlights.value.get(request.blockStart);
+        if (current?.language === request.language && current.code === request.code || codeRequestsByBlock.get(request.blockStart) === key) {
+          continue;
+        }
+        codeRequestsByBlock.set(request.blockStart, key);
+        let privateSession = codeSessionsByBlock.get(request.blockStart);
+        if (!privateSession) {
+          privateSession = {};
+          codeSessionsByBlock.set(request.blockStart, privateSession);
+        }
+        void Promise.resolve(highlighter.highlight({
+          code: request.code,
+          language: request.language,
+          session: privateSession
+        })).then(
+          (result) => commitCodeHighlight(highlighter, request, key, result),
+          () => commitCodeHighlight(highlighter, request, key, void 0)
+        );
+      }
+    };
+    const flushInput = () => {
+      const pending = pendingInput;
+      pendingInput = void 0;
+      if (!pending || destroyed) return;
+      const input = session.prepareInput(
+        pending.source,
+        pending.receiving,
+        props.reveal
+      );
+      session.commitInput(input);
+      currentInput.value = input;
+      if (mounted.value) {
+        ensureCodeHighlights(input.codeBlocks);
+        ensureImages(input.images);
+      }
+      refreshPlayback(input);
+    };
+    const scheduleInputFlush = () => {
+      if (!mounted.value || typeof window === "undefined") {
+        flushInput();
+        return;
+      }
+      if (inputFrame !== void 0) return;
+      inputFrame = requestFrame(() => {
+        inputFrame = void 0;
+        flushInput();
+      });
+    };
+    const clearResourceWork = () => {
+      for (const image of imageLoaders.values()) {
+        image.onload = null;
+        image.onerror = null;
+      }
+      imageLoaders.clear();
+      if (typeof window !== "undefined") {
+        for (const timer of resourceTimers) window.clearTimeout(timer);
+      }
+      resourceTimers.clear();
+    };
+    const resetSession = () => {
+      if (typeof window !== "undefined") {
+        if (inputFrame !== void 0) cancelFrame(inputFrame);
+        inputFrame = void 0;
+        cancelPlaybackFrame();
+      }
+      clearResourceWork();
+      codeRequestsByBlock.clear();
+      codeSessionsByBlock.clear();
+      codeHighlights.value = /* @__PURE__ */ new Map();
+      imageReadiness.value = /* @__PURE__ */ new Map();
+      resourceNow.value = 0;
+      presentationCache = createWebPresentationCache();
+      session = new StreamingSession(browserClock, {
+        duration: props.duration,
+        interval: props.interval
+      });
+      requestedSource = props.markdown;
+      pendingInput = {
+        receiving: props.receiving,
+        source: props.markdown
+      };
+      announcedSource = void 0;
+      completionAnnouncement.value = "";
+      flushInput();
+    };
+    function handleMotionChange(event) {
+      if (!event.matches || motionDisabled.value) return;
+      motionDisabled.value = true;
+      refreshPlayback();
+    }
+    const removeMediaListener = () => {
+      if (!mediaQuery) return;
+      if (typeof mediaQuery.removeEventListener === "function") {
+        mediaQuery.removeEventListener("change", handleMotionChange);
+      } else {
+        mediaQuery.removeListener?.(handleMotionChange);
+      }
+      mediaQuery = void 0;
+    };
+    const configureMotion = () => {
+      removeMediaListener();
+      if (!mounted.value || typeof window === "undefined" || props.reducedMotion !== "system" || typeof window.matchMedia !== "function") {
+        return;
+      }
+      mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
+      if (mediaQuery.matches) motionDisabled.value = true;
+      if (typeof mediaQuery.addEventListener === "function") {
+        mediaQuery.addEventListener("change", handleMotionChange);
+      } else {
+        mediaQuery.addListener?.(handleMotionChange);
+      }
+    };
+    const synchronizeAnimationPhases = () => {
+      const element = root.value;
+      if (!element) return;
+      const now = browserClock.now();
+      const nextElements = /* @__PURE__ */ new Set();
+      for (const animated of element.querySelectorAll(PHASE_SELECTOR)) {
+        nextElements.add(animated);
+        const startAt = Number(animated.dataset.smoothstreamAnimationStart);
+        const duration = Number(animated.dataset.smoothstreamAnimationDuration);
+        if (!Number.isFinite(startAt) || !Number.isFinite(duration)) continue;
+        const synchronized = synchronizedPhases.get(animated);
+        if (synchronized?.startAt === startAt && synchronized.duration === duration) {
+          animated.style.setProperty(PHASE_PROPERTY, synchronized.delay);
+          continue;
+        }
+        const currentTime = Math.max(0, Math.min(duration, now - startAt));
+        const delay = String(-currentTime) + "ms";
+        animated.style.setProperty(PHASE_PROPERTY, delay);
+        synchronizedPhases.set(animated, { delay, duration, startAt });
+      }
+      for (const previous of phasedElements) {
+        if (!nextElements.has(previous)) {
+          previous.style.removeProperty(PHASE_PROPERTY);
+          if (previous.style.length === 0) previous.removeAttribute("style");
+        }
+      }
+      phasedElements = nextElements;
+    };
+    const publishCompletionIfReady = () => {
+      const input = currentInput.value;
+      const presentation = lastPresentation;
+      const element = root.value;
+      if (props.mode !== "streaming" || !mounted.value || !input || !presentation || !element) {
+        return;
+      }
+      if (input.inputOpen) completionAnnouncement.value = "";
+      if (input.inputOpen || input.plan.tree.children.length === 0 || !presentation.allPlannedUnitsCompacted || element.querySelector("[data-smoothstream-unit]") !== null || announcedSource === input.source) {
+        return;
+      }
+      announcedSource = input.source;
+      completionAnnouncement.value = COMPLETION_ANNOUNCEMENT;
+    };
+    const afterRender = () => {
+      synchronizeAnimationPhases();
+      publishCompletionIfReady();
+    };
+    watch2(
+      () => [props.markdown, props.receiving],
+      ([source, receiving]) => {
+        if (!source.startsWith(requestedSource)) {
+          throw new Error(
+            "Smoothstream Markdown must be append-only. Give a different response a new Vue key."
+          );
+        }
+        requestedSource = source;
+        pendingInput = { receiving, source };
+        if (receiving || announcedSource !== source) {
+          announcedSource = void 0;
+          completionAnnouncement.value = "";
+        }
+        scheduleInputFlush();
+      },
+      { flush: "sync" }
+    );
+    watch2(
+      () => [props.duration, props.interval, props.mode, props.reveal],
+      resetSession,
+      { flush: "sync" }
+    );
+    watch2(
+      () => props.codeHighlighter,
+      () => {
+        codeRequestsByBlock.clear();
+        codeSessionsByBlock.clear();
+        codeHighlights.value = /* @__PURE__ */ new Map();
+        const input = currentInput.value;
+        if (input) ensureCodeHighlights(input.codeBlocks);
+        refreshPlayback(input);
+      },
+      { flush: "sync" }
+    );
+    watch2(
+      () => props.reducedMotion,
+      () => {
+        configureMotion();
+        const input = currentInput.value;
+        if (input && !presentationImmediate()) ensureImages(input.images);
+        refreshPlayback(input);
+      },
+      { flush: "sync" }
+    );
+    flushInput();
+    onMounted(() => {
+      mounted.value = true;
+      configureMotion();
+      const input = currentInput.value;
+      if (input) {
+        ensureCodeHighlights(input.codeBlocks);
+        ensureImages(input.images);
+        refreshPlayback(input);
+      }
+      void nextTick(afterRender);
+    });
+    onUpdated(afterRender);
+    onBeforeUnmount2(() => {
+      destroyed = true;
+      removeMediaListener();
+      if (typeof window !== "undefined") {
+        if (inputFrame !== void 0) cancelFrame(inputFrame);
+        cancelPlaybackFrame();
+      }
+      clearResourceWork();
+      codeRequestsByBlock.clear();
+      codeSessionsByBlock.clear();
+    });
+    const renderContent = () => {
+      const input = currentInput.value;
+      if (!input || props.mode === "streaming" && resolvedMotion.value === "pending") {
+        lastPresentation = void 0;
+        return [];
+      }
+      const playback = currentPlayback.value;
+      const now = Math.max(playback.now, resourceNow.value);
+      const presentation = session.present(input, playback, { now });
+      lastPresentation = presentation;
+      return webNodesToVue(createWebPresentation({
+        cache: presentationCache,
+        codeHighlighterEnabled: props.codeHighlighter !== void 0,
+        codeHighlights: codeHighlights.value,
+        compactedBlockIds: presentation.compactedBlockIds,
+        compactedUnitIds: presentation.compactedUnitIds,
+        images: imageReadiness.value,
+        immediate: presentationImmediate(),
+        now,
+        reveal: input.reveal,
+        schedules: presentation.schedules,
+        showLanguageLabels: props.codeHighlighter?.showLanguageLabels !== false,
+        tree: input.plan.tree,
+        units: input.plan.units
+      }));
+    };
+    return () => {
+      const motion = props.mode === "streaming" && resolvedMotion.value === "pending" ? "pending" : resolvedMotion.value === "none" ? "none" : "animate";
+      const rootNode = h2(
+        "div",
+        mergeProps(attrs, {
+          "data-smoothstream": true,
+          "data-smoothstream-mode": props.mode,
+          "data-smoothstream-motion": motion,
+          "data-smoothstream-reduced-motion": props.reducedMotion,
+          "data-smoothstream-reveal": props.reveal,
+          "data-smoothstream-theme": props.unstyled ? void 0 : "default",
+          ref: root,
+          style: {
+            "--smoothstream-duration": String(resolvedMotion.value === "none" ? 0 : props.duration) + "ms",
+            "--smoothstream-interval": String(resolvedMotion.value === "none" ? 0 : props.interval) + "ms"
+          }
+        }),
+        renderContent()
+      );
+      const announcer = props.mode === "streaming" && mounted.value ? h2(Teleport, { to: "body" }, h2("div", {
+        "aria-atomic": true,
+        "aria-live": "polite",
+        "data-smoothstream-announcer": true,
+        role: "status",
+        style: screenReaderOnlyStyle
+      }, completionAnnouncement.value)) : null;
+      return h2(Fragment, null, [rootNode, announcer]);
+    };
+  }
+});
+export {
+  Smoothstream
+};
+//# sourceMappingURL=index.js.map