Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bfanger/svelte-preprocess-react
Seamlessly use React components inside a Svelte app
https://github.com/bfanger/svelte-preprocess-react
react svelte
Last synced: 6 days ago
JSON representation
Seamlessly use React components inside a Svelte app
- Host: GitHub
- URL: https://github.com/bfanger/svelte-preprocess-react
- Owner: bfanger
- License: mit
- Created: 2022-06-09T20:52:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-25T07:18:21.000Z (about 2 months ago)
- Last Synced: 2024-12-29T06:03:18.428Z (13 days ago)
- Topics: react, svelte
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/svelte-preprocess-react
- Size: 1.18 MB
- Stars: 139
- Watchers: 4
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome - bfanger/svelte-preprocess-react - Seamlessly use React components inside a Svelte app (TypeScript)
- awesome - bfanger/svelte-preprocess-react - Seamlessly use React components inside a Svelte app (TypeScript)
README
[](https://www.npmjs.com/package/svelte-preprocess-react)
# Svelte Preprocess React
Seamlessly use React components inside a Svelte app
Supports:
- Nesting (Slot & Children)
- Contexts
- SSR
- Hooks ([useStore](./docs/useStore.md) & [hooks](./docs/hooks.md))
This project was featured at the [Svelte London - November 2022 Meetup](https://www.youtube.com/live/DXQl1G54DJY?feature=share&t=2569)
> "Embrace, extend and extinguish"
This preprocessor is intended as solution using third-party React components or for migrating an existing React codebase.
## Using React inside Svelte components
Inside the Svelte template prepend the name of the component with `react.` prefix.
Instead of ``, you'd write ``
Use libraries from the React's ecosystem, react-youtube for example:
```svelte
import YouTube from "react-youtube";
const react = sveltify({ YouTube }); // Optional step, but adds type-safety
```
The snippet above would be generate:
```svelte
import ReactDOM from "react-dom/client";
import { createPortal } from "react-dom";
import { renderToString } from "react-dom/server";
import { sveltify } from "svelte-preprocess-react";
import YouTube from "react-youtube";
const react = sveltify(
{ YouTube },
{ createPortal, ReactDOM, renderToString },
);
```
## Setup / Installation
```sh
npm install --save-dev svelte-preprocess-react react react-dom
```
Add `preprocessReact` to your svelte.config.js:
```js
// svelte.config.js
import preprocessReact from "svelte-preprocess-react/preprocessReact";
export default {
preprocess: preprocessReact(),
};
```
When using other processors like [@sveltejs/vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) or [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) add preprocessReact preprocessor as the last processor:
```js
// svelte.config.js
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import preprocessReact from "svelte-preprocess-react/preprocessReact";
export default {
preprocess: [vitePreprocess(), preprocessReact()],
};
```
## Using Svelte inside React components
Once you've converted a React component to Svelte, you'd want delete that React component, but some if other React components depended on that component you can use `reactify` to use the new Svelte component as a React component.
```jsx
import { reactify } from "svelte-preprocess-react";
import ButtonSvelte from "../components/Button.svelte";
const Button = reactify(ButtonSvelte);
function MyComponent() {
return console.log("clicked")}>Click me;
}
```
## Using multiple frameworks is a bad idea
Using multiple frontend frameworks adds overhead, both in User and Developer experience.
- Increased download size
- Slower (each framework boundary adds overhead)
- Context switching, keeping the intricacies of both Svelte and React in your head slows down development
When using third-party React components, keep an eye out for Svelte alternatives, or publish your own.
When used as migration tool (can be used to migrate _from_ or _to_ React),
the goal should be to stop writing new React components, and to convert existing React components to Svelte components.
Once all components are converted this preprocessor should be uninstalled.
# More info
- [reactify()](./docs/reactify.md) Convert a Svelte component into an React component
- [hooks()](./docs/hooks.md) Using React hooks inside Svelte components
- [useStore](./docs/useStore.md) Using a Svelte Store in a React components
- [Caveats](./docs/caveats.md) Limitations and workarounds
- [react-router](./docs/react-router.md) Migrate from react-router to SvelteKit
- [Architecture](./docs/architecture.md) svelte-preprocess-react's API Design-principles and System architecture