feat: literal <-> expr

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

@@ -42,18 +42,27 @@ const Expression = ({
         },
       });
     }
-    if ('.' !== patches[0].value) {
+    if ('.' === patches[patches.length - 1].value) {
-      // eslint-disable-next-line babel/no-unused-expressions
+      const parts = patches[patches.length - 1].path.split('/');
-      patch(patches);
-    }
-    else {
-      const parts = patches[0].path.split('/');
       parts.pop();
       patch({
         op: 'remove',
         path: parts.join('/'),
       });
     }
+    else if ('<literal>' === patches[patches.length - 1].value) {
+      patch({
+        op: 'replace',
+        path,
+        value: {
+          type: 'literal',
+          value: null,
+        },
+      });
+    }
+    else {
+      patch(patches);
+    }
   };
   do {
     const op = ops[i];
@@ -61,10 +70,21 @@ const Expression = ({
     const opPath = join(path, 'ops', opsCount.toString());
     const nextOp = i === ops.length - 1 ? undefined : ops[i + 1];
     if (isKey(op)) {
+      const isFirst = 0 === i;
       const isLast = i === ops.length - 1 ? true : isInvocation(ops[i + 1]);
       Renderables.push(
         <Key
           childrenDescription={{
+            ...(
+              isFirst && 'void' !== type
+                ? {
+                  '<literal>': {
+                    label: '',
+                    type,
+                  },
+                }
+                : {}
+            ),
             ...(
               isLast
                 ? {'.': {label: '', type: description.type}}
@@ -132,7 +152,7 @@ const Expression = ({
                 type: 'invoke',
                 args: description.args.map(() => ({
                   type: 'literal',
-                  value: 69,
+                  value: null,
                 })),
               };
               patch({

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

@@ -1,8 +1,10 @@
 import {join} from 'path';
 
 import {PropTypes, React} from '@latus/react';
+import {useJsonPatcher} from '@persea/json';
 
 import Literal from '../literal';
+import Key from './key';
 
 const Invocation = ({
   context,
@@ -11,45 +13,80 @@ const Invocation = ({
   onChange,
   op,
   path,
-}) => (
+}) => {
-  <div className="invocation">
+  // eslint-disable-next-line react/destructuring-assignment
-    (
+  const contextDescription = context.describe();
-    {
+  const patch = useJsonPatcher();
-      op.args.map((arg, i) => (
+  return (
-        <div
+    <div className="invocation">
-          key={JSON.stringify(arg)}
+      (
-          className="invocation__arg"
+      {
-        >
+        op.args.map((arg, i) => (
-          {
+          <div
-            'literal' === arg.type
+            key={join(path, 'args', i.toString())}
-              ? (
+            className="invocation__arg"
-                <Literal
+          >
-                  onChange={onChange}
+            {
-                  path={join(path, 'args', i.toString(), 'value')}
+              'literal' === arg.type
-                  type={description.args[i].type}
+                ? (
-                  value={arg}
+                  <>
-                />
+                    <Key
-              )
+                      childrenDescription={{
-              : (
+                        '<literal>': {
-                <Expression
+                          label: '',
-                  context={context}
+                          type: arg.type,
-                  expression={arg}
+                        },
-                  onChange={onChange}
+                        ...contextDescription.children,
-                  path={join(path, 'args', i.toString())}
+                      }}
-                  type={description.args[i].type}
+                      onChange={(event, value) => {
-                />
+                        patch({
-              )
+                          op: 'replace',
-          }
+                          path: join(path, 'args', i.toString()),
-          {i < op.args.length - 1 && <span className="invocation__arg-sep">, </span>}
+                          value: {
-        </div>
+                            type: 'expression',
-      ))
+                            ops: [
-    }
+                              {
-    )
+                                type: 'key',
-  </div>
+                                key: value,
-);
+                              },
+                            ],
+                          },
+                        });
+                      }}
+                      op={op}
+                      path={path}
+                    />
+                    <Literal
+                      onChange={onChange}
+                      path={join(path, 'args', i.toString(), 'value')}
+                      type={description.args[i].type}
+                      value={arg}
+                    />
+                  </>
+                )
+                : (
+                  <Expression
+                    context={context}
+                    expression={arg}
+                    onChange={onChange}
+                    path={join(path, 'args', i.toString())}
+                    type={description.args[i].type}
+                  />
+                )
+            }
+            {i < op.args.length - 1 && <span className="invocation__arg-sep">, </span>}
+          </div>
+        ))
+      }
+      )
+    </div>
+  );
+};
 
 Invocation.propTypes = {
-  context: PropTypes.shape({}).isRequired,
+  context: PropTypes.shape({
+    describe: PropTypes.func,
+  }).isRequired,
   description: PropTypes.shape({
     args: PropTypes.arrayOf(
       PropTypes.shape({