vigour-io / builder-boy

👲🏽 Build and watch es modules FAST 👲🏽
6 stars 1 forks source link

jsx + ast cleanup #43

Open jimdebeer opened 7 years ago

jimdebeer commented 7 years ago
jimdebeer commented 7 years ago

// basic component + subscription and transform on text
const Component = state => {
  return <div>{state.title.compute() + '!'}</div>
}

// basic component + attrr
const Component = state => <img src={state.img.compute()}></img>

// nested
const Component = state => <div><Warfu /></div>

// basic component + props
const Component = state => <div style={{
    color: 'pink',
    fontSize: state.root().fontSize.compute()
  }}>
  {state.title.compute() + '!'}
</div>

// switch component
const Component = state => {
  return state.type.compute() === 'fluprs' ? <span></span> : <div></div>
}

// collection
const Component = state => {
  return <div>{state.todos.map(state => <div></div>)}</div>
}

// events
const Component = state => {
  return <button onClick={() => console.log('dirty!')}></button>
}
jimdebeer commented 7 years ago

@mortenbroesby looks good?

mortenbroesby commented 7 years ago

@jimdebeer Looks great!

jimdebeer commented 7 years ago

also adds 2 things <div key="x"> // too target a key (like in brender)

<div state={state.bla.bla}> // passes on a state

jimdebeer commented 7 years ago

another gimmick

<Header/> when this cant be found in scope it will add type: 'Header'

jimdebeer commented 7 years ago

{ type: Component } <-- this should work now, have to find the component walking up