Terminal TAST

Property binders

TAST binding function requires that the view model follows the same structure of the TAST objects. When this is not possible, use property binders to compute specific elements in the TAST document.

Quick Example

tast.json

Copy 
[
  "> ",
  { "type": "Bind", "property": "wave" },
  " ",
  {
    "type": "Inline",
    "inlineType": "highlighted",
    "children": [{ "type": "Bind", "property": "name" }]
  },
  "."
]

vm.json

Copy 
{
  "name": "david"
}

propertyBinders.js

Copy 
export default {
  '$.wave': () => (Math.random() < 0.5 ? 'Hello' : 'Hola'),
};

inlineTypes.json

Copy 
{
  "highlighted": {
    "style": {
      "background": "red"
    }
  }
}

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST",
            "setTerminalsInlineTypes"
          ]
        }
      }
    }
  }
}

The current example has two steps (see index.js):

  • bind

    Generates a new tast from an existing tast by adding view model values to it.

  • spliceTerminalTAST

    Loads the TAST into the terminal.

The bind tast implies that there are at least two TAST: the TAST before binding a view model, and the TAST after it.

In the previous example the TAST (tast.json) before binding is:

Copy 
[
  "> ",
  { "type": "Bind", "property": "wave" },
  " ",
  {
    "type": "Inline",
    "inlineType": "highlighted",
    "children": [{ "type": "Bind", "property": "name" }]
  },
  "."
]

And it can be represented as a tree:

The bind method looks for all bindthings inside. In this example it needs to bind a property called wave and a property called name.

The example shows two ways of binding data: one by providing a view model, and another by providing generator functions called property binders.

The view model (vm.json) is the following:

Copy 
{
  "name": "david"
}

It gives the value for name so bind can replace it.

But there is no value for wave. It is provided by the property binders (propertyBinders.js):

Copy 
export default {
  '$.wave': () => (Math.random() < 0.5 ? 'Hello' : 'Hola'),
};

The $.wave is the JSONpath that describes which is the property that binds. The result of the function is the actual value used in the binding.

Apply both, view model and the property binders with the bind function:

Copy 
const boundTAST = tastHelper.bind(tast, vm, propertyBinders;)

The resulting boundTAST is the following:

Copy 
[
  "> Hello ",
  {
    "type": "Inline",
    "inlineType": "highlighted",
    "children": ["david"]
  },
  "."
]

And the equivalent graph:

Copy 
const vm = {
  name: 'david',
};

const propertyBinders = {
  '$.wave': () => 'Hola',
};

const boundTAST = tastHelper.bind(tast, vm, propertyBinders);

Follow the path

Property binders instruct the bind function how to obtain a value. It uses pairs of JSON path and corresponding function generator.

Object properties

The JSON path resembles how we access to an element in javascript. Write in the property name which path you want, and then a function that generates the given value.

propertyBinders.js

Copy 
export default {
  '$.name': () => 'David',
};

tast.json

Copy 
[
  "> Hello ",
  {
    "type": "Bind",
    "property": "name"
  },
  "."
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Overwrites the value

The propertyBinder precedes the ViewModel. If the ViewModel has the property, but there is a propertyBinder for it, it chooses the value from the property binder.

vm.json

Copy 
{
  "name": "Watson"
}

propertyBinders.js

Copy 
export default {
  '$.name': () => 'David',
};

tast.json

Copy 
[
  "> Hello ",
  {
    "type": "Bind",
    "property": "name"
  },
  "."
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Enhances the value

The propertyBinder first argument is the ViewModel. Use the value of the current ViewModel to enhance it or transform it into a new value.

propertyBinders.js

Copy 
export default {
  '$.cancelled': (cancelled) => (cancelled ? 'yes' : 'no'),
};

vm.json

Copy 
{
  "cancelled": true
}

tast.json

Copy 
[
  "Flight  Cancelled\n",
  "------  ---------\n",
  "AA1234     ",
  {
    "type": "Bind",
    "property": "cancelled"
  },
  "\n"
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Crossing unexisting objects

You can define any deepness in the object structure. If parent objects does not exists in the ViewModel BindObject does not fails and allows to proceed as long as the final Bind requires a property that it is defined by a propertyBinder.

propertyBinders.js

Copy 
export default {
  '$.flights.code': () => 'BCNLON',
};

vm.json

Copy 
{}

tast.json

Copy 
[
  "Flight ",
  {
    "type": "BindObject",
    "property": "flights",
    "children": [{ "type": "Bind", "property": "code" }]
  },
  "\n"
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Collections

Arrays

You can create arrays and collections in the property binders. Just create a list with the elements that you need.

propertyBinders.js

Copy 
export default {
  '$.flights': () => [{ code: 'JX41' }, { code: 'JX42' }, { code: 'JX43' }],
};

tast.json

Copy 
[
  {
    "type": "BindIterator",
    "property": "flights",
    "children": [
      "- ",
      {
        "type": "Bind",
        "property": "code"
      },
      "\n"
    ]
  }
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Objects inside arrays

Create objects inside arrays using star * JSONpaths. It injects the crossed indexes into the second argument of the propertyBinder as indexes.

propertyBinders.js

Copy 
export default {
  '$.flights': () => [{}, {}, {}],
  '$.flights[*].code': (_, { indexes }) => `JX4${indexes[0]}`,
};

tast.json

Copy 
[
  {
    "type": "BindIterator",
    "property": "flights",
    "children": [
      "- ",
      {
        "type": "Bind",
        "property": "code"
      },
      "\n"
    ]
  }
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Arrays inside arrays

You can define the property binders for any arbitrary deepness in arrays. The indexes injected property collects all crossed indexes. Deeper indexes are the latest elements in the array.

propertyBinders.js

Copy 
export default {
  '$.flights': () => [{}, {}, {}],
  '$.flights[*].code': (_, { indexes }) => `JX4${indexes[0]}`,
  '$.flights[*].messages': (_, { indexes }) => [{}, {}, {}],
  '$.flights[*].messages[*].code': (_, { indexes }) => `${indexes[0]}-${(indexes[1] + 1) * 111}`,
};

tast.json

Copy 
[
  {
    "type": "BindIterator",
    "property": "flights",
    "children": [
      "- Flight ",
      {
        "type": "Bind",
        "property": "code"
      },
      "\n",
      {
        "type": "BindIterator",
        "property": "messages",
        "children": [
          "  - Message ",
          {
            "type": "Bind",
            "property": "code"
          },
          "\n"
        ]
      },
      "\n"
    ]
  }
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Objects keys

As well as arrays you can use the star * to traverse all object properties. In this case, the indexes injected property contains the key of the traversed object.

propertyBinders.js

Copy 
export default {
  '$.flights': () => ({ AA1234: {}, BA1235: {}, CA1236: {} }),
  '$.flights[*].code': (_, { indexes }) => `${indexes[0]}`,
  '$.flights[*].messages': (_, { indexes }) => [{}, {}],
  '$.flights[*].messages[*].code': (_, { indexes }) => `${indexes[0]}-${(indexes[1] + 1) * 111}`,
};

tast.json

Copy 
[
  {
    "type": "BindIterator",
    "property": "flights",
    "children": [
      "- Flight ",
      {
        "type": "Bind",
        "property": "code"
      },
      "\n",
      {
        "type": "BindIterator",
        "property": "messages",
        "children": [
          "  - Message ",
          {
            "type": "Bind",
            "property": "code"
          },
          "\n"
        ]
      },
      "\n"
    ]
  }
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}

Accessing collections

Indexes are tracked and injected so you can retrieve them to query data. Collections are also tracked and injected so you can use them. Like indexes, collections contains all traversed collections with star * (arrays, or objects) so you can retrieve their data.

propertyBinders.js

Copy 
export default {
  '$.flights': () => ({ a: 1, b: 2, c: 3 }),
  '$.flights[*].info.name': (name, { index, collection }) => index + collection[index],
};

tast.json

Copy 
[
  {
    "type": "BindIterator",
    "property": "flights",
    "children": [
      {
        "type": "BindObject",
        "property": "info",
        "children": [{ "type": "Bind", "property": "name" }]
      },
      "\n"
    ]
  }
]

package.json

Copy 
{
  "name": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST"
          ]
        }
      }
    }
  }
}