Terminal TAST

Actions

The terminal can dispatch Redux actions. It fires through Inlines, which has two cases: the main action and events. You can fire the main action of an Inline by pressing intro with the cursor on the Inline, or by clicking it with the pointer.

Main Action

You can specify the main action of an inline with the property action. It receives an object which is a Redux action.

It can fire any valid action. For example use the clear terminal action to clear the terminal when click, or intro, or the append terminal tast action to add more content to the terminal, or any other action.

Clears the terminal and appends content.

tast.json

Copy 
[
  "See the next example.\n",
  {
    "type": "Inline",
    "action": {
      "type": "@orion/terminals-helper/CLEAR_TERMINAL",
      "terminalId": "1"
    },
    "children": ["[ Clear the Terminal ]\n"]
  },
  {
    "type": "Inline",
    "action": {
      "type": "@orion/terminals-helper/APPEND_TERMINAL_TAST",
      "terminalId": "1",
      "tast": ["- Added TAST\n"]
    },
    "children": ["[ Append Content     ]\n"]
  }
]

package.json

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

TerminalId is an implicit property

The terminal automatically adds the terminalId of the current terminal. You should remove it from your TAST.

Options to clear the terminal and append content.

tast.json

Copy 
[
  {
    "type": "Inline",
    "action": {
      "type": "@orion/terminals-helper/CLEAR_TERMINAL"
    },
    "children": ["[ Clear the Terminal ]\n"]
  },
  {
    "type": "Inline",
    "action": {
      "type": "@orion/terminals-helper/APPEND_TERMINAL_TAST",
      "tast": ["- Added TAST\n"]
    },
    "children": ["[ Append Content     ]\n"]
  }
]

package.json

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

InlineId is an implicit property

All Inlines must have a unique ID. Usually, the framework provides for it, so you do not need to know it in advance. Note that it is a common practice to reuse the same TAST for multiple terminal responses. Because of this, it is not a good practice to add a static Inline id to each object. It must be unique.

You can use the current Inline id just as an implicit parameter of the action. In the following example, we change the color of the current Inline taking advantage of the implicit inlineId property. We use the action set terminal Inline to modify the Inline style property.

Sets the Inline background to red and blue.

tast.json

Copy 
import tast from './tast.json';

export default function configureMyCustomAction({ dispatchersHelper, storeHelper }) {
  storeHelper.handleReducedAction('example/MY_CUSTOM_ACTION', ({ action }) => {
    const { terminalId, inlineId, ...style } = action;
    dispatchersHelper.dispatch('setTerminalInline', {
      terminalId,
      inline: {
        id: inlineId,
        style,
      },
    });
  });
}

index.js

Copy 
import configureMyCustomAction from './configureMyCustomAction.js';
import configureTerminal from './configureTerminal.js';
import configureExampleComponent from './configureExampleComponent.js';

export default class Plugin {
  constructor(dio) {
    configureMyCustomAction(dio);
    configureTerminal(dio);
    configureExampleComponent(dio);
  }
}

configureMyCustomAction.js

Copy 
import tast from './tast.json';

export default function configureMyCustomAction({ dispatchersHelper, storeHelper }) {
  storeHelper.handleReducedAction('example/MY_CUSTOM_ACTION', ({ action }) => {
    const { terminalId, inlineId, ...style } = action;
    dispatchersHelper.dispatch('setTerminalInline', {
      terminalId,
      inline: {
        id: inlineId,
        style,
      },
    });
  });
}

configureTerminal.js

Copy 
import tast from './tast.json';

export default function configureTerminal({ dispatchersHelper, tastHelper }) {
  dispatchersHelper.dispatch('createTerminal', { terminal: { id: '1' } });
  dispatchersHelper.dispatch('spliceTerminalTAST', {
    terminalId: '1',
    tast: tastHelper.bind(tast, {}),
    from: { line: 1 },
    to: { line: 2 },
  });
}

configureExampleComponent.js

Copy 
import React from 'react';

export default function configureExampleComponent({ uiHelper }) {
  uiHelper.putComponent('Example', () => (
    <div style={{ background: '#555', lineHeight: 1.1 }}>
      <uiHelper.POSComponent componentName="Terminal" terminalId="1" />
    </div>
  ));
}

package.json

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

Actions inside actions

Inline children are regular TAST, like we shown in styles, we can nest Inlines inside other Inlines. When a parent has an action, and the children has an action too, the terminal fires both actions.

Parent sets all text to black. Children change background colors for each line.

tast.json

Copy 
[
  {
    "type": "Inline",
    "action": {
      "type": "example/MY_CUSTOM_ACTION",
      "color": "black"
    },
    "children": [
      "[ Parent set color black \n",
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_CUSTOM_ACTION",
          "background": "cyan"
        },
        "children": ["  [ Set My Background Cyan    ]\n"]
      },
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_CUSTOM_ACTION",
          "background": "magenta"
        },
        "children": ["  [ Set My Background Magenta ]\n"]
      },
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_CUSTOM_ACTION",
          "background": "yellow"
        },
        "children": ["  [ Set My Background Yellow  ]\n"]
      },
      "]\n"
    ]
  }
]

index.js

Copy 
import configureMyCustomAction from './configureMyCustomAction.js';
import configureTerminal from './configureTerminal.js';
import configureExampleComponent from './configureExampleComponent.js';

export default class Plugin {
  constructor(dio) {
    configureMyCustomAction(dio);
    configureTerminal(dio);
    configureExampleComponent(dio);
  }
}

configureMyCustomAction.js

Copy 
import tast from './tast.json';

export default function configureMyCustomAction({ dispatchersHelper, storeHelper }) {
  storeHelper.handleReducedAction('example/MY_CUSTOM_ACTION', ({ action }) => {
    const { terminalId, inlineId, ...style } = action;
    dispatchersHelper.dispatch('setTerminalInline', {
      terminalId,
      inline: {
        id: inlineId,
        style,
      },
    });
  });
}

configureTerminal.js

Copy 
import tast from './tast.json';

export default function configureTerminal({ dispatchersHelper, tastHelper }) {
  dispatchersHelper.dispatch('createTerminal', { terminal: { id: '1' } });
  dispatchersHelper.dispatch('spliceTerminalTAST', {
    terminalId: '1',
    tast: tastHelper.bind(tast, {}),
    from: { line: 1 },
    to: { line: 2 },
  });
}

configureExampleComponent.js

Copy 
import React from 'react';

export default function configureExampleComponent({ uiHelper }) {
  uiHelper.putComponent('Example', () => (
    <div style={{ background: '#555', lineHeight: 1.1 }}>
      <uiHelper.POSComponent componentName="Terminal" terminalId="1" />
    </div>
  ));
}

package.json

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

Actions not fired without type

Type is required to fire an action. If the type is not present, the action is not fired.

tast.json

Copy 
[
  {
    "type": "Inline",
    "action": {
      "it": "has no type"
    },
    "children": ["[ Do nothing ]\n"]
  }
]

package.json

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

Actions or events

Main actions are fired when the user clicks or hits enter with the cursor on the Inline, but there are more events that can be handled. The property actions (note the plural s) allows to configure as many actions as desired for each event. Supported events are the ones from react (see Supported Events), including onClick (which fires when click, but not when intro is pressed).

tast.json

Copy 
[
  {
    "type": "Inline",
    "actions": {
      "onMouseUp": {
        "type": "@orion/terminals-helper/CLEAR_TERMINAL",
        "terminalId": "1"
      },
      "onMouseOver": {
        "type": "@orion/terminals-helper/APPEND_TERMINAL_TAST",
        "terminalId": "1",
        "tast": ["- Added TAST\n"]
      }
    },
    "children": ["[ Clear on mouse up, add text on mouse over  ]\n"]
  }
]

package.json

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

Implicit terminalId and inlineId

Precisely like the main event, terminalId and inlineId are added implicitly to the actions. You can omit them and expect them to be added by the terminalId.

Background colors for each line change on mouseover.

tast.json

Copy 
[
  {
    "type": "Inline",
    "actions": {
      "onMouseOver": {
        "type": "example/MY_CUSTOM_ACTION",
        "background": "red"
      }
    },
    "children": ["  [ Become Red on mouse over   ]\n"]
  },
  {
    "type": "Inline",
    "actions": {
      "onMouseOver": {
        "type": "example/MY_CUSTOM_ACTION",
        "background": "green"
      }
    },
    "children": ["  [ Become Green on mouse over ]\n"]
  },
  {
    "type": "Inline",
    "actions": {
      "onMouseOver": {
        "type": "example/MY_CUSTOM_ACTION",
        "background": "blue"
      }
    },
    "children": ["  [ Become Blue on mouse over  ]\n"]
  }
]

index.js

Copy 
import configureMyCustomAction from './configureMyCustomAction.js';
import configureTerminal from './configureTerminal.js';
import configureExampleComponent from './configureExampleComponent.js';

export default class Plugin {
  constructor(dio) {
    configureMyCustomAction(dio);
    configureTerminal(dio);
    configureExampleComponent(dio);
  }
}

configureMyCustomAction.js

Copy 
import tast from './tast.json';

export default function configureMyCustomAction({ dispatchersHelper, storeHelper }) {
  storeHelper.handleReducedAction('example/MY_CUSTOM_ACTION', ({ action }) => {
    const { terminalId, inlineId, ...style } = action;
    dispatchersHelper.dispatch('setTerminalInline', {
      terminalId,
      inline: {
        id: inlineId,
        style,
      },
    });
  });
}

configureTerminal.js

Copy 
import tast from './tast.json';

export default function configureTerminal({ dispatchersHelper, tastHelper }) {
  dispatchersHelper.dispatch('createTerminal', { terminal: { id: '1' } });
  dispatchersHelper.dispatch('spliceTerminalTAST', {
    terminalId: '1',
    tast: tastHelper.bind(tast, {}),
    from: { line: 1 },
    to: { line: 2 },
  });
}

configureExampleComponent.js

Copy 
import React from 'react';

export default function configureExampleComponent({ uiHelper }) {
  uiHelper.putComponent('Example', () => (
    <div style={{ background: '#555', lineHeight: 1.1 }}>
      <uiHelper.POSComponent componentName="Terminal" terminalId="1" />
    </div>
  ));
}

package.json

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

Use Event properties

Sometimes you may need to use the event properties to configure the action. For example, to get the coordinates in which the user right-clicked.

Important: Properties that are not serializable will not be mapped. For example, event.preventDefault() will not be serialized because it is a function.

Writes coordinates on right-click event.

tast.json

Copy 
{
  "type": "Inline",
  "themeType": "actionLink",
  "actions": {
    "onContextMenu": {
      "type": "plugin/MY_CUSTOM_ACTION",
      "preventDefault": true,
      "eventProperties": ["clientX", "clientY"]
    }
  },
  "children": ["Write coordinates\nOn right click event\n"]
}

index.js

Copy 
export default function configureMyCustomAction({ dispatchersHelper, storeHelper }) {
  storeHelper.handleReducedAction('plugin/MY_CUSTOM_ACTION', ({ action }) => {
    const { terminalId, inlineId, eventProperties } = action;
    const { clientX, clientY } = eventProperties;

    dispatchersHelper.dispatch('appendTerminalTAST', {
      terminalId,
      tast: [`\n\nCOORDINATES: | x: ${clientX}, y: ${clientY} |`],
    });
  });
}

configureMyCustomAction.js

Copy 
import configureMyCustomAction from './configureMyCustomAction.js';
import configureTerminal from './configureTerminal.js';
import configureExampleComponent from './configureExampleComponent.js';

export default class Plugin {
  constructor(dio) {
    configureMyCustomAction(dio);
    configureTerminal(dio);
    configureExampleComponent(dio);
  }
}

configureTerminal.js

Copy 
import tast from './tast.json';

export default function configureTerminal({ dispatchersHelper, tastHelper }) {
  dispatchersHelper.dispatch('createTerminal', { terminal: { id: '1' } });
  dispatchersHelper.dispatch('spliceTerminalTAST', {
    terminalId: '1',
    tast: tastHelper.bind(tast, {}),
    from: { line: 1 },
    to: { line: 2 },
  });
}

configureExampleComponent.js

Copy 
import React from 'react';

export default function configureExampleComponent({ uiHelper }) {
  uiHelper.putComponent('Example', () => (
    <div style={{ background: '#555', lineHeight: 1.1 }}>
      <uiHelper.POSComponent componentName="Terminal" terminalId="1" />
    </div>
  ));
}

package.json

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

More

See Toggling Visibility to learn more about actions.