@nestia/editor, Swagger-UI with online TypeScript Editor

package.json

@@ -26,5 +26,9 @@
     "prettier": "^3.2.4",
     "rimraf": "^5.0.1",
     "sloc": "^0.3.0"
+  },
+  "dependencies": {
+    "@nestia/migrate": "^0.18.2",
+    "@stackblitz/sdk": "^1.11.0"
   }
 }

packages/editor/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+lib
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/editor/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jeongho Nam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/editor/README.md

@@ -0,0 +1,88 @@
+# Nestia
+![Nestia Logo](https://nestia.io/logo.png)
+
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/samchon/nestia/blob/master/LICENSE)
+[![npm version](https://img.shields.io/npm/v/@nestia/sdk.svg)](https://www.npmjs.com/package/@nestia/sdk)
+[![Downloads](https://img.shields.io/npm/dm/@nestia/sdk.svg)](https://www.npmjs.com/package/@nestia/sdk)
+[![Build Status](https://github.com/samchon/nestia/workflows/build/badge.svg)](https://github.com/samchon/nestia/actions?query=workflow%3Abuild)
+[![Guide Documents](https://img.shields.io/badge/guide-documents-forestgreen)](https://nestia.io/docs/)
+[![Discord Badge](https://img.shields.io/badge/discord-NestJS/Nestia-d91965?style=flat&labelColor=5866f2&logo=discord&logoColor=white&link=https://discord.com/channels/520622812742811698/1197293125434093701)](https://discord.com/channels/520622812742811698/1181877086797967420)
+
+Nestia is a set of helper libraries for NestJS, supporting below features:
+
+  - `@nestia/core`:
+    - Super-fast/easy decorators
+    - Advanced WebSocket routes
+  - `@nestia/sdk`:
+    - Swagger generator evolved than ever
+    - OpenAI function calling schema generator
+    - SDK library generator for clients
+    - Mockup Simulator for client applications
+    - Automatic E2E test functions generator
+  - `@nestia/e2e`: Test program utilizing e2e test functions
+  - `@nestia/benchmark`: Benchmark program using e2e test functions
+  - `@nestia/migrate`: OpenAPI generator from Swagger to NestJS/SDK
+  - `@nestia/editor`: Swagger-UI with Online TypeScript Editor
+  - `nestia`: Just CLI (command line interface) tool
+
+> [!NOTE]
+> 
+> - **Only one line** required, with pure TypeScript type
+> - Enhance performance **30x** up
+>   - Runtime validator is **20,000x faster** than `class-validator`
+>   - JSON serialization is **200x faster** than `class-transformer`
+> - Software Development Kit
+>   - Collection of typed `fetch` functions with DTO structures like [tRPC](https://trpc.io/)
+>   - Mockup simulator means embedded backend simulator in the SDK
+>     - similar with [msw](https://mswjs.io/), but fully automated
+
+![nestia-sdk-demo](https://user-images.githubusercontent.com/13158709/215004990-368c589d-7101-404e-b81b-fbc936382f05.gif)
+
+> Left is NestJS server code, and right is client (frontend) code utilizing SDK
+
+
+
+
+## Sponsors and Backers
+Thanks for your support.
+
+Your donation would encourage `nestia` development.
+
+[![Backers](https://opencollective.com/nestia/backers.svg?avatarHeight=75&width=600)](https://opencollective.com/nestia)
+
+
+
+
+## Guide Documents
+Check out the document in the [website](https://nestia.io/docs/):
+
+### 🏠 Home
+  - [Introduction](https://nestia.io/docs/)
+  - [Setup](https://nestia.io/docs/setup/)
+  - [Pure TypeScript](https://nestia.io/docs/pure)
+
+### 📖 Features
+  - Core Library
+    - [WebSocketRoute](https://nestia.io/docs/core/WebSocketRoute)
+    - [TypedRoute](https://nestia.io/docs/core/TypedRoute/)
+    - [TypedBody](https://nestia.io/docs/core/TypedBody/)
+    - [TypedParam](https://nestia.io/docs/core/TypedParam/)
+    - [TypedQuery](https://nestia.io/docs/core/TypedQuery/)
+    - [TypedHeaders](https://nestia.io/docs/core/TypedHeaders/)
+    - [TypedException](https://nestia.io/docs/core/TypedException/)
+  - Generators
+    - [Swagger Documents](https://nestia.io/docs/sdk/swagger/)
+    - [Software Development Kit](https://nestia.io/docs/sdk/sdk/)
+    - [E2E Functions](https://nestia.io/docs/sdk/e2e/)
+    - [Mockup Simulator](https://nestia.io/docs/sdk/simulator/)
+  - E2E Testing
+    - [Why E2E Test?](https://nestia.io/docs/e2e/why/)
+    - [Test Program Development](https://nestia.io/docs/e2e/development/)
+    - [Performance Benchmark](https://nestia.io/docs/e2e/benchmark/)
+  - [Swagger to NestJS](https://nestia.io/docs/migrate/)
+  - [TypeScript Swagger Editor](https://nestia.io/docs/editor/)
+
+### 🔗 Appendix
+  - [API Documents](https://nestia.io/api)
+  - [⇲ Benchmark Result](https://github.com/samchon/nestia/tree/master/benchmark/results/11th%20Gen%20Intel(R)%20Core(TM)%20i5-1135G7%20%40%202.40GHz)
+  - [⇲ `dev.to` Articles](https://dev.to/samchon/series/22751)

packages/editor/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

packages/editor/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en" style="width: 100%; height: 100%">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=3.0s"
+    />
+    <title>Nestia Editor</title>
+  </head>
+  <body style="width: 100%; height: 100%; margin: 0px; overflow: hidden">
+    <div id="root" style="width: 100%; height: 100%"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/editor/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@nestia/editor",
+  "version": "0.1.0",
+  "typings": "lib/index.d.ts",
+  "main": "lib/index.js",
+  "module": "lib/index.mjs",
+  "scripts": {
+    "build:lib": "tsc --project tsconfig.lib.json && rollup -c",
+    "build:static": "tsc -b && vite build",
+    "dev": "vite",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/samchon/nestia"
+  },
+  "keywords": [
+    "openapi",
+    "swagger",
+    "generator",
+    "typescript",
+    "editor",
+    "sdk",
+    "nestjs",
+    "nestia"
+  ],
+  "author": "Jeongho Nam",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/samchon/nestia/issues"
+  },
+  "homepage": "https://nestia.io",
+  "dependencies": {
+    "@mui/material": "^5.15.6",
+    "@nestia/migrate": "^0.18.2",
+    "@stackblitz/sdk": "^1.11.0",
+    "js-yaml": "^4.1.0",
+    "prettier": "^3.3.3",
+    "react-json-tree": "^0.19.0",
+    "react-mui-fileuploader": "^0.5.2",
+    "typia": "^6.11.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/js-yaml": "^4.0.9",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "globals": "^15.11.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.24.2",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.10.0",
+    "vite": "^5.4.9"
+  },
+  "files": [
+    "README.md",
+    "LICENSE",
+    "package.json",
+    "lib",
+    "src"
+  ]
+}

packages/editor/rollup.config.js

@@ -0,0 +1,29 @@
+const typescript = require("@rollup/plugin-typescript");
+const terser = require("@rollup/plugin-terser");
+
+module.exports = {
+  input: "./src/index.ts",
+  output: {
+    dir: "lib",
+    format: "esm",
+    entryFileNames: "[name].mjs",
+    sourcemap: true,
+  },
+  plugins: [
+    typescript({
+      tsconfig: "tsconfig.lib.json",
+      module: "ES2020",
+      target: "ES2020",
+    }),
+    terser({
+      format: {
+        comments: "some",
+        beautify: true,
+        ecma: "2020",
+      },
+      compress: false,
+      mangle: false,
+      module: true,
+    }),
+  ],
+};

packages/editor/src/NestiaEditorApplication.tsx

@@ -0,0 +1,75 @@
+import { Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+
+import { NestiaEditorIframe } from "./NestiaEditorIframe";
+import { NestiaEditorUploader } from "./NestiaEditorUploader";
+
+export function NestiaEditorApplication() {
+  const [ready, setReady] = useState(false);
+  const [asset, setAsset] = useState<IAsset | null>(null);
+  useEffect(() => {
+    (async () => {
+      try {
+        setAsset(await getAsset());
+      } catch {
+        setAsset(null);
+      }
+      setReady(true);
+    })().catch(() => {});
+  }, []);
+  if (ready === false) return <></>;
+  return asset !== null ? (
+    <NestiaEditorIframe
+      swagger={asset.url}
+      simulate={asset.simulate}
+      e2e={asset.e2e}
+    />
+  ) : (
+    <div
+      style={{
+        padding: 25,
+      }}
+    >
+      <Typography variant="h4">Nestia Editor</Typography>
+      <hr />
+      <br />
+      <NestiaEditorUploader />
+    </div>
+  );
+}
+
+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),
+  );
+  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");
+  return {
+    url,
+    simulate:
+      simulate !== null ? simulate === "true" || simulate === "1" : true,
+    e2e: e2e !== null ? e2e === "true" || e2e === "1" : true,
+  };
+}
+
+async function findSwagger(): Promise<string | null> {
+  const response: Response = await fetch("./swagger.json");
+  return response.status === 200 ? "./swagger.json" : null;
+}
+
+interface IAsset {
+  url: string;
+  simulate: boolean;
+  e2e: boolean;
+}