zudoku 0.3.0-dev.122 → 0.3.0-dev.124

package/lib/zudoku.plugin-openapi.js

@@ -1,5 +1,5 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as l } from "./index-YcqHGXdv.js";
+import { o as l } from "./index-Bx0AgZT5.js";
 import "./urql-DrBfkb92.js";
 import "./ZudokuContext-BIZ8zHbZ.js";
 import "zudoku/openapi-worker";

package/package.json

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

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

@@ -109,25 +109,31 @@ export const Sidecar = ({
 
   const requestBodyContent = operation.requestBody?.content;
 
-  const path = operation.path.split("/").map((part, i, arr) => (
-    // eslint-disable-next-line react/no-array-index-key
-    <Fragment key={part + i}>
-      {part.startsWith("{") && part.endsWith("}") ? (
-        <ColorizedParam
-          name={part.slice(1, -1)}
-          backgroundOpacity="0"
-          // same as in `ParameterListItem`
-          slug={operation.slug + "-" + part.slice(1, -1).toLocaleLowerCase()}
-        >
-          {part}
-        </ColorizedParam>
-      ) : (
-        part
-      )}
-      {i < arr.length - 1 ? "/" : null}
-      <wbr />
-    </Fragment>
-  ));
+  const path = operation.path.split("/").map((part, i, arr) => {
+    const isParam =
+      (part.startsWith("{") && part.endsWith("}")) || part.startsWith(":");
+    const paramName = isParam ? part.replace(/[:{}]/g, "") : undefined;
+
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      <Fragment key={part + i}>
+        {paramName ? (
+          <ColorizedParam
+            name={paramName}
+            backgroundOpacity="0"
+            // same as in `ParameterListItem`
+            slug={`${operation.slug}-${paramName.toLocaleLowerCase()}`}
+          >
+            {part}
+          </ColorizedParam>
+        ) : (
+          part
+        )}
+        {i < arr.length - 1 ? "/" : null}
+        <wbr />
+      </Fragment>
+    );
+  });
 
   const code = useMemo(() => {
     const example = requestBodyContent?.[0]?.schema

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

@@ -164,8 +164,9 @@ export const Playground = ({
   });
 
   const path = url.split("/").map((part, i, arr) => {
-    const isPathParam = part.startsWith("{") && part.endsWith("}");
-    const replaced = part.replace(/[{}]/g, "");
+    const isPathParam =
+      (part.startsWith("{") && part.endsWith("}")) || part.startsWith(":");
+    const replaced = part.replace(/[:{}]/g, "");
     const value = formState.pathParams.find((p) => p.name === replaced)?.value;
 
     const pathParamValue = value ? (
@@ -191,10 +192,6 @@ export const Playground = ({
     );
   });
 
-  const lang = mimeTypeToLanguage(
-    queryMutation.data?.headers.get("Content-Type") ?? "",
-  );
-
   const headerEntries = Array.from(queryMutation.data?.headers.entries() ?? []);
 
   const urlQueryParams = formState.queryParams

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

@@ -1,11 +1,12 @@
 import type { PlaygroundForm } from "./Playground.js";
 
 export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
-  const filledPath = path.replace(
-    /\{(\w+)}/g,
-    (_, key) =>
-      data.pathParams.find((part) => part.name === key)?.value || `{${key}}`,
-  );
+  const filledPath = path.replace(/(:\w+|\{\w+})/g, (match) => {
+    const key = match.replace(/[:{}]/g, "");
+    const value = data.pathParams.find((part) => part.name === key)?.value;
+
+    return value ?? match;
+  });
 
   const url = new URL(filledPath, host);