zamotany / react-slate Goto Github PK

The getLayout method can return the height and width of a node which can be used by the parent when it needs to know the child's size

The following code will crash the component:

export default class Test extends React.Component {
  state = {
    elements: [],
  };

  componentDidMount() {
    setInterval(() => this.setState({ elements: ['a'] }), 1000);
  }

  render() {
    return (
      <Text>
        {this.state.elements.map((e, i) => <Text key={i}>{e}</Text>)}
        <Text>Placing text here crashes it after a sec</Text>
      </Text>
    );
  }
}

What's strange is, the following won't crash:

<Text>
  <Text>Placing text here crashes it after a sec</Text>
  {this.state.elements.map((e, i) => <Text key={i}>{e}</Text>)}
</Text>

The error printed in the console is:

The above error occurred in the <CHUNK_NODE> component:
    in CHUNK_NODE (created by Text)
    in Text
    in CHUNK_NODE (created by Text)
    in Text
    in Test

I did some digging and it comes from invalidateParent() method in ChunkNode, where this.parent.invalidateParent() fails due to parent being undefined.

The issue surfaced after this was added 7a24053#diff-d326ff250583ba58a86209fb780cda69R68

• @react-slate/core
• @react-slate/utils
• @react-slate/components
• @react-slate/interactive

ReactDOM and ReactNative renderers have a unmountComponentAtNode method to unmount a tree. This could be useful in performing a cleanup operation. Not sure how they implement it, but maybe it's possible for us too (#20)

Because of the error mappedCoverage.addStatement is not a function, the coverage generation was disabled. It should be enabled back.

• Note 1: between node 8.4.0 and 8.5.0 the event was not being fired.
• Confirmed that the event is fired correctly on node 8.4.0 on Terminal.app, VS Code Terminal and Hyper 2.
• Note 2: the re-rendering on resize should be throttled or debounced (whatever makes it feel better)
• Note 3: handling resize event doesn't really makes sense if the canvas is content auto-resizable, so it should be handled only in fixed size canvases.

If width and/or height are specified, the lines are normalized by appending empty spaces and newlines respectively/removing characters to fit the dimensions.

If padding is specified, empty spaces and new lines are added on sides. padding is applied before applying height and width. padding can contain shorthand values or paddingLeft, paddingTop, paddingBottom and paddingRight can be specified to customize the padding on the sides.

If backgroundColor is specified it's applied before margin, but after height, width, padding and border.

If margin is specified, it acts similarly to padding, but is applied after applying height, width, padding and borderStyle.

If borderStyle is specified, text is added on all sides after normalizing the lines by appending empty spaces. The value of the borderStyle property could be a string (e.g. solid, double) or take a custom preset object for applying the borders. For example, a preset object might look like following:

const solid = {
  top: '─',
  bottom: '─',
  left: '│',
  right: '│',
  topLeft: '┌',
  topRight: '┐',
  bottomLeft: '└',
  bottomRight: '┘',
};

const  double = {
  top: '═',
  bottom: '═',
  left: '║',
  right: '║',
  topLeft: '╔',
  topRight: '╗',
  bottomLeft: '╚',
  bottomRight: '╝',
};

We probably also need to add display: 'block' | 'inline' and allow specifying these properties only on block elements. Because otherwise it'll be confusing how to handle these cases:

<Text height={5}>Hey</Text>Wow

Or maybe we just add a verticalAlign style to correctly position the Wow text next to Hey which has a height.

When using KeyPress the process.stdin will be altered to emit keypress events, which causes problems when trying to exit from process if there are any setInterval calls. This is probably connected with process.exit(0)/process.kill(0) not clearing even loop queue.

Make Layout to gracefully handle all possible cases like negative positions, offscreen positions etc.

The docs for functions from react-slate-utils doesn't mention that the first argument must be a stream$Writable for:

• hideCursor
• clearOnExit
• clearOnError
• clearScrollbackOnExit

• should be a part of react-slate-interactive (#79)
• use https://github.com/WilixLead/iohook

Rendering to terminal using TTY stream (no terminal enhancement):

import { renderToTerminal } from 'react-slate';

renderToTerminal(<App />, process.stdout);
// or
renderToTerminal(<App />, process.stderr);

To overwrite console, hide cursor etc use react-slate-utils:

import { renderToTerminal } from 'react-slate';
import { overwriteConsole, hideCursor } from 'react-slate-utils';

overwriteConsole(/* ... */);
hideCursor();

renderToTerminal(<App />, process.stdout);

For testing and other non-TTY streams:

import { renderToString, renderToTerminal } from 'react-slate';
const snapshot = renderToString(<App />);
// or
renderToTerminal(<App />, process.stdout, { width: 40, height: 20 });

process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H';

Connected to #35

TODO:

• Layout calculation - calculateLayout
  • basic support
  • support for margins
  • support for paddings
  • support for inline View's (display: inline)
  • support for user-specified width and height:
    • support for trimming elements horizontally
    • support for trimming elements vertically
    • support for width: auto and height: auto
    • support for width: <value>
    • support for height: <value>
    • support for width: <percentage>% (testing)
    • support for height: <percentage>% (testing)
  • support for fixed View's (position: absolute)
  • support for depth (zIndex: <value>)
  • fix overlap of absolutely positioned elements
  • support for border: ContainerLayout ∈ BorderLayout
    • basic support
    • test integration with display: inline
    • test integration with fixed width/height
  • render element creation
• Rendering - render(elements)
  • render elements to sting with ANSI codes
  • support for autoresizable canvas
  • support for textAlign
  • support for visibility: 'visible' | 'hidden'
• Figure out what to do with single-line constraint for Text node
• Migrate core to use reflow
• Raw component to render raw (with ansi styles content)

Currently we use flow-react-proptypes babel plugin. This should be replaced with another build phase flow-copy-source src build -i '{**/__tests__/**}' in each package build script, for example by adding build:flow script.

• monorepo's README should contain table of all packages with versions
• react-slate should have it's own README with badges etc
• react-slate-playground should have it's README extended with addition information and badges

• margins
• paddings

When both border and borderColor properties are applied to style prop, borderColor has no effect (borderColor after border):

<View
  style={{
    border: "solid white",
    borderColor: "red"
  }}
>
  Hello
</View>;

which makes it impossible to do:

const defaultStyle = {
  border: "solid white"
};

<View
  style={{
    ...defaultStyle,
    borderColor: "red"
  }}
>
  Hello
</View>;

Probably the place to looks for is here: