@xialvjun/react-element
v0.0.11
Published
A very simple component, just offering the React.Component API, to write logic just in JSX. With a `genc(generator component)` helper.
Downloads
2
Readme
react-element
A very simple component, just offering the React.Component API, to write logic just in JSX. With a genc(generator component)
helper shamelessly copied and slightly modified from Astrocoders/epitath.
Install
npm i @xialvjun/react-element
or yarn add @xialvjun/react-element
Example
import React from "react";
import ReactDOM from "react-dom";
import { Element, init_value, genc, init_state, init_ref, init_refs } from "@xialvjun/react-element";
const App = genc(function*() {
const [a] = yield <Element construct={init_value("a")} componentDidMount={ele => console.log('didMount', ele.value)} />;
const [b] = yield <Element construct={init_value("b")} />;
const [c] = yield <Element construct={init_value("c")} />;
return (
<div>
<button onClick={_ => a.set_value(a.value + "a")}>{a.value}</button>
<button onClick={_ => b.set_value(b.value + "b")}>{b.value}</button>
<button onClick={_ => c.set_value(c.value + "c")}>{c.value}</button>
{/* genc can be used both outside and inside of jsx... but hooks can only be used outside of jsx... */}
<Element construct={init_value("d")}>
{genc(function*(ele) {
const [a] = yield <Element construct={init_value("a")} />;
const [b] = yield <Element construct={init_value("b")} />;
const [c] = yield <Element construct={init_value("c")} />;
return (
<div>
<button onClick={_ => a.set_value(a.value + "a")}>
{a.value}
</button>
<button onClick={_ => b.set_value(b.value + "b")}>
{b.value}
</button>
<button onClick={_ => c.set_value(c.value + "c")}>
{c.value}
</button>
</div>
);
})}
</Element>
</div>
);
});
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Drawback
The genc
will lead to a vdom hell
. Well, the source code is plain, but the React Developer Tools
will show a vdom hell
.
And it's impossible to write a plain version of genc
because we need a Lazy
component: const Lazy = ({ chidlren }) => chidlren();
to wait for the render-props-component's args. Then one render-props-component needs one deeper level Lazy
. It's still vdom hell
.