geelen/react-snapshot

Glen Maddern

@geelen

but the second arg is run... hmm nah that's a bit weird

Phil Plückthun

@kitten

well, I think the sync promise will probably be good for now

it's probably sth you want to test in a beta and see how people respond

Glen Maddern

@geelen

export default Snapshot(props => ({
  quote: fetch(`/api/quotes/${props.id}`).then(response => response.json())
}))(Quote)

that could be your HOC

Phil Plückthun

@kitten

lgtm

Glen Maddern

@geelen

wait it'd probably have to be:

Phil Plückthun

@kitten

^^" sorry for not having a controversial and entirely new perspective. But I think you're right on already

Glen Maddern

@geelen

export default Snapshot({
  quote: props => fetch(`/api/quotes/${props.id}`).then(response => response.json())
})(Quote)

no seriously I just needed to bounce some ideas around

I like this HOC it's quite clean

Phil Plückthun

@kitten

doesn't make a big difference, does it? the second is more cumbersome

but you need to map the object either way

Glen Maddern

@geelen

yeah but in the first, you don't know the keys of the object without executing the fetch

Phil Plückthun

@kitten

yea, but that's ... fine?

don't know the impl, so yea, it might not be ^^

Glen Maddern

@geelen

export default Snapshot({
  quote: props => fetch(`/api/quotes/${props.id}`).then(response => response.json())
}, { renderImmediately: true })(Quote)

HOC lets you simplify the whole thing:

const QuotePage = Snapshot({
  quote: props => fetch(`/api/quotes/${props.id}`).then(response => response.json())
}, {
  renderWithNulls: true
})(
  ({ quote }) => quote
    ?
    <div>
      <div className="Quotes">
        <Quote quote={quote}/>
      </div>
    </div>
    :
    <Spinner/>
)

Glen Maddern

@geelen

ok so I think i'll add both these

and yeah tbh I think actually making a Synchronous Promise

rather than a new API

but basically something that can be used in place of a Promise

Glen Maddern

@geelen

Went with:

export default Snapshot({
  quotes: () => fetch('/api/quotes').then(resp => resp.json())
}).rendering(Home)

you either call .rendering if you want it to render with nulls to begin with or .thenRender if you want it to wait

Glen Maddern

@geelen

pretty happy with the implementation, being able to use snapshot with a Promise.all: https://github.com/geelen/react-snapshot/blob/async/src/index.js#L65-L73

      componentWillMount() {
        snapshot(() =>
          Promise.all(prop_names.map(prop_name => prop_defs[prop_name](this.props)))
        ).then(responses => {
          const new_state = {}
          prop_names.forEach((prop_name, i) => new_state[prop_name] = responses[i])
          this.setState({ async_props: new_state, loaded_all: true })
        })
      }

inside the HOC

snapshot is pro

maybe I should change it to SLAPSHOT

https://images-na.ssl-images-amazon.com/images/I/51Z8R04ChFL.jpg

Glen Maddern

@geelen

gonna push this more widely soon but if you wanna check it out pls do!

/all geelen/react-snapshot#30

Phil Plückthun

@kitten

xD "slapshot"

please do

do it

Max Stoiber

@mxstbr

@geelen I might use that in production :thinking:

Glen Maddern

@geelen

@mxstbr which bit?

Max Stoiber

@mxstbr

The new API

I could see ourselves at least trying it

Glen Maddern

@geelen

for react-snapshot?

Max Stoiber

@mxstbr

Yeah

Glen Maddern

@geelen

yeah do man, it's rad

Max Stoiber

@mxstbr

Would have to try to connect it with GraphQL somehow

Don't have time right now but I might try in a couple of weeks

:ok_hand:

Glen Maddern

@geelen

yeah

imo snapshotting in jsdom is so much easier than full SSR

(assuming no auth)

Where communities thrive

People

Repo info

Activity