Preact: how i can use hot-loader for Preact?

Created on 3 May 2020  路  6Comments  路  Source: preactjs/preact

situation:

function Popup(){
  const [state, setState] = useState(false)

  function openPopup(){ setState(true) }

  return <div>
    <button onClick={openPopup}>Open</button>

    {state && <div className='popup'>
      My Popup
    </div>}

  </div>
}

1) I want open popup
2) then i want change text My Popup to My Popup!!! and press ctrl + s
3) text must change, but popup should not close

Now I am doing this with react + react-hot-loader, how can this be do this with preact?

Most helpful comment

Work for a hot-reloader for Preact is being done here it's experimental for now.

All 6 comments

We're working on that.

@marvinhagemeister small offtop, preact fibers and Preact.Suspense + async stream render for ssr are also planned? =) or is it better to create a separate issue for discussion?

Work for a hot-reloader for Preact is being done here it's experimental for now.

1) Fibers won't gain us anything we don't have already.
2) No framework has pulled of true streamed SSR rendering yet. Most do a synchronous render and put the result into a stream. Don't think this will happen anytime soon, since there are a lot of details to work out to make it work, and be beneficial.

Fibers won't gain us anything we don't have already.

1) component use Suspence
2) component use graphql hook for fetch data from database
3) we not need render component two times (<div>Loading...</div> and <div>Content</div>), we can suspence render stage, and send to stream already rendered part
4) when suspense is completed and data is received, render system push new data to stream

I thought this is the main task now for reactivity-based ssr systems, the ability to interrupt reactivity, and break it into subtasks and execute them asynchronously, did not think that it has a low priority, but ok

No framework has pulled of true streamed SSR rendering yet.

I thought it was a good opportunity for preact to become better than others =)

since there are a lot of details to work out to make it work, and be beneficial.

ok, i will experiment with this the other day

@marvinhagemeister

essentially, for stream render, we don鈥檛 even need fibers, the algorithm is simple:

1) we synchronously render the entire application
2) in the application we meet 10 bounds of Suspense
3) we send the stream data before the first Suspence bound
4) we wait until Suspense is completed
5) send its result to the stream
6) send to stream data before the second Suspense bound etc...

7) thus, database queries are executed in parallel, and the data is returned in the correct order

in fact, the react simply came up with a STANDARD for declaring Suspence bounds, and preact can use this standard

on the other hand, if the result of Suspense is any component that changes the Head tag, and the has already been sent to the client, then this is not very good. You are right, indeed, we need to think over

Can I create a separate issue to discuss this issue? Do you mind?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

SabirAmeen picture SabirAmeen  路  3Comments

matuscongrady picture matuscongrady  路  3Comments

nopantsmonkey picture nopantsmonkey  路  3Comments

matthewmueller picture matthewmueller  路  3Comments

jasongerbes picture jasongerbes  路  3Comments