[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.

[brophdawg11]

😂 So many emoji reactions yet only 7 upvotes. Remember the upvote (↑) is all that counts towards raising visibility on the roadmap so don't forget to upvote it if this is something you'd like to see worked on!

[nickluger]

Right, but that's in fact a UX problem caused by GitHub. 😕 People are naturally inclined to clicking on colorful icons (emojis) than on a grayish button.

[MichaelDeBoey]

As @ryanflorence pointed out in #7823, Remix is dedicated to be a React framework and not support other renderers

[mbrowne]

@developit Is there anything actually blocking official support for Preact at this point? It looks streaming SSR was added to Preact. I get that Preact support isn't a priority for the core Remix team at the moment, but if someone were to raise a PR, does anyone have a sense of if it would be accepted?

[jfsiii]

if someone were to raise a PR, does anyone have a sense of if it would be accepted?

Based on this #7823 emphasis mine

In the beginning of Remix, we also wanted to leave the door open for making the rendering library pluggable, hence @remix-run/react.

Fast forward three years again and we've seen nearly every rendering lib implement their own remix-like framework with loaders, actions, adapters, nested routes, etc. We were interested in collaborating as a shared framework, but not interested in competing directly (we wish them well, they've done great work).

We also really like the core ideas behind RSC in React. Making the rendering lib pluggable would prove to be a huge challenge and make Remix with React vs. something else very different. This is no longer a goal of the project

And signals I can't think of/find at the moment I get the strong sense it would not be accepted

[mbrowne]

Hmm, but Preact has a compatibility layer with react (@preact/compat), so it seems strange that the maintainers would be against it based on that argument alone. Hopefully one of the maintainers will weigh in.