feat: literal <-> expr

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

@@ -42,18 +42,27 @@ const Expression = ({
         },
       });
     }
-    if ('.' !== patches[0].value) {
-      // eslint-disable-next-line babel/no-unused-expressions
-      patch(patches);
-    }
-    else {
-      const parts = patches[0].path.split('/');
+    if ('.' === patches[patches.length - 1].value) {
+      const parts = patches[patches.length - 1].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,24 +13,56 @@ const Invocation = ({
   onChange,
   op,
   path,
-}) => (
+}) => {
+  // eslint-disable-next-line react/destructuring-assignment
+  const contextDescription = context.describe();
+  const patch = useJsonPatcher();
+  return (
     <div className="invocation">
       (
       {
         op.args.map((arg, i) => (
           <div
-          key={JSON.stringify(arg)}
+            key={join(path, 'args', i.toString())}
             className="invocation__arg"
           >
             {
               'literal' === arg.type
                 ? (
+                  <>
+                    <Key
+                      childrenDescription={{
+                        '<literal>': {
+                          label: '',
+                          type: arg.type,
+                        },
+                        ...contextDescription.children,
+                      }}
+                      onChange={(event, value) => {
+                        patch({
+                          op: 'replace',
+                          path: join(path, 'args', i.toString()),
+                          value: {
+                            type: 'expression',
+                            ops: [
+                              {
+                                type: 'key',
+                                key: value,
+                              },
+                            ],
+                          },
+                        });
+                      }}
+                      op={op}
+                      path={path}
+                    />
                     <Literal
                       onChange={onChange}
                       path={join(path, 'args', i.toString(), 'value')}
                       type={description.args[i].type}
                       value={arg}
                     />
+                  </>
                 )
                 : (
                   <Expression
@@ -46,10 +80,13 @@ const Invocation = ({
       }
       )
     </div>
-);
+  );
+};
 
 Invocation.propTypes = {
-  context: PropTypes.shape({}).isRequired,
+  context: PropTypes.shape({
+    describe: PropTypes.func,
+  }).isRequired,
   description: PropTypes.shape({
     args: PropTypes.arrayOf(
       PropTypes.shape({