perf(swagger-ui): use jsdelivr instead of unpkg to serve swagger-ui a…

…ssets (#701)

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

* format

* add changeset

.changeset/beige-snails-cover.md

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

packages/swagger-ui/src/swagger/resource.ts

@@ -8,7 +8,9 @@ type ResourceConfig = {
 }
 
 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 {
     css: [`${url}/swagger-ui.css`],

packages/swagger-ui/test/index.test.ts

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

packages/swagger-ui/test/remote-assets.test.ts

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