@scalar/hono-api-reference 0.1.21 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +12 -10
  2. package/dist/index.d.cts +3 -3
  3. package/dist/index.d.ts +3 -3
  4. package/dist/index.js +10 -8
  5. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -20,9 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // src/index.ts
21
21
  var src_exports = {};
22
22
  __export(src_exports, {
23
- ApiReference: () => ApiReference,
24
23
  apiReference: () => apiReference,
25
- customThemeCSS: () => customThemeCSS
24
+ customThemeCSS: () => customThemeCSS,
25
+ javascript: () => javascript
26
26
  });
27
27
  module.exports = __toCommonJS(src_exports);
28
28
 
@@ -133,14 +133,16 @@ var customThemeCSS = `
133
133
  --sidebar-search--color: var(--theme-color-3);
134
134
  }
135
135
  `;
136
- var ApiReference = (options) => {
136
+ var javascript = (configuration) => {
137
137
  return import_html.html`
138
138
  <script
139
139
  id="api-reference"
140
- data-url="${options.spec?.url}"
141
- data-configuration="${(0, import_html.raw)(
142
- JSON.stringify(options).split('"').join("&quot;")
143
- )}"></script>
140
+ type="application/json"
141
+ data-configuration="${JSON.stringify(configuration).split('"').join("&quot;")}">
142
+ ${(0, import_html.raw)(
143
+ configuration.spec?.content ? typeof configuration.spec?.content === "function" ? JSON.stringify(configuration.spec?.content()) : JSON.stringify(configuration.spec?.content) : ""
144
+ )}
145
+ </script>
144
146
  <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
145
147
  `;
146
148
  };
@@ -165,7 +167,7 @@ var apiReference = (options) => async (c) => {
165
167
  </style>
166
168
  </head>
167
169
  <body>
168
- ${ApiReference(options)}
170
+ ${javascript(options)}
169
171
  </body>
170
172
  </html>
171
173
  `
@@ -173,7 +175,7 @@ var apiReference = (options) => async (c) => {
173
175
  };
174
176
  // Annotate the CommonJS export names for ESM import in node:
175
177
  0 && (module.exports = {
176
- ApiReference,
177
178
  apiReference,
178
- customThemeCSS
179
+ customThemeCSS,
180
+ javascript
179
181
  });
package/dist/index.d.cts CHANGED
@@ -10,12 +10,12 @@ type ApiReferenceOptions = ReferenceConfiguration & {
10
10
  */
11
11
  declare const customThemeCSS = "\n:root {\n --theme-font: 'Inter', var(--system-fonts);\n}\n\n.light-mode {\n color-scheme: light;\n --theme-color-1: #2a2f45;\n --theme-color-2: #757575;\n --theme-color-3: #8e8e8e;\n --theme-color-disabled: #b4b1b1;\n --theme-color-ghost: #a7a7a7;\n --theme-color-accent: #0099ff;\n --theme-background-1: #fff;\n --theme-background-2: #f6f6f6;\n --theme-background-3: #e7e7e7;\n --theme-background-4: rgba(0, 0, 0, 0.06);\n --theme-background-accent: #8ab4f81f;\n\n --theme-border-color: rgba(0, 0, 0, 0.1);\n --theme-scrollbar-color: rgba(0, 0, 0, 0.18);\n --theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);\n --theme-lifted-brightness: 1;\n --theme-backdrop-brightness: 1;\n\n --theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);\n --theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,\n rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;\n\n --theme-button-1: rgb(49 53 56);\n --theme-button-1-color: #fff;\n --theme-button-1-hover: rgb(28 31 33);\n\n --theme-color-green: #069061;\n --theme-color-red: #ef0006;\n --theme-color-yellow: #edbe20;\n --theme-color-blue: #0082d0;\n --theme-color-orange: #fb892c;\n --theme-color-purple: #5203d1;\n}\n\n.dark-mode {\n color-scheme: dark;\n --theme-color-1: rgba(255, 255, 245, .86);\n --theme-color-2: rgba(255, 255, 245, .6);\n --theme-color-3: rgba(255, 255, 245, .38);\n --theme-color-disabled: rgba(255, 255, 245, .25);\n --theme-color-ghost: rgba(255, 255, 245, .25);\n --theme-color-accent: #e36002;\n --theme-background-1: #1e1e20;\n --theme-background-2: #2a2a2a;\n --theme-background-3: #505053;\n --theme-background-4: rgba(255, 255, 255, 0.06);\n --theme-background-accent: #e360021f;\n\n --theme-border-color: rgba(255, 255, 255, 0.1);\n --theme-scrollbar-color: rgba(255, 255, 255, 0.24);\n --theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);\n --theme-lifted-brightness: 1.45;\n --theme-backdrop-brightness: 0.5;\n\n --theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);\n --theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,\n rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);\n\n --theme-button-1: #f6f6f6;\n --theme-button-1-color: #000;\n --theme-button-1-hover: #e7e7e7;\n\n --theme-color-green: #3dd68c;\n --theme-color-red: #f66f81;\n --theme-color-yellow: #f9b44e;\n --theme-color-blue: #5c73e7;\n --theme-color-orange: #ff8d4d;\n --theme-color-purple: #b191f9;\n}\n/* Sidebar */\n.light-mode .t-doc__sidebar {\n --sidebar-background-1: var(--theme-background-1);\n --sidebar-item-hover-color: currentColor;\n --sidebar-item-hover-background: var(--theme-background-2);\n --sidebar-item-active-background: var(--theme-background-accent);\n --sidebar-border-color: var(--theme-border-color);\n --sidebar-color-1: var(--theme-color-1);\n --sidebar-color-2: var(--theme-color-2);\n --sidebar-color-active: var(--theme-color-accent);\n --sidebar-search-background: var(--theme-background-2);\n --sidebar-search-border-color: var(--sidebar-border-color);\n --sidebar-search--color: var(--theme-color-3);\n}\n\n.dark-mode .sidebar {\n --sidebar-background-1: #161618;\n --sidebar-item-hover-color: var(--theme-color-accent);\n --sidebar-item-hover-background: transparent;\n --sidebar-item-active-background: transparent;\n --sidebar-border-color: transparent;\n --sidebar-color-1: var(--theme-color-1);\n --sidebar-color-2: var(--theme-color-2);\n --sidebar-color-active: var(--theme-color-accent);\n --sidebar-search-background: #252529;\n --sidebar-search-border-color: transparent;\n --sidebar-search--color: var(--theme-color-3);\n}\n";
12
12
  /**
13
- * The HTML to load the @scalar/api-reference package.
13
+ * The HTML to load the @scalar/api-reference JavaScript package.
14
14
  */
15
- declare const ApiReference: (options: ApiReferenceOptions) => hono_utils_html.HtmlEscapedString;
15
+ declare const javascript: (configuration: ReferenceConfiguration) => hono_utils_html.HtmlEscapedString;
16
16
  /**
17
17
  * The middleware for the API Reference.
18
18
  */
19
19
  declare const apiReference: <E extends Env>(options: ApiReferenceOptions) => MiddlewareHandler<E>;
20
20
 
21
- export { ApiReference, ApiReferenceOptions, apiReference, customThemeCSS };
21
+ export { ApiReferenceOptions, apiReference, customThemeCSS, javascript };
package/dist/index.d.ts CHANGED
@@ -10,12 +10,12 @@ type ApiReferenceOptions = ReferenceConfiguration & {
10
10
  */
11
11
  declare const customThemeCSS = "\n:root {\n --theme-font: 'Inter', var(--system-fonts);\n}\n\n.light-mode {\n color-scheme: light;\n --theme-color-1: #2a2f45;\n --theme-color-2: #757575;\n --theme-color-3: #8e8e8e;\n --theme-color-disabled: #b4b1b1;\n --theme-color-ghost: #a7a7a7;\n --theme-color-accent: #0099ff;\n --theme-background-1: #fff;\n --theme-background-2: #f6f6f6;\n --theme-background-3: #e7e7e7;\n --theme-background-4: rgba(0, 0, 0, 0.06);\n --theme-background-accent: #8ab4f81f;\n\n --theme-border-color: rgba(0, 0, 0, 0.1);\n --theme-scrollbar-color: rgba(0, 0, 0, 0.18);\n --theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);\n --theme-lifted-brightness: 1;\n --theme-backdrop-brightness: 1;\n\n --theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);\n --theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,\n rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;\n\n --theme-button-1: rgb(49 53 56);\n --theme-button-1-color: #fff;\n --theme-button-1-hover: rgb(28 31 33);\n\n --theme-color-green: #069061;\n --theme-color-red: #ef0006;\n --theme-color-yellow: #edbe20;\n --theme-color-blue: #0082d0;\n --theme-color-orange: #fb892c;\n --theme-color-purple: #5203d1;\n}\n\n.dark-mode {\n color-scheme: dark;\n --theme-color-1: rgba(255, 255, 245, .86);\n --theme-color-2: rgba(255, 255, 245, .6);\n --theme-color-3: rgba(255, 255, 245, .38);\n --theme-color-disabled: rgba(255, 255, 245, .25);\n --theme-color-ghost: rgba(255, 255, 245, .25);\n --theme-color-accent: #e36002;\n --theme-background-1: #1e1e20;\n --theme-background-2: #2a2a2a;\n --theme-background-3: #505053;\n --theme-background-4: rgba(255, 255, 255, 0.06);\n --theme-background-accent: #e360021f;\n\n --theme-border-color: rgba(255, 255, 255, 0.1);\n --theme-scrollbar-color: rgba(255, 255, 255, 0.24);\n --theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);\n --theme-lifted-brightness: 1.45;\n --theme-backdrop-brightness: 0.5;\n\n --theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);\n --theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,\n rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);\n\n --theme-button-1: #f6f6f6;\n --theme-button-1-color: #000;\n --theme-button-1-hover: #e7e7e7;\n\n --theme-color-green: #3dd68c;\n --theme-color-red: #f66f81;\n --theme-color-yellow: #f9b44e;\n --theme-color-blue: #5c73e7;\n --theme-color-orange: #ff8d4d;\n --theme-color-purple: #b191f9;\n}\n/* Sidebar */\n.light-mode .t-doc__sidebar {\n --sidebar-background-1: var(--theme-background-1);\n --sidebar-item-hover-color: currentColor;\n --sidebar-item-hover-background: var(--theme-background-2);\n --sidebar-item-active-background: var(--theme-background-accent);\n --sidebar-border-color: var(--theme-border-color);\n --sidebar-color-1: var(--theme-color-1);\n --sidebar-color-2: var(--theme-color-2);\n --sidebar-color-active: var(--theme-color-accent);\n --sidebar-search-background: var(--theme-background-2);\n --sidebar-search-border-color: var(--sidebar-border-color);\n --sidebar-search--color: var(--theme-color-3);\n}\n\n.dark-mode .sidebar {\n --sidebar-background-1: #161618;\n --sidebar-item-hover-color: var(--theme-color-accent);\n --sidebar-item-hover-background: transparent;\n --sidebar-item-active-background: transparent;\n --sidebar-border-color: transparent;\n --sidebar-color-1: var(--theme-color-1);\n --sidebar-color-2: var(--theme-color-2);\n --sidebar-color-active: var(--theme-color-accent);\n --sidebar-search-background: #252529;\n --sidebar-search-border-color: transparent;\n --sidebar-search--color: var(--theme-color-3);\n}\n";
12
12
  /**
13
- * The HTML to load the @scalar/api-reference package.
13
+ * The HTML to load the @scalar/api-reference JavaScript package.
14
14
  */
15
- declare const ApiReference: (options: ApiReferenceOptions) => hono_utils_html.HtmlEscapedString;
15
+ declare const javascript: (configuration: ReferenceConfiguration) => hono_utils_html.HtmlEscapedString;
16
16
  /**
17
17
  * The middleware for the API Reference.
18
18
  */
19
19
  declare const apiReference: <E extends Env>(options: ApiReferenceOptions) => MiddlewareHandler<E>;
20
20
 
21
- export { ApiReference, ApiReferenceOptions, apiReference, customThemeCSS };
21
+ export { ApiReferenceOptions, apiReference, customThemeCSS, javascript };
package/dist/index.js CHANGED
@@ -105,14 +105,16 @@ var customThemeCSS = `
105
105
  --sidebar-search--color: var(--theme-color-3);
106
106
  }
107
107
  `;
108
- var ApiReference = (options) => {
108
+ var javascript = (configuration) => {
109
109
  return html`
110
110
  <script
111
111
  id="api-reference"
112
- data-url="${options.spec?.url}"
113
- data-configuration="${raw(
114
- JSON.stringify(options).split('"').join("&quot;")
115
- )}"></script>
112
+ type="application/json"
113
+ data-configuration="${JSON.stringify(configuration).split('"').join("&quot;")}">
114
+ ${raw(
115
+ configuration.spec?.content ? typeof configuration.spec?.content === "function" ? JSON.stringify(configuration.spec?.content()) : JSON.stringify(configuration.spec?.content) : ""
116
+ )}
117
+ </script>
116
118
  <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
117
119
  `;
118
120
  };
@@ -137,14 +139,14 @@ var apiReference = (options) => async (c) => {
137
139
  </style>
138
140
  </head>
139
141
  <body>
140
- ${ApiReference(options)}
142
+ ${javascript(options)}
141
143
  </body>
142
144
  </html>
143
145
  `
144
146
  );
145
147
  };
146
148
  export {
147
- ApiReference,
148
149
  apiReference,
149
- customThemeCSS
150
+ customThemeCSS,
151
+ javascript
150
152
  };
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "author": "Scalar (https://github.com/scalar)",
6
6
  "homepage": "https://github.com/scalar/scalar",
7
7
  "bugs": "https://github.com/scalar/scalar/issues/new/choose",
8
- "version": "0.1.21",
8
+ "version": "0.2.0",
9
9
  "engines": {
10
10
  "node": ">=20"
11
11
  },
@@ -34,7 +34,7 @@
34
34
  "directory": "packages/hono-api-reference"
35
35
  },
36
36
  "dependencies": {
37
- "@scalar/api-reference": "1.3.0"
37
+ "@scalar/api-reference": "1.5.0"
38
38
  },
39
39
  "devDependencies": {
40
40
  "hono": "^3.9.2",