perf(swagger-ui): use jsdelivr instead of unpkg to serve swagger-ui assets (#701)

* perf: use jsdelivr instead of unpkg to serve swagger-ui assets

* format

* add changeset
pull/713/head
rwv 2024-08-25 10:41:29 +08:00 committed by GitHub
parent f4030cb845
commit 32abe11a4a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 24 additions and 13 deletions

View File

@ -0,0 +1,5 @@
---
'@hono/swagger-ui': patch
---
perf: use jsdelivr instead of unpkg to serve swagger-ui assets

View File

@ -8,7 +8,9 @@ type ResourceConfig = {
} }
export const remoteAssets = ({ version }: ResourceConfig): AssetURLs => { export const remoteAssets = ({ version }: ResourceConfig): AssetURLs => {
const url = `https://unpkg.com/swagger-ui-dist${version !== undefined ? `@${version}` : ''}` const url = `https://cdn.jsdelivr.net/npm/swagger-ui-dist${
version !== undefined ? `@${version}` : ''
}`
return { return {
css: [`${url}/swagger-ui.css`], css: [`${url}/swagger-ui.css`],

View File

@ -8,8 +8,8 @@ describe('SwaggerUI Rendering', () => {
expect(SwaggerUI({ url }).toString()).toEqual(` expect(SwaggerUI({ url }).toString()).toEqual(`
<div> <div>
<div id="swagger-ui"></div> <div id="swagger-ui"></div>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist/swagger-ui.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui.css" />
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui-bundle.js" crossorigin="anonymous"></script>
<script> <script>
window.onload = () => { window.onload = () => {
window.ui = SwaggerUIBundle({ window.ui = SwaggerUIBundle({
@ -25,8 +25,8 @@ describe('SwaggerUI Rendering', () => {
expect(SwaggerUI({ url, version: '5.0.0' }).toString()).toEqual(` expect(SwaggerUI({ url, version: '5.0.0' }).toString()).toEqual(`
<div> <div>
<div id="swagger-ui"></div> <div id="swagger-ui"></div>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.0.0/swagger-ui.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.0.0/swagger-ui.css" />
<script src="https://unpkg.com/swagger-ui-dist@5.0.0/swagger-ui-bundle.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.0.0/swagger-ui-bundle.js" crossorigin="anonymous"></script>
<script> <script>
window.onload = () => { window.onload = () => {
window.ui = SwaggerUIBundle({ window.ui = SwaggerUIBundle({
@ -51,8 +51,8 @@ describe('SwaggerUI Rendering', () => {
).toEqual(` ).toEqual(`
<div> <div>
<div id="swagger-ui"></div> <div id="swagger-ui"></div>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist/swagger-ui.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui.css" />
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui-bundle.js" crossorigin="anonymous"></script>
<script> <script>
window.onload = () => { window.onload = () => {
window.ui = SwaggerUIBundle({ window.ui = SwaggerUIBundle({
@ -89,8 +89,8 @@ describe('SwaggerUI Rendering', () => {
` `
<div> <div>
<div id="swagger-ui-manually"></div> <div id="swagger-ui-manually"></div>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist/swagger-ui.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui.css" />
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui-bundle.js" crossorigin="anonymous"></script>
<script> <script>
window.onload = () => { window.onload = () => {
window.ui = SwaggerUIBundle({ window.ui = SwaggerUIBundle({

View File

@ -3,14 +3,18 @@ import { remoteAssets } from '../src/swagger/resource'
describe('remoteAssets', () => { describe('remoteAssets', () => {
it('should return default assets when no version is provided', () => { it('should return default assets when no version is provided', () => {
const assets = remoteAssets({}) const assets = remoteAssets({})
expect(assets.css).toEqual(['https://unpkg.com/swagger-ui-dist/swagger-ui.css']) expect(assets.css).toEqual(['https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui.css'])
expect(assets.js).toEqual(['https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js']) expect(assets.js).toEqual(['https://cdn.jsdelivr.net/npm/swagger-ui-dist/swagger-ui-bundle.js'])
}) })
it('should return assets with version when version is provided', () => { it('should return assets with version when version is provided', () => {
const version = '1.2.3' const version = '1.2.3'
const assets = remoteAssets({ version }) const assets = remoteAssets({ version })
expect(assets.css).toEqual([`https://unpkg.com/swagger-ui-dist@${version}/swagger-ui.css`]) expect(assets.css).toEqual([
expect(assets.js).toEqual([`https://unpkg.com/swagger-ui-dist@${version}/swagger-ui-bundle.js`]) `https://cdn.jsdelivr.net/npm/swagger-ui-dist@${version}/swagger-ui.css`,
])
expect(assets.js).toEqual([
`https://cdn.jsdelivr.net/npm/swagger-ui-dist@${version}/swagger-ui-bundle.js`,
])
}) })
}) })