Terminal TAST

Scopes and Refs

Scopes are regions in which you can limit a set of Inlines. It allows you to find and deal with Inlines in the same area. Refs allows finding Inline ids under the same Scope. The ref is a human-friendly name that you can give to any Inline to find it later.

Find all of the same Scope

Create an object type Scope and add into its children a TAST with all the inlines that you want to find. The selector getTerminalScopeInlines returns the list of all inlines and its configuration under the same scope.

Use it in your actions to perform changes over those inlines.

[SET BLUE BACKGROUND TO SCOPED INLINES]

- Inline 1

- Inline 2

tast.json

Copy 
[
  {
    "type": "Scope",
    "children": [
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_SCOPE_ACTION",
          "style": { "background": "blue" }
        },
        "children": ["[ SET BLUE BACKGROUND TO SCOPED INLINES ]\n\n"]
      },
      {
        "type": "Inline",
        "children": ["- Inline 1\n"]
      },
      {
        "type": "Inline",
        "children": ["- Inline 2\n"]
      }
    ]
  }
]

configureMyScopedAction.js

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

export default function configureMyScopedAction({
  dispatchersHelper,
  selectorsHelper,
  storeHelper,
}) {
  const getTerminalScopeInlines = selectorsHelper.make('getTerminalScopeInlines');
  const { getState } = storeHelper;
  storeHelper.handleReducedAction('example/MY_SCOPE_ACTION', ({ action, state }) => {
    const { terminalId, inlineId, style } = action;
    const scopedInlines = getTerminalScopeInlines(getState(), { terminalId, inlineId });
    scopedInlines.forEach((scopedInline) => {
      dispatchersHelper.dispatch('setTerminalInline', {
        terminalId,
        inline: {
          id: scopedInline.id,
          style,
        },
      });
    });
  });
}

index.js

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

export default class Plugin {
  constructor(dio) {
    configureMyScopedAction(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": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST",
            "setTerminalInline"
          ]
        }
      }
    },
    "selectorsHelper": {
      "selectorFactories": {
        "consumes": {
          "@orion/terminals": [
            "getTerminalScopeInlines"
          ]
        }
      }
    }
  }
}

Nesting scopes

Because Scope children is a TAST, it can have other children inside. Scopes only references to the current Scope. If more than one Scope is present, the only participant Inlines are the ones inside that Scope and no other one. Two Scopes, one side the other, does not mix their Inlines. In Scope containing other Scope, does not include the Inlines of the children Scope.

[SET GREEN BACKGROUND TO SCOPED INLINES]

- Inline 1A

- Inline 2A

[SET RED BACKGROUND TO SCOPED INLINES]

- Inline 1B

- Inline 2B

 

- Inline P1

- Inline P2

tast.json

Copy 
[
  {
    "type": "Scope",
    "children": [
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_SCOPE_ACTION",
          "style": { "background": "green" }
        },
        "children": ["[ SET GREEN BACKGROUND TO SCOPED INLINES ]\n\n"]
      },
      {
        "type": "Scope",
        "children": [
          {
            "type": "Inline",
            "action": {
              "type": "example/MY_SCOPE_ACTION",
              "style": { "background": "blue" }
            },
            "children": ["  [ SET BLUE BACKGROUND TO SCOPED INLINES ]\n"]
          },
          {
            "type": "Inline",
            "children": ["  - Inline 1A\n"]
          },
          {
            "type": "Inline",
            "children": ["  - Inline 2A\n\n"]
          }
        ]
      },
      {
        "type": "Scope",
        "children": [
          {
            "type": "Inline",
            "action": {
              "type": "example/MY_SCOPE_ACTION",
              "style": { "background": "red" }
            },
            "children": ["  [ SET RED BACKGROUND TO SCOPED INLINES ]\n"]
          },
          {
            "type": "Inline",
            "children": ["  - Inline 1B\n"]
          },
          {
            "type": "Inline",
            "children": ["  - Inline 2B\n\n"]
          }
        ]
      },
      {
        "type": "Inline",
        "children": ["- Inline P1\n"]
      },
      {
        "type": "Inline",
        "children": ["- Inline P2\n"]
      }
    ]
  }
]

configureMyScopedAction.js

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

export default function configureMyScopedAction({
  dispatchersHelper,
  selectorsHelper,
  storeHelper,
}) {
  const getTerminalScopeInlines = selectorsHelper.make('getTerminalScopeInlines');
  const { getState } = storeHelper;
  storeHelper.handleReducedAction('example/MY_SCOPE_ACTION', ({ action, state }) => {
    const { terminalId, inlineId, style } = action;
    const scopedInlines = getTerminalScopeInlines(getState(), { terminalId, inlineId });
    scopedInlines.forEach((scopedInline) => {
      dispatchersHelper.dispatch('setTerminalInline', {
        terminalId,
        inline: {
          id: scopedInline.id,
          style,
        },
      });
    });
  });
}

index.js

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

export default class Plugin {
  constructor(dio) {
    configureMyScopedAction(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": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST",
            "setTerminalInline"
          ]
        }
      }
    },
    "selectorsHelper": {
      "selectorFactories": {
        "consumes": {
          "@orion/terminals": [
            "getTerminalScopeInlines"
          ]
        }
      }
    }
  }
}

Refs

Refs allows finding Inlines inside the same scope by using a human friendly id. Create a Scope and place inside Inlines with specific refs to find them. Use the selector getTerminalInlineRef to find the Inline id of the referenced Inline.

[SET GREEN REF: 'first' ]

[SET RED REF: 'second' ]

 

- First Inline

- Second Inline

tast.json

Copy 
[
  {
    "type": "Scope",
    "children": [
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_REF_ACTION",
          "ref": "first",
          "style": { "background": "green" }
        },
        "children": ["[ SET GREEN REF: 'first' ]\n"]
      },
      {
        "type": "Inline",
        "action": {
          "type": "example/MY_REF_ACTION",
          "ref": "second",
          "style": { "background": "red" }
        },
        "children": ["[ SET RED REF: 'second' ]\n\n"]
      },
      {
        "type": "Inline",
        "ref": "first",
        "children": ["- First Inline\n"]
      },
      {
        "type": "Inline",
        "ref": "second",
        "children": ["- Second Inline\n"]
      }
    ]
  }
]

configureMyRefAction.js

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

export default function configureMyRefAction({ dispatchersHelper, selectorsHelper, storeHelper }) {
  const getTerminalInlineRef = selectorsHelper.make('getTerminalInlineRef');
  const { getState } = storeHelper;
  storeHelper.handleReducedAction('example/MY_REF_ACTION', ({ action }) => {
    const state = getState();
    const { terminalId, inlineId, ref, style } = action;
    const refedInlineId = getTerminalInlineRef(state, { terminalId, inlineId, ref });
    dispatchersHelper.dispatch('setTerminalInline', {
      terminalId,
      inline: {
        id: refedInlineId,
        style,
      },
    });
  });
}

index.js

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

export default class Plugin {
  constructor(dio) {
    configureMyRefAction(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": "example",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "spliceTerminalTAST",
            "setTerminalInline"
          ]
        }
      }
    },
    "selectorsHelper": {
      "selectorFactories": {
        "consumes": {
          "@orion/terminals": [
            "getTerminalInlineRef"
          ]
        }
      }
    }
  }
}