From 2d7f6a337611102a0c98c1e86ef4fe7c3d8e88ad Mon Sep 17 00:00:00 2001
From: Bob Fanger <bfanger@gmail.com>
Date: Sat, 19 Oct 2024 20:54:57 +0200
Subject: [PATCH] feat: New <react. preprocessing

- global types for sveltify & react, these values are imported or generated when used but not defined.
- Compatible with `<react:*` notation, but a deprecation warning
- PreProcessor injects react dependencies as second argument to sveltify.
- Added migration docs

Fixes #1 & #32
---
 README.md                                     |  25 +--
 docs/architecture.md                          |  12 +-
 docs/migration-to-2.0.md                      |  28 ++++
 docs/react-router.md                          |   6 +-
 eslint.config.js                              |   7 +-
 package.json                                  |   2 +-
 src/lib/global.d.ts                           |  22 +++
 src/lib/index.ts                              |   6 +-
 src/lib/internal/types.ts                     |  12 +-
 src/lib/preprocessReact.js                    | 155 ++++++++++--------
 src/lib/sveltify.svelte.ts                    |  17 +-
 src/lib/used.ts                               |  20 +--
 src/routes/hooks/+page.svelte                 |   9 +-
 src/routes/input/+page.svelte                 |   2 +-
 src/routes/lazy/+page.svelte                  |   5 +-
 src/routes/preprocessor/+page.svelte          |  15 +-
 src/routes/react-router/+layout.svelte        |   9 +-
 src/routes/react-router/[slug]/+page.svelte   |   5 +-
 src/routes/typesafe/+page.svelte              |   1 -
 src/routes/youtube/react/+page.svelte         |   7 +-
 src/routes/youtube/svelte/+page.svelte        |   5 +-
 .../__snapshots__/preprocess.spec.ts.snap     | 133 +++++++--------
 src/tests/fixtures/Binding.svelte             |   6 +-
 src/tests/fixtures/Blocks.svelte              |  19 +--
 src/tests/fixtures/Container.svelte           |   7 +-
 src/tests/fixtures/Element.svelte             |   4 +-
 src/tests/fixtures/Forwarding.svelte          |   5 +-
 src/tests/fixtures/Multiple.svelte            |  15 +-
 src/tests/fixtures/NoScript.svelte            |   2 +-
 src/tests/fixtures/Provider.svelte            |   9 +-
 src/tests/fixtures/Slots.svelte               |   5 +-
 src/tests/fixtures/SlottedText.svelte         |  11 +-
 32 files changed, 326 insertions(+), 260 deletions(-)
 create mode 100644 docs/migration-to-2.0.md
 create mode 100644 src/lib/global.d.ts

diff --git a/README.md b/README.md
index c3d3a21..15abf8b 100644
--- a/README.md
+++ b/README.md
@@ -22,18 +22,20 @@ After you've gradually converted all components to Svelte you can remove this pr
 
 > Embrace
 
-Inside the Svelte template prepend the name of the component with `react:` prefix.
+Inside the Svelte template prepend the name of the component with `react.` prefix.
 
-Instead of `<Button>`, you'd write `<react:Button>`
+Instead of `<Button>`, you'd write `<react.Button>`
 
 You're also able to use libraries from the react ecosystem, react-youtube for example:
 
 ```svelte
 <script>
   import YouTube from "react-youtube";
+
+  const react = sveltify({ YouTube }); // Optional, but improves tooling
 </script>
 
-<react:YouTube videoId="AdNJ3fydeao" />
+<react.YouTube videoId="AdNJ3fydeao" />
 ```
 
 The snippet above would be generate:
@@ -41,20 +43,19 @@ The snippet above would be generate:
 ```svelte
 <!-- Generated by svelte-preprocess-react -->
 <script>
-  import { sveltify } from "svelte-preprocess-react";
-  import { createPortal } from "react-dom";
   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 ReactYouTube = sveltify(YouTube, {
-    createPortal,
-    ReactDOM,
-    renderToString,
-  });
+  const react = sveltify(
+    { YouTube },
+    { createPortal, ReactDOM, renderToString },
+  );
 </script>
 
-<ReactYouTube videoId="AdNJ3fydeao" />
+<react.YouTube videoId="AdNJ3fydeao" />
 ```
 
 ## Setup
@@ -107,7 +108,7 @@ function MyComponent() {
 
 > Extinguish
 
-Using multiple frontend frameworks adds overhead both in User and Developer experience.
+Using multiple frontend frameworks adds overhead, both in User and Developer experience.
 
 - Increased download size
 - Slower (each framework boundary adds overhead)
diff --git a/docs/architecture.md b/docs/architecture.md
index 6b56a6e..4b46505 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -10,11 +10,11 @@ This document describes design-decisions and implementation details of the prepr
 
 ```jsx
 <App>
-  <react:ReduxProvider value={store}>
+  <react.ReduxProvider value={store}>
     <Layout>
-      <react:Info />
+      <react.Info />
     </Layout>
-  </react:ReduxProvider>
+  </react.ReduxProvider>
 </App>
 ```
 
@@ -29,9 +29,9 @@ Both Svelte and React have component trees, for context to work in both, Svelte
 and React needs to act as if the tree is:
 
 ```jsx
-<react:ReduxProvider value={store}>
-  <react:Info />
-</react:ReduxProvider>
+<react.ReduxProvider value={store}>
+  <react.Info />
+</react.ReduxProvider>
 ```
 
 ### Client mode
diff --git a/docs/migration-to-2.0.md b/docs/migration-to-2.0.md
new file mode 100644
index 0000000..179a231
--- /dev/null
+++ b/docs/migration-to-2.0.md
@@ -0,0 +1,28 @@
+# Migration to 2.0
+
+Change `<react:MyComponent>` into `<react.MyComponent>` (`:` to `.`).
+
+When using Typescript, add:
+
+```ts
+const react = sveltify({ MyComponent });
+```
+
+in the `<script lang="ts">` section for type safety.
+
+When getting ESLint no-undef errors:
+
+in `eslint.config.js` add `sveltify: true` to your globals or add a `import { sveltify } from 'svelte-preprocess-react'`.
+
+Also add `react: true` if you don't want  
+
+## Why the change?
+
+In Svelte 5 the compiler gives a warning when using `<react:MyComponent />` syntax:
+
+> Self-closing HTML tags for non-void elements are ambiguous — use `<react:MyComponent ...></react:MyComponent>` rather than `<react:MyComponent ... />`(element_invalid_self_closing_tag)
+
+Easily solved, but it a less elegant syntax.
+
+Secondly, the new syntax allows for IDE support.
+
diff --git a/docs/react-router.md b/docs/react-router.md
index c7c4cdf..2e79947 100644
--- a/docs/react-router.md
+++ b/docs/react-router.md
@@ -44,12 +44,12 @@ In src/routes/+layout.svelte
   import { page } from "$app/stores";
   import { goto } from "$app/navigation";
 
-  used(RouterProvider);
+  const react = sveltify({ RouterProvider });
 </script>
 
-<react:RouterProvider value={{ url: $page.url, params: $page.params, goto }}>
+<react.RouterProvider value={{ url: $page.url, params: $page.params, goto }}>
   <slot />
-</react:RouterProvider>
+</react.RouterProvider>
 ```
 
 the actual navigation and url updates are done by the SvelteKit router. The `<RouterProvider>` exposed the current url and push & replace actions
diff --git a/eslint.config.js b/eslint.config.js
index 1bccf14..9223a48 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -29,7 +29,12 @@ export default ts.config(
     languageOptions: {
       ecmaVersion: 2022,
       sourceType: "module",
-      globals: { ...globals.node, ...globals.browser },
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+        sveltify: true,
+        react: true,
+      },
       parser: svelteParser,
       parserOptions: {
         parser: ts.parser,
diff --git a/package.json b/package.json
index 60a1a5c..04f53c5 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "svelte-package && vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "package": "svelte-package",
diff --git a/src/lib/global.d.ts b/src/lib/global.d.ts
new file mode 100644
index 0000000..931c311
--- /dev/null
+++ b/src/lib/global.d.ts
@@ -0,0 +1,22 @@
+import type { Component } from "svelte";
+import type { Sveltified } from "./internal/types";
+
+declare global {
+  function sveltify<
+    T extends {
+      [key: string]:
+        | keyof JSX.IntrinsicElements
+        | React.JSXElementConstructor<any>;
+    },
+  >(
+    components: T,
+  ): {
+    [K in keyof T]: K extends keyof JSX.IntrinsicElements
+      ? Sveltified[K]
+      : Sveltified<T[K]>;
+  };
+
+  const react: {
+    [component: string]: Component;
+  };
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 22ede0d..0db6306 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,5 @@
+/// <reference path="global.d.ts" />
+
 import type { Sveltified } from "./internal/types.js";
 export { default as hooks } from "./hooks.js";
 export { default as reactify } from "./reactify.js";
@@ -8,7 +10,9 @@ export { default as useStore } from "./useStore.js";
 declare global {
   function sveltify<
     T extends {
-      [key: string]: React.FC | React.ComponentClass;
+      [key: string]:
+        | keyof JSX.IntrinsicElements
+        | React.JSXElementConstructor<any>;
     },
   >(
     reactComponents: T,
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
index 900b79e..36444c7 100644
--- a/src/lib/internal/types.ts
+++ b/src/lib/internal/types.ts
@@ -1,5 +1,9 @@
 import type ReactDOMServer from "react-dom/server";
-import type { ComponentClass, FunctionComponent, ReactNode } from "react";
+import {
+  type ComponentClass,
+  type FunctionComponent,
+  type ReactNode,
+} from "react";
 import type { Root } from "react-dom/client";
 import type { Component, Snippet } from "svelte";
 
@@ -76,9 +80,9 @@ export type ChildrenPropsAsSnippet<T> = T extends {
     ? Omit<T, "children"> & { children?: Snippet }
     : T;
 
-export type Sveltified<T extends React.JSXElementConstructor<any>> = Component<
-  ChildrenPropsAsSnippet<React.ComponentProps<T>>
->;
+export type Sveltified<
+  T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+> = Component<ChildrenPropsAsSnippet<React.ComponentProps<T>>>;
 
 export type ReactDependencies = {
   ReactDOM?:
diff --git a/src/lib/preprocessReact.js b/src/lib/preprocessReact.js
index 1388acf..3580184 100644
--- a/src/lib/preprocessReact.js
+++ b/src/lib/preprocessReact.js
@@ -74,7 +74,7 @@ export default function preprocessReact(options = {}) {
  * @returns
  */
 function transform(content, options) {
-  const prefix = "React$$";
+  const prefix = "inject$$";
   /** @type {string} */
   let portal;
   const packageName = "svelte-preprocess-react";
@@ -88,20 +88,15 @@ function transform(content, options) {
     portal = `${prefix}createPortal`;
   } else {
     imports.push(`import ${prefix}ReactDOM from "react-dom";`);
-    portal = `${prefix}ReactDOM.createPortal`;
+    portal = `${prefix}createPortal: ${prefix}ReactDOM.createPortal`;
   }
 
-  let renderToString = "";
-  const deps = [
-    `createPortal: ${portal}`,
-    `ReactDOM: ${prefix}ReactDOM${renderToString}`,
-  ];
+  const deps = [portal, `${prefix}ReactDOM`];
   if (options.ssr) {
     imports.push(
       `import { renderToString as ${prefix}renderToString } from "react-dom/server";`,
     );
-    renderToString = `, renderToString: ${prefix}renderToString`;
-    deps.push(`renderToString: ${prefix}renderToString`);
+    deps.push(`${prefix}renderToString`);
   }
 
   const ast = parse(content, {
@@ -111,40 +106,71 @@ function transform(content, options) {
   const s = new MagicString(content, { filename: options.filename });
   const components = replaceReactTags(ast.html, s);
   const aliases = Object.entries(components);
-  let injected = false;
 
+  let depsInjected = false;
+  let imported = false;
+  let defined = false;
+
+  /**
+   * Detect sveltify import and usage
+   *
+   * @param {import('estree-walker').Node} node
+   * @param {import('estree-walker').Node|null} parent
+   */
+  function enter(node, parent) {
+    if (node.type === "Identifier" && node.name === "sveltify" && parent) {
+      if (parent.type === "ImportSpecifier") {
+        imported = true;
+      }
+      if (
+        parent.type === "CallExpression" &&
+        parent?.arguments.length === 1 &&
+        "end" in parent.arguments[0] &&
+        typeof parent.arguments[0].end === "number"
+      ) {
+        s.appendRight(parent.arguments[0].end, `, { ${deps.join(", ")} }`);
+        depsInjected = true;
+      }
+      if (parent.type === "ImportDeclaration") {
+        imported = true;
+      }
+    }
+    if (
+      node.type === "Identifier" &&
+      node.name === "react" &&
+      parent?.type === "VariableDeclarator"
+    ) {
+      defined = true;
+    }
+  }
+  if (ast.module) {
+    walk(ast.module, { enter });
+  }
   if (ast.instance) {
-    walk(ast.instance, {
-      enter(node, parent) {
-        if (
-          node.type === "Identifier" &&
-          node.name === "sveltify" &&
-          parent?.type === "CallExpression" &&
-          parent?.arguments.length === 1
-        ) {
-          if (
-            "end" in parent.arguments[0] &&
-            typeof parent.arguments[0].end === "number"
-          ) {
-            injected = true;
-            s.appendRight(parent.arguments[0].end, `, { ${deps.join(", ")} }`);
-          }
-        }
-      },
-    });
+    walk(ast.instance, { enter });
   }
-  if (!injected && aliases.length === 0) {
+  if (!depsInjected && aliases.length === 0) {
     return { code: content };
   }
-  imports.push(
-    `import { sveltify as ${prefix}sveltify } from "${packageName}";`,
-  );
-
+  // console.log(aliases);
+  if ((depsInjected && !imported) || (!imported && !defined)) {
+    imports.push(`import { sveltify } from "${packageName}";`);
+  }
   const script = ast.instance || ast.module;
-  const wrappers = aliases.map(
-    ([alias, { expression }]) =>
-      `const ${alias} = ${prefix}sveltify(${expression}, { createPortal: ${portal}, ReactDOM: ${prefix}ReactDOM${renderToString} });`,
-  );
+  let wrappers = [];
+  if (!defined) {
+    wrappers.push(
+      `const react = sveltify({ ${Object.keys(components)
+        .map((component) => {
+          if (component.toLowerCase() === component) {
+            return `${component.match(/^[a-z]+$/) ? component : JSON.stringify(component)}: ${JSON.stringify(component)}`;
+          }
+          return component;
+        })
+        .join(", ")} }, { ${deps.join(", ")} });`,
+    );
+  }
+
   if (Object.values(components).find((c) => c.dispatcher)) {
     imports.push(
       'import { createEventDispatcher as React$$createEventDispatcher } from "svelte";',
@@ -172,48 +198,33 @@ function transform(content, options) {
  *
  * @param {any} node
  * @param {MagicString} content
- * @param {Record<string, { expression: string, dispatcher: boolean }>} components
+ * @param {Record<string, { dispatcher: boolean }>} components
  */
 function replaceReactTags(node, content, components = {}) {
-  if (node.type === "Element" && node.name.startsWith("react:")) {
-    const tag = /** @type {any} */ (node);
-    const componentExpression = tag.name.slice(6);
-    const alias = `React$${componentExpression.replace(/\./g, "$")}`;
-    const tagStart = node.start;
-    const tagEnd = node.end;
-    const closeStart = tagEnd - tag.name.length - 3;
-    const hasCloseTag =
-      content.slice(closeStart, closeStart + 8) === `</react:`;
-    content.overwrite(tagStart + 1, tagStart + 1 + tag.name.length, alias);
-    if (hasCloseTag) {
-      content.overwrite(
-        closeStart + 2,
-        closeStart + 2 + tag.name.length,
-        alias,
-      );
-    }
-
-    if (!components[alias]) {
-      if (componentExpression.match(/^[a-z-]+$/)) {
-        components[alias] = {
-          expression: `"${componentExpression}"`,
-          dispatcher: false,
-        };
-      } else {
-        components[alias] = {
-          expression: componentExpression,
-          dispatcher: false,
-        };
+  if (
+    (node.type === "Element" && node.name.startsWith("react:")) ||
+    (node.type === "InlineComponent" && node.name.startsWith("react."))
+  ) {
+    let legacy = node.name.startsWith("react:");
+    if (legacy) {
+      console.warn("'<react:*' syntax is deprecated, use '<react.*'");
+      content.overwrite(node.start + 6, node.start + 7, ".");
+      const tagEnd = node.end - node.name.length - 3;
+      if (content.slice(tagEnd, tagEnd + 8) === `</react:`) {
+        content.overwrite(tagEnd + 7, tagEnd + 8, ".");
       }
     }
-    tag.attributes.forEach((/** @type {any} */ attr) => {
+    const identifier = node.name.slice(6).replace("[.].*", "");
+    if (!components[identifier]) {
+      components[identifier] = { dispatcher: false };
+    }
+
+    node.attributes.forEach((/** @type {any} */ attr) => {
       if (attr.type === "EventHandler") {
         const event = attr;
         const eventStart = event.start;
         if (event.modifiers.length > 0) {
-          throw new Error(
-            `event modifiers are not (yet) supported for React components`,
-          );
+          throw new Error(`event modifiers are not supported`);
         }
         if (event.expression !== null) {
           content.overwrite(
@@ -229,7 +240,7 @@ function replaceReactTags(node, content, components = {}) {
               event.name[0].toUpperCase() + event.name.substring(1)
             }={(e) => React$$dispatch(${JSON.stringify(event.name)}, e)}`,
           );
-          components[alias].dispatcher = true;
+          components[identifier].dispatcher = true;
         }
       }
     });
diff --git a/src/lib/sveltify.svelte.ts b/src/lib/sveltify.svelte.ts
index 50a5726..d13f24e 100644
--- a/src/lib/sveltify.svelte.ts
+++ b/src/lib/sveltify.svelte.ts
@@ -17,7 +17,9 @@ export default sveltify;
 
 function sveltify<
   T extends {
-    [key: string]: React.JSXElementConstructor<any>;
+    [key: string]:
+      | keyof JSX.IntrinsicElements
+      | React.JSXElementConstructor<any>;
   },
 >(
   components: T,
@@ -72,7 +74,18 @@ function single<T extends React.FC | React.ComponentClass>(
     // Fix SSR import issue where node doesn't import the esm version. 'react-youtube'
     reactComponent = (reactComponent as any).default;
   }
-  const { createPortal, ReactDOM, renderToString } = dependencies;
+  let { createPortal, ReactDOM, renderToString } = dependencies;
+  if ("inject$$createPortal" in dependencies) {
+    createPortal =
+      dependencies.inject$$createPortal as ReactDependencies["createPortal"];
+  }
+  if ("inject$$ReactDOM" in dependencies) {
+    ReactDOM = dependencies.inject$$ReactDOM as ReactDependencies["ReactDOM"];
+  }
+  if ("inject$$renderToString" in dependencies) {
+    renderToString =
+      dependencies.inject$$renderToString as ReactDependencies["renderToString"];
+  }
 
   const client = typeof document !== "undefined";
 
diff --git a/src/lib/used.ts b/src/lib/used.ts
index 4e00810..a4b4331 100644
--- a/src/lib/used.ts
+++ b/src/lib/used.ts
@@ -1,15 +1,15 @@
 /* eslint-disable  @typescript-eslint/no-unused-vars */
 
 /**
- * This method does absolutely nothing, it's a no-op
- *
- * Svelte/TypeScript is not (yet) able to detect usage of the <react:ComponentX> syntax.
- * This causes `X is declared but its value is never read. (ts:6133)` errors.
- *
- * This function can be used to suppress these errors.
- *
- * Usage:
- *
- *   used(ComponentX, ComponentY);
+ * @deprecated
+ * Stop using used() to silence linting & typescript errors, and add:
+ * ```ts
+ *   const react = sveltity({ MyComponent });
+ * ```
+ * and use the component as:
+ * ```svelte
+ *   <react.MyComponent />
+ * ```
+ * for improved type-safety & autocompletion.
  */
 export default function used(...args: any[]) {}
diff --git a/src/routes/hooks/+page.svelte b/src/routes/hooks/+page.svelte
index bc3b069..1dc5290 100644
--- a/src/routes/hooks/+page.svelte
+++ b/src/routes/hooks/+page.svelte
@@ -2,15 +2,16 @@
   import { useState } from "react";
   import ReactDOMClient from "react-dom/client"; // React 18+,(use "react-dom" for older versions)
   import { renderToString } from "react-dom/server";
-  import { hooks, used } from "svelte-preprocess-react";
+  import { hooks } from "svelte-preprocess-react";
   import Nested from "./HookWithContext.svelte";
   import { type Auth, AuthProvider } from "./react-auth";
 
-  used(AuthProvider);
+  const react = sveltify({ AuthProvider });
 
   const countHook = hooks(() => useState(0), ReactDOMClient, renderToString);
 
   const auth: Auth = $state({ authenticated: false });
+
   function onLogin() {
     auth.authenticated = true;
   }
@@ -31,9 +32,9 @@
   >
   <hr />
 {/if}
-<react:AuthProvider value={auth}>
+<react.AuthProvider value={auth}>
   <Nested />
-</react:AuthProvider>
+</react.AuthProvider>
 
 {#if auth.authenticated}
   <button onclick={onLogout} data-testid="logout">Logout</button>
diff --git a/src/routes/input/+page.svelte b/src/routes/input/+page.svelte
index 49a8a43..c3faa44 100644
--- a/src/routes/input/+page.svelte
+++ b/src/routes/input/+page.svelte
@@ -5,6 +5,6 @@
   }
 </script>
 
-<react:input {value} {onChange} />
+<react.input {value} {onChange} />
 
 {value}
diff --git a/src/routes/lazy/+page.svelte b/src/routes/lazy/+page.svelte
index effe48b..9e3fe12 100644
--- a/src/routes/lazy/+page.svelte
+++ b/src/routes/lazy/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
   import { lazy } from "react";
-  import { used } from "svelte-preprocess-react";
   import { browser } from "$app/environment";
 
   const Counter = lazy(() => import("../../demo/react-components/Counter"));
-  used(Counter);
+  const react = sveltify({ Counter });
 </script>
 
 {#if browser}
-  <react:Counter></react:Counter>
+  <react.Counter />
 {/if}
diff --git a/src/routes/preprocessor/+page.svelte b/src/routes/preprocessor/+page.svelte
index b77afd1..edf4d8d 100644
--- a/src/routes/preprocessor/+page.svelte
+++ b/src/routes/preprocessor/+page.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import Alert from "../../demo/react-components/Alert";
   import Counter from "../../demo/react-components/Counter";
 
-  used(Counter, Alert); // Bypass linting errors: is declared but its value is never read. (ts)
+  const react = sveltify({ Counter, Alert, div: "div" });
 </script>
 
-<react:Counter initial={10} onCount={console.info}></react:Counter><br />
+<react.Counter initial={10} onCount={console.info} /><br />
 
-<react:Counter initial={25} onCount={console.info}></react:Counter>
+<react.Counter initial={25} onCount={console.info} />
 
-<react:Alert>A simple alert</react:Alert>
+<react.Alert>A simple alert</react.Alert>
 
-<react:Alert>
+<react.Alert>
   "Multiline content". {10 ** 4} Lorem ipsum dolor sit amet consectetur adipisicing
-  elit. Suscipit nisi atque asperiores.</react:Alert
+  elit. Suscipit nisi atque asperiores.</react.Alert
 >
-<react:div>a div</react:div>
+<react.div>a div</react.div>
diff --git a/src/routes/react-router/+layout.svelte b/src/routes/react-router/+layout.svelte
index 90a3d1e..0b3d474 100644
--- a/src/routes/react-router/+layout.svelte
+++ b/src/routes/react-router/+layout.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import { RouterProvider } from "svelte-preprocess-react/react-router";
   import { goto } from "$app/navigation";
   import { page } from "$app/stores";
   import Menu from "./Menu";
 
-  used(RouterProvider, Menu);
+  const react = sveltify({ RouterProvider, Menu });
 </script>
 
-<react:RouterProvider value={{ url: $page.url, params: $page.params, goto }}>
-  <react:Menu></react:Menu>
+<react.RouterProvider value={{ url: $page.url, params: $page.params, goto }}>
+  <react.Menu />
   <slot />
-</react:RouterProvider>
+</react.RouterProvider>
diff --git a/src/routes/react-router/[slug]/+page.svelte b/src/routes/react-router/[slug]/+page.svelte
index c6b827b..c665afb 100644
--- a/src/routes/react-router/[slug]/+page.svelte
+++ b/src/routes/react-router/[slug]/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import { Link } from "svelte-preprocess-react/react-router";
   import { page } from "$app/stores";
 
-  used(Link);
+  const react = sveltify({ Link });
 </script>
 
 <p>You're on the {$page.params.slug} page.</p>
 
-<react:Link to="../../">Back to home</react:Link>
+<react.Link to="../../">Back to home</react.Link>
diff --git a/src/routes/typesafe/+page.svelte b/src/routes/typesafe/+page.svelte
index 991c67c..c359d08 100644
--- a/src/routes/typesafe/+page.svelte
+++ b/src/routes/typesafe/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { sveltify } from "svelte-preprocess-react";
   import Counter from "../../demo/react-components/Counter";
   import Alert from "../../demo/react-components/Alert";
 
diff --git a/src/routes/youtube/react/+page.svelte b/src/routes/youtube/react/+page.svelte
index 1a4bd28..a53a34f 100644
--- a/src/routes/youtube/react/+page.svelte
+++ b/src/routes/youtube/react/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import YouTube from "react-youtube";
 
-  used(YouTube);
+  const react = sveltify({ YouTube });
 </script>
 
-<react:YouTube videoId="DXQl1G54DJY" opts={{ playerVars: { start: 2569 } }}
-></react:YouTube>
+<react.YouTube videoId="DXQl1G54DJY" opts={{ playerVars: { start: 2569 } }}
+></react.YouTube>
diff --git a/src/routes/youtube/svelte/+page.svelte b/src/routes/youtube/svelte/+page.svelte
index c18ab24..dd5f2e3 100644
--- a/src/routes/youtube/svelte/+page.svelte
+++ b/src/routes/youtube/svelte/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import YouTubeWrapper from "./YouTubeWrapper";
-  import { used } from "svelte-preprocess-react";
 
-  used(YouTubeWrapper);
+  const react = sveltify({ YouTubeWrapper });
 </script>
 
-<react:YouTubeWrapper id="AdNJ3fydeao"></react:YouTubeWrapper>
+<react.YouTubeWrapper id="AdNJ3fydeao"></react.YouTubeWrapper>
diff --git a/src/tests/__snapshots__/preprocess.spec.ts.snap b/src/tests/__snapshots__/preprocess.spec.ts.snap
index 59dc508..6e19906 100644
--- a/src/tests/__snapshots__/preprocess.spec.ts.snap
+++ b/src/tests/__snapshots__/preprocess.spec.ts.snap
@@ -1,219 +1,210 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`svelte-preprocess-react > should convert text content to react children prop 1`] = `
-"<script lang="ts">import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
-  import { used } from "svelte-preprocess-react";
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
   import Alert from "../../demo/react-components/Alert";
 
-  used(Alert);
+  const react = sveltify({ Alert }, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
 
   const count = 0;
-;const React$Alert = React$$sveltify(Alert, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });</script>
+;</script>
 
-<React$Alert react$children="Static Text" />
+<react.Alert react$children="Static Text" />
 
-<React$Alert react$children="{'\\n'}  {'"'}Multiline content{'"'}. Lorem ipsum dolor sit amet consectetur adipisicing elit.{'\\n'}  Suscipit nisi atque asperiores.{'\\n'}" />
+<react.Alert react$children="{'\\n'}  {'"'}Multiline content{'"'}. Lorem ipsum dolor sit amet consectetur adipisicing elit.{'\\n'}  Suscipit nisi atque asperiores.{'\\n'}" />
 
-<React$Alert react$children="Value: {count + 1}" />
+<react.Alert react$children="Value: {count + 1}" />
 "
 `;
 
 exports[`svelte-preprocess-react > should import 'react-dom/server' when ssr is enabled 1`] = `
-"<script lang="ts">import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
-  import { used } from "svelte-preprocess-react";
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
   import Clicker from "./Clicker";
 
-  used(Clicker);
+  const react = sveltify({ Clicker }, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
 
   let count = 1;
-;const React$Clicker = React$$sveltify(Clicker, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });</script>
+;</script>
 
-<React$Clicker
+<react.Clicker
   {count}
   onCount={(next) => {
     count = next;
   }}
-></React$Clicker>
+></react.Clicker>
 "
 `;
 
 exports[`svelte-preprocess-react > should inject a script tag 1`] = `
 "<script>
-import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
+import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
 
-const React$Counter = React$$sveltify(Counter, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });
+const react = sveltify({ Counter }, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
 </script>
 
 <!-- Counter could be a global variable -->
-<React$Counter></React$Counter>
+<react.Counter></react.Counter>
 "
 `;
 
 exports[`svelte-preprocess-react > should not import 'react-dom/server' when ssr is disabled 1`] = `
-"<script lang="ts">import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
-  import { used } from "svelte-preprocess-react";
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { sveltify } from "svelte-preprocess-react";
   import Clicker from "./Clicker";
 
-  used(Clicker);
+  const react = sveltify({ Clicker }, { inject$$createPortal, inject$$ReactDOM });
 
   let count = 1;
-;const React$Clicker = React$$sveltify(Clicker, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM });</script>
+;</script>
 
-<React$Clicker
+<react.Clicker
   {count}
   onCount={(next) => {
     count = next;
   }}
-></React$Clicker>
+></react.Clicker>
 "
 `;
 
 exports[`svelte-preprocess-react > should portal slotted content as children 1`] = `
-"<script lang="ts">import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
-  import { used } from "svelte-preprocess-react";
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
   import Alert from "../../demo/react-components/Alert";
 
-  used(Alert);
-;const React$Alert = React$$sveltify(Alert, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });</script>
+  const react = sveltify(Alert, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
+;</script>
 
-<React$Alert react$children="A simple primary alert. Check it out!" />
+<react.Alert react$children="A simple primary alert. Check it out!" />
 "
 `;
 
 exports[`svelte-preprocess-react > should process <react:Context.Provider> tags 1`] = `
-"<script lang="ts">import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
   import type { Context as ContentType } from "react";
-  import { used } from "svelte-preprocess-react";
 
   export let Context: ContentType<any>;
   $: Provider = Context.Provider;
 
-  used(Provider);
-;const React$Provider = React$$sveltify(Provider, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });</script>
+  const react = sveltify({ Provider }, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
+;</script>
 
-<React$Provider react$children="content" />
+<react.Provider react$children="content" />
 
-<React$Provider>
+<react.Provider>
   <button>ok</button>
-</React$Provider>
+</react.Provider>
 "
 `;
 
 exports[`svelte-preprocess-react > should process <react:component> tags 1`] = `
-"<script lang="ts">import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
-  import { used } from "svelte-preprocess-react";
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
   import Clicker from "./Clicker";
 
-  used(Clicker);
+  const react = sveltify({ Clicker }, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
 
   let count = 1;
-;const React$Clicker = React$$sveltify(Clicker, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });</script>
+;</script>
 
-<React$Clicker
+<react.Clicker
   {count}
   onCount={(next) => {
     count = next;
   }}
-></React$Clicker>
+></react.Clicker>
 "
 `;
 
 exports[`svelte-preprocess-react > should process <react:component> tags 2`] = `
-"<script lang="ts">import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
-  import { used } from "svelte-preprocess-react";
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
   import Clicker from "./Clicker";
 
-  used(Clicker);
+  const react = sveltify({ Clicker }, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
 
   let count = 1;
-;const React$Clicker = React$$sveltify(Clicker, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });</script>
+;</script>
 
 <h2>prop and event</h2>
-<React$Clicker
+<react.Clicker
   {count}
   onCount={(next) => {
     count = next;
   }}
-></React$Clicker>
+></react.Clicker>
 <h2>prop and Prop event</h2>
-<React$Clicker
+<react.Clicker
   count={10}
   onCount={() => {
     console.info("count");
   }}
-></React$Clicker>
+></react.Clicker>
 <h2>prop</h2>
-<React$Clicker {count}></React$Clicker>
+<react.Clicker {count}></react.Clicker>
 <h2>.</h2>
-<React$Clicker></React$Clicker>
+<react.Clicker></react.Clicker>
 "
 `;
 
 exports[`svelte-preprocess-react > should process <react:element> (lowercase) tags 1`] = `
 "<script>
-import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
+import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
 
-const React$button = React$$sveltify("button", { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });
+const react = sveltify({ button: "button" }, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
 </script>
 
 <!-- eslint-disable-next-line svelte/valid-compile -->
-<React$button onclick={() => console.info("clicked")}>
+<react.button onclick={() => console.info("clicked")}>
   <slot />
-</React$button>
+</react.button>
 "
 `;
 
 exports[`svelte-preprocess-react > should process {:else} {:then} and {:catch} sections 1`] = `
-"<script lang="ts">import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
-  import { used } from "svelte-preprocess-react";
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
   import type React from "react";
 
   const number = 1;
 
   const Component: React.FC = () => null;
-  used(Component);
-;const React$Component = React$$sveltify(Component, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });</script>
+  const react = sveltify({ Component }, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
+;</script>
 
 <!-- eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -->
 {#if number === 1}
-  <React$Component></React$Component>
+  <react.Component />
   <!-- eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -->
 {:else if number === 2}
-  <React$Component></React$Component>
+  <react.Component />
 {:else}
-  <React$Component></React$Component>
+  <react.Component />
 {/if}
 
 {#each [] as _}
-  <React$Component></React$Component>
+  <react.Component />
 {:else}
-  <React$Component></React$Component>
+  <react.Component />
 {/each}
 
 {#await Promise.resolve()}
-  <React$Component></React$Component>
+  <react.Component />
 {:then}
-  <React$Component></React$Component>
+  <react.Component />
 {:catch}
-  <React$Component></React$Component>
+  <react.Component />
 {/await}
 "
 `;
 
 exports[`svelte-preprocess-react > should process on:event forwarding 1`] = `
-"<script lang="ts">import React$$ReactDOM from "react-dom/client"; import { createPortal as React$$createPortal} from "react-dom"; import { renderToString as React$$renderToString } from "react-dom/server"; import { sveltify as React$$sveltify } from "svelte-preprocess-react";
-  import { used } from "svelte-preprocess-react";
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { createPortal as inject$$createPortal} from "react-dom"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react";
   import Clicker from "./Clicker";
 
-  used(Clicker);
+  const react = sveltify({ Clicker }, { inject$$createPortal, inject$$ReactDOM, inject$$renderToString });
 
   let { value = 0, onCount } = $props<{
     value: number;
     onCount: (count: number) => void;
   }>();
-;const React$Clicker = React$$sveltify(Clicker, { createPortal: React$$createPortal, ReactDOM: React$$ReactDOM, renderToString: React$$renderToString });</script>
+;</script>
 
-<React$Clicker count={value} {onCount}></React$Clicker>
+<react.Clicker count={value} {onCount}></react.Clicker>
 "
 `;
 
diff --git a/src/tests/fixtures/Binding.svelte b/src/tests/fixtures/Binding.svelte
index d86b04e..05343bb 100644
--- a/src/tests/fixtures/Binding.svelte
+++ b/src/tests/fixtures/Binding.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import Clicker from "./Clicker";
-  used(Clicker);
+
+  const react = sveltify({ Clicker });
 
   let count = 1;
 </script>
 
-<react:Clicker bind:count />
+<react.Clicker bind:count />
diff --git a/src/tests/fixtures/Blocks.svelte b/src/tests/fixtures/Blocks.svelte
index 7c218c6..d281d04 100644
--- a/src/tests/fixtures/Blocks.svelte
+++ b/src/tests/fixtures/Blocks.svelte
@@ -1,33 +1,32 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import type React from "react";
 
   const number = 1;
 
   const Component: React.FC = () => null;
-  used(Component);
+  const react = sveltify({ Component });
 </script>
 
 <!-- eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -->
 {#if number === 1}
-  <react:Component></react:Component>
+  <react.Component />
   <!-- eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -->
 {:else if number === 2}
-  <react:Component></react:Component>
+  <react.Component />
 {:else}
-  <react:Component></react:Component>
+  <react.Component />
 {/if}
 
 {#each [] as _}
-  <react:Component></react:Component>
+  <react.Component />
 {:else}
-  <react:Component></react:Component>
+  <react.Component />
 {/each}
 
 {#await Promise.resolve()}
-  <react:Component></react:Component>
+  <react.Component />
 {:then}
-  <react:Component></react:Component>
+  <react.Component />
 {:catch}
-  <react:Component></react:Component>
+  <react.Component />
 {/await}
diff --git a/src/tests/fixtures/Container.svelte b/src/tests/fixtures/Container.svelte
index 99980fe..bffff40 100644
--- a/src/tests/fixtures/Container.svelte
+++ b/src/tests/fixtures/Container.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import Clicker from "./Clicker";
 
-  used(Clicker);
+  const react = sveltify({ Clicker });
 
   let count = 1;
 </script>
 
-<react:Clicker
+<react.Clicker
   {count}
   onCount={(next) => {
     count = next;
   }}
-></react:Clicker>
+></react.Clicker>
diff --git a/src/tests/fixtures/Element.svelte b/src/tests/fixtures/Element.svelte
index cdcc965..0ba5202 100644
--- a/src/tests/fixtures/Element.svelte
+++ b/src/tests/fixtures/Element.svelte
@@ -1,4 +1,4 @@
 <!-- eslint-disable-next-line svelte/valid-compile -->
-<react:button onclick={() => console.info("clicked")}>
+<react.button onclick={() => console.info("clicked")}>
   <slot />
-</react:button>
+</react.button>
diff --git a/src/tests/fixtures/Forwarding.svelte b/src/tests/fixtures/Forwarding.svelte
index 1038c3d..12bbf30 100644
--- a/src/tests/fixtures/Forwarding.svelte
+++ b/src/tests/fixtures/Forwarding.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import Clicker from "./Clicker";
 
-  used(Clicker);
+  const react = sveltify({ Clicker });
 
   let { value = 0, onCount } = $props<{
     value: number;
@@ -10,4 +9,4 @@
   }>();
 </script>
 
-<react:Clicker count={value} {onCount}></react:Clicker>
+<react.Clicker count={value} {onCount}></react.Clicker>
diff --git a/src/tests/fixtures/Multiple.svelte b/src/tests/fixtures/Multiple.svelte
index a7be899..5c68e5f 100644
--- a/src/tests/fixtures/Multiple.svelte
+++ b/src/tests/fixtures/Multiple.svelte
@@ -1,27 +1,26 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import Clicker from "./Clicker";
 
-  used(Clicker);
+  const react = sveltify({ Clicker });
 
   let count = 1;
 </script>
 
 <h2>prop and event</h2>
-<react:Clicker
+<react.Clicker
   {count}
   onCount={(next) => {
     count = next;
   }}
-></react:Clicker>
+></react.Clicker>
 <h2>prop and Prop event</h2>
-<react:Clicker
+<react.Clicker
   count={10}
   onCount={() => {
     console.info("count");
   }}
-></react:Clicker>
+></react.Clicker>
 <h2>prop</h2>
-<react:Clicker {count}></react:Clicker>
+<react.Clicker {count}></react.Clicker>
 <h2>.</h2>
-<react:Clicker></react:Clicker>
+<react.Clicker></react.Clicker>
diff --git a/src/tests/fixtures/NoScript.svelte b/src/tests/fixtures/NoScript.svelte
index 00d1585..0b3e90c 100644
--- a/src/tests/fixtures/NoScript.svelte
+++ b/src/tests/fixtures/NoScript.svelte
@@ -1,2 +1,2 @@
 <!-- Counter could be a global variable -->
-<react:Counter></react:Counter>
+<react.Counter></react.Counter>
diff --git a/src/tests/fixtures/Provider.svelte b/src/tests/fixtures/Provider.svelte
index d2036d4..54ca899 100644
--- a/src/tests/fixtures/Provider.svelte
+++ b/src/tests/fixtures/Provider.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
   import type { Context as ContentType } from "react";
-  import { used } from "svelte-preprocess-react";
 
   export let Context: ContentType<any>;
   $: Provider = Context.Provider;
 
-  used(Provider);
+  const react = sveltify({ Provider });
 </script>
 
-<react:Provider>content</react:Provider>
+<react.Provider>content</react.Provider>
 
-<react:Provider>
+<react.Provider>
   <button>ok</button>
-</react:Provider>
+</react.Provider>
diff --git a/src/tests/fixtures/Slots.svelte b/src/tests/fixtures/Slots.svelte
index 1001915..b3c7187 100644
--- a/src/tests/fixtures/Slots.svelte
+++ b/src/tests/fixtures/Slots.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import Alert from "../../demo/react-components/Alert";
 
-  used(Alert);
+  const react = sveltify(Alert);
 </script>
 
-<react:Alert>A simple primary alert. Check it out!</react:Alert>
+<react.Alert>A simple primary alert. Check it out!</react.Alert>
diff --git a/src/tests/fixtures/SlottedText.svelte b/src/tests/fixtures/SlottedText.svelte
index f9e24a9..9b43b60 100644
--- a/src/tests/fixtures/SlottedText.svelte
+++ b/src/tests/fixtures/SlottedText.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
-  import { used } from "svelte-preprocess-react";
   import Alert from "../../demo/react-components/Alert";
 
-  used(Alert);
+  const react = sveltify({ Alert });
 
   const count = 0;
 </script>
 
-<react:Alert>Static Text</react:Alert>
+<react.Alert>Static Text</react.Alert>
 
-<react:Alert>
+<react.Alert>
   "Multiline content". Lorem ipsum dolor sit amet consectetur adipisicing elit.
   Suscipit nisi atque asperiores.
-</react:Alert>
+</react.Alert>
 
-<react:Alert>Value: {count + 1}</react:Alert>
+<react.Alert>Value: {count + 1}</react.Alert>