chore: rendering tweaks

src/client/components/traits.jsx

@@ -70,23 +70,25 @@ const makeTabSelector = (context, type) => createSelector(
       Object.values(mapObject(description, (description, key) => {
         const {label, options, type: componentType} = description;
         const Component = TypeRenderers[componentType];
-        return Component
-          ? (
+        return (
           <label>
             <span className="text">
               {label}
               :
             </span>
             <div className="invisible-separator" />
-              <Component
+            {
+              Component
+              ? <Component
                 context={context}
                 key={key}
                 options={options}
                 value={values[key]}
               />
+              : <div class="unrenderable" title="No renderer found!">?</div>
+            }
           </label>
-          )
-          : null;
+        );
       }))
     );
     return TraitComponent

src/client/components/traits.raw.scss

@@ -26,3 +26,7 @@ form {
 .text {
   margin-right: 0.5em;
 }
+
+.unrenderable {
+  font-size: 2em;
+}

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

@@ -18,7 +18,7 @@ const Actions = ({
   <div className="actions">
     <ol>
       {
-        value.traversals.length > 0 && (
+        value && value.traversals.length > 0 && (
           value.traversals.map(
             (traversal) => (
               <li>

src/client/components/types/object.raw.scss

@@ -3,3 +3,7 @@
 	border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 0.25em;
 }
+
+.bracket {
+  color: #999999;
+}

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

@@ -17,7 +17,7 @@ const ObjectRenderer = ({
     <pre contentEditable>
       <code>
         {'  '}
-        {JSON.stringify(value, null, 2).slice(1).slice(0, -1).trim('\n')}
+        {(value ? JSON.stringify(value, null, 2).slice(1).slice(0, -1) : '').trim('\n')}
       </code>
     </pre>
     <span className="bracket close">{'}'}</span>

src/client/components/types/steps-lists.js

@@ -1,13 +1,21 @@
 import {flatten} from '@avocado/core';
 import {Context} from '@avocado/behavior'
+import {Traversal} from '@avocado/behavior/item/traversal';
 
 import {typeFits} from './typing';
 
-export const variableStepsList = (key, variable, variableType, type) => {
-  const description = Context.typeDescription(variableType, variable);
+export const variableStepsList = (context, previousSteps, key, variable, variableType, type) => {
   const steps = [];
   if (typeFits(type, variableType)) {
     steps.push({type: 'key', key});
+  }
+  const traversal = new Traversal({steps: previousSteps.concat(steps)});
+  const description = Context.typeDescription(
+    variableType,
+    traversal.get(context),
+  );
+  // TODO invoke can only work at the end of steps chain
+  if (typeFits(type, variableType)) {
     if ('function' === typeof variable) {
       steps.push({type: 'invoke', args: []});
     }
@@ -17,7 +25,7 @@ export const variableStepsList = (key, variable, variableType, type) => {
   }
   const sublists = Object.entries(description)
     .map(([key, description]) => (
-      variableStepsList(key, variable[key], description.type, type)
+      variableStepsList(context, previousSteps.concat(steps), key, variable[key], description.type, type)
     ))
     .map((childLists) => (
       childLists.map((stepsList) => (
@@ -33,7 +41,7 @@ export const contextStepsList = (context, type) => (
   flatten(
     Object.entries(context.all())
       .map(([key, [variable, variableType]]) => (
-        variableStepsList(key, variable, variableType, type)
+        variableStepsList(context, [{type: 'key', key}], key, variable, variableType, type)
       ))
   )
     .filter((stepsList) => stepsList.length > 0)

src/client/components/types/steps.raw.scss

@@ -33,7 +33,7 @@
   display: flex;
 }
 
-.bracket, .paren {
+.paren {
   color: #999999;
 }