Maybe provide tree-shakeable alternative to preact/compat?

I’ve read the release notes for 10.0.0-alpha.0 (https://github.com/developit/preact/releases/tag/10.0.0-alpha.0) where you say that

preact/compat […] still has both named and a default export to remain compatible with react

I absolutely get that, but some of the functions in compat can actually be useful on their own! Yesterday, I wanted to use memo, but it more than doubled my bundle size because now I was importing all of compat. (I then copied just memo into my codebase, but I don’t think that’s necessarily the best way to go about this. 😄)

Do you think there may be value in providing some of the functions on their own? Maybe something like

import { memo } from 'preact/utils'

On first look, these functions could be especially useful on their own:

• Portal
• PureComponent
• memo

[lemonmade]

It would be great if this issue could be reconsidered. Up until React 17, where the react/jsx-runtime module was added, most modules had to import React from 'react';, since JSX transformations expected React to be in scope. This made it so tree-shaking of preact/compat could not be effective, since the default export for React has to include all the React APIs. With jsx-runtime, though, it can be much easier for packages to be written entirely against React, but using only named imports. I am working on a framework that I want to support React and Preact, and removing all usage of the default React import was not too tricky.

To test out that this will actually make a difference, I created an alternative version of preact/compat that moves all values out of the main preact/compat/index.js file, including the default export. The index file just re-exports all of these files; this change is needed for tree-shaking since Webpack doesn’t, at least by default, remove the React default export, even if unused, if it is entirely constructed in the index file. This alternative compatibility library is hosted here: https://github.com/lemonmade/quilt/tree/main/packages/preact-mini-compat. I also prepared a very small project that uses this library and configures Webpack to alias react to the tree-shakeable compat library: https://github.com/lemonmade/preact-mini-compat. When I build that project, the bundle analysis shows that all parts of compat I did not use (PureComponent, findDOMNode, etc) are tree-shaken, and the parts I did use (as named exports, like memo and render) are included in the bundle, alongside the main Preact module and preact/hooks. The tree-shaken compat build was 5.69kb; the preact/compat build was 6.89kb. Not much, but if any library would do the work to get that bundle size reduction, I assume it is going to be Preact 😄

Quick note: I made the tree-shakeable library very quickly, so it might not actually work in practice. The concept is certainly workable, as shown by the builds, but I didn’t do things like preserving Preact’s property name mangling, so I assume some things would break if you actually used this compatibility library right now.

[robertknight]

Perhaps we could pull utilities like memo and Portal into a separate bundle which preact/compat just re-exports?