npm - miqro - Versions diffs - 6.1.1 → 6.1.3 - Mend

miqro 6.1.1 → 6.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/build/esm/editor/auth.d.ts +6 -0
package/build/esm/editor/auth.js +41 -0
package/build/esm/editor/common/admin-interface.d.ts +36 -0
package/build/esm/editor/common/admin-interface.js +44 -0
package/build/esm/editor/common/constants.d.ts +4 -0
package/build/esm/editor/common/constants.js +20 -0
package/build/esm/editor/common/constants.server.d.ts +2 -0
package/build/esm/editor/common/constants.server.js +4 -0
package/build/esm/editor/common/editor-index.d.ts +2 -0
package/build/esm/editor/common/editor-index.js +14 -0
package/build/esm/editor/common/html-encode.d.ts +1 -0
package/build/esm/editor/common/html-encode.js +14 -0
package/build/esm/editor/common/log-socket.d.ts +15 -0
package/build/esm/editor/common/log-socket.js +70 -0
package/build/esm/editor/common/templates.d.ts +11 -0
package/build/esm/editor/common/templates.js +461 -0
package/build/esm/editor/components/api-preview.d.ts +11 -0
package/build/esm/editor/components/api-preview.js +90 -0
package/build/esm/editor/components/editor.d.ts +16 -0
package/build/esm/editor/components/editor.js +357 -0
package/build/esm/editor/components/file-browser.d.ts +37 -0
package/build/esm/editor/components/file-browser.js +126 -0
package/build/esm/editor/components/file-editor-toolbar.d.ts +22 -0
package/build/esm/editor/components/file-editor-toolbar.js +93 -0
package/build/esm/editor/components/file-editor.d.ts +32 -0
package/build/esm/editor/components/file-editor.js +59 -0
package/build/esm/editor/components/filter-query.d.ts +1 -0
package/build/esm/editor/components/filter-query.js +22 -0
package/build/esm/editor/components/highlight-text-area.d.ts +11 -0
package/build/esm/editor/components/highlight-text-area.js +124 -0
package/build/esm/editor/components/log-viewer.d.ts +6 -0
package/build/esm/editor/components/log-viewer.js +69 -0
package/build/esm/editor/components/new-file.d.ts +10 -0
package/build/esm/editor/components/new-file.js +117 -0
package/build/esm/editor/components/scroll-query.d.ts +7 -0
package/build/esm/editor/components/scroll-query.js +21 -0
package/build/esm/editor/components/start-page.d.ts +13 -0
package/build/esm/editor/components/start-page.js +30 -0
package/build/esm/editor/http/admin/editor/api/fs/delete.api.d.ts +3 -0
package/build/esm/editor/http/admin/editor/api/fs/delete.api.js +29 -0
package/build/esm/editor/http/admin/editor/api/fs/read.api.d.ts +5 -0
package/build/esm/editor/http/admin/editor/api/fs/read.api.js +49 -0
package/build/esm/editor/http/admin/editor/api/fs/rename.api.d.ts +4 -0
package/build/esm/editor/http/admin/editor/api/fs/rename.api.js +39 -0
package/build/esm/editor/http/admin/editor/api/fs/scan.api.d.ts +26 -0
package/build/esm/editor/http/admin/editor/api/fs/scan.api.js +149 -0
package/build/esm/editor/http/admin/editor/api/fs/write.api.d.ts +3 -0
package/build/esm/editor/http/admin/editor/api/fs/write.api.js +38 -0
package/build/esm/editor/http/admin/editor/api/server/reload.api.d.ts +10 -0
package/build/esm/editor/http/admin/editor/api/server/reload.api.js +46 -0
package/build/esm/editor/http/admin/editor/api/server/restart.api.d.ts +10 -0
package/build/esm/editor/http/admin/editor/api/server/restart.api.js +45 -0
package/build/esm/editor/http/admin/editor/editor.d.ts +1 -0
package/build/esm/editor/http/admin/editor/editor.js +7 -0
package/build/esm/editor/http/admin/editor/index.api.d.ts +3 -0
package/build/esm/editor/http/admin/editor/index.api.js +21 -0
package/build/esm/editor/server.d.ts +3 -0
package/build/esm/editor/server.js +49 -0
package/build/esm/editor/ws.d.ts +3 -0
package/build/esm/editor/ws.js +11 -0
package/build/esm/src/bin/compile.d.ts +3 -0
package/build/esm/src/bin/compile.js +30 -0
package/build/esm/src/bin/doc-md.d.ts +17 -0
package/build/esm/src/bin/doc-md.js +186 -0
package/build/esm/src/bin/generate-doc.d.ts +6 -0
package/build/esm/src/bin/generate-doc.js +53 -0
package/build/esm/src/bin/test.d.ts +3 -0
package/build/esm/src/bin/test.js +67 -0
package/build/esm/src/bin/types.d.ts +3 -0
package/build/esm/src/bin/types.js +20 -0
package/editor/auth.ts +51 -0
package/editor/common/admin-interface.ts +84 -0
package/editor/common/constants.server.ts +5 -0
package/editor/common/constants.ts +21 -0
package/editor/common/editor-index.tsx +17 -0
package/editor/common/html-encode.ts +14 -0
package/editor/common/log-socket.tsx +85 -0
package/editor/common/templates.ts +466 -0
package/editor/components/api-preview.tsx +116 -0
package/editor/components/editor.tsx +486 -0
package/editor/components/file-browser.tsx +308 -0
package/editor/components/file-editor-toolbar.tsx +191 -0
package/editor/components/file-editor.tsx +122 -0
package/editor/components/filter-query.tsx +22 -0
package/editor/components/highlight-text-area.tsx +144 -0
package/editor/components/log-viewer.tsx +110 -0
package/editor/components/new-file.tsx +169 -0
package/editor/components/scroll-query.tsx +22 -0
package/editor/components/start-page.tsx +49 -0
package/editor/http/admin/editor/api/fs/delete.api.tsx +32 -0
package/editor/http/admin/editor/api/fs/read.api.tsx +55 -0
package/editor/http/admin/editor/api/fs/rename.api.tsx +41 -0
package/editor/http/admin/editor/api/fs/scan.api.tsx +181 -0
package/editor/http/admin/editor/api/fs/write.api.tsx +41 -0
package/editor/http/admin/editor/api/server/reload.api.ts +53 -0
package/editor/http/admin/editor/api/server/restart.api.tsx +52 -0
package/editor/http/admin/editor/editor.tsx +8 -0
package/editor/http/admin/editor/index.api.tsx +39 -0
package/editor/server.ts +57 -0
package/editor/ws.ts +15 -0
package/package.json +1 -1
package/src/bin/compile.ts +35 -0
package/src/bin/doc-md.ts +210 -0
package/src/bin/generate-doc.ts +64 -0
package/src/bin/test.ts +92 -0
package/src/bin/types.ts +22 -0
package/src/cluster.ts +27 -0
package/src/common/arguments.ts +503 -0
package/src/common/assets.ts +128 -0
package/src/common/checksum.ts +58 -0
package/src/common/constants.ts +18 -0
package/src/common/content-type.ts +84 -0
package/src/common/esbuild.ts +94 -0
package/src/common/exit.ts +91 -0
package/src/common/fs.ts +17 -0
package/src/common/help.ts +51 -0
package/src/common/jsx.ts +512 -0
package/src/common/paths.ts +158 -0
package/src/common/watch.ts +85 -0
package/src/inflate/inflate-sea.ts +206 -0
package/src/inflate/inflate.ts +99 -0
package/src/inflate/md.ts +25 -0
package/src/inflate/setup-auth.ts +40 -0
package/src/inflate/setup-cors.ts +40 -0
package/src/inflate/setup-db.ts +113 -0
package/src/inflate/setup-error.ts +43 -0
package/src/inflate/setup-http.ts +655 -0
package/src/inflate/setup-log.ts +44 -0
package/src/inflate/setup-middleware.ts +46 -0
package/src/inflate/setup-server-config.ts +47 -0
package/src/inflate/setup-test.ts +23 -0
package/src/inflate/setup-ws.ts +48 -0
package/src/inflate/setup.doc.ts +68 -0
package/src/inflate/utils/sea-utils.ts +14 -0
package/src/lib.ts +19 -0
package/src/main.ts +87 -0
package/src/services/app.ts +658 -0
package/src/services/editor.tsx +101 -0
package/src/services/globals.ts +143 -0
package/src/services/hot-reload.ts +48 -0
package/src/services/migrations.ts +66 -0
package/src/services/utils/admin-interface.ts +37 -0
package/src/services/utils/cache.ts +88 -0
package/src/services/utils/cluster-cache.ts +230 -0
package/src/services/utils/cluster-ws.ts +197 -0
package/src/services/utils/db-manager.ts +92 -0
package/src/services/utils/get-route.ts +70 -0
package/src/services/utils/log-transport.ts +75 -0
package/src/services/utils/log.ts +92 -0
package/src/services/utils/server-interface.ts +172 -0
package/src/services/utils/websocketmanager.ts +149 -0
package/src/types/@esbuild.d.ts +1 -0
package/src/types/@miqro/core.d.ts +2 -0
package/src/types/@miqro/jsx.d.ts +2 -0
package/src/types/@miqro/parser.d.ts +2 -0
package/src/types/@miqro/query.d.ts +2 -0
package/src/types/@miqro/request.d.ts +2 -0
package/src/types/@miqro/test.d.ts +2 -0
package/src/types/@miqro.d.ts +1 -0
package/src/types/@types.d.ts +1 -0
package/src/types/browser.globals.d.ts +9 -0
package/src/types/globals.d.ts +2 -0
package/src/types/jsx.globals.d.ts +37 -0
package/src/types/miqro.d.ts +129 -0
package/src/types/postject.d.ts +1 -0
package/src/types/server.globals.d.ts +72 -0
package/src/types.ts +222 -0

package/editor/common/templates.ts ADDED Viewed

@@ -0,0 +1,466 @@
+export const TEMPLATES: {
+  [name: string]: {
+    displayName: string;
+    template?: ((filename: string, httpPath: string) => string);
+    httpSufix?: string;
+    sufix?: string;
+    prefix?: string;
+    language: string;
+    filename?: string;
+  }
+} = {
+  EMPTY: {
+    displayName: "empty file",
+    //template: () => "",
+    sufix: "",
+    language: "text",
+    prefix: ""
+  },
+  JSON: {
+    displayName: "a .json.ts file",
+    template: () => `import { ServerRequest, ServerResponse } from "miqro";
+export default async (req: ServerRequest | null, res: ServerResponse | null) => {
+  return {
+    count: 1
+  }
+}`,
+    sufix: ".json.ts",
+    language: "typescript",
+    prefix: ""
+  },
+  API: {
+    prefix: "http",
+    sufix: ".api.ts",
+    displayName: ".api.ts file",
+    language: "typescript",
+    template: () => `import { ServerRequest, ServerResponse, APIRoute } from "miqro";
+export default {
+  path: "/health",
+  description: "checks the health of the service",
+  method: "GET",
+  //middleware: [server.middleware.json()],
+  request: {
+    /*body: {
+      someAttr: "string",
+      optionalArray: "number[]?"
+    }*/
+  },
+  response: {
+    status: [200, 400],
+    body: {
+      status: {
+        type: "enum",
+        enumValues: ["OK", "NOK"]
+      },
+      message: "string?"
+    }
+  },
+  handler: async (req: ServerRequest, res: ServerResponse) => {
+    try {
+      const [{ c }] = await req?.server?.db?.get("MyDB")?.query("SELECT 1+1 as c") as [{ c: number }];
+      const statusText = String(c) === "2" ? "OK" : "NOK";
+      return {
+        status: statusText === "OK" ? 200 : 400,
+        body: {
+          status: statusText
+        }
+      }
+    } catch (e) {
+      req.logger.error(e);
+      return {
+        status: 400,
+        body: {
+          status: "NOK",
+          message: e.message
+        }
+      };
+    }
+  }
+} as APIRoute`
+  },
+  MIGRATION: {
+    prefix: "migration",
+    sufix: ".ts",
+    displayName: "migration file",
+    language: "typescript",
+    template: () => `import { Migration } from "miqro";
+export default {
+    up: async (db, logger) => {
+        await db.createTable("mytable", {
+            id: {
+                type: "bigint",
+                autoIncrement: true,
+                primaryKey: true
+            },
+            name: {
+                type: "string"
+            }
+        }).yield(logger);
+    },
+    down: async (db, logger) => {
+        await db.dropTable("mytable").yield(logger);
+    }
+} as Migration;`
+  },
+  TEST: {
+    prefix: "test",
+    sufix: ".test.tsx",
+    displayName: "a test file",
+    language: "typescript",
+    template: () => `import { } from "miqro";
+import { strictEqual } from "node:assert";
+describe("test group", () => {
+  it("sample test1", async () => {
+    const response = await test.request({
+      url: "/index.html"
+    });
+    strictEqual(response.status, 200);
+  });
+  it("sample test2", async () => {
+    await test.jsx.test(async (container, root, runtime) => {
+      function SomeComponent() {
+        return <p id="test-id">HelloWorld</p>
+      }
+      container.render(<SomeComponent />);
+      strictEqual(runtime.getElementById("test-id")?.textContent, "HelloWorld");
+    });
+  });
+});
+`
+  },
+  HTMLTSX: {
+    prefix: "http",
+    sufix: ".html.tsx",
+    displayName: ".html.tsx file",
+    language: "typescript",
+    template: () => `import { ServerRequest, ServerResponse, APIOptions } from "miqro";
+/*export const apiOptions: APIOptions = {
+  path: ["/", "/index.html"],
+  method: ["GET"]
+};*/
+export default async (req: ServerRequest | null, res: ServerResponse | null) => {
+  return <html>
+    <head></head>
+    <body>
+      <h1>hello world!</h1>
+    </body>
+  </html>;
+}`
+  },
+  AUTHCONFIG: {
+    prefix: "",
+    sufix: ".ts",
+    filename: "auth",
+    displayName: "auth.ts file",
+    language: "typescript",
+    template: () => `import { AuthConfig } from "miqro";
+export default {
+  //path: ["/api/"], //optionaly specify a custom path list
+  /*options: {
+    tokenLocation: "free",// "query"//"cookie" //"header"
+    tokenLocationName: "x-auth"
+  },*/
+  authService: {
+    verify: async ({ token, req, res }) => {
+      // TODO Implement logic
+      return null;
+      /*return {
+        username: "username",
+        groups: ["someapi"],
+        account: "account",
+        token: ""
+      };*/
+    }
+  }
+} as AuthConfig;
+`
+  },
+  DOCCONFIG: {
+    prefix: "",
+    sufix: ".ts",
+    filename: "doc",
+    displayName: "doc.ts file",
+    language: "typescript",
+    template: () => `import { DocConfig } from "miqro";
+export default {
+  // auto publish API documentation
+  publish: {
+    "/api/doc.html": {
+      type: "HTML", // can be "MD" | "JSON" | "HTML"
+      //all: true, // enable to show .html and other static resources
+    }
+  }
+} as DocConfig;`
+  },
+  WSCONFIG: {
+    prefix: "",
+    sufix: ".ts",
+    filename: "ws",
+    displayName: "ws.ts file",
+    language: "typescript",
+    template: () => `import { WSConfig } from "miqro";
+export default {
+  path: "/socket",
+  //disabled: true,
+  //maxConnections: 100,
+  /*onConnection(req) {
+  },*/
+  /*onDisconnect: (req) => {
+  },*/
+  /*onError: (req, error) => {
+  },*/
+  /*onMessage: (req, data) => {
+  },*/
+  validate(req) {
+    // TODO implement logic
+    return false;
+  },
+} as WSConfig;
+`
+  },
+  SERVERCONFIG: {
+    prefix: "",
+    sufix: ".ts",
+    filename: "server",
+    displayName: "server.ts file",
+    language: "typescript",
+    template: () => `import { ServerConfig } from "miqro";
+export default {
+  preload: async (server) => {
+    server.logger.info("server preload");
+    /* uncomment code below to migrate-up the database "MyDB" before loading */
+    /*if (server?.isPrimaryWorker()) {
+      await server.db.migrate({ direction: "up", dbName: "MyDB" });
+    }*/
+  },
+  load: async (server) => {
+    server.logger.info("server loaded");
+  },
+  start: async (server) => {
+    server.logger.info("server started");
+    if (server.isPrimaryWorker()) {
+      try {
+        server.openBrowser("/index.html");
+      } catch (e) {
+        server.logger.error(e.message);
+      }
+    }
+  },
+  unload: (server) => {
+    server.logger.info("server unload");
+  },
+  stop: (server) => {
+    server.logger.info("server stop");
+  }
+} as ServerConfig;
+`},
+  TSCONFIGJSON: {
+    prefix: "",
+    sufix: ".json",
+    filename: "tsconfig",
+    displayName: "tsconfig.json file",
+    language: "json",
+    template: () => `{
+  "compilerOptions": {
+    "target": "es2022",
+    "noEmit": true,
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "lib": ["es2021", "dom"],
+    "jsx": "react",
+    "jsxFactory": "JSX.createElement",
+    "jsxFragmentFactory": "JSX.Fragment",
+    "typeRoots": [
+      "./.types"
+    ]
+  }
+}
+`},
+  MINIFIEDJSX: {
+    prefix: "http",
+    sufix: ".min.tsx",
+    displayName: "min.tsx file",
+    language: "typescript",
+    template: () => `import { } from "miqro";
+export function MyComponent() {
+  return <p>HelloWorld</p>
+}
+window.addEventListener("load", (event) => {
+  jsx.define("my-tag", MyComponent, {
+    shadowInit: false,
+    observedAttributes: []
+  });
+});
+`},
+  JSX: {
+    prefix: "http",
+    sufix: ".tsx",
+    displayName: ".tsx file",
+    language: "typescript",
+    template: () => `import { } from "miqro";
+export function MyComponent() {
+  return <p>HelloWorld</p>
+}
+window.addEventListener("load", (event) => {
+  jsx.define("my-tag", MyComponent, {
+    shadowInit: false,
+    observedAttributes: []
+  });
+});
+`},
+  SSRTSX: {
+    prefix: "http",
+    sufix: ".tsx",
+    displayName: "an ssr component example using webcomponents",
+    language: "typescript",
+    httpSufix: ".js",
+    template: (_filename: string, httpPath: string) => `import { } from "miqro";
+// TODO change this accordingly
+const TAG = "my-tag";
+function MyComponent(props, children) {
+  const [count, setcount] = jsx.useState(0);
+  jsx.useEffect(()=>{
+    const timeout = setTimeout(()=>{
+      setcount(count+1);
+    }, 1000);
+    return ()=>{
+      clearTimeout(timeout);
+    }
+  });
+  return <p>Count: {count}</p>
+}
+window.addEventListener("load", (event) => {
+  jsx.define(TAG, MyComponent, {
+    shadowInit: false,
+    observedAttributes: []
+  });
+});
+export function SSRComponent(props, children) {
+  return JSX.createElement(
+    JSX.Fragment, null,
+      JSX.createElement(TAG, props,
+        JSX.createElement(MyComponent, props, ...children)
+      ),
+      JSX.createElement("script", { type: "module", src: "/${httpPath}" })
+    );
+}
+`
+  },
+  SSRMINTSX: {
+    prefix: "http",
+    sufix: ".min.tsx",
+    displayName: "a minified ssr component example using webcomponents",
+    language: "typescript",
+    httpSufix: ".min.js",
+    template: (filename: string, httpPath: string) => `import { } from "miqro";
+// TODO change this accordingly
+const TAG = "my-tag";
+function MyComponent(props, children) {
+  const [count, setcount] = jsx.useState(0);
+  jsx.useEffect(()=>{
+    const timeout = setTimeout(()=>{
+      setcount(count+1);
+    }, 1000);
+    return ()=>{
+      clearTimeout(timeout);
+    }
+  });
+  return <p>Count: {count}</p>
+}
+window.addEventListener("load", (event) => {
+  jsx.define(TAG, MyComponent, {
+    shadowInit: false,
+    observedAttributes: []
+  });
+});
+export function SSRComponent(props, children) {
+  return JSX.createElement(
+    JSX.Fragment, null,
+      JSX.createElement(TAG, props,
+        JSX.createElement(MyComponent, props, ...children)
+      ),
+      JSX.createElement("script", { type: "module", src: "/${httpPath}" })
+    );
+}
+`
+  },
+  JS: {
+    prefix: "http",
+    sufix: ".js",
+    displayName: ".js file",
+    language: "typescript",
+    template: () => `window.addEventListener("load", (event) => {
+});
+`},
+  CSS: {
+    prefix: "http",
+    sufix: ".css",
+    displayName: ".css file",
+    language: "css",
+    template: () => `* {
+  font-family: "Menlo" !important;
+  font-size: 11px;
+}
+`
+  },
+  DBCONFIG: {
+    prefix: "",
+    filename: "db",
+    sufix: ".ts",
+    displayName: "db.ts file",
+    language: "typescript",
+    template: () => `import { DBConfig } from "miqro";
+export default {
+  //dialect: "node:sqlite"
+  //storage: "./db.sqlite3"
+  //url: "..."
+  //disabled: false,
+  name: "MyDB"
+} as DBConfig`
+  },
+  CORS: {
+    prefix: "",
+    filename: "cors",
+    sufix: ".ts",
+    displayName: "cors.ts file",
+    language: "typescript",
+    template: () => `import { CORSConfig } from "miqro";
+export default {
+  origins: "*",
+  /*validate: (origin: string, origins: string | string[]) => {
+    return false
+  },
+  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
+  preflightContinue: false*/
+} as CORSConfig;
+`
+  }
+}

package/editor/components/api-preview.tsx ADDED Viewed

@@ -0,0 +1,116 @@
+import { HighlightTextArea } from "./highlight-text-area.js";
+const DEFAULT_HEADERS = `{"content-type": "application/json"}`;
+const DEFAULT_BODY = `{}`;
+export function APIPReview(props: {
+  apiPreview?: {
+    path: string;
+    method: string;
+  }[];
+  isPanelVisible: (panel: string) => boolean;
+}) {
+  const pathRef = jsx.useRef();
+  const methodRef = jsx.useRef();
+  const headersRef = jsx.useRef();
+  const bodyRef = jsx.useRef();
+  const [headers, setHeaders] = jsx.useState<string>(DEFAULT_HEADERS);
+  const [body, setBody] = jsx.useState<string>(DEFAULT_BODY);
+  const [responseStatus, setresponseStatus] = jsx.useState<null | number>(null);
+  const [responseHeaders, setresponseHeaders] = jsx.useState<null | string>(null);
+  const [responseBody, setresponseBody] = jsx.useState<null | string>(null);
+  const { path, method } = props.apiPreview ? props.apiPreview[0] : { path: "", method: "" };
+  jsx.useEffect(() => {
+    setresponseStatus(null);
+    setresponseHeaders(null);
+    setresponseBody(null);
+    /*setHeaders(DEFAULT_HEADERS);
+    setBody(DEFAULT_BODY);*/
+  }, [path]);
+  const useBody = String(method).toLocaleLowerCase() !== "get";
+  function submit() {
+    try {
+      if (methodRef.current && pathRef.current && headersRef.current) {
+        setHeaders(headersRef.current.value);
+        if (bodyRef.current) {
+          setBody(bodyRef.current.value);
+        }
+        fetch(pathRef.current.value, useBody && bodyRef.current ? {
+          method: methodRef.current.value,
+          headers: JSON.parse(headersRef.current.value),
+          body: bodyRef.current.value
+        } : {
+          method: methodRef.current.value,
+          headers: JSON.parse(headersRef.current.value),
+        }).then(async (r) => {
+          setresponseStatus(r.status);
+          const headers = {};
+          r.headers.forEach((value, key) => {
+            headers[key] = value;
+          });
+          setresponseHeaders(JSON.stringify(headers, undefined, 2));
+          const text = await r.text();
+          setresponseBody(text);
+          try {
+            setresponseBody(JSON.stringify(JSON.parse(text), undefined, 2));
+          } catch (e) {
+            // ignore
+          }
+        }).catch(e => {
+          console.error(e);
+        });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return <div
+    style={`${!props.isPanelVisible("right") ? "display: none;" : ""}${props.apiPreview ? "" : " display: none; "}margin:0; padding: 0; overflow: auto; max-height: 100%; width:100%;`}>
+    <form
+      onsubmit={ev => {
+        ev.preventDefault();
+        submit();
+      }}>
+      <p>path</p>
+      <input style="width: calc(100% - 4 * var(--file-browser-separation));" type="text" value={path} ref={pathRef} />
+      <p>method</p>
+      <input style="width: calc(100% - 4 * var(--file-browser-separation));" type="text" value={method} ref={methodRef} />
+      <p>headers</p>
+      <input style="width: calc(100% - 4 * var(--file-browser-separation));" type="text" value={headers} ref={headersRef} />
+      {useBody ?
+        <>
+          <p>body</p>
+          <input style="width: calc(100% - 4 * var(--file-browser-separation));" type="text" value={body} ref={bodyRef} />
+        </> :
+        <></>}
+      <button style="margin-top: var(--file-browser-separation); width: 100%;" class="btn"
+        onclick={ev => {
+          ev.preventDefault();
+          submit();
+        }}>submit</button>
+      <div>
+        <p>response status</p>
+        <p>{responseStatus}</p>
+        <p>response headers</p>
+        <HighlightTextArea
+          content={responseHeaders ? responseHeaders : "null"}
+          language={"json"}
+          disabled="true" />
+        <p>response body</p>
+        <HighlightTextArea
+          content={responseBody ? responseBody : "null"}
+          language={"json"}
+          disabled="true" />
+      </div>
+    </form>
+  </div>;
+}
+APIPReview.asFragment = true;
+APIPReview.shadowInit = false;