Svelte Preprocess React

Seamlessly use React components inside a Svelte app

Supports:

• Nesting (Slot & Children)
• Contexts
• SSR
• Hooks (useStore & hooks)

This project was featured at the Svelte London - November 2022 Meetup

"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 <Button>, you'd write <react.Button>

Use libraries from the React's ecosystem, react-youtube for example:

<script>
  import YouTube from "react-youtube";

  const react = sveltify({ YouTube }); // Optional step, but adds type-safety
</script>

<react.YouTube videoId="AdNJ3fydeao" />

The snippet above would be generate:

<!-- Generated by svelte-preprocess-react -->
<script>
  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 },
  );
</script>

<react.YouTube videoId="AdNJ3fydeao" />

Setup / Installation

npm install --save-dev svelte-preprocess-react react react-dom

Add preprocessReact to your svelte.config.js:

// svelte.config.js
import preprocessReact from "svelte-preprocess-react/preprocessReact";

export default {
  preprocess: preprocessReact(),
};

When using other processors like @sveltejs/vite-plugin-svelte or svelte-preprocess add preprocessReact preprocessor as the last processor:

// 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.

import { reactify } from "svelte-preprocess-react";
import ButtonSvelte from "../components/Button.svelte";

const Button = reactify(ButtonSvelte);

function MyComponent() {
  return <Button onClick={() => console.log("clicked")}>Click me</Button>;
}

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() Convert a Svelte component into an React component
• hooks() Using React hooks inside Svelte components
• useStore Using a Svelte Store in a React components
• Caveats Limitations and workarounds
• react-router Migrate from react-router to SvelteKit
• Architecture svelte-preprocess-react's API Design-principles and System architecture