@scalar/api-client 2.38.4 → 2.39.1

package/dist/v2/features/app/hooks/use-document-watcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-document-watcher.js","names":[],"sources":["../../../../../src/v2/features/app/hooks/use-document-watcher.ts"],"sourcesContent":["import type { Difference } from '@scalar/json-magic/diff'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type MaybeRefOrGetter, computed, onBeforeUnmount, toValue, watch } from 'vue'\n\n/**\n * Default timeout before the first poll attempt (in milliseconds).\n */\nconst DEFAULT_INITIAL_TIMEOUT = 5 * 1000 // 5 seconds\n\n/**\n * Maximum timeout cap for exponential backoff (in milliseconds).\n */\nconst MAX_TIMEOUT = 60 * 1000 // 60 seconds\n\n/**\n * Creates a timer manager for handling polling timeouts.\n *\n * @returns Object with methods to manage the polling timer.\n */\nconst createTimerManager = () => {\n  let timer: ReturnType<typeof setTimeout> | null = null\n\n  /**\n   * Clears the current timer if it exists.\n   */\n  const clear = (): void => {\n    if (timer) {\n      clearTimeout(timer)\n      timer = null\n    }\n  }\n\n  /**\n   * Schedules the next poll after the specified timeout.\n   *\n   * @param callback - The function to call when the timeout expires.\n   * @param timeout - The delay in milliseconds before calling the callback.\n   */\n  const schedule = (callback: () => void, timeout: number): void => {\n    clear()\n    timer = setTimeout(callback, timeout)\n  }\n\n  return {\n    clear,\n    schedule,\n  }\n}\n\n/**\n * Creates a timeout manager that handles exponential backoff on failures.\n *\n * @param initialTimeout - The initial timeout value in milliseconds.\n * @returns Object with methods to manage timeout values.\n */\nconst createTimeoutManager = (initialTimeout: number) => {\n  let currentTimeout = initialTimeout\n\n  /**\n   * Resets the timeout to its initial value.\n   */\n  const reset = (): void => {\n    currentTimeout = initialTimeout\n  }\n\n  /**\n   * Doubles the timeout with exponential backoff, capped at MAX_TIMEOUT.\n   */\n  const backoff = (): void => {\n    currentTimeout = Math.min(currentTimeout * 2, MAX_TIMEOUT)\n  }\n\n  /**\n   * Gets the current timeout value.\n   */\n  const get = (): number => currentTimeout\n\n  return {\n    reset,\n    backoff,\n    get,\n  }\n}\n\n/**\n * Resolves conflicts by preferring remote changes.\n *\n * @param conflicts - Array of conflict tuples from the rebase result.\n * Each tuple contains two arrays: [remote changes, local changes].\n * @returns Array of remote changes to apply.\n */\nconst resolveConflicts = (conflicts: Array<[Difference<unknown>[], Difference<unknown>[]]>): Difference<unknown>[] => {\n  return conflicts.flatMap(([remote]) => remote)\n}\n\n/**\n * Watches the specified document in the workspace store and periodically rebases it with its remote source.\n *\n * This utility sets up a watcher on the given document. If the document specifies an 'x-scalar-original-source-url'\n * and watch mode is enabled, this hook polls the remote source and calls `store.rebaseDocument`.\n * If rebase conflicts are detected, it applies automatic conflict resolution by preferring remote changes.\n * Uses exponential backoff on failures to avoid overwhelming the server.\n *\n * @param params - Configuration object for the document watcher.\n * @param params.documentName - The name/key of the document to watch and rebase.\n * @param params.store - The WorkspaceStore instance.\n * @param params.initialTimeout - Initial delay before the first poll attempt (default: 5000ms).\n *\n * @example\n * ```ts\n * import { useDocumentWatcher } from '@/hooks/use-document-watcher'\n * import { useScalarWorkspaceStore } from '@scalar/workspace-store'\n *\n * const store = useScalarWorkspaceStore()\n * useDocumentWatcher({ documentName: 'myApi', store })\n * ```\n */\nexport const useDocumentWatcher = ({\n  documentName,\n  store,\n  initialTimeout = DEFAULT_INITIAL_TIMEOUT,\n}: {\n  documentName: MaybeRefOrGetter<string | undefined>\n  store: MaybeRefOrGetter<WorkspaceStore | null>\n  initialTimeout?: number\n}): void => {\n  const document = computed(() => {\n    const storeValue = toValue(store)\n    const documentNameValue = toValue(documentName)\n    if (!storeValue || !documentNameValue) {\n      return null\n    }\n    return storeValue.workspace.documents[documentNameValue]\n  })\n\n  const timerManager = createTimerManager()\n  const timeoutManager = createTimeoutManager(initialTimeout)\n\n  /**\n   * Handles a successful poll result (with or without changes).\n   */\n  const handleSuccess = (): void => {\n    timeoutManager.reset()\n    timerManager.schedule(poll, timeoutManager.get())\n  }\n\n  /**\n   * Handles a failed poll result with exponential backoff.\n   */\n  const handleFailure = (): void => {\n    timeoutManager.backoff()\n    timerManager.schedule(poll, timeoutManager.get())\n  }\n\n  /**\n   * Polls the remote document source and attempts to rebase.\n   */\n  const poll = async (): Promise<void> => {\n    const storeValue = toValue(store)\n    const documentNameValue = toValue(documentName)\n    const sourceUrl = document.value?.['x-scalar-original-source-url']\n\n    if (!storeValue || !documentNameValue || !sourceUrl) {\n      return\n    }\n\n    const result = await storeValue.rebaseDocument({\n      name: documentNameValue,\n      url: sourceUrl,\n    })\n\n    if (result?.ok) {\n      // On conflicts, prefer remote changes by automatically choosing the first option for each conflict tuple\n      await result.applyChanges({ resolvedConflicts: resolveConflicts(result.conflicts) })\n      handleSuccess()\n    } else if (result?.ok === false && result.type === 'NO_CHANGES_DETECTED') {\n      // Still a successful call, just nothing changed\n      handleSuccess()\n    } else {\n      // Exponential backoff on failure\n      handleFailure()\n    }\n  }\n\n  /**\n   * Watches for changes to the document's source URL and watch mode.\n   * Starts or stops polling based on these values.\n   */\n  watch(\n    [() => document.value?.['x-scalar-original-source-url'], () => document.value?.['x-scalar-watch-mode']],\n    ([sourceUrl, watchMode = false]) => {\n      const storeValue = toValue(store)\n\n      // Clear timer if store is unavailable\n      if (!storeValue) {\n        timerManager.clear()\n        return\n      }\n\n      // Clear any existing timer\n      timerManager.clear()\n\n      // Stop polling if source URL is missing or watch mode is disabled\n      if (!sourceUrl || !watchMode) {\n        timeoutManager.reset()\n        return\n      }\n\n      // Start polling\n      timerManager.schedule(poll, timeoutManager.get())\n    },\n    { immediate: true },\n  )\n\n  // Cleanup timer on component unmount\n  onBeforeUnmount(() => {\n    timerManager.clear()\n  })\n}\n"],"mappings":";;;;;AAOA,IAAM,0BAA0B,IAAI;;;;AAKpC,IAAM,cAAc,KAAK;;;;;;AAOzB,IAAM,2BAA2B;CAC/B,IAAI,QAA8C;;;;CAKlD,MAAM,cAAoB;AACxB,MAAI,OAAO;AACT,gBAAa,MAAM;AACnB,WAAQ;;;;;;;;;CAUZ,MAAM,YAAY,UAAsB,YAA0B;AAChE,SAAO;AACP,UAAQ,WAAW,UAAU,QAAQ;;AAGvC,QAAO;EACL;EACA;EACD;;;;;;;;AASH,IAAM,wBAAwB,mBAA2B;CACvD,IAAI,iBAAiB;;;;CAKrB,MAAM,cAAoB;AACxB,mBAAiB;;;;;CAMnB,MAAM,gBAAsB;AAC1B,mBAAiB,KAAK,IAAI,iBAAiB,GAAG,YAAY;;;;;CAM5D,MAAM,YAAoB;AAE1B,QAAO;EACL;EACA;EACA;EACD;;;;;;;;;AAUH,IAAM,oBAAoB,cAA4F;AACpH,QAAO,UAAU,SAAS,CAAC,YAAY,OAAO;;;;;;;;;;;;;;;;;;;;;;;;AAyBhD,IAAa,sBAAsB,EACjC,cACA,OACA,iBAAiB,8BAKP;CACV,MAAM,WAAW,eAAe;EAC9B,MAAM,aAAa,QAAQ,MAAM;EACjC,MAAM,oBAAoB,QAAQ,aAAa;AAC/C,MAAI,CAAC,cAAc,CAAC,kBAClB,QAAO;AAET,SAAO,WAAW,UAAU,UAAU;GACtC;CAEF,MAAM,eAAe,oBAAoB;CACzC,MAAM,iBAAiB,qBAAqB,eAAe;;;;CAK3D,MAAM,sBAA4B;AAChC,iBAAe,OAAO;AACtB,eAAa,SAAS,MAAM,eAAe,KAAK,CAAC;;;;;CAMnD,MAAM,sBAA4B;AAChC,iBAAe,SAAS;AACxB,eAAa,SAAS,MAAM,eAAe,KAAK,CAAC;;;;;CAMnD,MAAM,OAAO,YAA2B;EACtC,MAAM,aAAa,QAAQ,MAAM;EACjC,MAAM,oBAAoB,QAAQ,aAAa;EAC/C,MAAM,YAAY,SAAS,QAAQ;AAEnC,MAAI,CAAC,cAAc,CAAC,qBAAqB,CAAC,UACxC;EAGF,MAAM,SAAS,MAAM,WAAW,eAAe;GAC7C,MAAM;GACN,KAAK;GACN,CAAC;AAEF,MAAI,QAAQ,IAAI;AAEd,SAAM,OAAO,aAAa,EAAE,mBAAmB,iBAAiB,OAAO,UAAU,EAAE,CAAC;AACpF,kBAAe;aACN,QAAQ,OAAO,SAAS,OAAO,SAAS,sBAEjD,gBAAe;MAGf,gBAAe;;;;;;AAQnB,OACE,OAAO,SAAS,QAAQ,uCAAuC,SAAS,QAAQ,uBAAuB,GACtG,CAAC,WAAW,YAAY,WAAW;AAIlC,MAAI,CAHe,QAAQ,MAAM,EAGhB;AACf,gBAAa,OAAO;AACpB;;AAIF,eAAa,OAAO;AAGpB,MAAI,CAAC,aAAa,CAAC,WAAW;AAC5B,kBAAe,OAAO;AACtB;;AAIF,eAAa,SAAS,MAAM,eAAe,KAAK,CAAC;IAEnD,EAAE,WAAW,MAAM,CACpB;AAGD,uBAAsB;AACpB,eAAa,OAAO;GACpB"}

package/dist/v2/features/app/hooks/use-theme.d.ts

@@ -16,7 +16,7 @@ import { type MaybeRefOrGetter } from 'vue';
  * ```ts
  * // In a Vue component setup() function
  * import { ref } from 'vue'
- * import { useTheme } from './use-theme'
+ * import { useTheme } from './use-theme.js'
  *
  * const myThemes = ref([...])
  * const workspaceStore = ref(...)

package/dist/v2/features/app/hooks/use-theme.js

@@ -0,0 +1,94 @@
+import { computed, toValue } from "vue";
+import { defaultFonts, themePresets } from "@scalar/themes";
+//#region src/v2/features/app/hooks/use-theme.ts
+var themePresentsMap = new Map(themePresets.map((theme) => [theme.slug, theme]));
+/**
+* Wraps theme CSS styles in a style tag for injection into the DOM.
+*/
+var wrapThemeInStyleTag = (themeStyles, dataTestId = "scalar-theme") => {
+	return `<style id="scalar-theme" data-testid="${dataTestId}">${themeStyles}</style>`;
+};
+/**
+* Resolves theme styles by slug from built-in presets or custom themes.
+* Returns undefined if the theme is not found.
+*/
+var resolveThemeStyles = (themeSlug, customThemes) => {
+	const addFonts = (themeStyles) => {
+		return `${themeStyles}\n${defaultFonts}`;
+	};
+	if (themePresentsMap.has(themeSlug)) return addFonts(themePresentsMap.get(themeSlug)?.theme ?? "");
+	const customTheme = customThemes.find((theme) => theme.slug === themeSlug);
+	if (customTheme) return addFonts(customTheme.theme);
+};
+/**
+* useTheme
+*
+* Reactive Vue.js hook to resolve and generate a <style> tag string based on the current theme.
+* Automatically selects the appropriate theme styles in the following priority order:
+*    1. Workspace theme (from the provided store, e.g. store.workspace['x-scalar-theme'])
+*    2. Fallback theme (from the fallbackThemeSlug prop)
+*    3. Default built-in theme (with slug "default")
+*
+* The returned `themeStyleTag` can be injected into your page to dynamically apply theming.
+*
+* @example
+* ```ts
+* // In a Vue component setup() function
+* import { ref } from 'vue'
+* import { useTheme } from './use-theme.js'
+*
+* const myThemes = ref([...])
+* const workspaceStore = ref(...)
+* const fallbackThemeSlug = ref('dark')
+*
+* const { themeStyleTag } = useTheme({
+*   customThemes: myThemes,
+*   fallbackThemeSlug,
+*   store: workspaceStore
+* })
+*
+* // To inject in template:
+* // <div v-html="themeStyleTag"></div>
+* ```
+*/
+var useTheme = ({ fallbackThemeSlug, store, customThemes }) => {
+	const themeStyles = computed(() => {
+		const defaultThemeStyles = {
+			themeStyles: resolveThemeStyles("default", []),
+			themeSlug: "default"
+		};
+		const storeValue = toValue(store);
+		const fallbackThemeSlugValue = toValue(fallbackThemeSlug);
+		if (storeValue === null) return defaultThemeStyles;
+		const workspaceTheme = storeValue.workspace["x-scalar-theme"];
+		const themeSlug = workspaceTheme === "none" ? fallbackThemeSlugValue : workspaceTheme;
+		if (!themeSlug) {
+			const fallbackStyles = resolveThemeStyles(fallbackThemeSlugValue, toValue(customThemes));
+			return fallbackStyles ? {
+				themeStyles: fallbackStyles,
+				themeSlug: fallbackThemeSlugValue
+			} : defaultThemeStyles;
+		}
+		const themeStyles = resolveThemeStyles(themeSlug, toValue(customThemes));
+		if (themeStyles) return {
+			themeStyles,
+			themeSlug
+		};
+		const fallbackStyles = resolveThemeStyles(fallbackThemeSlugValue, toValue(customThemes));
+		if (fallbackStyles) return {
+			themeStyles: fallbackStyles,
+			themeSlug: fallbackThemeSlugValue
+		};
+		return defaultThemeStyles;
+	});
+	return {
+		themeStyles,
+		themeStyleTag: computed(() => {
+			return wrapThemeInStyleTag(themeStyles.value.themeStyles, themeStyles.value.themeSlug);
+		})
+	};
+};
+//#endregion
+export { useTheme };
+
+//# sourceMappingURL=use-theme.js.map

package/dist/v2/features/app/hooks/use-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme.js","names":[],"sources":["../../../../../src/v2/features/app/hooks/use-theme.ts"],"sourcesContent":["import { type Theme, defaultFonts, themePresets } from '@scalar/themes'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type MaybeRefOrGetter, computed, toValue } from 'vue'\n\nconst themePresentsMap = new Map<string, Theme>(themePresets.map((theme) => [theme.slug, theme]))\n\n/**\n * Wraps theme CSS styles in a style tag for injection into the DOM.\n */\nconst wrapThemeInStyleTag = (themeStyles: string, dataTestId: string = 'scalar-theme') => {\n  return `<style id=\"scalar-theme\" data-testid=\"${dataTestId}\">${themeStyles}</style>`\n}\n\n/**\n * Resolves theme styles by slug from built-in presets or custom themes.\n * Returns undefined if the theme is not found.\n */\nconst resolveThemeStyles = (themeSlug: string, customThemes: Theme[]): string | undefined => {\n  const addFonts = (themeStyles?: string) => {\n    return `${themeStyles}\\n${defaultFonts}`\n  }\n\n  // Check built-in theme presets first\n  if (themePresentsMap.has(themeSlug)) {\n    return addFonts(themePresentsMap.get(themeSlug)?.theme ?? '')\n  }\n\n  // Check custom themes provided via props\n  const customTheme = customThemes.find((theme) => theme.slug === themeSlug)\n  if (customTheme) {\n    return addFonts(customTheme.theme)\n  }\n\n  return undefined\n}\n\n/**\n * useTheme\n *\n * Reactive Vue.js hook to resolve and generate a <style> tag string based on the current theme.\n * Automatically selects the appropriate theme styles in the following priority order:\n *    1. Workspace theme (from the provided store, e.g. store.workspace['x-scalar-theme'])\n *    2. Fallback theme (from the fallbackThemeSlug prop)\n *    3. Default built-in theme (with slug \"default\")\n *\n * The returned `themeStyleTag` can be injected into your page to dynamically apply theming.\n *\n * @example\n * ```ts\n * // In a Vue component setup() function\n * import { ref } from 'vue'\n * import { useTheme } from './use-theme'\n *\n * const myThemes = ref([...])\n * const workspaceStore = ref(...)\n * const fallbackThemeSlug = ref('dark')\n *\n * const { themeStyleTag } = useTheme({\n *   customThemes: myThemes,\n *   fallbackThemeSlug,\n *   store: workspaceStore\n * })\n *\n * // To inject in template:\n * // <div v-html=\"themeStyleTag\"></div>\n * ```\n */\nexport const useTheme = ({\n  fallbackThemeSlug,\n  store,\n  customThemes,\n}: {\n  customThemes: MaybeRefOrGetter<Theme[]>\n  fallbackThemeSlug: MaybeRefOrGetter<string>\n  store: MaybeRefOrGetter<WorkspaceStore | null>\n}) => {\n  const themeStyles = computed<{ themeStyles: string; themeSlug: string }>(() => {\n    // Always-defined fallback: built-in \"default\" theme\n    const defaultThemeStyles = { themeStyles: resolveThemeStyles('default', [])!, themeSlug: 'default' }\n\n    // Evaluate values\n    const storeValue = toValue(store)\n    const fallbackThemeSlugValue = toValue(fallbackThemeSlug)\n\n    // If the store is not loaded, fall back immediately to default styling\n    if (storeValue === null) {\n      return defaultThemeStyles\n    }\n\n    // Determine which theme to use: prefer workspace theme, unless it's 'none'\n    const workspaceTheme = storeValue.workspace['x-scalar-theme']\n    const themeSlug = workspaceTheme === 'none' ? fallbackThemeSlugValue : workspaceTheme\n\n    // First: If no theme slug is set, try fallback theme, else default\n    if (!themeSlug) {\n      const fallbackStyles = resolveThemeStyles(fallbackThemeSlugValue, toValue(customThemes))\n      return fallbackStyles ? { themeStyles: fallbackStyles, themeSlug: fallbackThemeSlugValue } : defaultThemeStyles\n    }\n\n    // Second: Try resolving styles for the workspace or specified theme\n    const themeStyles = resolveThemeStyles(themeSlug, toValue(customThemes))\n    if (themeStyles) {\n      return { themeStyles: themeStyles, themeSlug }\n    }\n\n    // Third: If theme not found, try resolving fallback theme\n    const fallbackStyles = resolveThemeStyles(fallbackThemeSlugValue, toValue(customThemes))\n    if (fallbackStyles) {\n      return { themeStyles: fallbackStyles, themeSlug: fallbackThemeSlugValue }\n    }\n\n    // Last resort: use the built-in default theme\n    return defaultThemeStyles\n  })\n\n  const themeStyleTag = computed(() => {\n    return wrapThemeInStyleTag(themeStyles.value.themeStyles, themeStyles.value.themeSlug)\n  })\n\n  return {\n    /**\n     * Computed ref containing the resolved theme styles object\n     * for the currently active theme. Always returns a style object,\n     * never null, with proper fallback logic if custom or workspace themes are missing.\n     */\n    themeStyles,\n\n    /**\n     * Computed ref containing a <style> tag as a string,\n     * ready to be injected into the DOM.\n     * This wraps the currently active theme CSS variables/styles.\n     */\n    themeStyleTag,\n  }\n}\n"],"mappings":";;;AAIA,IAAM,mBAAmB,IAAI,IAAmB,aAAa,KAAK,UAAU,CAAC,MAAM,MAAM,MAAM,CAAC,CAAC;;;;AAKjG,IAAM,uBAAuB,aAAqB,aAAqB,mBAAmB;AACxF,QAAO,yCAAyC,WAAW,IAAI,YAAY;;;;;;AAO7E,IAAM,sBAAsB,WAAmB,iBAA8C;CAC3F,MAAM,YAAY,gBAAyB;AACzC,SAAO,GAAG,YAAY,IAAI;;AAI5B,KAAI,iBAAiB,IAAI,UAAU,CACjC,QAAO,SAAS,iBAAiB,IAAI,UAAU,EAAE,SAAS,GAAG;CAI/D,MAAM,cAAc,aAAa,MAAM,UAAU,MAAM,SAAS,UAAU;AAC1E,KAAI,YACF,QAAO,SAAS,YAAY,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCtC,IAAa,YAAY,EACvB,mBACA,OACA,mBAKI;CACJ,MAAM,cAAc,eAA2D;EAE7E,MAAM,qBAAqB;GAAE,aAAa,mBAAmB,WAAW,EAAE,CAAC;GAAG,WAAW;GAAW;EAGpG,MAAM,aAAa,QAAQ,MAAM;EACjC,MAAM,yBAAyB,QAAQ,kBAAkB;AAGzD,MAAI,eAAe,KACjB,QAAO;EAIT,MAAM,iBAAiB,WAAW,UAAU;EAC5C,MAAM,YAAY,mBAAmB,SAAS,yBAAyB;AAGvE,MAAI,CAAC,WAAW;GACd,MAAM,iBAAiB,mBAAmB,wBAAwB,QAAQ,aAAa,CAAC;AACxF,UAAO,iBAAiB;IAAE,aAAa;IAAgB,WAAW;IAAwB,GAAG;;EAI/F,MAAM,cAAc,mBAAmB,WAAW,QAAQ,aAAa,CAAC;AACxE,MAAI,YACF,QAAO;GAAe;GAAa;GAAW;EAIhD,MAAM,iBAAiB,mBAAmB,wBAAwB,QAAQ,aAAa,CAAC;AACxF,MAAI,eACF,QAAO;GAAE,aAAa;GAAgB,WAAW;GAAwB;AAI3E,SAAO;GACP;AAMF,QAAO;EAML;EAOA,eAjBoB,eAAe;AACnC,UAAO,oBAAoB,YAAY,MAAM,aAAa,YAAY,MAAM,UAAU;IACtF;EAgBD"}

package/dist/v2/features/app/index.d.ts

@@ -1,9 +1,9 @@
-export { type AppState, createAppState } from '../../../v2/features/app/app-state';
-export { default as CreateWorkspaceModal } from '../../../v2/features/app/components/CreateWorkspaceModal.vue';
-export { default as CommandActionForm } from '../../../v2/features/command-palette/components/CommandActionForm.vue';
-export { default as CommandActionInput } from '../../../v2/features/command-palette/components/CommandActionInput.vue';
+export { type AppState, createAppState } from '../../../v2/features/app/app-state.js';
+export { default as CreateWorkspaceModal } from '../../../v2/features/app/components/CreateWorkspaceModal.vue.js';
+export { default as CommandActionForm } from '../../../v2/features/command-palette/components/CommandActionForm.vue.js';
+export { default as CommandActionInput } from '../../../v2/features/command-palette/components/CommandActionInput.vue.js';
 export type { ClientLayout } from '../../../v2/types/layout';
-export { type CommandPaletteAction, type CommandPaletteRoute, baseClientActions, baseRoutes, useCommandPaletteState, } from '../command-palette/hooks/use-command-palette-state';
-export { default as ClientApp } from './App.vue';
-export { createApiClientApp, createAppRouter } from './helpers/create-api-client-app';
+export { type CommandPaletteAction, type CommandPaletteRoute, baseClientActions, baseRoutes, useCommandPaletteState, } from '../command-palette/hooks/use-command-palette-state.js';
+export { default as ClientApp } from './App.vue.js';
+export { createApiClientApp, createAppRouter } from './helpers/create-api-client-app.js';
 //# sourceMappingURL=index.d.ts.map