@scalar/nuxt 0.4.34 → 0.5.0

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@scalar/nuxt",
   "configKey": "scalar",
-  "version": "0.4.34",
+  "version": "0.5.0",
   "builder": {
-    "@nuxt/module-builder": "0.8.1",
+    "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponent, extendPages, addPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponent, extendPages } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -26,6 +26,7 @@ const module = defineNuxtModule({
     _nuxt.options.imports.transform ||= {};
     _nuxt.options.imports.transform.exclude ||= [];
     _nuxt.options.imports.transform.exclude.push(/scalar/);
+    _nuxt.options.vite ||= {};
     _nuxt.options.vite.optimizeDeps ||= {};
     _nuxt.options.vite.optimizeDeps.include ||= [];
     _nuxt.options.vite.optimizeDeps.include.push(
@@ -34,9 +35,23 @@ const module = defineNuxtModule({
       "@scalar/nuxt > ajv-draft-04",
       "@scalar/nuxt > ajv-formats",
       "@scalar/nuxt > ajv",
-      "@scalar/nuxt > asjv-draft-04 > ajv",
-      "@scalar/nuxt > asjv-formats > ajv"
+      "@scalar/nuxt > ajv-draft-04 > ajv",
+      "@scalar/nuxt > ajv-formats > ajv",
+      "@scalar/nuxt > whatwg-mimetype"
     );
+    _nuxt.options.vite.ssr ||= {};
+    if (Array.isArray(_nuxt.options.vite.ssr.noExternal)) {
+      _nuxt.options.vite.ssr.noExternal.push("ajv-draft-04", "ajv-formats", "ajv", "jsonpointer", "whatwg-mimetype");
+    } else {
+      _nuxt.options.vite.ssr.noExternal = [
+        ...Array.isArray(_nuxt.options.vite.ssr.noExternal) ? _nuxt.options.vite.ssr.noExternal : [],
+        "ajv-draft-04",
+        "ajv-formats",
+        "ajv",
+        "jsonpointer",
+        "whatwg-mimetype"
+      ];
+    }
     _nuxt.hook("nitro:config", (config) => {
       if (config.experimental?.openAPI) {
         isOpenApiEnabled = true;
@@ -92,7 +107,6 @@ const module = defineNuxtModule({
         });
       });
     }
-    addPlugin(resolver.resolve("./runtime/plugins/hydrateClient"));
   }
 });
 

package/dist/runtime/components/ScalarApiReference.vue

@@ -1,104 +1,124 @@
-<script lang="ts" setup>
-import { ApiReferenceLayout, parse } from '@scalar/api-reference'
-import type { ApiReferenceConfiguration } from '@scalar/types/api-reference'
-import { useColorMode } from '@scalar/use-hooks/useColorMode'
-import { useFetch, useHead, useRequestURL, useSeoMeta } from '#imports'
-import type { Configuration } from '~/src/types'
-import { onMounted, reactive, ref, toRaw, watch } from 'vue'
-
-const props = defineProps<{
-  configuration: Configuration
-}>()
-
-const isDark = ref(props.configuration.darkMode)
-const forcedMode = props.configuration.forceDarkModeState
-
+<script setup>
+import { ApiReferenceWorkspace } from "@scalar/api-reference";
+import { useColorMode } from "@scalar/use-hooks/useColorMode";
+import { createWorkspaceStore } from "@scalar/workspace-store/client";
+import {
+  useAsyncData,
+  useFetch,
+  useHead,
+  useRequestURL,
+  useRoute,
+  useSeoMeta,
+  useState
+} from "#imports";
+import { onMounted, ref, toRaw, watch } from "vue";
+const props = defineProps({
+  configuration: { type: Object, required: true }
+});
+const isDark = ref(props.configuration.darkMode);
+const forcedMode = props.configuration.forceDarkModeState;
 const { colorMode, toggleColorMode } = useColorMode({
-  initialColorMode: props.configuration.darkMode ? 'dark' : 'light',
-  overrideColorMode: props.configuration.forceDarkModeState,
-})
-
-// @ts-expect-error support the old syntax for a bit
-const content = props.configuration.spec?.content ?? props.configuration.content
-// @ts-expect-error support the old syntax for a bit
-const url = props.configuration.spec?.url ?? props.configuration.url
-
-// Grab spec if we can
-const document =
-  typeof content === 'function'
-    ? toRaw(content())
-    : content
-      ? toRaw(content)
-      : url
-        ? (await useFetch<string>(url, { responseType: 'text' })).data.value
-        : (await useFetch<string>('/_openapi.json', { responseType: 'text' }))
-            .data.value
-
-// Set the fetched spec to the config content to prevent ApiReferenceLayout from fetching it again on the client side
-props.configuration.content = document
-
-// Check for empty spec
+  initialColorMode: props.configuration.darkMode ? "dark" : "light",
+  overrideColorMode: props.configuration.forceDarkModeState
+});
+const content = props.configuration.spec?.content ?? props.configuration.content;
+const url = props.configuration.spec?.url ?? props.configuration.url;
+const currentRoute = useRoute();
+const meta = currentRoute.meta;
+const document = useState("document", () => null);
+if (!document.value) {
+  if (typeof content === "function") {
+    document.value = content();
+  } else if (content) {
+    document.value = content;
+  } else if (url) {
+    try {
+      const response = await useFetch(url, { responseType: "text" });
+      document.value = response.data.value || null;
+    } catch (error) {
+      console.error("Failed to fetch spec from URL:", error);
+    }
+  } else if (meta.isOpenApiEnabled) {
+    try {
+      const { data } = await useAsyncData("openapi-spec", async () => {
+        const response = await $fetch("/_openapi.json", {
+          responseType: "text"
+        });
+        return response;
+      });
+      document.value = data.value || null;
+    } catch (error) {
+      console.error("Failed to fetch OpenAPI spec from /_openapi.json:", error);
+    }
+  }
+}
+props.configuration.content = document.value;
 if (!document) {
-  throw new Error('You must provide a document for Scalar API References')
+  throw new Error(
+    "You must provide a document for Scalar API References. Either provide a spec URL/content, or enable experimental openAPI in the Nitro config."
+  );
 }
-
-const parsedSpec = reactive(await parse(document))
-const rawSpec = JSON.stringify(document)
-
-// Load up the metadata
 if (props.configuration?.metaData) {
-  useSeoMeta(props.configuration.metaData)
+  useSeoMeta(props.configuration.metaData);
 }
-
 useHead({
   script: [
     {
       // Inject dark / light detection that runs before loading Nuxt to avoid flicker
       // This is a bit of a hack inspired by @nuxtjs/color-mode, but it works
-      id: 'scalar-color-mode-script',
-      tagPosition: 'bodyClose',
+      id: "scalar-color-mode-script",
+      tagPosition: "bodyClose",
       innerHTML: `((isDark, forced) => {
         try {
           const stored = window.localStorage.getItem('colorMode');
           const useDark = forced === 'dark' || !forced && (stored === 'dark' || !stored && isDark);
           window.document.body.classList.add(useDark ? 'dark-mode' : 'light-mode');
         } catch {}
-      })(${isDark.value}, ${JSON.stringify(forcedMode)});`
-        .replace(/[\n\r]/g, '')
-        .replace(/ +/g, ' '),
-    },
-  ],
-})
-
+      })(${isDark.value}, ${JSON.stringify(forcedMode)});`.replace(/[\n\r]/g, "").replace(/ +/g, " ")
+    }
+  ]
+});
 watch(colorMode, () => {
-  isDark.value = colorMode.value === 'dark'
-})
-
+  isDark.value = colorMode.value === "dark";
+});
 onMounted(() => {
-  // Adjust the color mode toggle switch
-  isDark.value = window.document.body.classList.contains('dark-mode')
-  // Remove scalar-color-mode-script
-  window.document.getElementById('scalar-color-mode-script')?.remove()
-})
-
-// Add baseServerURL and _integration
-const { origin } = useRequestURL()
-
-const config: Partial<ApiReferenceConfiguration> = {
+  isDark.value = window.document.body.classList.contains("dark-mode");
+  window.document.getElementById("scalar-color-mode-script")?.remove();
+});
+const { origin } = useRequestURL();
+const config = {
   baseServerURL: origin,
-  _integration: 'nuxt',
-  layout: 'modern',
-  ...props.configuration,
+  _integration: "nuxt",
+  layout: "modern",
+  ...props.configuration
+};
+const route = useRoute();
+const store = createWorkspaceStore();
+let parsedDocument;
+if (typeof document.value === "string") {
+  try {
+    parsedDocument = JSON.parse(document.value);
+  } catch (error) {
+    console.error("Failed to parse OpenAPI document:", error);
+    throw new Error("Invalid OpenAPI document format");
+  }
+} else {
+  if (document.value && typeof document.value === "object") {
+    parsedDocument = document.value;
+  } else {
+    throw new Error("Document must be a valid OpenAPI object");
+  }
 }
+store.addDocument({
+  name: route.name,
+  document: parsedDocument
+});
 </script>
 
 <template>
-  <ApiReferenceLayout
-    :configuration="config"
-    :isDark="!!isDark"
-    :parsedSpec="parsedSpec"
-    :rawSpec="rawSpec"
-    @toggleDarkMode="() => toggleColorMode()" />
+  <ApiReferenceWorkspace
+    :store
+    :configuration="config" />
 </template>
 
 <style>

package/dist/runtime/components/ScalarApiReference.vue.d.ts

@@ -0,0 +1,15 @@
+import type { Configuration } from '../../types.js';
+type __VLS_Props = {
+    configuration: Configuration;
+};
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/runtime/pages/ScalarPage.vue

@@ -1,23 +1,13 @@
-<script lang="ts" setup>
-import { useRoute } from '#imports'
-import type { Meta } from '~/src/types'
-
-const route = useRoute()
-const meta = route.meta as Meta
-
-// Ensure we have a spec
-if (
-  !meta.isOpenApiEnabled &&
-  !meta.configuration?.url &&
-  !meta.configuration?.content &&
-  // @ts-expect-error support the old syntax for a bit
-  !meta.configuration?.spec?.url &&
-  // @ts-expect-error support the old syntax for a bit
-  !meta.configuration?.spec?.content
-) {
+<script setup>
+import { useRoute } from "#imports";
+const route = useRoute();
+const meta = route.meta;
+if (!meta.isOpenApiEnabled && !meta.configuration?.url && !meta.configuration?.content && // @ts-expect-error support the old syntax for a bit
+!meta.configuration?.spec?.url && // @ts-expect-error support the old syntax for a bit
+!meta.configuration?.spec?.content) {
   throw new Error(
-    'You must either provide a spec to scalar, or enable experimental openApi in the Nitro config.',
-  )
+    "You must either provide a spec to scalar, or enable experimental openApi in the Nitro config."
+  );
 }
 </script>
 

package/dist/runtime/pages/ScalarPage.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/types.d.mts

@@ -1 +1 @@
-export { type ModuleOptions, default } from './module.js'
+export { type ModuleOptions, default } from './module.mjs'

package/package.json

@@ -20,42 +20,42 @@
     "testing",
     "vue"
   ],
-  "version": "0.4.34",
+  "version": "0.5.0",
   "engines": {
     "node": ">=20"
   },
   "type": "module",
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "^3.12.3",
-    "@scalar/api-reference": "1.32.10",
-    "@scalar/api-client": "2.5.19",
+    "@nuxt/kit": "^4.0.0",
+    "vue": "^3.5.17",
+    "@scalar/api-reference": "1.34.0",
+    "@scalar/types": "0.2.11",
+    "@scalar/api-client": "2.5.21",
     "@scalar/use-hooks": "0.2.4",
-    "@scalar/types": "0.2.10"
+    "@scalar/workspace-store": "0.12.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.9",
+    "@nuxt/devtools": "^2.6.2",
     "@nuxt/eslint-config": "^0.7.3",
-    "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/schema": "^3.12.3",
-    "@nuxt/test-utils": "^3.13.1",
+    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/schema": "^4.0.0",
+    "@nuxt/test-utils": "^3.19.2",
     "@types/node": "^22.9.0",
-    "changelogen": "^0.5.5",
     "cross-env": "^7.0.3",
-    "nuxt": "^3.12.4",
-    "vite": "5.4.19",
-    "vitest": "^1.6.1"
+    "nuxt": "^4.0.0",
+    "vite": "6.1.6",
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "build": "cross-env NUXT_TELEMETRY_DISABLED=false pnpm dev:prepare && nuxt-module-build build",
@@ -67,6 +67,6 @@
     "lint:check": "scalar-lint-check",
     "lint:fix": "scalar-lint-fix",
     "test:watch": "vitest watch",
-    "types:check": "nuxi typecheck"
+    "types:check": "NUXT_TELEMETRY_DISABLED=true nuxi typecheck"
   }
 }

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,29 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-import { ApiReferenceConfiguration } from '@scalar/types/api-reference';
-
-type Configuration = Omit<Partial<ApiReferenceConfiguration>, 'layout' | 'isEditable' | 'onSpecUpdate' | 'theme'> & {
-    /**
-     * Whether to show scalar in Nuxt DevTools
-     *
-     * @default true
-     */
-    devtools: boolean;
-    /**
-     * The theme to use for the reference
-     *
-     * @default undefined (nuxt theme)
-     */
-    theme?: ApiReferenceConfiguration['theme'];
-};
-
-type ModuleOptions = {
-    /**
-     * For multiple references, pass an array of config objects into
-     * configurations. These configurations will extend over the base config
-     */
-    configurations: Omit<Configuration, 'devtools'>[];
-    layout: string | false;
-} & Configuration;
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
-
-export { type ModuleOptions, _default as default };

package/dist/runtime/plugins/hydrateClient.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugins/hydrateClient.js

@@ -1,13 +0,0 @@
-import { defineNuxtPlugin } from "#app";
-import { useHead } from "#imports";
-export default defineNuxtPlugin((_nuxtApp) => {
-  _nuxtApp.hook("app:rendered", ({ ssrContext }) => {
-    useHead({
-      script: [
-        {
-          children: `window.__SCALAR__ = ${JSON.stringify(ssrContext?.payload?.data ?? {})}`
-        }
-      ]
-    });
-  });
-});

package/dist/types.d.ts

@@ -1 +0,0 @@
-export { type ModuleOptions, default } from './module'