Update scalar to support multi-sources

zoriya · zoriya · commit 95e3b571b3fe · 2025-03-27T01:50:27.000+01:00
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -68,8 +68,8 @@
         "typescript": "^5.5.3"
     },
     "dependencies": {
-        "@scalar/themes": "^0.9.52",
-        "@scalar/types": "^0.0.12",
+        "@scalar/themes": "^0.9.81",
+        "@scalar/types": "^0.1.3",
         "openapi-types": "^12.1.3",
         "pathe": "^1.1.2"
     }
diff --git a/src/index.ts b/src/index.ts
@@ -7,7 +7,7 @@ import { ScalarRender } from './scalar'
 import { filterPaths, registerSchemaPath } from './utils'
 
 import type { OpenAPIV3 } from 'openapi-types'
-import type { ReferenceConfiguration } from '@scalar/types'
+import type { ApiReferenceConfigurationWithSources } from '@scalar/types/api-reference' with { "resolution-mode": "import" };
 import type { ElysiaSwaggerConfig } from './types'
 
 /**
@@ -82,14 +82,11 @@ export const swagger = async <Path extends string = '/swagger'>(
 			}
 		)
 
-		const scalarConfiguration: ReferenceConfiguration = {
-			spec: {
-				...scalarConfig.spec,
-				url: `${new URL(request.url).pathname.replace(/\/$/, "")}/json`
-			},
+		const scalarConfiguration: Partial<ApiReferenceConfigurationWithSources> = {
+			sources: [{url: `${new URL(request.url).pathname.replace(/\/$/, "")}/json` }],
+			// allow scalarConfig to override sources if they want to define more than one
 			...scalarConfig,
 			// so we can showcase the elysia theme
-			// @ts-expect-error
 			_integration: 'elysiajs'
 		}
 
diff --git a/src/scalar/index.ts b/src/scalar/index.ts
@@ -1,11 +1,11 @@
 import { elysiajsTheme } from '@scalar/themes'
 import type { OpenAPIV3 } from 'openapi-types'
-import type { ReferenceConfiguration } from '@scalar/types'
+import type { ApiReferenceConfigurationWithSources } from '@scalar/types/api-reference' with { "resolution-mode": "import" };
 
 export const ScalarRender = (
     info: OpenAPIV3.InfoObject,
     version: string,
-    config: ReferenceConfiguration,
+    config: Partial<ApiReferenceConfigurationWithSources>,
     cdn: string
 ) => `<!doctype html>
 <html>
@@ -33,16 +33,16 @@ export const ScalarRender = (
     </style>
   </head>
   <body>
-    <script
-      id="api-reference"
-      data-url="${config.spec?.url}"
-      data-configuration='${JSON.stringify(config)}'
-    >
-    </script>
+    <div id="app"></div>
+
     <script src="${
         cdn
             ? cdn
             : `https://cdn.jsdelivr.net/npm/@scalar/api-reference@${version}/dist/browser/standalone.min.js`
     }" crossorigin></script>
+
+    <script>
+      Scalar.createApiReference('#app', ${JSON.stringify(config)})
+    </script>
   </body>
 </html>`
diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,5 @@
 import type { OpenAPIV3 } from 'openapi-types'
-import type { ReferenceConfiguration } from '@scalar/types'
+import type { ApiReferenceConfigurationWithSources } from '@scalar/types/api-reference' with { "resolution-mode": "import" };
 import type { SwaggerUIOptions } from './swagger/types'
 
 export interface ElysiaSwaggerConfig<Path extends string = '/swagger'> {
@@ -46,7 +46,7 @@ export interface ElysiaSwaggerConfig<Path extends string = '/swagger'> {
      *'
      * @see https://github.com/scalar/scalar/blob/main/documentation/configuration.md
      */
-    scalarConfig?: ReferenceConfiguration
+    scalarConfig?: Partial<ApiReferenceConfigurationWithSources>
     /**
      * Version to use for swagger cdn bundle
      *
