Feature: class-based Component API

[mindplay-dk]

Should we add support for the class-based Component API?

This could also be implemented as a separate package - and, interestingly, would work with React/Preact as well, enabling them to use hooks in render-methods too.

Here's a working prototype:

https://codesandbox.io/s/fre-component-i6sbs

For now, the prototype requires manually calling a useComponent function to wrap a Component subclass to a function using only hooks. (We might consider integrating this in the h function, where you could check if e.g. type.prototype.render is present, which it is on Component subclasses, but isn't on functional components.)

Features supported so far:

• constructor(props)
• componentDidMount()
• componentWillUnmount()
• props
• state
• render()
• forceUpdate()
• static defaultProps
• static displayName
• setState(state, callback)
• setState(function, callback)
• shouldComponentUpdate(nextProps, nextState)
• componentDidUpdate(prevProps, prevState, snapshot)
• static getDerivedStateFromProps(props, state)
• static getDerivedStateFromError(error)
• componentDidCatch(error, info)
• getSnapshotBeforeUpdate(prevProps, prevState)

[yisar]

Now it seems that we can support it without any internal modification!

Maybe we can publish a @fre/component package?

or fre/compoent like preact/hooks?

[mindplay-dk]

Now it seems that we can support it without any internal modification!

Well, almost - not quite.

You do have to replace your class-definitions before using them:

class Button extends Component {
  // ...
}

Button = useComponent(Button) // <-- ✨ replace class with function!

So at the moment this only works for individual components.

If you were to import an existing component that uses other components, that's not going to work, because the JSX references classes... unless we create an extended version of h with the class-check and call to useComponent built-in as explained above. Which is totally doable btw. 😁

or fre/compoent like preact/hooks?

That's what I was thinking. 🙂

Well, quite a few details left to figure out first, but we'll see.

[yisar]

Do I need to give you the repo permission?

[mindplay-dk]

Not now - this is just a prototype, let's wait until we have a finished implementation and tests.