v1.0.1

- Fix: cannot parameterise /1/2<- when /1/2/... exists
- Removed some stray comments
- Path parameters are always required
- Readme additions
- Setup releases

Author: AndrewWalsh

README.md

@@ -1,6 +1,7 @@
 <a name="readme-top"></a>
 
 [![MIT License][license-shield]][license-url]
+[![Download in the Chrome Web Store][chrome-shield]][chrome-url]
 
 <!-- PROJECT LOGO -->
 <br />
@@ -10,7 +11,7 @@
   </a>
 
 
-  <p align="center">
+  <p align="center" style="max-width: 600px;">
     Effortlessly discover API behaviour with a Chrome extension that automatically generates OpenAPI specifications in real time for any app or website.
     <br />
     <br />
@@ -42,11 +43,14 @@ OpenAPI DevTools is a Chrome extension that generates OpenAPI specifications in
     <img width="80%" src="resources/demo-img.png">
 </p>
 
-- [Download and extract the zip](https://github.com/AndrewWalsh/openapi-devtools/raw/main/resources/dist.zip)
-- In Chrome, navigate to `chrome://extensions`
-- In the top right enable the `Developer mode` toggle
-- In the top left click `Load unpacked` and select the extracted `dist` directory
-- Open a new tab and then select `OpenAPI` in the developer tools (open with `cmd+i` or `ctrl+i`)
+[Download the extension in the Chrome Web Store](https://chrome.google.com/webstore/detail/openapi-devtools/jelghndoknklgabjgaeppjhommkkmdii).
+
+Otherwise, to install manually:
+  - [Download and extract the dist.zip file in the latest release](https://github.com/AndrewWalsh/openapi-devtools/releases/latest/download/dist.zip)
+  - In Chrome, navigate to `chrome://extensions`
+  - In the top right enable the `Developer mode` toggle
+  - In the top left click `Load unpacked` and select the extracted `dist` directory
+  - Open a new tab and then select `OpenAPI` in the developer tools (open with `cmd+i` or `ctrl+i`)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -58,6 +62,12 @@ When the same endpoint responds with different data, such as a value that is som
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
+## What is OpenAPI?
+
+An [OpenAPI](https://www.openapis.org/) specification is a description of what an API expects to receive and what it will respond with. It is governed by the OpenAPI Initiative and the Linux Foundation. OpenAPI specifications are the modern standard for RESTful APIs, and systems that have them are far easier to work with.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
 ## Contributing
 
 To develop the project:
@@ -66,12 +76,14 @@ To develop the project:
 - Navigate to `chrome://extensions`
 - In the top right enable the `Developer mode` toggle
 - In the top left click `Load unpacked` and select the extracted `dist` directory
-- You should now see the tool in Chrome DevTools. You can interact it with like a regular page, including inspection of the React app.
+- You should now see the tool in Chrome DevTools. You can interact it with like a regular page, including inspection of the React app
 - [Extensions Reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid) is suggested to update the tool after running `npm run build` and updating the `dist` directory 
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
 [license-url]: https://github.com/AndrewWalsh/openapi-devtools/blob/main/LICENSE.txt
-[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
+[license-shield]: https://img.shields.io/github/license/AndrewWalsh/openapi-devtools.svg?style=for-the-badge
+[chrome-url]: https://chrome.google.com/webstore/detail/openapi-devtools/jelghndoknklgabjgaeppjhommkkmdii
+[chrome-shield]: https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge&logo=GoogleChrome&logoColor=white

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "openapi-devtools",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "devtools_page": "index.html",
   "permissions": [],
   "icons": {

package.json

@@ -2,7 +2,7 @@
   "name": "openapi-devtools",
   "description": "Effortlessly discover API behaviour with a Chrome extension that automatically generates OpenAPI specifications in real time for any app or website.",
   "private": true,
-  "version": "0.1.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "test": "vitest",

resources/dist.zip

@@ -120,3 +120,22 @@ it("collapses into a single route when paramaterised", () => {
   expect(store.leafMap).toEqual(expected);
   expect(getResBodyTypes(store, host, "/1/2/3/ANY/ANY")).toEqual(["null", "integer", "string"]);
 });
+
+it("can parameterise paths that are subsets of another path", () => {
+  const store = new RequestStore();
+  const req1 = createSimpleRequest(`${base}/1/2/a`);
+  const req2 = createSimpleRequest(`${base}/1/2`);
+  store.insert(req1, { foo: "bar" });
+  store.insert(req2, { foo: 1 });
+  store.parameterise(1, "/1/2", host);
+  const expected = {
+    [host]: {
+      '/1/2/a': expect.any(Object),
+      '/1/:param1': expect.any(Object),
+    }
+  };
+  // @ts-expect-error accessing private property
+  expect(store.leafMap).toEqual(expected);
+  expect(getResBodyTypes(store, host, "/1/2/a")).toBe("string");
+  expect(getResBodyTypes(store, host, "/1/ANY")).toBe("integer");
+});

src/lib/RequestStore.test.ts

@@ -65,8 +65,8 @@ export default class RequestStore {
     const result = parameterise({ store: this.store, index, path, host });
     if (!result) return;
     const { removedPaths, insertedPath, insertedLeaf } = result;
-    const unsetPath = (path: string) => unset(this.leafMap[host], path);
-    removedPaths.concat([path]).forEach(unsetPath);
+    const unsetLeafMap = (path: string) => unset(this.leafMap[host], path);
+    removedPaths.concat([path]).forEach(unsetLeafMap);
     insertLeafMap({
       leafMap: this.leafMap,
       host,

src/lib/RequestStore.ts

@@ -94,7 +94,7 @@ const createPathParameterTypes = (
   const parameters: ParameterObject[] = dynamicParts.map(({ part: name }) => ({
     name,
     in: "path",
-    required: false,
+    required: true,
     schema: {
       type: "string",
     },
@@ -178,9 +178,6 @@ const endpointsToOAI31 = (endpoints: Array<Endpoint>): OpenApiBuilder => {
     }
   }
 
-  for (const host in uniqueHosts) {
-    builder.addServer({ url: host });
-  }
   return builder;
 };
 

src/lib/endpoints-to-oai31.ts

@@ -11,7 +11,7 @@ const formatPathname = (parts: Array<string>) => `/${parts.join("/").slice(1)}`;
 
 /**
  * Walk the tree. Return string[][], each element of which is path
- * E.g. [["api", "v1", "user"], ["api", "v1", "user"]]
+ * E.g. [["api", "v1", "users"], ["api", "v1", "posts"]]
  */
 const recurse = (
   node: RadixNode<RouteData>,
@@ -29,14 +29,12 @@ const recurse = (
     // If it's also the last part, include leaf children
     // Otherwise, recurse on all children
     if (isLast) {
-      for (const [part, child] of node.children.entries()) {
-        if (!child.children.size) {
-          const value = {
-            pathname: formatPathname([...walked, part]),
-            leaf: child.data!.data as Leaf,
-          };
-          pathnames.push(value);
-        }
+      for (const [lastPart, child] of node.children.entries()) {
+        const value = {
+          pathname: formatPathname([...walked, lastPart]),
+          leaf: child.data!.data as Leaf,
+        };
+        pathnames.push(value);
       }
     } else {
       for (const [lastPart, child] of node.children.entries()) {

src/lib/store-helpers/find-pathnames-in-router.ts

@@ -16,10 +16,8 @@ export const getParameterisedPath = (
 ) => {
   if (!matchedRoute?.params) return path;
   const nextPath = pathToArray(path);
-  // Rely on the face that params are named "something{position}" e.g. param0, param1, ...
   const paramNames = Object.keys(matchedRoute.params);
   for (const paramName of paramNames) {
-    // Must align with constants.DEFAULT_PARAM_NAME
     const position = Number(paramName.replace(paramRe, "$1"));
     nextPath[position] = `:${paramName}`;
   }

src/lib/store-helpers/helpers.ts

@@ -14,9 +14,7 @@ const pruneRouter = (
   const isLast = parts.length === 1;
   const part = parts[0];
   const matchAny = isParameter(part);
-  // Not a wildcard, and no matching children
   if (!matchAny && !node.children.has(part)) return;
-  // Recurse first
   if (!isLast) {
     if (matchAny) {
       for (const child of node.children.values()) {