Discussion for 1.0 #6
Description
1.x will be a fully breaking change in 0.x api, and that's why I'm planning on version 1.0 so early.
I'm open to all suggestions, opinions, considerations, etc.
Components and their Children Props
State
state
setState
Toggle
on
toggle
set
Counter
count
inc
dec
incBy
decBy
set
List
list
push
remove
filter
sort
set
Map (KeyValue?)
values
set
get
Set
values
add
clear
remove
has
Value
value
set
Input
bind
value
set
Form
input(key)
bind
value
set
Hover
isHover
bind
Active
isActived
bind
Focus
isFocused
bind
Touch
isTouched
bind
Compose
Set Methods
All set methods will be the "set or over pattern" (I don't know if this pattern have a name), same as setState: If pass plain value, set the value, if pass function, evaluate with actual value and set the value.
function set(value: ValueType | ((value: ValueType) => ValueType): voidset(15) // raw set
set(value => value + 5) // set using prev valueExample:
<Value initial={1}>
{({ value, set }) => (
<div>
Your value is: {value}<br />
<button onClick={() => set(0)}>Reset</button>
<button onClick={() => set(10)}>Set value to 10</button>
<button onClick={() => set(v => v + 10)}>Add 10</button>
</div>
)}
</Value>Compose
Compose function will wrap the component methods/properties in a object with their lowercase name. It avoids naming conflicts like set, value, etc. Example:
const CounterToggle = compose(Toggle, Counter)Before (0.x):
<CounterToggle>
{({ count, inc, dec, toggle, on }) => (
<div onClick={inc}>...</div>
)}
</CounterToggle>After (1.x):
<CounterToggle>
{({ counter, toggle }) => (
<div onClick={counter.inc}>...</div>
)}
</CounterToggle>Mouse/Scroll components.
Already started in prototype. I've plan to add these both 'trackers'
Tests
added some simple tests in 0.1.x
Yes, add tests. Tests are important.
TypeScript / Flow Definitions
added flow types by @TrySound in 0.1.x
Add typings.
Preact Interop
I need to study how can I make this interop, but it's on my mind. Not a hight priority.
Website & Docs
Gatsby? Maybe. Need to think about.