next-openapi-gen 0.0.12 → 0.0.14

package/README.md

@@ -2,17 +2,26 @@
 
 **next-openapi-gen** super fast and easy way to generate OpenAPI 3.0 documentation automatically from API routes in a Next.js 14.
 
+With support for multiple user interfaces next-openapi-gen makes documenting your API a breeze!
+
 ## Prerequisites
 
 - Nextjs >= 14
 - Node >= 18
 
+## Supported interfaces
+
+- Swagger
+- Redoc
+- Stoplight Elements
+- RapiDoc
+
 ## Features
 
 - **Automatic OpenAPI Generation**: Generate OpenAPI 3.0 documentation from your Next.js routes, automatically parsing TypeScript types for parameters, request bodies and responses.
 - **TypeScript Type Scanning**: Automatically resolve TypeScript types for params, body, and responses based on your API endpoint's TypeScript definitions. Field comments in TypeScript types are reflected as descriptions in the OpenAPI schema.
-- **JSDoc-Based Documentation**:  Document API routes with JSDoc comments, including tags like `@openapi`, `@auth`, `@desc`, `@params`, `@body`, and `@response` to easily define route metadata.
-- **UI Interface Options**: Choose between Swagger UI, Elements, or Redoc to visualize your API documentation. Customize the interface to fit your preferences.
+- **JSDoc-Based Documentation (Optional)**:  Document API routes with JSDoc comments, including tags like `@openapi`, `@auth`, `@desc`, `@params`, `@body`, and `@response` to easily define route metadata.
+- **UI Interface Options**: Choose between `Swagger UI`, `Redoc`, `Stoplight Elements` or `RapiDoc` to visualize your API documentation. Customize the interface to fit your preferences.
 - **Real-time Documentation**: As your API evolves, regenerate the OpenAPI documentation with a single command, ensuring your documentation is always up to date.
 - **Easy configuration**: Customize generator behavior using the `next.openapi.json` configuration file, allowing for quick adjustments without modifying the code.
 
@@ -29,9 +38,13 @@ yarn add next-openapi-gen
 Run the following command to generate the `next.openapi.json` configuration file and automatically set up Swagger UI with `/api-docs` routes:
 
 ```bash
-npx next-openapi-gen init
+npx next-openapi-gen init --ui swagger --docs-url api-docs
 ```
 
+Parameters:
+- **ui**: `swagger` | `redoc` | `stoplight` | `rapidoc`
+- **docs-url**: url on which api docs will be visible
+
 This command does the following:
 
 - Generates a `next.openapi.json` file, which stores the OpenAPI configuration for your project.

package/dist/commands/init.js

@@ -5,6 +5,10 @@ import ora from "ora";
 import { exec } from "child_process";
 import util from "util";
 import openapiTemplate from "../openapi-template.js";
+import { swaggerDeps, SwaggerUI } from "../components/swagger.js";
+import { redocDeps, RedocUI } from "../components/redoc.js";
+import { stoplightDeps, StoplightUI } from "../components/stoplight.js";
+import { rapidocDeps, RapidocUI } from "../components/rapidoc.js";
 const execPromise = util.promisify(exec);
 const spinner = ora("Initializing project with OpenAPI template...\n");
 const getPackageManager = async () => {
@@ -28,43 +32,55 @@ const getPackageManager = async () => {
     // Default to npm if no lock files are found
     return "npm";
 };
-async function createDocsPage() {
+function getDocsPage(ui, outputFile) {
+    let DocsComponent = SwaggerUI;
+    if (ui === "redoc") {
+        DocsComponent = RedocUI;
+    }
+    else if (ui === "stoplight") {
+        DocsComponent = StoplightUI;
+    }
+    else if (ui === "rapidoc") {
+        DocsComponent = RapidocUI;
+    }
+    return DocsComponent(outputFile);
+}
+function getDocsPageDependencies(ui) {
+    let deps = [];
+    if (ui === "swagger") {
+        deps = swaggerDeps;
+    }
+    else if (ui === "redoc") {
+        deps = redocDeps;
+    }
+    else if (ui === "stoplight") {
+        deps = stoplightDeps;
+    }
+    else if (ui === "rapidoc") {
+        deps = rapidocDeps;
+    }
+    return deps.join(" ");
+}
+async function createDocsPage(ui, outputFile) {
     const paths = ["app", "api-docs"];
     const srcPath = path.join(process.cwd(), "src");
-    const { outputFile } = openapiTemplate;
     if (fs.existsSync(srcPath)) {
         paths.unshift("src");
     }
     const docsDir = path.join(process.cwd(), ...paths);
     await fs.promises.mkdir(docsDir, { recursive: true });
-    const swaggerComponent = `
-import "swagger-ui-react/swagger-ui.css";
-
-import dynamic from "next/dynamic";
-
-const SwaggerUI = dynamic(() => import("swagger-ui-react"), {
-  ssr: false,
-  loading: () => <p>Loading Component...</p>,
-});
-
-export default async function ApiDocsPage() {
-  return (
-    <section>
-      <SwaggerUI url="/${outputFile}" />
-    </section>
-  );
-}
-`;
+    const docsPage = getDocsPage(ui, outputFile);
     const componentPath = path.join(docsDir, "page.tsx");
-    await fs.promises.writeFile(componentPath, swaggerComponent.trim());
-    spinner.succeed(`Created ${paths.join("/")}/page.tsx for Swagger UI.`);
+    await fs.promises.writeFile(componentPath, docsPage.trim());
+    spinner.succeed(`Created ${paths.join("/")}/page.tsx for ${ui}.`);
 }
-async function installSwagger() {
+async function installDependencies(ui) {
     const packageManager = await getPackageManager();
     const installCmd = `${packageManager} ${packageManager === "npm" ? "install" : "add"}`;
-    spinner.succeed("Installing swagger-ui-react...");
-    const resp = await execPromise(`${installCmd} swagger-ui-react`);
-    spinner.succeed("Successfully installed swagger-ui-react.");
+    const deps = getDocsPageDependencies(ui);
+    spinner.succeed(`Installing ${deps} dependencies...`);
+    const resp = await execPromise(`${installCmd} ${deps}`);
+    spinner.succeed(`Successfully installed ${deps}.`);
 }
 function extendOpenApiTemplate(spec, options) {
     spec.ui = options.ui ?? spec.ui;
@@ -79,10 +95,8 @@ export async function init(options) {
         extendOpenApiTemplate(template, { docsUrl, ui });
         await fse.writeJson(outputPath, template, { spaces: 2 });
         spinner.succeed(`Created OpenAPI template in next.openapi.json`);
-        if (ui === "swagger") {
-            createDocsPage();
-            installSwagger();
-        }
+        createDocsPage(ui, template.outputFile);
+        installDependencies(ui);
     }
     catch (error) {
         spinner.fail(`Failed to initialize project: ${error.message}`);

package/dist/components/rapidoc.js

@@ -0,0 +1,20 @@
+export const rapidocDeps = ["rapidoc"];
+export function RapidocUI(outputFile) {
+    return `
+"use client";
+
+import "rapidoc";
+
+export default function ApiDocsPage() {
+  return (
+    <section style={{ height: "100vh" }}>
+      <rapi-doc
+        spec-url="${outputFile}"
+        render-style="read"
+        style={{ height: "100vh", width: "100%" }}
+      ></rapi-doc>
+    </section>
+  );
+}
+`;
+}

package/dist/components/redoc.js

@@ -0,0 +1,16 @@
+export const redocDeps = ["redoc"];
+export function RedocUI(outputFile) {
+    return `
+"use client";
+
+import { RedocStandalone } from "redoc";
+
+export default async function ApiDocsPage() {
+  return (
+    <section>
+      <RedocStandalone specUrl="/${outputFile}" />
+    </section>
+  );
+}
+`;
+}

package/dist/components/stoplight.js

@@ -0,0 +1,17 @@
+export const stoplightDeps = ["@stoplight/element"];
+export function StoplightUI(outputFile) {
+    return `
+"use client";
+
+import { API } from "@stoplight/elements";
+import "@stoplight/elements/styles.min.css";
+
+export default function ApiDocsPage() {
+  return (
+    <section style={{ height: "100vh" }}>
+      <API apiDescriptionUrl="${outputFile}" />
+    </section>
+  );
+}
+`;
+}

package/dist/components/swagger.js

@@ -0,0 +1,21 @@
+export const swaggerDeps = ["swagger-ui"];
+export function SwaggerUI(outputFile) {
+    return `
+import "swagger-ui-react/swagger-ui.css";
+
+import dynamic from "next/dynamic";
+
+const SwaggerUI = dynamic(() => import("swagger-ui-react"), {
+  ssr: false,
+  loading: () => <p>Loading Component...</p>,
+});
+
+export default async function ApiDocsPage() {
+  return (
+    <section>
+      <SwaggerUI url="/${outputFile}" />
+    </section>
+  );
+}
+`;
+}

package/dist/index.js

@@ -10,7 +10,7 @@ program
 program
     .command("init")
     .addOption(new Option("-i, --ui <type>", "Specify the UI type, e.g., swagger")
-    .choices(["swagger", "element", "redoc"])
+    .choices(["swagger", "redoc", "stoplight", "rapidoc"])
     .default("swagger"))
     .option("-u, --docs-url <url>", "Specify the docs URL", "api-docs")
     .description("Initialize a openapi specification")

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "next-openapi-gen",
-  "version": "0.0.12",
-  "description": "Super fast and easy way to generate OpenAPI documentation automatically from API routes in a NextJS 14.",
+  "version": "0.0.14",
+  "description": "Super fast and easy way to generate OpenAPI documentation automatically from API routes in a NextJS 14",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",