@publier/openapi 0.3.83 → 0.4.0

package/dist/generate.d.mts

@@ -10,6 +10,7 @@ interface OpenApiSpec {
    */
   webhooks?: Record<string, OpenApiPathItem>;
   components?: OpenApiComponents;
+  security?: Record<string, string[]>[];
   tags?: OpenApiTag[];
 }
 interface OpenApiInfo {

package/dist/index.d.mts

@@ -11,6 +11,7 @@ interface OpenApiSpec {
    */
   webhooks?: Record<string, OpenApiPathItem>;
   components?: OpenApiComponents;
+  security?: Record<string, string[]>[];
   tags?: OpenApiTag[];
 }
 interface OpenApiInfo {
@@ -241,6 +242,8 @@ interface MethodBadgeProps {
   method: HttpMethod;
 }
 interface APIPlaygroundProps {
+  /** Full parsed specification supplies inherited security and server defaults. */
+  spec?: OpenApiSpec;
   method: HttpMethod;
   path: string;
   operation: OpenApiOperation;

package/dist/parser.d.mts

@@ -10,6 +10,7 @@ interface OpenApiSpec {
    */
   webhooks?: Record<string, OpenApiPathItem>;
   components?: OpenApiComponents;
+  security?: Record<string, string[]>[];
   tags?: OpenApiTag[];
 }
 interface OpenApiInfo {

package/dist/server.d.mts

@@ -10,6 +10,7 @@ interface OpenApiSpec {
    */
   webhooks?: Record<string, OpenApiPathItem>;
   components?: OpenApiComponents;
+  security?: Record<string, string[]>[];
   tags?: OpenApiTag[];
 }
 interface OpenApiInfo {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publier/openapi",
-  "version": "0.3.83",
+  "version": "0.4.0",
   "license": "UNLICENSED",
   "type": "module",
   "files": [
@@ -45,7 +45,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@publier/native": "7.0.1",
+    "@publier/native": "8.0.0",
     "@readme/httpsnippet": "^11.1.0",
     "openapi-sampler": "^1.7.3",
     "yaml": "^2.9.0"

package/src/components/api-playground-ce-element.ts

@@ -1,46 +1,34 @@
 export class PublierApiPlayground extends HTMLElement {
+	#listeners?: AbortController;
+
 	connectedCallback() {
-		this.querySelector('form')?.addEventListener('submit', this.#send.bind(this));
+		this.#listeners?.abort();
+		this.#listeners = new AbortController();
+		const form = this.querySelector('form');
+		form?.addEventListener('submit', this.#send, { signal: this.#listeners.signal });
+		form?.addEventListener('change', this.#selectSecurity, { signal: this.#listeners.signal });
+		this.#selectSecurity();
 	}
 
-	async #send(e: SubmitEvent) {
-		e.preventDefault();
-		const form = e.target as HTMLFormElement;
-		const data = new FormData(form);
-
-		const method = (form.dataset.method ?? 'get').toUpperCase();
-		let path = form.dataset.path ?? '/';
-
-		for (const [key, val] of data.entries()) {
-			if (key.startsWith('path:')) {
-				const paramName = key.slice(5);
-				path = path.replace(`{${paramName}}`, encodeURIComponent((val as string) || paramName));
-			}
-		}
-
-		const qs = new URLSearchParams();
-		for (const [key, val] of data.entries()) {
-			if (key.startsWith('query:') && val) qs.set(key.slice(6), val as string);
-		}
-		const server = (data.get('server') as string) ?? '';
-		const fullUrl = `${server}${path}${qs.size > 0 ? `?${qs}` : ''}`;
+	disconnectedCallback() {
+		this.#listeners?.abort();
+	}
 
-		const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-		const bearer = data.get('auth:bearer') as string;
-		const apiKey = data.get('auth:apikey') as string;
-		if (bearer) headers.Authorization = `Bearer ${bearer}`;
-		if (apiKey) headers['X-API-Key'] = apiKey;
-		for (const [key, val] of data.entries()) {
-			if (key.startsWith('header:') && val) headers[key.slice(7)] = val as string;
+	#selectSecurity = () => {
+		const selected = this.querySelector<HTMLSelectElement>('[name="security"]')?.value ?? '0';
+		for (const group of this.querySelectorAll<HTMLFieldSetElement>('[data-pg-auth-group]')) {
+			group.hidden = group.dataset.pgAuthGroup !== selected;
+			group.disabled = group.hidden;
 		}
+	};
 
-		const hasBody = !['GET', 'HEAD', 'OPTIONS'].includes(method);
-		const body = hasBody ? (data.get('body') as string) || undefined : undefined;
-
+	#send = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const form = e.target as HTMLFormElement;
 		const sendBtn = this.querySelector<HTMLButtonElement>('[data-pg-send]');
 		const responseEl = this.querySelector('[data-pg-response]');
 		const errorEl = this.querySelector('[data-pg-error]');
-
+		if (sendBtn?.disabled) return;
 		if (sendBtn) {
 			sendBtn.disabled = true;
 			sendBtn.textContent = 'Sending…';
@@ -49,26 +37,84 @@ export class PublierApiPlayground extends HTMLElement {
 		if (responseEl) responseEl.innerHTML = '';
 
 		try {
-			const res = await fetch(fullUrl, { method, headers, body });
+			const data = new FormData(form);
+			const method = (form.dataset.method ?? 'get').toUpperCase();
+			let path = form.dataset.path ?? '/';
+			for (const [key, val] of data) {
+				if (key.startsWith('path:')) {
+					path = path.replaceAll(`{${key.slice(5)}}`, encodeURIComponent(String(val)));
+				}
+			}
+			const server = String(data.get('server') ?? '').replace(/\/$/, '');
+			const url = new URL(`${server}${path}`, document.baseURI);
+			if (!['https:', 'http:'].includes(url.protocol))
+				throw new Error('Use an HTTP or HTTPS server.');
+			const headers = new Headers();
+			for (const [key, val] of data) {
+				if (key.startsWith('query:') && val) url.searchParams.set(key.slice(6), String(val));
+				if (key.startsWith('header:') && val) headers.set(key.slice(7), String(val));
+			}
+			let credentials: RequestCredentials = 'same-origin';
+			const unsupported = form.querySelector(
+				'[data-pg-auth-group]:not([hidden]) [data-pg-unsupported]',
+			);
+			if (unsupported) throw new Error(unsupported.textContent ?? 'Unsupported authentication.');
+			for (const input of form.querySelectorAll<HTMLInputElement>('[data-pg-auth-kind]')) {
+				const value = data.get(input.name);
+				if (!value) continue;
+				const kind = input.dataset.pgAuthKind;
+				if (kind === 'apiKey') {
+					const name = input.dataset.pgAuthName ?? '';
+					if (input.dataset.pgAuthIn === 'query') url.searchParams.set(name, String(value));
+					else headers.set(name, String(value));
+				} else if (kind === 'bearer') {
+					headers.set('Authorization', `Bearer ${value}`);
+				} else if (kind === 'basic') {
+					const bytes = new TextEncoder().encode(String(value));
+					headers.set(
+						'Authorization',
+						`Basic ${btoa(Array.from(bytes, (b) => String.fromCharCode(b)).join(''))}`,
+					);
+				} else if (kind === 'cookie') credentials = 'include';
+			}
+			let body: BodyInit | undefined;
+			const rawBody = String(data.get('body') ?? '');
+			if (!['GET', 'HEAD'].includes(method) && rawBody) {
+				const media = String(data.get('content-type') ?? 'application/json');
+				if (media === 'multipart/form-data' || media === 'application/x-www-form-urlencoded') {
+					const fields: unknown = JSON.parse(rawBody);
+					if (!fields || typeof fields !== 'object' || Array.isArray(fields)) {
+						throw new Error('Form bodies must be a JSON object of scalar fields.');
+					}
+					const encoded = media === 'multipart/form-data' ? new FormData() : new URLSearchParams();
+					for (const [key, value] of Object.entries(fields)) {
+						if (value !== null && typeof value === 'object')
+							throw new Error('Form fields must be scalar values.');
+						encoded.append(key, value === null ? '' : String(value));
+					}
+					body = encoded;
+					
+					if (media === 'multipart/form-data') headers.delete('Content-Type');
+					else headers.set('Content-Type', media);
+				} else {
+					body = rawBody;
+					headers.set('Content-Type', media);
+				}
+			}
+			const res = await fetch(url.href, { method, headers, body, credentials });
 			const bodyText = await res.text();
-
 			let formatted = bodyText;
 			try {
 				formatted = JSON.stringify(JSON.parse(bodyText), null, 2);
 			} catch {}
-
-			const isSuccess = res.status >= 200 && res.status < 300;
-			const statusColor = isSuccess ? 'var(--color-green-400)' : 'var(--color-red-400)';
-
 			if (responseEl) {
-				responseEl.innerHTML = `
-					<div style="display:flex;align-items:center;padding:0.375rem 0.75rem;border-bottom:1px solid var(--color-border,rgba(0,0,0,.12))">
-						<span style="font-family:ui-monospace,monospace;font-size:0.75rem;font-weight:600;color:${statusColor}">
-							${this.#escHtml(String(res.status))} ${this.#escHtml(res.statusText)}
-						</span>
-					</div>
-					<pre style="margin:0;overflow:auto;padding:0.625rem 0.75rem;font-family:ui-monospace,monospace;font-size:0.75rem;line-height:1.6"><code>${this.#escHtml(formatted)}</code></pre>
-				`;
+				const status = document.createElement('div');
+				status.className = 'px-4 py-3 font-mono text-sm';
+				status.textContent = `${res.status} ${res.statusText}`;
+				const pre = document.createElement('pre');
+				pre.className = 'px-4 py-3 overflow-auto font-mono text-sm';
+				pre.textContent = formatted;
+				responseEl.replaceChildren(status, pre);
 			}
 		} catch (err) {
 			if (errorEl) errorEl.textContent = err instanceof Error ? err.message : 'Request failed';
@@ -78,11 +124,7 @@ export class PublierApiPlayground extends HTMLElement {
 				sendBtn.textContent = 'Send Request';
 			}
 		}
-	}
-
-	#escHtml(str: string): string {
-		return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-	}
+	};
 }
 
 if (typeof customElements !== 'undefined' && !customElements.get('publier-api-playground')) {

package/src/components/api-playground.astro

@@ -3,8 +3,8 @@ import { openapiRenderApiPlayground } from '@publier/native';
 import type { APIPlaygroundProps } from './props.ts';
 type Props = APIPlaygroundProps;
 
-const { method, path, operation, servers = [] } = Astro.props;
-const html = openapiRenderApiPlayground(JSON.stringify({ method, path, operation, servers }));
+const { method, path, operation, spec, servers = spec?.servers ?? [] } = Astro.props;
+const html = openapiRenderApiPlayground(JSON.stringify({ method, path, operation, servers, spec }));
 ---
 
 <Fragment set:html={html} />

package/src/components/props.ts

@@ -31,6 +31,8 @@ export interface MethodBadgeProps {
 }
 
 export interface APIPlaygroundProps {
+	
+	spec?: OpenApiSpec;
 	method: HttpMethod;
 	path: string;
 	operation: OpenApiOperation;