preact-compat

[jonasgroendahl]

How to use deno fresh with preact-compat?

I'm trying to add zustand to a fresh project.

Normally you'd alias react and react-dom as explained here: https://preactjs.com/guide/v10/switching-to-preact but I don't quite get how to set that up for a fresh project.

[tylrw]

https://esm.sh URLs support an alias query parameter.

e.g. https://esm.sh/zustand?alias=react:preact/compat&deps=react

I'd still like to know what the best practice is.

[synalice]

It works with react-icons and I am super hyped about this!

How does it work tho? Teach me.

[jonasgroendahl]

Teach me too about react icons

Thanks for the help with Zustand!

[synalice]

With react-icons, I got into this trouble. And I also can't figure out how to extract IconType type. Using Node packages in Deno is still pretty painful...

[tylrw]

@lucacasonato might have insight on the right approach. I'm sure he's not busy 😄.

[czottmann]

That's a pretty neat idea, @rtwall, thanks! I finally figured out how to tell a dependency to use Preact instead of React, too!

I wanted to import Statery ("surprise-free state management!") which internally uses React (excerpt from its index.ts):

import { useEffect, useRef, useState } from "react"`)

So, in a React-based app I'd call it like this:

import { makeStore, useStore } from "statery";

In Fresh, I instead use the esm.sh aliasing as described:

import { makeStore, useStore } from "https://esm.sh/[email protected]?alias=react:preact/compat&[email protected]";

If I omit the deps= argument the aliasing assumes I want the latest version of Preact (10.10.x), which clashes with the 10.8.2 used in Fresh (at the time of this writing).

So: aliasing works absolutely fine, and it's a good-enough practice until I'm told otherwise by people more knowledgeable than myself. :) I've learned something today, thanks.

[kidonng]

esm.sh recently added support for external dependencies, so instead of &[email protected] you can just use &external=preact.

[OldManFroggy]

you can also alias 'react' to preact compat, in your import_map.json this seems to work for a fair few react libs, that do not rely on features that are not in preact. (still a bit hit and miss).

[czottmann]

In this particular case …

import { makeStore, useStore } from "https://esm.sh/[email protected]?alias=react:preact/compat&[email protected]";

… using &external=preact (just replacing &deps=…) didn't replace the occurrence in the module loaded from esm.sh; but &external=preact/compat did the trick.

Alas, my code didn't run, though. :) Had to go with my original URL. If you have more insights regarding external=, please let me know!

[czottmann]

@scott-ling I try to avoid overly implicit code like this — I tend to forget about the hacks that make my code work, and in a month I get confused. ;)

[kidonng]

Alas, my code didn't run, though. :) Had to go with my original URL.

Could be a recent bug: esm-dev/esm.sh#383

You can try old versions of esm.sh like &pin=v87.

[OldManFroggy]

completely agree, but right now a lot of tooling is not available to Fresh, especially in the area of UI components, so these hacks are unfortunately needed at least for now -> although I am looking at doing a fresh/preact port of tailwind headless ui that does not rely on preact-compat eventually. (though I do wish Mantine worked with Preact/Fresh... oh well...)

…

On Wed, Aug 3, 2022 at 8:00 PM Carlo Zottmann ***@***.***> wrote: @scott-ling <https://github.com/scott-ling> I try to avoid overly implicit code like this — I tend to forget about the hacks that make my code work, and in a month I get confused. ;) — Reply to this email directly, view it on GitHub <#432 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATXWUNUJJOAFSDML73SS753VXK6VHANCNFSM52XE47DQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[dagda1]

This nugget of information ?alias=react:preact/compat&deps=react is hidden away, I was just about to throw in the towel with fresh until I found this. It should be more prominent somewhere

[andromidasj]

I've been racking my brain over getting Mantine to work with Preact & Fresh, too. Have you had any luck? I've tried importing it with the alias query param:

{
  "imports": {
    "$fresh/": "https://deno.land/x/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "preact-render-to-string": "https://esm.sh/*[email protected]",
    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
    "twind": "https://esm.sh/[email protected]",
    "twind/": "https://esm.sh/[email protected]/",
    "@mantine/core": "https://esm.sh/@mantine/[email protected]?alias=react:preact/compat&deps=react",
    "@mantine/hooks": "https://esm.sh/@mantine/[email protected]?alias=react:preact/compat&deps=react"
  }
}

And when I import a Mantine component on a page (import { TextInput } from '@mantine/core';), then it even sees the types for the components. But when I try to pop one in, I get this error from Fresh:
An error occurred during route handling or page rendering. TypeError: Cannot read properties of undefined (reading 'context').

[klerpi]

Just tried and got the same error on the newest version

[swiftsword94]

I tried it too. not sure but i think the import is pulling something using cjs when there's an esm library available.

[alexnguyennz]

For Mantine, using these imports got me past the reading context error with [email protected]:

"@mantine/core": "https://esm.sh/@mantine/[email protected]?alias=react:preact/compat&[email protected]",
"@mantine/hooks": "https://esm.sh/@mantine/[email protected]?alias=react:preact/compat&[email protected]"

But components don't work or are unstyled and Tailwind gets messed up.