3.0.0-beta.0

Rewrite that uses React 19.2+ & Svelte 5.39+ async features to interleave rendering without relying on private api's

• SSR compatible with Svelte v5.39+
• SSR enabled by default
• SSR only-code is codesplit and not loaded on the client

All v2.x tests pass for 3.x, but there are some outstanding nested context issues during SSR.

2.1.4

Svelte 5.36.8 switched from strings to arrays in SSR for rendering.
for Svelte 5.0.0 - 5.36.7 use svelte-preprocess-react 2.1.2

2.1.2

Svelte 5.36.8 switched from strings to arrays in SSR for rendering.
svelte-preprocess-react 2.1.2 is the last version that supports Svelte 5.36.7 and lower.

2.1.1

Fixed a duplicate comma bug when using a trailing comma:

<script lang="ts">
  const react = sveltify({ div: "div", });
</script>

<react.div>
  <react.span>Text</react.span>
</react.div>

The preprocessor would detect the missing 'span' and add it to the sveltify object but generate:

sveltify({ div: "div", , span: "span"});

Resulting in a Property assignment expected error

2.1.0

hooks()

hooks() utility is now signal based and synchronous (thanks to flushSync)

Usage:

<script lang="ts">
  const [count, setCount] = $derived.by(hooks(() => useState(0)));
</script>

<button onclick={() => setCount(count + 1)}>{count}</button>

reactify()

reactify() now has a similar api as sveltify() allowing converting multiple components at once:

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

const svelte = reactify({ Button });

const App: React.FC = () => (
  <div className="app">
    <svelte.Button variant="primary" onclick={() => console.log("Hi")}>
      Say hi
    </svelte.Button>
  </div>
);

reactify() has also been improved for compatibility when when using the reactified component outside a SvelteKit app.

2.0.6

• Support for React 19
• Svelte 5 SSR output changed, upgraded compatibility to include support the new output
• Fixed reactify() when used outside of a Svelte context

2.0.5

• Support for <react.Component.Item /> #46
• Automatic injection of components to sveltify(...)
  • <react.div> now works without adding div:"div" to sveltify().
• Support for {...rest} props #48
• fix: Improved nesting in SSR
• fix: Support prettier formatted closing tags

2.0.4

hooks() now has the same "rune" treatment as sveltify()

• Use hooks without importing, preprocessor will inject the import statement.
• Use hooks without providing ReactDOM and renderToString, preprocessor will inject the imports and the dependencies parameter.

Upgrade:

// ❌ Old 
import { hooks } from "svelte-preprocess-react";

const store = hooks(() => useSomeHook(), ReactDOM, renderToString)

// ✅ New
const store = hooks(() => useSomeHook())

2.0.3

2.0.3

• Improved typing of the children prop of Sveltified components.

2.0.2

• When children is passed as attribute, this is renamed to react$children during preprocessing and is passed as-is to the React component, allowing for renderProps, (but you can't use Reactified Svelte components as that affects the children prop)

2.0.1

• Don't fail when subcomponents(children) are not rendered, a parent component like <Suspense> can decide not to render.

2.0.0

• Compatible with Svelte 5
• New syntax: <react.Component>
• Typesafety & other tooling support.
• New sveltify() api
• Deprecated used()