Skip to content

Conversation

@pago
Copy link
Owner

@pago pago commented Nov 27, 2020

Description

Preact offers a plugin system that enables us to tap into certain parts of it.
We leverage the vnode event to wrap any function component into a Reactive Component.

This integration removes the need to configure the JSX factory or importSource when using @pago/reactive with Preact.

To enable the behaviour, the user will have to either:

Option A:

Use a side effect import to install the Preact plugin.

import "@pago/reactive/preact";

Option B:

Use @pago/reactive/preact instead of @pago/reactive when importing any function.

import { ref } from "@pago/reactive/preact";

Option C:

Configure an alias from @pago/reactive to @pago/reactive/preact.

Question

Is this type of integration preferable over configuring the jsxImportSource? Or would it be preferable to stick to one-size fits all and have the same type of integration for React and Preact with no special casing for now?

Preact offers a plugin system that enables us to tap into certain parts of it.
We leverage the `vnode` event to `wrap` any function component into a Reactive Component.

This integration removes the need to configure the JSX factory or importSource when using `@pago/reactive` with Preact.

To enable the behaviour, the user will have to either:

Option A:
Use a side effect import to install the Preact plugin.

```
import "@pago/reactive/preact";
```

Option B:
Use `@pago/reactive/preact` instead of `@pago/reactive` when importing any function.

```
import { ref } from "@pago/reactive/preact";
```

Option C:
Configure an alias from `@pago/reactive` to `@pago/reactive/preact`.
import { wrap } from '../';
export * from '../';

const map = new WeakMap();
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tsdx is limiting me a bit too much when setting up additional entry points. Need to drop it at some point.

For now I manually copied the code for the ESM and CJS version. But that's basically the integration with Preact.

@github-actions
Copy link

size-limit report 📦

Path Size
dist/reactive.cjs.production.min.js 1.77 KB (0%)
dist/reactive.esm.js 1.85 KB (0%)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants