2023-11-04 17:18:20 +08:00
|
|
|
import type { Env, MiddlewareHandler } from 'hono'
|
|
|
|
|
import { html } from 'hono/html'
|
|
|
|
|
import type { DistSwaggerUIOptions } from './swagger/renderer'
|
|
|
|
|
import { renderSwaggerUIOptions } from './swagger/renderer'
|
|
|
|
|
import type { AssetURLs } from './swagger/resource'
|
|
|
|
|
import { remoteAssets } from './swagger/resource'
|
|
|
|
|
|
|
|
|
|
type OriginalSwaggerUIOptions = {
|
|
|
|
|
version?: string
|
|
|
|
|
/**
|
|
|
|
|
* manuallySwaggerUIHtml is a string that is used to render SwaggerUI.
|
|
|
|
|
* If this is set, all other options will be ignored except version.
|
|
|
|
|
* The string will be inserted into the body of the HTML.
|
|
|
|
|
* This is useful when you want to fully customize the UI.
|
|
|
|
|
*
|
|
|
|
|
* @example
|
|
|
|
|
* ```ts
|
|
|
|
|
* const swaggerUI = SwaggerUI({
|
|
|
|
|
* manuallySwaggerUIHtml: (asset) => `
|
|
|
|
|
* <div>
|
|
|
|
|
* <div id="swagger-ui"></div>
|
|
|
|
|
* ${asset.css.map((url) => `<link rel="stylesheet" href="${url}" />`)}
|
|
|
|
|
* ${asset.js.map((url) => `<script src="${url}" crossorigin="anonymous"></script>`)}
|
|
|
|
|
* <script>
|
|
|
|
|
* window.onload = () => {
|
|
|
|
|
* window.ui = SwaggerUIBundle({
|
|
|
|
|
* dom_id: '#swagger-ui',
|
|
|
|
|
* url: 'https://petstore.swagger.io/v2/swagger.json',
|
|
|
|
|
* })
|
|
|
|
|
* }
|
|
|
|
|
* </script>
|
|
|
|
|
* </div>
|
|
|
|
|
* `,
|
|
|
|
|
* })
|
|
|
|
|
* ```
|
|
|
|
|
*/
|
|
|
|
|
manuallySwaggerUIHtml?: (asset: AssetURLs) => string
|
2024-11-26 07:21:30 +08:00
|
|
|
title?: string
|
2023-11-04 17:18:20 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type SwaggerUIOptions = OriginalSwaggerUIOptions & DistSwaggerUIOptions
|
|
|
|
|
|
2025-06-09 17:52:25 +08:00
|
|
|
const SwaggerUI = (options: SwaggerUIOptions): string => {
|
2023-11-04 17:18:20 +08:00
|
|
|
const asset = remoteAssets({ version: options?.version })
|
|
|
|
|
delete options.version
|
|
|
|
|
|
|
|
|
|
if (options.manuallySwaggerUIHtml) {
|
|
|
|
|
return options.manuallySwaggerUIHtml(asset)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const optionsStrings = renderSwaggerUIOptions(options)
|
|
|
|
|
|
|
|
|
|
return `
|
|
|
|
|
<div>
|
|
|
|
|
<div id="swagger-ui"></div>
|
|
|
|
|
${asset.css.map((url) => html`<link rel="stylesheet" href="${url}" />`)}
|
|
|
|
|
${asset.js.map((url) => html`<script src="${url}" crossorigin="anonymous"></script>`)}
|
|
|
|
|
<script>
|
|
|
|
|
window.onload = () => {
|
|
|
|
|
window.ui = SwaggerUIBundle({
|
|
|
|
|
dom_id: '#swagger-ui',${optionsStrings},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const middleware =
|
|
|
|
|
<E extends Env>(options: SwaggerUIOptions): MiddlewareHandler<E> =>
|
|
|
|
|
async (c) => {
|
2024-12-25 17:08:43 +08:00
|
|
|
const title = options?.title ?? 'SwaggerUI'
|
2023-11-04 17:18:20 +08:00
|
|
|
return c.html(/* html */ `
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
<meta name="description" content="SwaggerUI" />
|
2024-11-26 07:21:30 +08:00
|
|
|
<title>${title}</title>
|
2023-11-04 17:18:20 +08:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
${SwaggerUI(options)}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export { middleware as swaggerUI, SwaggerUI }
|
|
|
|
|
export { SwaggerUIOptions }
|
