You're on the {$page.params.slug} page.
9 | 10 |
9 |
12 | );
13 |
14 | export default Clicker;
15 |
--------------------------------------------------------------------------------
/src/lib/global.d.ts:
--------------------------------------------------------------------------------
1 | import type { Component } from "svelte";
2 | import type {
3 | IntrinsicElementComponents,
4 | StaticPropComponents,
5 | } from "./internal/types.js";
6 | import type SveltifyType from "./sveltify.js";
7 |
8 | declare global {
9 | const sveltify: typeof SveltifyType;
10 |
11 | const react: IntrinsicElementComponents &
12 | RecordYou clicked {count} times
10 | 11 |Authenticated
10 | {:else}
11 | Not authenticated
12 | {/if}
13 |
--------------------------------------------------------------------------------
/tsconfig.eslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": [
4 | "src/**/*.d.ts",
5 | "src/**/*.svelte",
6 | // Additional extensions for eslint
7 | "**/*.svelte",
8 | "**/*.ts",
9 | "**/*.tsx",
10 | "**/*.spec.tsx",
11 | "**/*.cjs",
12 | ".*/**/*.cjs",
13 | ".*.cjs",
14 | "**/*.js",
15 | ".*.js"
16 | ],
17 | "exclude": ["build", "package"]
18 | }
19 |
--------------------------------------------------------------------------------
/src/lib/react-router/internal/RouterContext.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import type { Params } from "../types";
3 |
4 | export type RouterContextType = {
5 | url: URL;
6 | params: Params;
7 | goto(url: string, opts?: { replaceState?: boolean }): void | Promise{text}
14 |
15 |
23 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import { sveltekit } from "@sveltejs/kit/vite";
3 | import { configDefaults, defineConfig } from "vitest/config";
4 |
5 | export default defineConfig({
6 | plugins: [sveltekit()],
7 | css: { devSourcemap: true },
8 | test: {
9 | exclude: [...configDefaults.exclude, "dist", "playwright"],
10 | },
11 | resolve: {
12 | alias: {
13 | "svelte-preprocess-react": path.resolve("./src/lib"),
14 | },
15 | },
16 | });
17 |
--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import type { PlaywrightTestConfig } from "@playwright/test";
2 |
3 | const config: PlaywrightTestConfig = {
4 | testDir: "./playwright/tests",
5 | fullyParallel: true,
6 | forbidOnly: !!process.env.CI,
7 | use: {
8 | baseURL: "http://localhost:5173",
9 | trace: "retain-on-failure",
10 | },
11 | webServer: {
12 | command: "npm run dev",
13 | port: 5173,
14 | reuseExistingServer: true,
15 | },
16 | };
17 |
18 | export default config;
19 |
--------------------------------------------------------------------------------
/src/routes/context-svelte/+page.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 | {data.title}
7 |
11 | {@render children()}
12 |
13 |
14 |
24 |
--------------------------------------------------------------------------------
/src/routes/react-router/+layout.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 | {count}
11 | 12 |-
12 | {#each getFiles() as file}
13 | {#if file}
- 14 | {file} 15 | 16 | {/if} 17 | {/each} 18 |
{children}
;
19 | };
20 | export default Tooltip;
21 |
--------------------------------------------------------------------------------
/src/tests/fixtures/Dog.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 | prop and event
11 |prop and Prop event
18 |prop
25 |.
27 |
14 |
15 |
16 |
17 |
18 | 9 | 10 |
- {children}
Loading...
12 |-
21 |
22 |
23 |
24 |
Hello, {$user.name}
; 12 | * } 13 | */ 14 | export default function useStore
17 | {#if loading}
18 |
23 |
24 |
25 |
26 |
42 |
--------------------------------------------------------------------------------
/src/demo/react-components/Counter.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * A react component using a Svelte Button component
3 | */
4 | import * as React from "react";
5 | import Button from "../components/Button.svelte";
6 | import { reactify } from "svelte-preprocess-react";
7 |
8 | const svelte = reactify({ Button });
9 |
10 | type CounterProps = {
11 | initial?: number;
12 | onCount?: (count: number) => void;
13 | };
14 | const Counter: React.FCLoading...
19 | {:else} 20 |Ready
21 | {/if} 22 |
9 | -
10 |
- via preprocessor 11 |
- via sveltifyReact 12 | 13 |
- getContext() 14 |
- useContext() 15 | 16 |
- Using hooks 17 |
- Using signals 18 | 19 |
- react-router 20 |
- react lazy 21 |
- sveltefied react-youtube 22 |
- 23 | reactified svelte-youtube-lite 24 | 25 |
Count: {count}
21 |
27 | 28 | 29 |
Hello, {$user.name}
; 14 | }; 15 | export default UserGreet; 16 | ``` 17 | 18 | When the Svelte Store is updated the component will rerender and receive the new value from the useStore hook. 19 | 20 | ### Writable stores 21 | 22 | Inside a Svelte component `$user = { name:'Jane Doe' }` or `$user.name = 'Jane Doe'` will trigger an update. 23 | In React and other regular javascript files this does _not_ work. 24 | To update the value and trigger an update use the `set` or `update` methods: 25 | 26 | ```ts 27 | // Instead of `$user = { name: "Jane Doe" }` 28 | user.set({ name: "Jane Doe" }); 29 | 30 | // Instead of `$user.name = "Jane Doe"` 31 | user.update((user) => ({ ...user, name: "Jane Doe" })); 32 | ``` 33 | 34 | See https://svelte.dev/docs#run-time-svelte-store for more information. 35 | -------------------------------------------------------------------------------- /docs/hooks.md: -------------------------------------------------------------------------------- 1 | # hooks 2 | 3 | Using React hooks inside Svelte components. 4 | 5 | The `hooks()` function uses Svelte lifecycle functions, so you can only call the function during component initialization. 6 | 7 | ### Usage: 8 | 9 | ```svelte 10 | 15 | 16 |Count: {count}
17 | 18 | ``` 19 | 20 | hooks() returns a function, when that function retrieves the reactive state, by using $derived.by, the updates from React are applied. Inside the callback you can call multiple hooks, but [the rules of hooks](https://reactjs.org/docs/hooks-rules.html) still apply. 21 | 22 | ```ts 23 | const actions = $derived.by( 24 | await hooks(() => { 25 | const multiplier = useContext(MultiplierContext); 26 | const [count, setCount] = useState(0); 27 | return { 28 | multiply: () => setCount(count * multiplier), 29 | reset: () => setCount(0), 30 | }; 31 | }), 32 | ); 33 | 34 | function onReset() { 35 | actions.reset(); 36 | } 37 | ``` 38 | -------------------------------------------------------------------------------- /src/lib/useSignals.svelte.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | /** 4 | * Hook for using Svelte signals inside a React hook/component. 5 | * useSignals() accepts a watch function that must be defined in a *.svelte or *.svelte.ts file. 6 | * When any of the signals change value, the React component will re-render. 7 | * 8 | * The useSignal has no return value, because the signal value can already be accessed directly, no need to name the same thing something else. 9 | * 10 | * Usage: 11 | * 12 | * const user = $state({ name: "John" }); 13 | * 14 | * const User: React.FC = () => { 15 | * useSignals(() => user.name); 16 | * returnHello, {user.name}
; 17 | * } 18 | */ 19 | export default function useSignals(watch: () => void): void { 20 | const [, rerender] = React.useState({}); 21 | const initial = React.useRef(true); 22 | React.useEffect( 23 | () => 24 | $effect.root(() => { 25 | $effect(() => { 26 | watch(); 27 | if (initial.current) { 28 | initial.current = false; 29 | return; 30 | } 31 | rerender({}); 32 | }); 33 | }), 34 | [], 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/demo/react-components/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { createRoot, hydrateRoot } from "react-dom/client"; 3 | import { reactify } from "svelte-preprocess-react"; 4 | import Dog from "../../tests/fixtures/Dog.svelte"; 5 | import Children from "../../tests/fixtures/Children.svelte"; 6 | import DebugContextProvider from "../../demo/components/DebugContextProvider.svelte"; 7 | import DebugContext from "../../demo/components/DebugContext.svelte"; 8 | 9 | const svelte = reactify({ Dog, Children, DebugContextProvider, DebugContext }); 10 | 11 | export default function App() { 12 | return ( 13 |
14 | console.info("Zoinks!")} />
16 |
17 |
21 |
22 |
24 |
25 | );
26 | }
27 | const createElement = React.createElement;
28 | export { createElement, hydrateRoot, createRoot };
29 |
--------------------------------------------------------------------------------
/src/lib/react-router/Link.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import type { To } from "./types";
3 | import locationToUrl from "./internal/locationToUrl.js";
4 | import RouterContext from "./internal/RouterContext.js";
5 |
6 | export type LinkProps = Omit<
7 | React.AnchorHTMLAttributesReact app
15 |
18 | React element inside a reactified Svelte component
19 |
20 |
18 | onClose()}>
20 | Close
21 |
22 |
23 | );
24 | ```
25 |
26 | ## When React starts the rendering, rendering the children is delayed
27 |
28 | This is because we want to extract the context from the Svelte component and provide that to the Svelte child components
29 |
30 | ## Svelte components missing CSS?
31 |
32 | This happens when a Svelte component is only used in the React server render and the "external" CSS from the compile step is not injected into the page.
33 |
34 | When you're also loading the Svelte components on the page, the bundler will also include the CSS into the page.
35 | Another option is to set the **compilerOptions.css** to "injected".
36 |
37 | ```js
38 | // svelte.config.js
39 | export default {
40 | preprocess: [preprocessReact()],
41 | compilerOptions: {
42 | css: "injected",
43 | },
44 | };
45 | ```
46 |
--------------------------------------------------------------------------------
/src/routes/react-ssr/+server.ts:
--------------------------------------------------------------------------------
1 | import { createElement } from "react";
2 | import App from "../../demo/react-components/App";
3 | import renderToStringAsync from "svelte-preprocess-react/internal/renderToStringAsync";
4 |
5 | const cssScript = ``;
6 | const hydrateScript = ``;
10 |
11 | export async function GET({ url }) {
12 | const html = await renderToStringAsync(createElement(App));
13 | let script = "";
14 | if (url.searchParams.get("css")) {
15 | script += cssScript;
16 | }
17 | if (url.searchParams.get("hydrate")) {
18 | script = hydrateScript;
19 | }
20 |
21 | return new Response(
22 | `
23 |
24 |
25 |
26 |
27 | Thanks for subscribing!
19 |
72 |
84 |