User declaration of input fields via JSDOC in script files.

2022-07-05 16:02:15 +05:30
parent 0289d64f5e
commit bb0a246ae5
6 changed files with 162 additions and 167 deletions
--- a/components/RunScript/index.tsx
+++ b/components/RunScript/index.tsx
@@ -1,7 +1,11 @@
-import * as Handlebars from "handlebars";
 import { Play, X } from "phosphor-react";
-import { useCallback, useEffect, useState } from "react";
-import state, { IFile, ILog } from "../../state";
+import {
+  HTMLInputTypeAttribute,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import state, { IAccount, IFile, ILog } from "../../state";
 import Button from "../Button";
 import Box from "../Box";
 import Input from "../Input";
@@ -17,16 +21,20 @@ import {
 import Flex from "../Flex";
 import { useSnapshot } from "valtio";
 import Select from "../Select";
+import Text from "../Text";
 import { saveFile } from "../../state/actions/saveFile";
+import { getTags } from "../../utils/comment-parser";

-Handlebars.registerHelper(
-  "customize_input",
-  function (/* dynamic arguments */) {
-    return new Handlebars.SafeString(arguments[0]);
+const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {
+  let processString: string | undefined;
+  const process = { env: { NODE_ENV: "production" } } as any;
+  if (data) {
+    Object.keys(data).forEach(key => {
+      process[key] = data[key];
+    });
  }
-);
+  processString = JSON.stringify(process);

-const generateHtmlTemplate = (code: string) => {
  return `
  <html>
  <head>
@@ -55,8 +63,14 @@ const generateHtmlTemplate = (code: string) => {
        parent.window.postMessage({ type: 'warning', args: args || [] }, '*');
        warnLog.apply(console, args);
      }
+
+     
+      var process = '${processString || "{}"}';
+      process = JSON.parse(process);
+      window.process = process
    </script>
-    <script type="module">   
+
+    <script type="module">
      ${code}
    </script>
  </head>
@@ -69,51 +83,41 @@ const generateHtmlTemplate = (code: string) => {
 type Fields = Record<
  string,
  {
-    key: string;
+    name: string;
    value: string;
-    label?: string;
-    type?: string;
-    attach?: "account_secret" | "account_address" | string;
+    type?: "Account" | `Account.${keyof IAccount}` | HTMLInputTypeAttribute;
+    description?: string;
  }
 >;

 const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
  const snap = useSnapshot(state);
  const [templateError, setTemplateError] = useState("");
-  const getFieldValues = useCallback(() => {
-    try {
-      const parsed = Handlebars.parse(content);
-      const names = parsed.body
-        .filter((i) => i.type === "MustacheStatement")
-        .map((block) => {
-          // @ts-expect-error
-          const type = block.hash?.pairs?.find((i) => i.key == "type");
-          // @ts-expect-error
-          const attach = block.hash?.pairs?.find((i) => i.key == "attach");
-          // @ts-expect-error
-          const label = block.hash?.pairs?.find((i) => i.key == "label");
-          const key =
-            // @ts-expect-error
-            block?.path?.original === "customize_input"
-              ? // @ts-expect-error
-                block?.params?.[0].original
-              : // @ts-expect-error
-                block?.path?.original;
-          return {
-            key,
-            label: label?.value?.original || key,
-            attach: attach?.value?.original,
-            type: type?.value?.original,
-            value: "",
-          };
-        });
-      const defaultState: Fields = {};
+  const [fields, setFields] = useState<Fields>({});
+  const [iFrameCode, setIframeCode] = useState("");
+  const [isDialogOpen, setIsDialogOpen] = useState(false);

-      if (names) {
-        names.forEach((field) => (defaultState[field.key] = field));
-      }
-      setTemplateError("");
-      return defaultState;
+  const getFields = useCallback(() => {
+    try {
+      const inputTags = ["input", "param", "arg", "argument"];
+      const tags = getTags(content)
+        .filter(tag => inputTags.includes(tag.tag))
+        .filter(tag => !!tag.name);
+
+      let _fields = tags.map(tag => ({
+        name: tag.name,
+        value: tag.default || "",
+        type: tag.type,
+        description: tag.description,
+      }));
+
+      const fields: Fields = _fields.reduce((acc, field) => {
+        acc[field.name] = field;
+        return acc;
+      }, {} as Fields);
+
+      setTemplateError(""); // TODO
+      return fields;
    } catch (err) {
      console.log(err);
      setTemplateError("Could not parse template");
@@ -121,20 +125,16 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
    }
  }, [content]);

-  // const defaultFieldValues = getFieldValues();
-
-  const [fields, setFields] = useState<Fields>({});
-  const [iFrameCode, setIframeCode] = useState("");
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const runScript = () => {
-    const fieldsToSend: Record<string, string> = {};
-    Object.entries(fields).map(([key, obj]) => {
-      fieldsToSend[key] = obj.value;
-    });
-    const template = Handlebars.compile(content, { strict: false });
    try {
-      const code = template(fieldsToSend);
-      setIframeCode(generateHtmlTemplate(code));
+      let data: any = {};
+      Object.keys(fields).forEach(key => {
+        data[key] = fields[key].value;
+      });
+      const template = generateHtmlTemplate(content, data);
+
+      setIframeCode(template);
+
      state.scriptLogs = [
        ...snap.scriptLogs,
        { type: "success", message: "Started running..." },
@@ -163,14 +163,13 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
  }, [snap.scriptLogs]);

  useEffect(() => {
-    const newDefaultState = getFieldValues();
-    setFields(newDefaultState || {});
-  }, [content, setFields, getFieldValues]);
+    const defaultFields = getFields() || {};
+    setFields(defaultFields);
+  }, [content, setFields, getFields]);

-  const options = snap.accounts?.map((acc) => ({
+  const accOptions = snap.accounts?.map(acc => ({
+    ...acc,
    label: acc.name,
-    secret: acc.secret,
-    address: acc.address,
    value: acc.address,
  }));

@@ -191,74 +190,79 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
        <DialogContent>
          <DialogTitle>Run {name} script</DialogTitle>
          <DialogDescription>
-            You are about to run scripts provided by the developer of the hook,
-            make sure you know what you are doing.
-            <br />
+            <Box>
+              You are about to run scripts provided by the developer of the
+              hook, make sure you trust the author before you continue.
+            </Box>
            {templateError && (
              <Box
                as="span"
                css={{ display: "block", color: "$error", mt: "$3" }}
              >
-                Error occured while parsing template, modify script and try
-                again!
+                (TODO)Error occured while parsing JSDOC tags, modify script and
+                try again!
              </Box>
            )}
-            <br />
-            {Object.keys(fields).length > 0
-              ? `You also need to fill in following parameters to run the script`
-              : ""}
-          </DialogDescription>
-          <Stack css={{ width: "100%" }}>
-            {Object.keys(fields).map((key) => (
-              <Box key={key} css={{ width: "100%" }}>
-                <label>
-                  {fields[key]?.label || key}{" "}
-                  {fields[key].attach === "account_secret" &&
-                    `(Script uses account secret)`}
-                </label>
-                {fields[key].attach === "account_secret" ||
-                fields[key].attach === "account_address" ? (
-                  <Select
-                    css={{ mt: "$1" }}
-                    options={options}
-                    onChange={(val: any) => {
-                      setFields({
-                        ...fields,
-                        [key]: {
-                          ...fields[key],
-                          value:
-                            fields[key].attach === "account_secret"
-                              ? val.secret
-                              : val.address,
-                        },
-                      });
-                    }}
-                    value={options.find(
-                      (opt) =>
-                        opt.address === fields[key].value ||
-                        opt.secret === fields[key].value
-                    )}
-                  />
-                ) : (
-                  <Input
-                    type={fields[key].type || "text"}
-                    value={
-                      typeof fields[key].value !== "string"
-                        ? // @ts-expect-error
-                          fields[key].value.value
-                        : fields[key].value
-                    }
-                    css={{ mt: "$1" }}
-                    onChange={(e) => {
-                      setFields({
-                        ...fields,
-                        [key]: { ...fields[key], value: e.target.value },
-                      });
-                    }}
-                  />
-                )}
+            {Object.keys(fields).length > 0 && (
+              <Box css={{ mt: "$2" }}>
+                Fill in the following parameters to run the script.
              </Box>
-            ))}
+            )}
+          </DialogDescription>
+
+          <Stack css={{ width: "100%" }}>
+            {Object.keys(fields).map(key => {
+              const { name, value, type, description } = fields[key];
+              console.log(value)
+
+              const isAccount = type?.startsWith("Account");
+              const isAccountSecret =
+                type === "Account.secret" || type === "Account";
+
+              const accountField =
+                (isAccount && type?.split(".")[1]) || "address";
+
+              return (
+                <Box key={name} css={{ width: "100%" }}>
+                  <label>
+                    {description || name}{" "}
+                    {isAccountSecret && (
+                      <Text error>(Script can access account secret key)</Text>
+                    )}
+                  </label>
+                  {isAccount ? (
+                    <Select
+                      css={{ mt: "$1" }}
+                      options={accOptions}
+                      onChange={(val: any) => {
+                        setFields({
+                          ...fields,
+                          [key]: {
+                            ...fields[key],
+                            value: val[accountField],
+                          },
+                        });
+                      }}
+                      value={accOptions.find(
+                        (acc: any) => acc[accountField] === value
+                      )}
+                    />
+                  ) : (
+                    <Input
+                      type={type || "text"}
+                      value={value}
+                      css={{ mt: "$1" }}
+                      onChange={e => {
+                        setFields({
+                          ...fields,
+                          [key]: { ...fields[key], value: e.target.value },
+                        });
+                      }}
+                    />
+                  )}
+                </Box>
+              );
+            })}
            <Flex
              css={{ justifyContent: "flex-end", width: "100%", gap: "$3" }}
            >
--- a/components/Text.tsx
+++ b/components/Text.tsx
@@ -7,20 +7,30 @@ const Text = styled("span", {
  variants: {
    small: {
      true: {
-        fontSize: '$xs'
-      }
+        fontSize: "$xs",
+      },
    },
    muted: {
      true: {
-        color: '$mauve9'
-      }
+        color: "$mauve9",
+      },
+    },
+    error: {
+      true: {
+        color: "$error",
+      },
    },
    monospace: {
      true: {
-        fontFamily: '$monospace'
+        fontFamily: "$monospace",
+      },
+    },
+    block: {
+      true: {
+        display: "block",
      }
    }
-  }
+  },
 });

 export default Text;
--- a/next.config.js
+++ b/next.config.js
@@ -8,9 +8,6 @@ module.exports = {
    config.resolve.alias["vscode"] = require.resolve(
      "@codingame/monaco-languageclient/lib/vscode-compatibility"
    );
-    config.resolve.alias["handlebars"] = require.resolve(
-      "handlebars/dist/handlebars.js"
-    );
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
--- a/package.json
+++ b/package.json
@@ -25,10 +25,10 @@
    "@radix-ui/react-tooltip": "^0.1.7",
    "@stitches/react": "^1.2.8",
    "base64-js": "^1.5.1",
+    "comment-parser": "^1.3.1",
    "dinero.js": "^1.9.1",
    "file-saver": "^2.0.5",
    "filesize": "^8.0.7",
-    "handlebars": "^4.7.7",
    "javascript-time-ago": "^2.3.11",
    "jszip": "^3.7.1",
    "lodash.uniqby": "^4.7.0",
--- a/utils/comment-parser.ts
+++ b/utils/comment-parser.ts
@@ -0,0 +1,11 @@
+import { Spec, parse } from "comment-parser"
+
+export const getTags = (source?: string): Spec[] => {
+    if (!source) return []
+    const blocks = parse(source)
+    const tags = blocks.reduce(
+        (acc, block) => acc.concat(block.tags),
+        [] as Spec[]
+    );
+    return tags
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -1525,6 +1525,11 @@ color-name@~1.1.4:
  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

+comment-parser@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.3.1.tgz#3d7ea3adaf9345594aedee6563f422348f165c1b"
+  integrity sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA==
+
 concat-map@0.0.1:
  version "0.0.1"
  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -2281,18 +2286,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz"
  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==

-handlebars@^4.7.7:
-  version "4.7.7"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
-  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
-  dependencies:
-    minimist "^1.2.5"
-    neo-async "^2.6.0"
-    source-map "^0.6.1"
-    wordwrap "^1.0.0"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
 has-bigints@^1.0.1:
  version "1.0.1"
  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz"
@@ -2961,11 +2954,6 @@ natural-compare@^1.4.0:
  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=

-neo-async@^2.6.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
 next-auth@^4.0.0-beta.5:
  version "4.2.1"
  resolved "https://registry.npmjs.org/next-auth/-/next-auth-4.2.1.tgz"
@@ -3880,11 +3868,6 @@ source-map@^0.5.7:
  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=

-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 split.js@^1.6.0:
  version "1.6.5"
  resolved "https://registry.npmjs.org/split.js/-/split.js-1.6.5.tgz"
@@ -4116,11 +4099,6 @@ typescript@4.4.4:
  resolved "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz"
  integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==

-uglify-js@^3.1.4:
-  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.16.0.tgz#b778ba0831ca102c1d8ecbdec2d2bdfcc7353190"
-  integrity sha512-FEikl6bR30n0T3amyBh3LoiBdqHRy/f4H80+My34HOesOKyHfOsxAPAxOoqC0JUnC1amnO0IwkYC3sko51caSw==
-
 unbox-primitive@^1.0.1:
  version "1.0.1"
  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz"
@@ -4340,11 +4318,6 @@ word-wrap@^1.2.3:
  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==

-wordwrap@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
-
 wrappy@1:
  version "1.0.2"
  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"