@nestia/editor 0.1.3 → 0.2.1

package/src/NestiaEditorApplication.tsx

@@ -1,75 +1,77 @@
-import { Typography } from "@mui/material";
-import { useEffect, useState } from "react";
-
-import { NestiaEditorIframe } from "./NestiaEditorIframe.js";
-import { NestiaEditorUploader } from "./NestiaEditorUploader.js";
-
-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;
-}
+import { Typography } from "@mui/material";
+import React from "react";
+
+import { NestiaEditorIframe } from "./NestiaEditorIframe";
+import { NestiaEditorUploader } from "./NestiaEditorUploader";
+
+export function NestiaEditorApplication() {
+  const [ready, setReady] = React.useState(false);
+  const [asset, setAsset] = React.useState<IAsset | null>(null);
+
+  React.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;
+}

package/src/NestiaEditorIframe.tsx

@@ -10,22 +10,23 @@ import {
 } from "@mui/material";
 import { OpenApiV3, OpenApiV3_1, SwaggerV2 } from "@samchon/openapi";
 import StackBlitzSDK from "@stackblitz/sdk";
-import { useEffect, useState } from "react";
-import { JSONTree } from "react-json-tree";
+import React from "react";
 import { IValidation } from "typia";
 
-import { NestiaEditorComposer } from "./internal/NestiaEditorComposer.js";
+import { NestiaEditorComposer } from "./internal/NestiaEditorComposer";
 
 export function NestiaEditorIframe(props: NestiaEditorIframe.IProps) {
-  const [id] = useState(
+  const [id] = React.useState(
     `reactia-editor-div-${Math.random().toString().substring(2)}`,
   );
-  const [step, setStep] = useState(0);
-  const [fetchError, setFetchError] = useState<string | null>(null);
-  const [operations, setOperationCount] = useState<Record<string, number>>({});
-  const [composerError, setComposerError] = useState<any | null>(null);
+  const [step, setStep] = React.useState(0);
+  const [fetchError, setFetchError] = React.useState<string | null>(null);
+  const [operations, setOperationCount] = React.useState<
+    Record<string, number>
+  >({});
+  const [composerError, setComposerError] = React.useState<any | null>(null);
 
-  useEffect(() => {
+  React.useEffect(() => {
     (async () => {
       // LOADING OPENAPI DOCUMENTS
       setStep(0);
@@ -152,7 +153,7 @@ export function NestiaEditorIframe(props: NestiaEditorIframe.IProps) {
                   <br />
                   <Alert severity="error">
                     <AlertTitle>Composition Error</AlertTitle>
-                    <JSONTree data={composerError} />
+                    <pre>{JSON.stringify(composerError, null, 2)}</pre>
                   </Alert>
                 </>
               ) : null}

package/src/NestiaEditorUploader.tsx

@@ -9,22 +9,22 @@ import {
 } from "@mui/material";
 import { OpenApiV3, OpenApiV3_1, SwaggerV2 } from "@samchon/openapi";
 import StackBlitzSDK from "@stackblitz/sdk";
-import { useState } from "react";
+import React from "react";
 
-import { NestiaEditorComposer } from "./internal/NestiaEditorComposer.js";
-import { NestiaEditorFileUploader } from "./internal/NestiaEditorFileUploader.js";
+import { NestiaEditorComposer } from "./internal/NestiaEditorComposer";
+import { NestiaEditorFileUploader } from "./internal/NestiaEditorFileUploader";
 
 export function NestiaEditorUploader(props: NestiaEditorUploader.IProps) {
   // PARAMETERS
-  const [mode, setMode] = useState<"nest" | "sdk">("sdk");
-  const [simulate, setSimulate] = useState(true);
-  const [e2e, setE2e] = useState(true);
+  const [mode, setMode] = React.useState<"nest" | "sdk">("sdk");
+  const [simulate, setSimulate] = React.useState(true);
+  const [e2e, setE2e] = React.useState(true);
 
   // RESULT
-  const [document, setDocument] = useState<
+  const [document, setDocument] = React.useState<
     SwaggerV2.IDocument | OpenApiV3.IDocument | OpenApiV3_1.IDocument | null
   >(null);
-  const [progress, setProgress] = useState(false);
+  const [progress, setProgress] = React.useState(false);
 
   const handleError = (error: string) => {
     if (props.onError) props.onError(error);

package/src/index.ts

@@ -1,2 +1,2 @@
-export * from "./NestiaEditorIframe.js";
-export * from "./NestiaEditorUploader.js";
+export * from "./NestiaEditorIframe";
+export * from "./NestiaEditorUploader";

package/src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-import { NestiaEditorApplication } from "./NestiaEditorApplication.js";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <NestiaEditorApplication />
-  </StrictMode>,
-);
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { NestiaEditorApplication } from "./NestiaEditorApplication";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <NestiaEditorApplication />
+  </StrictMode>,
+);