Terminal Cryptic transformers

Cryptic transformers are utilities which allows you to transform in the background the cryptic entries sent by the terminal before it hits the host.

registerCrypticTransformer

Registers a cryptic transformer which transforms the cryptic entry text sent by the Terminal into a different one.

Copy 
registerCrypticTransformer(crypticTransformer: ({
  from: Object,
  to: Object,
  cryptic: String,
  terminalId: String,
  }) => String):void;

  • crypticTransformer Function

    Required. A function to be registered which receives the cryptic entry and returns a new one.

    • from Object

      Required. Initial position to the cryptic entry on the terminal.

    • to Object

      Required. Cursor position on the terminal when action is dispatched.

    • cryptic String

      Required. Cryptic entry sended from the terminal.

    • terminalId String

      Required. The ID of the terminal which sends the cryptic.

    • terminalId String

      Required. The ID of the terminal which sends the cryptic.

Returns

  • String

    Returns the new cryptic to be sent to the host.

When enter is pressed, terminal's text between som (>) and cursor position is sent and intercepted by the cryptic transformer that checks the string in order to change it to return a new one.

registerCrypticTransformer.js

Copy 
export default ({ terminalsHelper }) => {
  const crypticTransformer = ({ from, to, cryptic, terminalId }) => cryptic.replace(/E/g, '@');

  terminalsHelper.registerCrypticTransformer(crypticTransformer);
};

tast.json

Copy 
["PRESS ENTER!!"]

makeCrypticEntry.js

Copy 
import React from 'react';

export default ({ uiHelper, selectorsHelper, terminalId }) => {
  const connect = uiHelper.posConnect;

  const CrypticEntry = ({ entries, cursorPosition, somPosition }) => {
    const lastEntry = entries[entries.length - 1] || [];
    const { to: som } = somPosition;

    return (
      <div style={{ color: 'white' }}>
        <strong>
          Cryptic sent:
          <span> {lastEntry.cryptic}</span>
        </strong>
        <ul
          style={{
            padding: '5px',
            margin: '0',
            color: 'white',
            listStyle: 'none',
          }}
        >
          <li>
            FROM - line: {som.line} - column: {som.column}
          </li>
          <li>
            TO - line: {cursorPosition.line} - column: {cursorPosition.column}
          </li>
        </ul>
      </div>
    );
  };

  const mapStateToPropsFactory = () => {
    const getTerminalEntriesHistoryList = selectorsHelper.make('getTerminalEntriesHistoryList');
    const getTerminalCursorPosition = selectorsHelper.make('getTerminalCursorPosition');
    const findTerminalPreviousSOM = selectorsHelper.make('findTerminalPreviousSOM');

    return (state) => ({
      entries: getTerminalEntriesHistoryList(state, { terminalId }),
      cursorPosition: getTerminalCursorPosition(state, { terminalId }),
      somPosition: findTerminalPreviousSOM(state, { terminalId }),
    });
  };

  return connect(mapStateToPropsFactory)(CrypticEntry);
};

POSWebPluginMain.js

Copy 
import React from 'react';
import tast from './tast.json';
import makeCrypticEntry from './makeCrypticEntry.js';
import registerCrypticTransformer from './registerCrypticTransformer.js';

export default class Plugin {
  constructor({ diHelper }) {
    this._diHelper = diHelper;

    diHelper.useValues({
      terminalId: '1',
    });

    diHelper.useFactories({
      CrypticEntry: makeCrypticEntry,
    });
  }

  onInit() {
    this._diHelper.invoke(this._createTerminal);
    this._diHelper.invoke(this._putComponents);
  }

  _createTerminal = ({
    storeHelper,
    dispatchersHelper,
    tastHelper,
    selectorsHelper,
    diHelper,
    terminalId,
  }) => {
    // bind tast to the vm
    const boundTAST = tastHelper.bind(tast);

    // create terminal
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });

    // set initial TAST
    dispatchersHelper.dispatch('writeTerminalTAST', {
      terminalId,
      tast: boundTAST,
      from: { line: 1 },
      to: { line: 2 },
    });

    // register cryptic transformer
    diHelper.invoke(registerCrypticTransformer);
  };

  _putComponents = ({ uiHelper, CrypticEntry, terminalId }) => {
    const { putComponent, POSComponent } = uiHelper;

    putComponent('Example', () => (
      <div style={{ background: '#555', lineHeight: 1.1 }}>
        <POSComponent componentName="Terminal" terminalId={terminalId} />
        <CrypticEntry />
      </div>
    ));
  };
}

index.js

Copy 
import POSWebPluginMain from './POSWebPluginMain.js';

export default POSWebPluginMain;

package.json

Copy 
{
  "name": "plugin-test",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal",
            "writeTerminalTAST"
          ]
        }
      }
    },
    "selectorsHelper": {
      "selectorFactories": {
        "consumes": {
          "@orion/terminals": [
            "getTerminalEntriesHistoryList",
            "getTerminalCursorPosition",
            "findTerminalPreviousSOM"
          ]
        }
      }
    }
  }
}