question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Consider adding a component API

See original GitHub issue

Initially discussed in https://github.com/sourcelair/xterm.js/issues/807#issuecomment-316803292

This would involve adding some interface like this that would make implementing addons much easier:

interface IComponent {
  onRefresh(rows: CircularList, startIndex: number, endIndex: number): void
  onDraw(group: RenderGroup, element: HTMLElement): void
  onMousedown(evt: MouseEvent): void
  onMouseup(evt: MouseEvent): void
  onInput(evt: KeyboardEvent): void
  onFocus(): void
  onBlur(): void
  onScroll(): void
  onOpen(term: ITerminal): void
  onResize(rows: number, cols: number)
  // ...
}

Candidates for turning into components:

  • CompositionHelper
  • SelectionManager
  • Search
  • Linkifier

/cc @mofux

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
Tyriarcommented, Oct 2, 2017

The internal IRenderLayer interface is pretty close to what I imagine the component API to look like:

export interface IRenderLayer {
  /**
   * Called when the terminal loses focus.
   */
  onBlur(terminal: ITerminal): void;

  /**
   * * Called when the terminal gets focus.
   */
  onFocus(terminal: ITerminal): void;

  /**
   * Called when the cursor is moved.
   */
  onCursorMove(terminal: ITerminal): void;

  /**
   * Called when options change.
   */
  onOptionsChanged(terminal: ITerminal): void;

  /**
   * Called when the theme changes.
   */
  onThemeChanged(terminal: ITerminal, colorSet: IColorSet): void;

  /**
   * Called when the data in the grid has changed (or needs to be rendered
   * again).
   */
  onGridChanged(terminal: ITerminal, startRow: number, endRow: number): void;

  /**
   * Calls when the selection changes.
   */
  onSelectionChanged(terminal: ITerminal, start: [number, number], end: [number, number]): void;

  /**
   * Resize the render layer.
   */
  resize(terminal: ITerminal, dim: IRenderDimensions, charSizeChanged: boolean): void;

  /**
   * Clear the state of the render layer.
   */
  reset(terminal: ITerminal): void;
}

Plus exposing the convenience methods on BaseRenderLayer to allow the easy creation of custom canvases

1reaction
Tyriarcommented, Oct 6, 2017

RIght now they’re the same thing, need to re-render is only fired on an animation frame. If we enabled third party addons we may need to reconsider.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Introducing The Component-Based API - Smashing Magazine
A component is simply a set of pieces of HTML, JavaScript and CSS code put all together to create an autonomous entity. This...
Read more >
Consider upgrading to a component-based API #2368 - GitHub
I think this library would greatly benefit from taking an approach similar to Headless UI, which is based around components. With smart use...
Read more >
React.Component
This page contains a detailed API reference for the React component class definition. It assumes you're familiar with fundamental React concepts, ...
Read more >
javascript - ReactJs app crashes with error "Consider adding ...
Error occured in App Component. Consider adding an error boundary to your tree to customize error handling behavior.
Read more >
How to use API with React? ReactJS API Call Example ...
Grabbing the examples above, let's add the methods we are talking about to the components. Class component: import React from 'react'.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found