check input and output name

src/components/inspector.tsx

@@ -16,6 +16,7 @@ import {
   getNodeArgRawType,
   isNodeArgArray,
   isNodeArgOptional,
+  isValidVariableName,
 } from "@/misc/b3util";
 import { Hotkey, isMacos } from "@/misc/keys";
 import { mergeClassNames } from "@/misc/util";
@@ -436,6 +437,18 @@ const NodeInspector: FC = () => {
                                   name={field.name}
                                   validateTrigger={["onChange", "onBlur"]}
                                   style={{ width: "100%", marginBottom: 5 }}
+                                  rules={[
+                                    {
+                                      validator(_, value) {
+                                        if (value && !isValidVariableName(value)) {
+                                          return Promise.reject(
+                                            new Error(t("node.invalidVariableName"))
+                                          );
+                                        }
+                                        return Promise.resolve();
+                                      },
+                                    },
+                                  ]}
                                 >
                                   <AutoComplete
                                     disabled={disabled}
@@ -489,6 +502,9 @@ const NodeInspector: FC = () => {
                         { required, message: t("node.fileRequired", { field: desc }) },
                         ({ getFieldValue, setFieldValue, isFieldValidating, validateFields }) => ({
                           validator(_, value) {
+                            if (value && !isValidVariableName(value)) {
+                              return Promise.reject(new Error(t("node.invalidVariableName")));
+                            }
                             const arg = def.args?.find(
                               (a) => a.oneof && v.replace("?", "") === a.oneof
                             );
@@ -792,6 +808,18 @@ const NodeInspector: FC = () => {
                                   name={field.name}
                                   validateTrigger={["onChange", "onBlur"]}
                                   style={{ width: "100%", marginBottom: 5 }}
+                                  rules={[
+                                    {
+                                      validator(_, value) {
+                                        if (value && !isValidVariableName(value)) {
+                                          return Promise.reject(
+                                            new Error(t("node.invalidVariableName"))
+                                          );
+                                        }
+                                        return Promise.resolve();
+                                      },
+                                    },
+                                  ]}
                                 >
                                   <AutoComplete
                                     disabled={disabled}
@@ -841,7 +869,17 @@ const NodeInspector: FC = () => {
                       label={desc}
                       name={`output.${i}`}
                       key={`output.${i}`}
-                      rules={[{ required, message: t("node.fileRequired", { field: desc }) }]}
+                      rules={[
+                        { required, message: t("node.fileRequired", { field: desc }) },
+                        {
+                          validator(_, value) {
+                            if (value && !isValidVariableName(value)) {
+                              return Promise.reject(new Error(t("node.invalidVariableName")));
+                            }
+                            return Promise.resolve();
+                          },
+                        },
+                      ]}
                     >
                       <AutoComplete
                         disabled={disabled}

src/misc/b3util.ts

@@ -19,6 +19,10 @@ import { message } from "./hooks";
 import Path from "./path";
 import { zhNodeDef } from "./template";
 
+export const isValidVariableName = (name: string) => {
+  return /^[a-zA-Z_]/.test(name);
+};
+
 export const isSubtreeRoot = (data: TreeGraphData) => {
   return data.path && data.id.toString() !== "1";
 };
@@ -229,6 +233,14 @@ export const checkNodeData = (data: NodeModel | null | undefined) => {
       if (!data.input[i]) {
         data.input[i] = "";
       }
+      if (data.input[i] && !isValidVariableName(data.input[i])) {
+        error(
+          data,
+          `input field '${data.input[i]}' is not a valid variable name,` +
+            `should start with a letter or underscore`
+        );
+        hasError = true;
+      }
       if (!isValidInputOrOutput(conf.input, data.input, i)) {
         error(data, `intput field '${conf.input[i]}' is required`);
         hasError = true;
@@ -251,6 +263,14 @@ export const checkNodeData = (data: NodeModel | null | undefined) => {
       if (!data.output[i]) {
         data.output[i] = "";
       }
+      if (data.output[i] && !isValidVariableName(data.output[i])) {
+        error(
+          data,
+          `output field '${data.output[i]}' is not a valid variable name,` +
+            `should start with a letter or underscore`
+        );
+        hasError = true;
+      }
       if (!isValidInputOrOutput(conf.output, data.output, i)) {
         error(data, `output field '${conf.output[i]}' is required`);
         hasError = true;