feat: undefined/vararg function

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

@@ -60,6 +60,7 @@ const Expression = ({
     if (isKey(op)) {
       const isFirst = 0 === i;
       const isLast = i === ops.length - 1 ? true : isInvocation(ops[i + 1]);
+      const isUndefined = 'undefined' === description.type || 'undefined' === type;
       Renderables.push(
         <Key
           childrenDescription={{
@@ -71,8 +72,7 @@ const Expression = ({
                 : {}
             ),
             ...(
-              ('undefined' === description.type || isLast)
-              && !isFirst
+              isUndefined || (isLast && !isFirst)
                 ? {'.': {label: '', type: description.type}}
                 : {}
             ),
@@ -94,6 +94,14 @@ const Expression = ({
               const parts = localPath.split('/');
               parts.pop();
               parts.pop();
+              if (isUndefined) {
+                parts.pop();
+                patch({
+                  op: 'remove',
+                  path: parts.join('/'),
+                });
+                return;
+              }
               const patches = [];
               for (let j = i; j < ops.length; ++j) {
                 patches.unshift(
@@ -204,10 +212,6 @@ const Expression = ({
     description.children
     || 'undefined' === description.type
   ) {
-    const op = {
-      type: 'key',
-      key: '.',
-    };
     const opPath = join(path, 'ops', opsCount.toString());
     Renderables.push(
       <Key
@@ -220,7 +224,7 @@ const Expression = ({
         key={opPath}
         onChange={onChange}
         path={opPath}
-        value={op.key}
+        value="."
       />,
     );
     opsCount += 1;

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 Variant from '../variant';
+import Key from './key';
 
 const Invocation = ({
   context,
@@ -11,9 +13,51 @@ const Invocation = ({
   op,
   path,
 }) => {
-  // eslint-disable-next-line react/destructuring-assignment
+  const patch = useJsonPatcher();
   const argComponent = (arg, i) => {
     const argPath = join(path, 'args', i.toString());
+    if ('undefined' === arg.type) {
+      return (
+        <Key
+          childrenDescription={{
+            '.': {label: '', type: 'undefined'},
+            '[literal]': {label: '', type: 'undefined'},
+            ...context.describe().children,
+            '[key]': {label: '', type: 'undefined'},
+          }}
+          key={path}
+          onChange={(event, value) => {
+            if ('[literal]' === value) {
+              patch({
+                op: 'replace',
+                path: argPath,
+                value: {
+                  type: 'literal',
+                  value: null,
+                },
+              });
+            }
+            else {
+              patch({
+                type: 'add',
+                path: argPath,
+                value: {
+                  type: 'expression',
+                  ops: [
+                    {
+                      type: 'key',
+                    },
+                  ],
+                },
+              });
+              onChange(false, value, join(argPath, 'ops/0/key'));
+            }
+          }}
+          path={argPath}
+          value="."
+        />
+      );
+    }
     const options = description?.args?.[i].options;
     const type = description?.args?.[i].type || 'undefined';
     return (
@@ -27,11 +71,16 @@ const Invocation = ({
       />
     );
   };
+  const isVarArg = 'undefined' === description.type;
+  const args = op.args.concat();
+  if (isVarArg) {
+    args.push({type: 'undefined'});
+  }
   return (
     <div className="invocation">
       <div className="invocation__args-wrapper">
         {
-          op.args.map((arg, i) => (
+          args.map((arg, i) => (
             <div
               key={join(path, 'args', i.toString())}
               className="invocation__arg"
@@ -48,7 +97,9 @@ const Invocation = ({
 Invocation.displayName = 'Invocation';
 
 Invocation.propTypes = {
-  context: PropTypes.shape({}).isRequired,
+  context: PropTypes.shape({
+    describe: PropTypes.func,
+  }).isRequired,
   description: PropTypes.shape({
     args: PropTypes.arrayOf(
       PropTypes.shape({
@@ -56,6 +107,7 @@ Invocation.propTypes = {
         type: PropTypes.string,
       }),
     ),
+    type: PropTypes.string,
   }).isRequired,
   onChange: PropTypes.func.isRequired,
   op: PropTypes.shape({

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

@@ -124,11 +124,23 @@ const Literal = ({
     <>
       <Key
         childrenDescription={{
+          ...(
+            'undefined' === type
+              ? {'.': {label: '', type: 'undefined'}}
+              : {}
+          ),
           '[literal]': {label: '', type: value.type},
           ...contextDescription.children,
           '[key]': {label: '', type: value.type},
         }}
         onChange={(event, value) => {
+          if ('.' === value) {
+            patch({
+              op: 'remove',
+              path,
+            });
+            return;
+          }
           patch({
             op: 'replace',
             path,