zudoku 0.3.0-dev.66 → 0.3.0-dev.68

package/lib/zudoku.plugin-api-keys.js

@@ -1,9 +1,9 @@
 import { b as f, j as e, O as j } from "./jsx-runtime-BIr0WBt_.js";
-import { u as g, R as v } from "./hook-Cz5jddRs.js";
-import { u as w, a as p, I as b, S as k, b as K, c as N, d as E, e as A, f as h } from "./Input-DdAxw3vC.js";
-import { c as l, L as x, a as P } from "./Markdown-DsCvZnhw.js";
+import { u as g, R as v } from "./hook-gOGk1OUF.js";
+import { u as w, a as p, I as b, S as k, b as K, c as N, d as E, e as A, f as h } from "./Input-BY0B_0qy.js";
+import { c as l, L as x, a as P } from "./Markdown-BO5EsS-C.js";
 import { u as m, x as S, y as I } from "./DevPortalProvider-BBhQ8kgI.js";
-import { B as c, p as C } from "./Combination-Cq0UkOXq.js";
+import { B as c, p as C } from "./Combination-BbWKjDLe.js";
 import { useState as D } from "react";
 /**
  * @license lucide-react v0.378.0 - ISC

package/lib/zudoku.plugin-custom-page.js

@@ -1,5 +1,5 @@
 import { j as m } from "./jsx-runtime-BIr0WBt_.js";
-import { P as o } from "./Markdown-DsCvZnhw.js";
+import { P as o } from "./Markdown-BO5EsS-C.js";
 const l = (s) => ({
   getRoutes: () => s.map(({ path: e, element: t }) => ({
     path: e,

package/lib/zudoku.plugin-markdown.js

@@ -9,7 +9,7 @@ const f = (t, e) => {
       return {
         path: i.at(-1) === "index" ? i.slice(0, -1).join("/") : s,
         lazy: async () => {
-          const { MdxPage: u } = await import("./MdxPage-B_7x36CA.js"), { default: c, ...l } = await m();
+          const { MdxPage: u } = await import("./MdxPage-DEfyHwSx.js"), { default: c, ...l } = await m();
           return {
             element: /* @__PURE__ */ o.jsx(
               u,

package/lib/zudoku.plugin-openapi.js

@@ -1,8 +1,8 @@
 import "./jsx-runtime-BIr0WBt_.js";
-import { o as n } from "./index-NGns0N9q.js";
+import { o as n } from "./index-7W7DUZbY.js";
 import "./urql-DMlBWUKL.js";
 import "zudoku/openapi-worker";
-import "./Markdown-DsCvZnhw.js";
+import "./Markdown-BO5EsS-C.js";
 import "./router-BiRCp01d.js";
 export {
   n as openApiPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.66",
+  "version": "0.3.0-dev.68",
   "type": "module",
   "files": [
     "dist",

package/src/lib/components/context/ViewportAnchorContext.tsx

@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { requestIdle } from "../../util/requestIdle.js";
 
 type AnchorContextType = {
   activeAnchor?: string;
@@ -95,7 +96,7 @@ export const ViewportAnchorProvider = ({
         // reset the active anchor when we reach the top
         setActiveAnchor("");
       } else if (hasReachedBottom) {
-        requestIdleCallback(() => {
+        requestIdle(() => {
           // set the last anchor when we reach the bottom
           const lastItem = Array.from(elements).pop();
           setActiveAnchor(lastItem?.id ?? "");

package/src/lib/plugins/markdown/Toc.tsx

@@ -10,6 +10,7 @@ import {
 import { AnchorLink } from "../../components/AnchorLink.js";
 import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
 import { cn } from "../../util/cn.js";
+import { requestIdle } from "../../util/requestIdle.js";
 
 const DATA_ANCHOR_ATTR = "data-active";
 
@@ -83,7 +84,7 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
     if (paintedOnce.current) return;
 
     // after all is painted, the indicator should animate
-    requestIdleCallback(() => {
+    requestIdle(() => {
       paintedOnce.current = true;
     });
   }, [activeAnchor]);

package/src/lib/plugins/openapi/ColorizedParam.tsx

@@ -31,8 +31,8 @@ export const ColorizedParam = ({
   onClick?: () => void;
 }) => {
   const ref = useRef<HTMLSpanElement>(null);
-  const normalized = name.replace("{", "").replace("}", "");
-  const normalizedSlug = slug?.replace("{", "").replace("}", "");
+  const normalized = name.replace(/[{}]/g, "");
+  const normalizedSlug = slug?.replace(/[{}]/g, "");
   const color = usePastellizedColor(normalized);
 
   const borderColor = `hsl(${color} / ${borderOpacity})`;

package/src/lib/plugins/openapi/StaggeredRender.tsx

@@ -6,6 +6,7 @@ import {
   useEffect,
   useState,
 } from "react";
+import { cancelIdle, requestIdle } from "../../util/requestIdle.js";
 
 export const StaggeredRenderContext = createContext({ stagger: false });
 
@@ -18,11 +19,11 @@ const StaggeredRender = ({ children }: { children: ReactNode[] }) => {
       return;
     }
 
-    const x = window.requestIdleCallback(() => {
+    const idle = requestIdle(() => {
       setRenderAll(true);
     });
 
-    return () => window.cancelIdleCallback(x);
+    return () => cancelIdle(idle);
   }, [renderAll]);
 
   return !renderAll ? Children.toArray(children).slice(0, 3) : children;

package/src/lib/plugins/openapi/playground/PathParams.tsx

@@ -38,7 +38,7 @@ export const PathParams = ({
                   <ColorizedParam
                     slug={part.name}
                     name={part.name}
-                    backgroundOpacity="0"
+                    backgroundOpacity="25%"
                     borderOpacity={field.value ? "100%" : "0"}
                     className={cn(
                       "font-mono text-xs m-2",

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -154,16 +154,18 @@ export const Playground = ({
 
   const path = url.split("/").map((part, i, arr) => {
     const isPathParam = part.startsWith("{") && part.endsWith("}");
-    const value = formState.pathParams.find(
-      (p) => p.name === part.slice(1, -1),
-    )?.value;
+    const replaced = part.replace(/[{}]/g, "");
+    const value = formState.pathParams.find((p) => p.name === replaced)?.value;
 
     const pathParamValue = value ? (
-      <ColorizedParam backgroundOpacity="0%" name={part} slug={part}>
+      <ColorizedParam backgroundOpacity="25%" name={part} slug={part}>
         {value}
       </ColorizedParam>
     ) : (
-      <span className="underline decoration-wavy decoration-red-500">
+      <span
+        className="underline decoration-wavy decoration-red-500"
+        title={`Missing value for path parameter \`${replaced}\``}
+      >
         {part}
       </span>
     );
@@ -186,9 +188,10 @@ export const Playground = ({
 
   const urlQueryParams = formState.queryParams
     .filter((p) => p.active)
-    .map((p) => (
+    .map((p, i, arr) => (
       <Fragment key={p.name}>
-        {p.name}={p.value}
+        {p.name}={encodeURIComponent(p.value).replaceAll("%20", "+")}
+        {i < arr.length - 1 && "&"}
         <wbr />
       </Fragment>
     ));

package/src/lib/plugins/openapi/playground/QueryParams.tsx

@@ -57,9 +57,7 @@ export const QueryParams = ({
                         title={requiredFields[i] ? "Required field" : undefined}
                       >
                         {field.value}
-                        {requiredFields[i] && (
-                          <sup className="text-destructive">*</sup>
-                        )}
+                        {requiredFields[i] && <sup>&nbsp;*</sup>}
                       </label>
                     </InlineInput>
                   )}

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -1,22 +1,19 @@
 import type { PlaygroundForm } from "./Playground.js";
 
 export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
-  const url = new URL(
-    host +
-      path
-        .split("/")
-        .map((v) =>
-          v.startsWith("{") && v.endsWith("}")
-            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
-                ?.value ?? v
-            : v,
-        )
-        .join("/"),
+  const filledPath = path.replace(
+    /\{(\w+)}/g,
+    (_, key) =>
+      data.pathParams.find((part) => part.name === key)?.value || `{${key}}`,
   );
 
-  data.queryParams.forEach((param) => {
-    url.searchParams.set(param.name, param.value);
-  });
+  const url = new URL(filledPath, host);
+
+  data.queryParams
+    .filter((param) => param.active)
+    .forEach((param) => {
+      url.searchParams.set(param.name, param.value);
+    });
 
   return url;
 };

package/src/lib/util/requestIdle.ts

@@ -0,0 +1,4 @@
+export const requestIdle =
+  requestIdleCallback ?? ((cb: IdleRequestCallback) => setTimeout(cb, 1));
+
+export const cancelIdle = cancelIdleCallback ?? clearTimeout;

package/src/lib/util/useScrollToAnchor.ts

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { useViewportAnchor } from "../components/context/ViewportAnchorContext.js";
+import { requestIdle } from "./requestIdle.js";
 
 export const useScrollToAnchor = () => {
   const location = useLocation();
@@ -16,7 +17,7 @@ export const useScrollToAnchor = () => {
       // on page navigation element might be in DOM but not yet scrollable, so wait for a frame
       requestAnimationFrame(() => {
         element.scrollIntoView();
-        requestIdleCallback(() => setActiveAnchor(hash));
+        requestIdle(() => setActiveAnchor(hash));
       });
       return;
     }
@@ -27,7 +28,7 @@ export const useScrollToAnchor = () => {
       if (!element) return;
 
       element.scrollIntoView();
-      requestIdleCallback(() => setActiveAnchor(hash));
+      requestIdle(() => setActiveAnchor(hash));
       obs.disconnect();
     });