Props

Overview

All Nodes share the same structure, with the props property as the differentiating factor. The allowed Props will change depending on the Node type. Since Props can consist of many key value pairs, we use a List field in the Form for this, and users can +/- fields to add.

The available set of keys will change depending on what Node type the user selects. We will have validation at the UI level, just as a Typescript Props interface gives us typing information on what properties & their value types are allowed.

Not only components can be configured via Props, users can also configure Mongoose models/schema using the same UI system. In this sense, you can think of Props as an object.

The Props module is an important one, as we we need to encode different types of behavior. We need to allow us to define functions as strings by leveraging JavaScript's Eval function. The functions will bind to React as handlers. React's props passing also needs to be controlled. Sometimes we want to pass a prop 1 level down, sometimes we want to pass it all the way down to the leaf nodes.

Usage

Eval, Single, Leaf are the 3 types of prop as denoted by __type.

{
  type: 'React.Fragment',
  props: {
    ctx: {
      __type: ['Eval', 'Single'],
      value: 'return { a: 1, b: 2 }'
    }
  },
  type: 'React.Button',
  props: {
    onClick: {
      __type: ['Eval'],
      value: 'return this.ctx.a'
    }
  },
  children: []
}

Leaf & Single are render props that pass either all the way down to the leaf nodes, or just 1 level down.

Eval allows us to type expression as strings.

In the above example, we combine ['Eval', 'Single'] to pass an evaluated render props 1 level down. The prop key of the render prop, in this case ctx, will be accessible in the children as this.ctx.

Note that we can name this key anything. We just used ctx as convention.