fix: type rendering

src/client/components/types/steps.jsx

@@ -19,7 +19,7 @@ const Steps = (props) => {
   else {
     stepsList = contextStepsList(
       context,
-      value.steps ? typeFromSteps(context, value.steps) : typeFromLiteral(value.value),
+      value.steps ? typeFromSteps(context, value.steps) : typeFromLiteral(value),
     );
   }
   return (
@@ -67,7 +67,7 @@ const Steps = (props) => {
                         type={
                           arg.steps
                             ? typeFromSteps(context, arg.steps)
-                            : typeFromLiteral(arg.value)
+                            : typeFromLiteral(arg)
                         }
                         value={arg}
                       />

src/client/components/types/typing.js

@@ -1,24 +1,31 @@
 import {Context} from '@avocado/behavior'
 
 export function typeFromLiteral(v) {
-  if ('undefined' === typeof v) {
+  console.log('tfl', v);
+  if ('literal' === v.type) {
+    const {value} = v;
+    if ('undefined' === typeof value) {
       return 'undefined';
     }
-  if (null === v) {
+    if (null === value) {
       return 'null';
     }
-  if ('number' === typeof v) {
+    if ('number' === typeof value) {
       return 'number';
     }
-  if ('string' === typeof v) {
+    if ('string' === typeof value) {
       return 'string';
     }
-  if ('boolean' === typeof v) {
+    if ('boolean' === typeof value) {
       return 'bool';
     }
-  if (v.length && 2 === v.length && v instanceof Array) {
+    if (value.length && 2 === value.length && value instanceof Array) {
       return 'vector';
     }
+  }
+  if ('actions' === v.type && v.traversals) {
+    return 'actions';
+  }
   return 'object';
 }
 

src/client/components/types/value.type-renderer.jsx

@@ -13,12 +13,28 @@ import String from './string.type-renderer';
 import {contextStepsList} from './steps-lists';
 import {typeFits, typeFromSteps} from './typing';
 
+let TypeRenderers;
+const ensureTypeRenderers = () => {
+  if (!TypeRenderers) {
+    const {all: allTypeRenderers} = require('./type-renderers.scwp');
+    TypeRenderers = Object.values(allTypeRenderers()).reduce((r, M) => {
+      const {default: {type, component}} = M;
+      return {...r, [type]: component};
+    }, {});
+  }
+};
+
 const renderValue = (context, type, value) => {
+  ensureTypeRenderers();
   switch (value.type) {
     case 'traversal': {
       return <Steps context={context} steps={value.steps} type={type} value={value.value} />;
     }
-    case 'literal':
+    case 'actions': {
+      const Component = TypeRenderers['actions'];
+      return <Component context={context} value={value} />;
+    }
+    case 'literal': {
       const stepsList = contextStepsList(context, type);
       const tierOptions = Object.keys(stepsList.reduce((r, optionSteps) => {
         if (!optionSteps[0] || !optionSteps[0].key) {
@@ -39,23 +55,28 @@ const renderValue = (context, type, value) => {
           </select>
           {
             (() => {
-              switch (type) {
-                case 'bool':
-                  return <Bool.component value={value.value} />;
-                case 'number':
-                  return <Number.component value={value.value} />;
-                case 'any':
-                case 'string':
-                  return <String.component value={value.value} />;
-                case 'object':
-                  return <ObjectType.component value={value.value} />;
-                default:
-                  return null;
-              }
+              const Component = TypeRenderers[type];
+              return Component
+                ? <Component value={value.value} />
+                : null;
+              // switch (type) {
+              //   case 'bool':
+              //     return <Bool.component value={value.value} />;
+              //   case 'number':
+              //     return <Number.component value={value.value} />;
+              //   case 'any':
+              //   case 'string':
+              //     return <String.component value={value.value} />;
+              //   case 'object':
+              //     return <ObjectType.component value={value.value} />;
+              //   default:
+              //     return null;
+              // }
             })()
           }
         </div>
       );
+    }
     default:
       return null;
   }