@nestia/editor 12.0.0-rc.2 → 12.0.0-rc.4

package/src/NestiaEditorModule.ts

@@ -1,136 +1,136 @@
-import type {
-  OpenApiV3,
-  OpenApiV3_1,
-  OpenApiV3_2,
-  SwaggerV2,
-} from "@typia/interface";
-import * as fs from "fs";
-
-export namespace NestiaEditorModule {
-  export const setup = async (props: {
-    path: string;
-    application: INestApplication;
-    swagger:
-      | string
-      | SwaggerV2.IDocument
-      | OpenApiV3.IDocument
-      | OpenApiV3_1.IDocument
-      | OpenApiV3_2.IDocument;
-    package?: string;
-    simulate?: boolean;
-    e2e?: boolean;
-  }): Promise<void> => {
-    const prefix: string =
-      "/" +
-      [getGlobalPrefix(props.application), props.path]
-        .join("/")
-        .split("/")
-        .filter((str) => str.length !== 0)
-        .join("/");
-    const adaptor: INestHttpAdaptor = props.application.getHttpAdapter();
-    const staticFiles: IStaticFile[] = [
-      {
-        path: "/index.html",
-        type: "text/html",
-        content: await getIndex(props),
-      },
-      {
-        path: "/swagger.json",
-        type: "application/json",
-        content: JSON.stringify(
-          typeof props.swagger === "string"
-            ? await getSwagger(props.swagger)
-            : props.swagger,
-          null,
-          2,
-        ),
-      },
-      await getJavaScript(),
-    ];
-    for (const f of staticFiles) {
-      adaptor.get(prefix + f.path, (_: any, res: any) => {
-        res.type(f.type);
-        return res.send(f.content);
-      });
-    }
-    for (const p of ["", "/"])
-      adaptor.get(prefix + p, (_: any, res: any) => {
-        return res.redirect(prefix + "/index.html");
-      });
-  };
-
-  const getGlobalPrefix = (app: INestApplication): string =>
-    typeof (app as any).config?.globalPrefix === "string"
-      ? (app as any).config.globalPrefix
-      : "";
-}
-
-interface INestApplication {
-  use(...args: any[]): this;
-  getUrl(): Promise<string>;
-  getHttpAdapter(): INestHttpAdaptor;
-  setGlobalPrefix(prefix: string, options?: any): this;
-}
-interface INestHttpAdaptor {
-  getType(): string;
-  close(): any;
-  init?(): Promise<void>;
-  get: Function;
-  post: Function;
-  put: Function;
-  patch: Function;
-  delete: Function;
-  head: Function;
-  all: Function;
-}
-interface IStaticFile {
-  path: string;
-  type: string;
-  content: string;
-}
-
-const getIndex = async (props: {
-  package?: string;
-  simulate?: boolean;
-  e2e?: boolean;
-}): Promise<string> => {
-  const content: string = await fs.promises.readFile(
-    `${__dirname}/../dist/index.html`,
-    "utf8",
-  );
-  return content
-    .replace(
-      `"@ORGANIZATION/PROJECT"`,
-      JSON.stringify(props.package ?? "@ORGANIZATION/PROJECT"),
-    )
-    .replace("window.simulate = false", `window.simulate = ${!!props.simulate}`)
-    .replace("window.e2e = false", `window.e2e = ${!!props.e2e}`);
-};
-
-const getJavaScript = async (): Promise<IStaticFile> => {
-  const directory: string[] = await fs.promises.readdir(
-    `${__dirname}/../dist/assets`,
-  );
-  const path: string | undefined = directory[0];
-  if (path === undefined)
-    throw new Error("Unreachable code, no JS file exists.");
-  return {
-    path: `/assets/${path}`,
-    type: "application/javascript",
-    content: await fs.promises.readFile(
-      `${__dirname}/../dist/assets/${path}`,
-      "utf8",
-    ),
-  };
-};
-
-const getSwagger = async (
-  url: string,
-): Promise<
-  SwaggerV2.IDocument | OpenApiV3.IDocument | OpenApiV3_1.IDocument
-> => {
-  const response: Response = await fetch(url);
-  if (response.status !== 200)
-    throw new Error(`Failed to fetch Swagger document from ${url}`);
-  return response.json();
-};
+import type {
+  OpenApiV3,
+  OpenApiV3_1,
+  OpenApiV3_2,
+  SwaggerV2,
+} from "@typia/interface";
+import * as fs from "fs";
+
+export namespace NestiaEditorModule {
+  export const setup = async (props: {
+    path: string;
+    application: INestApplication;
+    swagger:
+      | string
+      | SwaggerV2.IDocument
+      | OpenApiV3.IDocument
+      | OpenApiV3_1.IDocument
+      | OpenApiV3_2.IDocument;
+    package?: string;
+    simulate?: boolean;
+    e2e?: boolean;
+  }): Promise<void> => {
+    const prefix: string =
+      "/" +
+      [getGlobalPrefix(props.application), props.path]
+        .join("/")
+        .split("/")
+        .filter((str) => str.length !== 0)
+        .join("/");
+    const adaptor: INestHttpAdaptor = props.application.getHttpAdapter();
+    const staticFiles: IStaticFile[] = [
+      {
+        path: "/index.html",
+        type: "text/html",
+        content: await getIndex(props),
+      },
+      {
+        path: "/swagger.json",
+        type: "application/json",
+        content: JSON.stringify(
+          typeof props.swagger === "string"
+            ? await getSwagger(props.swagger)
+            : props.swagger,
+          null,
+          2,
+        ),
+      },
+      await getJavaScript(),
+    ];
+    for (const f of staticFiles) {
+      adaptor.get(prefix + f.path, (_: any, res: any) => {
+        res.type(f.type);
+        return res.send(f.content);
+      });
+    }
+    for (const p of ["", "/"])
+      adaptor.get(prefix + p, (_: any, res: any) => {
+        return res.redirect(prefix + "/index.html");
+      });
+  };
+
+  const getGlobalPrefix = (app: INestApplication): string =>
+    typeof (app as any).config?.globalPrefix === "string"
+      ? (app as any).config.globalPrefix
+      : "";
+}
+
+interface INestApplication {
+  use(...args: any[]): this;
+  getUrl(): Promise<string>;
+  getHttpAdapter(): INestHttpAdaptor;
+  setGlobalPrefix(prefix: string, options?: any): this;
+}
+interface INestHttpAdaptor {
+  getType(): string;
+  close(): any;
+  init?(): Promise<void>;
+  get: Function;
+  post: Function;
+  put: Function;
+  patch: Function;
+  delete: Function;
+  head: Function;
+  all: Function;
+}
+interface IStaticFile {
+  path: string;
+  type: string;
+  content: string;
+}
+
+const getIndex = async (props: {
+  package?: string;
+  simulate?: boolean;
+  e2e?: boolean;
+}): Promise<string> => {
+  const content: string = await fs.promises.readFile(
+    `${__dirname}/../dist/index.html`,
+    "utf8",
+  );
+  return content
+    .replace(
+      `"@ORGANIZATION/PROJECT"`,
+      JSON.stringify(props.package ?? "@ORGANIZATION/PROJECT"),
+    )
+    .replace("window.simulate = false", `window.simulate = ${!!props.simulate}`)
+    .replace("window.e2e = false", `window.e2e = ${!!props.e2e}`);
+};
+
+const getJavaScript = async (): Promise<IStaticFile> => {
+  const directory: string[] = await fs.promises.readdir(
+    `${__dirname}/../dist/assets`,
+  );
+  const path: string | undefined = directory[0];
+  if (path === undefined)
+    throw new Error("Unreachable code, no JS file exists.");
+  return {
+    path: `/assets/${path}`,
+    type: "application/javascript",
+    content: await fs.promises.readFile(
+      `${__dirname}/../dist/assets/${path}`,
+      "utf8",
+    ),
+  };
+};
+
+const getSwagger = async (
+  url: string,
+): Promise<
+  SwaggerV2.IDocument | OpenApiV3.IDocument | OpenApiV3_1.IDocument
+> => {
+  const response: Response = await fetch(url);
+  if (response.status !== 200)
+    throw new Error(`Failed to fetch Swagger document from ${url}`);
+  return response.json();
+};

package/src/NestiaEditorUploader.tsx

@@ -1,154 +1,146 @@
-import {
-  Button,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  Switch,
-  TextField,
-} from "@mui/material";
-import StackBlitzSDK from "@stackblitz/sdk";
-import { OpenApiV3, OpenApiV3_1, SwaggerV2 } from "@typia/interface";
-import React from "react";
-
-import { NestiaEditorComposer } from "./internal/NestiaEditorComposer";
-import { NestiaEditorFileUploader } from "./internal/NestiaEditorFileUploader";
-
-export function NestiaEditorUploader(props: NestiaEditorUploader.IProps) {
-  // PARAMETERS
-  const [mode, setMode] = React.useState<"nest" | "sdk">("sdk");
-  const [keyword, setKeyword] = React.useState(true);
-  const [simulate, setSimulate] = React.useState(true);
-  const [e2e, setE2e] = React.useState(true);
-  const [name, setName] = React.useState("@ORGINIZATION/PROJECT");
-
-  // RESULT
-  const [document, setDocument] = React.useState<
-    SwaggerV2.IDocument | OpenApiV3.IDocument | OpenApiV3_1.IDocument | null
-  >(null);
-  const [progress, setProgress] = React.useState(false);
-
-  const handleError = (error: string) => {
-    if (props.onError) props.onError(error);
-    else alert(error);
-  };
-  const handleSwagger = (
-    document:
-      | SwaggerV2.IDocument
-      | OpenApiV3.IDocument
-      | OpenApiV3_1.IDocument
-      | null,
-    error: string | null,
-  ) => {
-    setDocument(document);
-    if (error !== null) handleError(error);
-  };
-
-  const generate = async () => {
-    if (document === null) return;
-
-    setProgress(true);
-    try {
-      const result = await NestiaEditorComposer[mode]({
-        document,
-        keyword,
-        e2e,
-        simulate,
-        package: name,
-      });
-      if (result.success === true) {
-        StackBlitzSDK.openProject(
-          {
-            title: document.info?.title ?? "Nestia Editor",
-            template: "node",
-            files: result.data.files,
-          },
-          {
-            newWindow: true,
-            openFile: result.data.openFile,
-            startScript: result.data.startScript as any,
-          },
-        );
-      } else {
-        handleError(JSON.stringify(result.errors, null, 2));
-      }
-    } catch (exp) {
-      handleError(exp instanceof Error ? exp.message : "unknown error");
-    }
-    setProgress(false);
-  };
-
-  return (
-    <>
-      <NestiaEditorFileUploader onChange={handleSwagger} />
-      <br />
-      <FormControl fullWidth style={{ paddingLeft: 15 }}>
-        <TextField
-          onChange={(e) => setName(e.target.value)}
-          defaultValue={name}
-          label="Package Name"
-          variant="outlined"
-        />
-        <FormLabel style={{ paddingTop: 20 }}> Mode </FormLabel>
-        <RadioGroup
-          defaultValue={mode}
-          onChange={(_e, value) => setMode(value as "nest" | "sdk")}
-          style={{ paddingLeft: 15 }}
-        >
-          <FormControlLabel
-            value="sdk"
-            control={<Radio />}
-            label="Software Development Kit"
-          />
-          <FormControlLabel
-            value="nest"
-            control={<Radio />}
-            label="NestJS Project"
-          />
-        </RadioGroup>
-        <FormLabel style={{ paddingTop: 20 }}> Options </FormLabel>
-        <FormControlLabel
-          label="Keyword Parameter"
-          style={{ paddingTop: 5, paddingLeft: 15 }}
-          control={
-            <Switch checked={keyword} onChange={() => setKeyword(!keyword)} />
-          }
-        />
-        <FormControlLabel
-          label="Mockup Simulator"
-          style={{ paddingTop: 5, paddingLeft: 15 }}
-          control={
-            <Switch
-              checked={simulate}
-              onChange={() => setSimulate(!simulate)}
-            />
-          }
-        />
-        <FormControlLabel
-          label="E2E Test Functions"
-          style={{ paddingLeft: 15 }}
-          control={<Switch checked={e2e} onChange={() => setE2e(!e2e)} />}
-        />
-      </FormControl>
-      <br />
-      <br />
-      <Button
-        component="a"
-        fullWidth
-        variant="contained"
-        color={"info"}
-        size="large"
-        disabled={progress === true || document === null}
-        onClick={() => generate()}
-      >
-        {progress ? "Generating..." : "Generate Editor"}
-      </Button>
-    </>
-  );
-}
-export namespace NestiaEditorUploader {
-  export interface IProps {
-    onError?: (error: string) => void;
-  }
-}
+import {
+  Button,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  Switch,
+  TextField,
+} from "@mui/material";
+import { OpenApiV3, OpenApiV3_1, SwaggerV2 } from "@typia/interface";
+import React from "react";
+
+import { NestiaEditorArchiver } from "./internal/NestiaEditorArchiver";
+import { NestiaEditorComposer } from "./internal/NestiaEditorComposer";
+import { NestiaEditorFileUploader } from "./internal/NestiaEditorFileUploader";
+
+export function NestiaEditorUploader(props: NestiaEditorUploader.IProps) {
+  // PARAMETERS
+  const [mode, setMode] = React.useState<"nest" | "sdk">("sdk");
+  const [keyword, setKeyword] = React.useState(true);
+  const [simulate, setSimulate] = React.useState(true);
+  const [e2e, setE2e] = React.useState(true);
+  const [name, setName] = React.useState("@ORGINIZATION/PROJECT");
+
+  // RESULT
+  const [document, setDocument] = React.useState<
+    SwaggerV2.IDocument | OpenApiV3.IDocument | OpenApiV3_1.IDocument | null
+  >(null);
+  const [progress, setProgress] = React.useState(false);
+
+  const handleError = (error: string) => {
+    if (props.onError) props.onError(error);
+    else alert(error);
+  };
+  const handleSwagger = (
+    document:
+      | SwaggerV2.IDocument
+      | OpenApiV3.IDocument
+      | OpenApiV3_1.IDocument
+      | null,
+    error: string | null,
+  ) => {
+    setDocument(document);
+    if (error !== null) handleError(error);
+  };
+
+  const generate = async () => {
+    if (document === null) return;
+
+    setProgress(true);
+    try {
+      const result = await NestiaEditorComposer[mode]({
+        document,
+        keyword,
+        e2e,
+        simulate,
+        package: name,
+      });
+      if (result.success === true) {
+        NestiaEditorArchiver.download({
+          name: NestiaEditorArchiver.name(name),
+          files: result.data.files,
+        });
+      } else {
+        handleError(JSON.stringify(result.errors, null, 2));
+      }
+    } catch (exp) {
+      handleError(exp instanceof Error ? exp.message : "unknown error");
+    }
+    setProgress(false);
+  };
+
+  return (
+    <>
+      <NestiaEditorFileUploader onChange={handleSwagger} />
+      <br />
+      <FormControl fullWidth style={{ paddingLeft: 15 }}>
+        <TextField
+          onChange={(e) => setName(e.target.value)}
+          defaultValue={name}
+          label="Package Name"
+          variant="outlined"
+        />
+        <FormLabel style={{ paddingTop: 20 }}> Mode </FormLabel>
+        <RadioGroup
+          defaultValue={mode}
+          onChange={(_e, value) => setMode(value as "nest" | "sdk")}
+          style={{ paddingLeft: 15 }}
+        >
+          <FormControlLabel
+            value="sdk"
+            control={<Radio />}
+            label="Software Development Kit"
+          />
+          <FormControlLabel
+            value="nest"
+            control={<Radio />}
+            label="NestJS Project"
+          />
+        </RadioGroup>
+        <FormLabel style={{ paddingTop: 20 }}> Options </FormLabel>
+        <FormControlLabel
+          label="Keyword Parameter"
+          style={{ paddingTop: 5, paddingLeft: 15 }}
+          control={
+            <Switch checked={keyword} onChange={() => setKeyword(!keyword)} />
+          }
+        />
+        <FormControlLabel
+          label="Mockup Simulator"
+          style={{ paddingTop: 5, paddingLeft: 15 }}
+          control={
+            <Switch
+              checked={simulate}
+              onChange={() => setSimulate(!simulate)}
+            />
+          }
+        />
+        <FormControlLabel
+          label="E2E Test Functions"
+          style={{ paddingLeft: 15 }}
+          control={<Switch checked={e2e} onChange={() => setE2e(!e2e)} />}
+        />
+      </FormControl>
+      <br />
+      <br />
+      <Button
+        component="a"
+        fullWidth
+        variant="contained"
+        color={"info"}
+        size="large"
+        disabled={progress === true || document === null}
+        onClick={() => generate()}
+      >
+        {progress ? "Generating..." : "Download Project"}
+      </Button>
+    </>
+  );
+}
+export namespace NestiaEditorUploader {
+  export interface IProps {
+    onError?: (error: string) => void;
+  }
+}

package/src/index.ts

@@ -1,3 +1,3 @@
-export * from "./NestiaEditorApplication";
-export * from "./NestiaEditorIframe";
-export * from "./NestiaEditorUploader";
+export * from "./NestiaEditorApplication";
+export * from "./NestiaEditorIframe";
+export * from "./NestiaEditorUploader";

package/src/internal/NestiaEditorArchiver.ts

@@ -0,0 +1,43 @@
+import { strToU8, zipSync } from "fflate";
+
+/**
+ * Archives a composed project into a zip file and hands it to the browser.
+ *
+ * StackBlitz can no longer run nestia projects: the generated projects build
+ * through `ttsc`, whose TypeScript compiler is a native Go binary that a
+ * WebContainer cannot execute. The editor therefore delivers the composed
+ * project as a downloadable zip archive instead of an embedded StackBlitz
+ * workspace.
+ */
+export namespace NestiaEditorArchiver {
+  /** Pack the composed project files into a zip archive. */
+  export const pack = (files: Record<string, string>): Uint8Array => {
+    const entries: Record<string, Uint8Array> = {};
+    for (const [key, value] of Object.entries(files))
+      entries[key] = strToU8(value);
+    return zipSync(entries);
+  };
+
+  /** Compose a safe archive file name from a package name. */
+  export const name = (packageName: string): string =>
+    `${packageName.replace(/^@/, "").replace(/[^A-Za-z0-9._-]+/g, "-")}.zip`;
+
+  /** Trigger a browser download of the packed archive. */
+  export const download = (props: {
+    name: string;
+    files: Record<string, string>;
+  }): void => {
+    const blob: Blob = new Blob(
+      [pack(props.files) as Uint8Array<ArrayBuffer>],
+      {
+        type: "application/zip",
+      },
+    );
+    const url: string = URL.createObjectURL(blob);
+    const anchor: HTMLAnchorElement = window.document.createElement("a");
+    anchor.href = url;
+    anchor.download = props.name;
+    anchor.click();
+    setTimeout(() => URL.revokeObjectURL(url), 30_000);
+  };
+}