Compability with Preact

I couldn't find an issue about this topic, so I'd like to create this one to discussion.

Surprisingly, Preact is pretty compatible with React, so this project can also support project based on Preact without big changes.

Any chances for any move toward this?

Actually, there is only one difference: Preact requires different @jsx pragma definition. I tried to build a Preact-based project with react-scripts and realized that we need to tell ESlint and Babel about new rules.

So I tried to add the following babelrc:

{
  "plugins": [
    ["transform-react-jsx", { "pragma": "h" }]
  ]
}

and eslintrc

{
  "settings": {
    "react": {
      "pragma": "h"
    }
  }
}

The only problem is that react-scripts ignores eslintrc and babelrc, so my changes have no effect.

I think it’s great many projects can run on Preact without significant changes but I don’t think we’ll be spending effort supporting this as a built-in configuration (just like we don’t support, for example, Relay out of the box).

The best course of action for those interested in it would be to fork react-scripts (as described in #779), make the necessary changes, and try to keep it up to date with upstream version.

@alexkuz

Well, forking may be a solution. I will try to create a fork and use it.

Actually, there already was an attempt to do this: https://github.com/alexkuz/create-preact-app
It seems like there were no pulls from upstream since forking, so I have to do this again.

@alexkuz, is there any chance that you will update your create-preact-app fork?

@just-boris

@just-boris I am working on putting this in my fork. Will get back to you when I am done. I need someone to test complete compatibility, as i don't have a lot experience with preact.

@just-boris

@just-boris I could, but tbh I'm not really using preact (at least for now), so I have no big interest to keep it up to date. Just fork it and update. Or I could transfer this fork to you if you want to take care of it from here.

@alexkuz

Oh hi @alexkuz

@alexkuz

Hello again,

So far, I have been working on this solution and have finally published my fork. So, if you want to create a Preact app without any setup, you may run

create-react-app <app-name> --scripts-version @just-boris/preact-scripts

and it will give you a Preact-based application.

@alexkuz that was not possible to pick up your fork, because the structure of main repo was changed a lot since that time (now this is a monorepo with Lerna).

But it would be helpful if you will put a note about my newer fork in your Readme.

Also, I have opened "Issues" section in my repo, any further suggestions are welcome

For those, who wants to check out, what was changed, you may look at this diff

@just-boris

@just-boris For a complete react compatibility wouldn't one need preact-compat too ?
In my fork i alias react and react-dom to preact-compat
https://github.com/shrynx/react-super-scripts/blob/0c4c4ddbabc77847a9694647c28dd94e48251ec3/packages/react-scripts/utils/customWebpackConfig.js#L19-L28

Yes, just added this feature per request in just-boris#1.

Closing this as no any further action from the upstream side.

Nice, thank you for sharing this!

This doesn't work in tests. It gives an error "Cannot find module 'react' from 'App.test.js'". Can't jest read aliases? Is there any way to configure jest to use preact for react?

Not without ejecting. (Just like you can’t configure any other alias.)

It worked when I added to preact-compat to ModuleNameMapper in package.json. However, enzyme didn't work. It would be great if we have a full implementation with preact-compat from someone.

@prasadmsvs

@prasadmsvs I am still maintaining my fork supporting Preact. In version 1.1.0 I have also added a mapping into Jest config.

Also, look at the official Preact documentation: https://preactjs.com/guide/unit-testing-with-enzyme
UPD: there is also Enzyme v3 adapter: https://github.com/aweary/preact-enzyme-adapter, but it is not published to NPM yet.

Navigation Menu

Repository navigation

Compability with Preact #1230

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Compability with Preact #1230

Description

Activity

just-boris commented on Dec 10, 2016

gaearon commented on Dec 10, 2016

just-boris commented on Dec 10, 2016

shrynx commented on Dec 11, 2016

alexkuz commented on Dec 11, 2016

gaearon commented on Dec 11, 2016

just-boris commented on Dec 17, 2016

just-boris commented on Dec 17, 2016

shrynx commented on Dec 18, 2016

just-boris commented on Dec 18, 2016

just-boris commented on Dec 18, 2016

gaearon commented on Dec 19, 2016

prasadmsvs commented on Jan 23, 2018

gaearon commented on Jan 23, 2018

prasadmsvs commented on Jan 25, 2018

just-boris commented on Jan 28, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions