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 temporary solution when migrating an existing large React codebase or when a third-party hasn't yet provided a Svelte adapter.
After you've gradually converted all components to Svelte you can remove this preprocessor from your setup.

Using React inside Svelte components

Embrace

Inside the Svelte template prepend the name of the component with react: prefix.

Instead of <Button>, you'd write <react:Button>

You're also able to use libraries from the react ecosystem, react-youtube for example:

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

<react:YouTube videoId="AdNJ3fydeao" />

The snippet above would be generate:

<!-- Generated by svelte-preprocess-react -->
<script>
  import { sveltify } from "svelte-preprocess-react";
  import { createPortal } from "react-dom";
  import ReactDOM from "react-dom/client";
  import { renderToString } from "react-dom/server";
  import YouTube from "react-youtube";

  const ReactYouTube = sveltify(
    YouTube,
    createPortal,
    ReactDOM,
    renderToString,
  );
</script>

<ReactYouTube videoId="AdNJ3fydeao" />

Setup

npm install svelte-preprocess-react

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/kit/vite";
import preprocessReact from "svelte-preprocess-react/preprocessReact";

export default {
  preprocess: [vitePreprocess(), preprocessReact()],
};

Using Svelte inside React components

Extend

Once you've converted a React component to Svelte, you'd want delete that React component, but when other React components depended on that component use reactify to convert the Svelte component to 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

Extinguish

Using multiple frontend frameworks adds overhead in both 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

svelte-preprocess-react is a migration tool, it can be used to migrate from or to React, it's not a long term solution.

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
• react-router Migrate from react-router to SvelteKit
• Architecture svelte-preprocess-react's API Design-principles and System architecture