It's loosely inspired by Vue options and takes the separation of concerns a bit more seriously. It is decently typed to satify the basic DX, if you've got improvements, please let me know.
The snippet depends on
- lodash.isequal
- @vue/reactivity
npm i lodash.isequal @vue/reactivity
data
at the toponMount,onDestroy
nextmethods
after thatrender
at the last
They are all just functions, no magic, just hidden reactivity
import { Apex as $ } from "@/lib/ApexRenderer";
const Counter = $({
data() {
return {
count: 0,
};
},
methods() {
return {
inc: () => {
return this.$data.count++;
},
incAsync: async () => {
return this.$data.count++;
},
};
},
render() {
return (
<>
<button onClick={this.$methods.inc}>{this.$data.count}</button>
</>
);
},
});