From 32abe11a4ad67275e3a5e8767684f750d3f04a7a Mon Sep 17 00:00:00 2001
From: rwv <7891383+rwv@users.noreply.github.com>
Date: Sun, 25 Aug 2024 10:41:29 +0800
Subject: [PATCH] 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
---
 .changeset/beige-snails-cover.md               |  5 +++++
 packages/swagger-ui/src/swagger/resource.ts    |  4 +++-
 packages/swagger-ui/test/index.test.ts         | 16 ++++++++--------
 packages/swagger-ui/test/remote-assets.test.ts | 12 ++++++++----
 4 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/beige-snails-cover.md

diff --git a/.changeset/beige-snails-cover.md b/.changeset/beige-snails-cover.md
new file mode 100644
index 00000000..86b96d93
--- /dev/null
+++ b/.changeset/beige-snails-cover.md
@@ -0,0 +1,5 @@
+---
+'@hono/swagger-ui': patch
+---
+
+perf: use jsdelivr instead of unpkg to serve swagger-ui assets
diff --git a/packages/swagger-ui/src/swagger/resource.ts b/packages/swagger-ui/src/swagger/resource.ts
index 26cfc45f..dc456a59 100644
--- a/packages/swagger-ui/src/swagger/resource.ts
+++ b/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`],
diff --git a/packages/swagger-ui/test/index.test.ts b/packages/swagger-ui/test/index.test.ts
index c65be060..0549b0aa 100644
--- a/packages/swagger-ui/test/index.test.ts
+++ b/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/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>
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.0.0/swagger-ui.css" />
+      <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.0.0/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({
diff --git a/packages/swagger-ui/test/remote-assets.test.ts b/packages/swagger-ui/test/remote-assets.test.ts
index 3217f2f0..5daddd33 100644
--- a/packages/swagger-ui/test/remote-assets.test.ts
+++ b/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`,
+    ])
   })
 })