[Feature] Preact Support

[developit]

Preact Support

• Skip <Scripts> diffing on the client (change in Remix)
  • Make <Scripts> render nothing on the client #390
  • wip: attempt at preact hydration support #403
  • Skip script rendering after hydration #422
• Backport <!DOCTYPE> hydration skipping to Preact 10 (change in Preact)
  • support hydrating html comments preactjs/preact#3327
• Land patch for document.documentElement replacement (change in preact/compat)
  • fix hydrate when we are passing document as the parent preactjs/preact#3328

[JoviDeCroock]

preactjs/preact#3327 has been published in 10.6.0, we can also merge in the document.documentElement patch later unless we want to fix this another way?

[pspeter3]

I'm very excited about Preact support for Remix. What can I do to help?

[JoviDeCroock]

Hey @pspeter3 it should work as of now, the only thing we need to do different is the hydrate call. Rather than hydrate(x, document) we'll need to do

const documentElement = document.documentElement;
const apply = n => document.replaceChild(n, documentElement);
hydrate(x,  {
	childNodes: [documentElement],
	firstChild: documentElement,
	insertBefore: apply,
	appendChild: apply
}

This because of our algo getting a bit confused 😅 we're hoping to land a fix but looking into the best way currently

https://twitter.com/_developit/status/1471294946560851969

[pspeter3]

Thanks! Is preactjs/preact#3328 the right issue to follow from the Preact side?

[JoviDeCroock]

Well that was an initial solution but we're trying to find a smaller (and maybe in core) one

[arjunyel]

Is there an example repo with this work around used? Preact is awesome :D

Hey @pspeter3 it should work as of now, the only thing we need to do different is the hydrate call. Rather than hydrate(x, document) we'll need to do

const documentElement = document.documentElement;
const apply = n => document.replaceChild(n, documentElement);
hydrate(x,  {
	childNodes: [documentElement],
	firstChild: documentElement,
	insertBefore: apply,
	appendChild: apply
}

This because of our algo getting a bit confused 😅 we're hoping to land a fix but looking into the best way currently

https://twitter.com/_developit/status/1471294946560851969

[phiberber]

After some hours of implementing Preact in Remix, I finally found how annoying not having access to the Bundler API can be. And even after patching Remix compiler.js file, it still didn't work because of compatibility between Preact 8 and Preact X, and I didn't manage to make Preact X work with ESBuild. It would be cool if Jovi guided us in the correct direction on implementing it in Remix, as Preact is a key factor in performance optimization.

[JoviDeCroock]

I would love to help out but we're not going to work on supporting 8 😅 else we'd be working on three major versions at once, I'll try to contribute a working example in the coming week

[JoviDeCroock]

@phiberber #1636 adds an example

[isaac-mcfadyen]

Is there any update on this? The example PR was closed with the status "we are waiting to get this natively supported".

[JoviDeCroock]

Haven't heard back about this 😅

[phiberber]

Jovi, should've waited for the official implementation before deleting the example branch, anyone can follow the commit steps though.

It has been a couple months already, I'm not even sure if this is going to be released this year, and based on this issue's activity, seems like thete is little to none demand (compared to other issues).

[kiliman]

I do know the Remix team really wants to make Remix front-end agnostic. Preact has always been at the top of their list. With summer vacations and the major update to React Router, I believe this work was put on hold. It should pick back up soon after the new "Remix" router lands (with the data API) and deferred support.

[Klukies]

There's also the remix routers repository, where work is being done to port react-router-dom based on the underlying @remix-run/router. I think it's currently on for Vue & Svelte is in the works.
I personally didn't commit to doing any work because of the statement made by Ryan about native support 😅.

There was also a tweet from Ryan himself playing around with Preact & HTM. He's importing what is a pre-release of the remix-router package, so I would presume there's some work that was already done.

[jacob-ebey]

@LukasCornille I've done an initial pass of a Preact layer here: brophdawg11/remix-routers#19

[arjunyel]

Example with Deno https://twitter.com/ebey_jacob/status/1567055958727340032

[pspeter3]

What would it take to get official support at this point?

[developit]

Streaming SSR support.