zamotany / react-slate Goto Github PK
View Code? Open in Web Editor NEWWrite interactive CLI apps with React
Home Page: https://zamotany.github.io/react-slate/#/
License: MIT License
Write interactive CLI apps with React
Home Page: https://zamotany.github.io/react-slate/#/
License: MIT License
8.4.0
and 8.5.0
the event was not being fired.8.4.0
on Terminal.app
, VS Code Terminal
and Hyper 2
.process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H';
function customRender(canvas: string[], children: (ChunkNode | TextNode)[], props: any) {
const localCanvas = [];
/* ... */
return localCanvas;
}
<Chunk.componentName render={customRender}>
{children}
</Chunk.componentName>
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 });
react-slate-interactive
(#79)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.
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
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:
react-slate/packages/react-slate/src/utils/style.js
Lines 120 to 125 in 9499d41
@react-slate/core
@react-slate/utils
@react-slate/components
@react-slate/interactive
react-slate
should have it's own README with badges etcreact-slate-playground
should have it's README extended with addition information and badgesMake Layout to gracefully handle all possible cases like negative positions, offscreen positions etc.
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
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.
Connected to #35
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)
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
Because of the error mappedCoverage.addStatement is not a function
, the coverage generation was disabled. It should be enabled back.
TODO:
calculateLayout
display: inline
)width
and height
:
width: auto
and height: auto
width: <value>
height: <value>
width: <percentage>%
(testing)height: <percentage>%
(testing)position: absolute
)zIndex: <value>
)ContainerLayout ∈ BorderLayout
display: inline
width
/height
render(elements)
textAlign
visibility: 'visible' | 'hidden'
Text
nodecore
to use reflow
Raw
component to render raw (with ansi styles content)A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.