Deploy @nestia/editor

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nestia/editor",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "typings": "lib/index.d.ts",
   "main": "lib/index.js",
   "module": "lib/index.mjs",

packages/editor/src/NestiaEditorApplication.tsx

@@ -42,18 +42,11 @@ export function NestiaEditorApplication() {
 
 async function getAsset(): Promise<IAsset | null> {
   const index: number = window.location.href.indexOf("?");
-  if (index === -1) return null;
-
   const query: URLSearchParams = new URLSearchParams(
-    window.location.href.substring(index + 1),
+    index === -1 ? "" : window.location.href.substring(index + 1),
   );
   const url: string | null = query.get("url") ?? (await findSwagger());
   if (url === null) return null;
-  try {
-    new URL(url);
-  } catch {
-    return null;
-  }
 
   const simulate: string | null = query.get("simulate");
   const e2e: string | null = query.get("e2e");
@@ -69,6 +62,7 @@ async function getAsset(): Promise<IAsset | null> {
 
 async function findSwagger(): Promise<string | null> {
   const response: Response = await fetch("./swagger.json");
+  console.log("swagger", response.status);
   return response.status === 200 ? "./swagger.json" : null;
 }
 

packages/editor/src/internal/NestiaEditorFileUploader.tsx

@@ -1,7 +1,9 @@
 import { OpenApiV3, OpenApiV3_1, SwaggerV2 } from "@samchon/openapi";
 import { load } from "js-yaml";
 import React from "react";
+// @ts-ignore
 import FileUpload from "react-mui-fileuploader";
+// @ts-ignore
 import { ExtendedFileProps } from "react-mui-fileuploader/dist/types/index.types";
 
 export function NestiaEditorFileUploader(

packages/editor/tsconfig.app.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/nestiaeditorapplication.tsx","./src/nestiaeditoriframe.tsx","./src/nestiaeditoruploader.tsx","./src/index.ts","./src/main.tsx","./src/vite-env.d.ts","./src/internal/nestiaeditorcomposer.ts","./src/internal/nestiaeditorfileuploader.tsx"],"version":"5.6.3"}

packages/editor/tsconfig.node.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.6.3"}

website/.gitignore

@@ -4,6 +4,7 @@ out/
 public/api/
 typedoc-json/
 
+public/downloads
 public/robots.txt
 public/sitemap*.xml
 !package-lock.json

website/build/editor.js

@@ -0,0 +1,37 @@
+const cp = require("child_process");
+const fs = require("fs");
+const JsZip = require("jszip");
+
+const PACKAGE = `${__dirname}/../../packages/editor`;
+const ASSETS = `${PACKAGE}/dist/assets`;
+
+const main = async () => {
+  cp.execSync("npm install && npm run build:static", {
+    stdio: "ignore",
+    cwd: PACKAGE,
+  });
+  const zip = new JsZip();
+  zip.file(
+    "index.html",
+    await fs.promises.readFile(`${PACKAGE}/dist/index.html`),
+  );
+  for (const file of await fs.promises.readdir(ASSETS))
+    zip.file(`assets/${file}`, await fs.promises.readFile(`${ASSETS}/${file}`));
+  const buffer = await zip.generateAsync({
+    type: "uint8array",
+    compressionOptions: {
+      level: 0,
+    },
+  });
+  try {
+    await fs.promises.mkdir(`${__dirname}/../public/downloads`);
+  } catch {}
+  await fs.promises.writeFile(
+    `${__dirname}/../public/downloads/editor.zip`,
+    buffer,
+  );
+};
+main().catch((error) => {
+  console.error(error);
+  process.exit(-1);
+});

website/package.json

@@ -24,6 +24,7 @@
     "@mui/material": "5.15.6",
     "@mui/system": "5.15.6",
     "@nestia/editor": "0.3.0",
+    "jszip": "^3.10.1",
     "next": "14.2.13",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",

website/pages/docs/editor.mdx

@@ -1,16 +1,16 @@
 import { EDITOR_EXAMPLES } from "../../src/constants/EDITOR_EXAMPLES";
 import EditorMovie from "../../src/movies/editor/EditorMovie";
 
-## TypeScript Swagger Editor
+## Demonstration
 <EditorMovie />
 
-> Put your `swagger.json` file, then "TypeScript Swagger Editor" be opened.
+> Put your `swagger.json` file, then `@nestia/editor` be opened.
 
-"TypeScript Swagger Editor" is a web-based TypeScript editor (of [StackBlitz](https://stackblitz.com/)) for Swagger API specifications, with SDK (Software Development Kit) library generated by [`@nestia/migrate`](./migrate). With the cloud "TypeScript Swagger Editor", you can easily test the backend API with TypeScript code, and it is much convenient than the traditional way of using Swagger UI, due to type checking and auto-completion.
+`@nestia/editor` is a combination of Swagger-UI and web-based TypeScript editor (of [StackBlitz](https://stackblitz.com/)) embedding SDK (Software Development Kit) library generated by [`@nestia/migrate`](./migrate). With the `@nestia/editor`, you can easily test the backend API with TypeScript code, and it is much convenient than the traditional way of using Swagger UI, due to type checking and auto-completion.
 
-Also, "TypeScript Swagger Editor" provides [Mockup Simulator](./sdk/simulator). With the simulator, you can start the frontend (or client) development even when the backend API is not ready yet. Furthermore, "TypeScript Swagger Editor" supports automatic [e2e (end-to-end) test functions' generation](./sdk/e2e), so that you can easily validate the API with the generated test code.
+Also, `@nestia/editor` provides [Mockup Simulator](./sdk/simulator). With the simulator, you can start the frontend (or client) development even when the backend API has not been ready yet. Furthermore, `@nestia/editor` supports automatic [e2e (end-to-end) test functions' generation](./sdk/e2e), so that you can easily validate the API with the generated test code.
 
-Here are the some example projects generated by "TypeScript Swagger Editor". Traveling those example projects, you may understand how to utilize the "TypeScript Swagger Editor". Let's start the type safe API interaction development with "TypeScript Swagger Editor"!
+Here are the some example projects generated by `@nestia/editor`. Traveling those example projects, you may understand how to utilize the `@nestia/editor`. Let's start the type safe API interaction development with `@nestia/editor`!
 
 {<ul>
   <li> Concepts
@@ -44,32 +44,57 @@ Here are the some example projects generated by "TypeScript Swagger Editor". Tra
 
 
 
-## How to use in local
-```bash
-npx @nestia/migrate
-? Migration mode (Use arrow keys):
-    NestJS
-  > SDK
-? Swagger file location: assets/input/clickhouse.json
-? Output directory path: assets/output/clickhouse-sdk-manual
-? Mokup Simulator: true
-? E2E Test Functions: true
+
+## React Library
+```typescript
+import { NestiaEditorIframe } from "@nestia/editor";
+import { SwaggerV2, OpenApiV3, OpenApiV3_1 } from "@samchon/openapi";
+
+const document: SwaggerV2 | OpenApiV3 | OpenApiV3_1;
+
+<NestiaEditorIframe swagger={document} e2e={true} simulate={true} />
+<NestiaEditorUploader />
 ```
 
-> Related document: [Nestia > Guide Documents > Migration from Swagger](./migrate)
+Install `@nestia/editor` and import one of below components.
+
+  - `NestiaEditorIframe`: directly launch the cloud editor by given document
+  - `NestiaEditorUploader`: upload the `swagger.json` file and launch the cloud editor
+
+
 
-Run `npx @nestia/migrate` command in your terminal. The `@nestia/migrate` program will inquiry you something. After that, you can generate the SDK library in your local machine, what you've seen in the "TypeScript Swagger Editor".
 
-For reference, if your backend application utilizes `nestia` (NestJS), you don't need to build the SDK (Software Development Kit) library by converting from the Swagger Documents. The `nestia` will automatically generate the much advanced SDK library, just by analyzing your backend application's source code.
+## Static Hosting
+![Unzipped](/images/editor/unzipped.png)
 
+> [💾 https://nestia.io/downloads/editor.zip](/downloads/editor.zip)
 
+Just unzip the above [`editor.zip`]((/downloads/editor.zip)) file, and place your `swagger.json` file into the extracted directory.
 
+If you open the extracted `index.html` in your browser, you can see the `@nestia/editor` is serving the "TypeScript Swagger Editor" application with your `swagger.json` file.
 
-## Roadmap
-Currently, "TypeScript Swagger Editor" is utilizing the [StackBlitz](https://stackblitz.com/) as the web-based TypeScript editor. 
 
-However, if many developers agree with the usefulness of the SDK and are interested in "TypeScript Swagger Editor", I am planning to develop a new standalone web application called `@nestia/editor`. It will take advantages of both "Swagger-UI" and "TypeScript Swagger Editor", and provide more convenient features for the API interaction development.
 
-I don't know how popular "TypeScript Swagger Editor" would be at this stage, but I hope that I can proceed with the `@nestia/editor` project as I have created something that front (client) developers desperately need.
 
-Let's `nestia` together.
+## `<iframe>` Embedding
+```html
+<iframe url="https://nestia.io/editor/?url={URL_ADDRESS}&simulate=true&e2e=true"></iframe>
+```
+
+You also can embed the `@nestia/editor` with static URL address.
+
+When embedding the `@nestia/editor` application through the `<iframe>` tag, don't forget to filling the `url` attribute with the URL address of your `swagger.json` file. The `simulate` and `e2e` attributes are optional, but recommended to be filled with `true` for the best experience.
+
+If you wanna see the example cases of the `<iframe>` embedding, let's see the below list again.
+
+{<ul>
+  {EDITOR_EXAMPLES.map((example) => (
+    <li>
+      {example.title}{": "}
+      <a href={`/editor/?url=${encodeURIComponent(example.swagger)}&simulate=true&e2e=true`} 
+          target="_blank">
+        https://nestia.io/editor/?url={example.swagger.split("/").at(-1)}&simulate=true&e2e=true 
+      </a>
+    </li>
+  ))}
+</ul>}