feat: literal hints

packages/entity/src/behavior-components/expression.jsx

@@ -199,10 +199,19 @@ const Expression = ({
                     type: 'invoke',
                     args: description.vararg
                       ? []
-                      : description.args.map(() => ({
+                      : description.args.map((arg) => {
-                        type: 'literal',
+                        let value = null;
-                        value: null,
+                        if ('expressions' === arg.type) {
-                      })),
+                          value = {
+                            type: 'expressions',
+                            expressions: [],
+                          };
+                        }
+                        return {
+                          type: 'literal',
+                          value,
+                        };
+                      }),
                   },
                 });
               })(description, opPath)}

packages/entity/src/behavior-components/expression/invocation.jsx

@@ -1,6 +1,12 @@
 import {join} from 'path';
 
-import {PropTypes, React} from '@latus/react';
+import {
+  PropTypes,
+  React,
+  useEffect,
+  useRef,
+  useState,
+} from '@latus/react';
 import {useJsonPatcher} from '@persea/json';
 
 import Variant from '../variant';
@@ -13,50 +19,91 @@ const Invocation = ({
   op,
   path,
 }) => {
+  const literalTypeRef = useRef();
+  const [literalType, setLiteralType] = useState(false);
+  useEffect(() => {
+    literalTypeRef.current?.focus();
+  });
   const patch = useJsonPatcher();
   const argComponent = (arg, i) => {
     const argPath = join(path, 'args', i.toString());
     if ('undefined' === arg.type) {
-      return (
+      const confirmLiteralType = () => {
-        <Key
+        let value = null;
-          childrenDescription={{
+        switch (literalType) {
-            '...': {label: '', type: 'undefined'},
+          case 'expressions':
-            '[literal]': {label: '', type: 'undefined'},
+            value = {
-            ...context.describe().children,
+              type: 'expressions',
-            '[key]': {label: '', type: 'undefined'},
+              expressions: [],
-          }}
+            };
-          key={path}
+            break;
-          onChange={(event, value) => {
+          case 'number': value = 0; break;
-            if ('[literal]' === value) {
+          case 'string': value = ''; break;
-              patch({
+          case 'array': value = []; break;
-                op: 'replace',
+          case 'object': value = {}; break;
-                path: argPath,
+          case 'vector': value = [0, 0]; break;
-                value: {
+          default:
-                  type: 'literal',
+        }
-                  value: null,
+        patch({
-                },
+          op: 'replace',
-              });
+          path: argPath,
-            }
+          value: {
-            else {
+            type: 'literal',
-              patch({
+            value,
-                type: 'add',
+          },
-                path: argPath,
+        });
-                value: {
+        setLiteralType(false);
-                  type: 'expression',
+      };
-                  ops: [
+      return false === literalType
-                    {
+        ? (
-                      type: 'key',
+          <Key
-                    },
+            childrenDescription={{
-                  ],
+              '...': {label: '', type: 'undefined'},
-                },
+              '[literal]': {label: '', type: 'undefined'},
-              });
+              ...context.describe().children,
-              onChange(false, value, join(argPath, 'ops/0/key'));
+              '[key]': {label: '', type: 'undefined'},
-            }
+            }}
-          }}
+            key={path}
-          path={argPath}
+            onChange={(event, value) => {
-          value="..."
+              if ('[literal]' === value) {
-        />
+                setLiteralType('');
-      );
+              }
+              else {
+                patch({
+                  type: 'add',
+                  path: argPath,
+                  value: {
+                    type: 'expression',
+                    ops: [
+                      {
+                        type: 'key',
+                      },
+                    ],
+                  },
+                });
+                onChange(false, value, join(argPath, 'ops/0/key'));
+              }
+            }}
+            path={argPath}
+            value="..."
+          />
+        )
+        : (
+          <input
+            type="text"
+            onBlur={confirmLiteralType}
+            onChange={({target: {value}}) => {
+              setLiteralType(value);
+            }}
+            onKeyPress={(event) => {
+              if ('Enter' === event.key) {
+                confirmLiteralType(event);
+              }
+            }}
+            ref={literalTypeRef}
+            value={literalType}
+          />
+        );
     }
     const j = description.vararg ? Math.min(description?.args?.length - 1, i) : i;
     const options = description?.args?.[j].options;

packages/entity/src/behavior-components/expression/key.jsx

@@ -116,7 +116,6 @@ const Key = ({
               ref={customizeRef}
               value={customization}
             />
-
           )
       }
     </div>

packages/entity/src/behavior-components/literal.jsx

@@ -50,25 +50,7 @@ const Literal = ({
               null === value
                 ? {
                   type: 'expressions',
-                  expressions: [
+                  expressions: [],
-                    {
-                      type: 'expression',
-                      ops: [
-                        {
-                          type: 'key',
-                          key: 'Flow',
-                        },
-                        {
-                          type: 'key',
-                          key: 'nop',
-                        },
-                        {
-                          type: 'invoke',
-                          args: [],
-                        },
-                      ],
-                    },
-                  ],
                 }
                 : value
             }