diff --git a/packages/editor/package.json b/packages/editor/package.json index de6c018bb..4be256630 100644 --- a/packages/editor/package.json +++ b/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", diff --git a/packages/editor/src/NestiaEditorApplication.tsx b/packages/editor/src/NestiaEditorApplication.tsx index 75668f59e..3ac86c8fe 100644 --- a/packages/editor/src/NestiaEditorApplication.tsx +++ b/packages/editor/src/NestiaEditorApplication.tsx @@ -42,18 +42,11 @@ export function NestiaEditorApplication() { async function getAsset(): Promise { 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 { async function findSwagger(): Promise { const response: Response = await fetch("./swagger.json"); + console.log("swagger", response.status); return response.status === 200 ? "./swagger.json" : null; } diff --git a/packages/editor/src/internal/NestiaEditorFileUploader.tsx b/packages/editor/src/internal/NestiaEditorFileUploader.tsx index 38e0951df..e0bf6ddf1 100644 --- a/packages/editor/src/internal/NestiaEditorFileUploader.tsx +++ b/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( diff --git a/packages/editor/tsconfig.app.tsbuildinfo b/packages/editor/tsconfig.app.tsbuildinfo new file mode 100644 index 000000000..ae1e0c308 --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/packages/editor/tsconfig.node.tsbuildinfo b/packages/editor/tsconfig.node.tsbuildinfo new file mode 100644 index 000000000..75ea0011d --- /dev/null +++ b/packages/editor/tsconfig.node.tsbuildinfo @@ -0,0 +1 @@ +{"root":["./vite.config.ts"],"version":"5.6.3"} \ No newline at end of file diff --git a/website/.gitignore b/website/.gitignore index 242b2042a..bbb158b06 100644 --- a/website/.gitignore +++ b/website/.gitignore @@ -4,6 +4,7 @@ out/ public/api/ typedoc-json/ +public/downloads public/robots.txt public/sitemap*.xml !package-lock.json \ No newline at end of file diff --git a/website/build/editor.js b/website/build/editor.js new file mode 100644 index 000000000..46672b8b5 --- /dev/null +++ b/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); +}); diff --git a/website/package.json b/website/package.json index 9056a8e7a..540abd81b 100644 --- a/website/package.json +++ b/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", diff --git a/website/pages/docs/editor.mdx b/website/pages/docs/editor.mdx index 796bf87b0..9cfac24a8 100644 --- a/website/pages/docs/editor.mdx +++ b/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 -> 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`! {
  • 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; + + + ``` -> 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. \ No newline at end of file +## ` +``` + +You also can embed the `@nestia/editor` with static URL address. + +When embedding the `@nestia/editor` application through the `