feat: Simplified public api

reactifySvelte -> reactify
sveltifyReact -> sveltify

Readme.md

@@ -1,4 +1,4 @@
-[![svelte-preprocess-react](./docs/svelte-preprocess-react.svg)](https://www.npmjs.com/package/svelte-preprocess-react)
+[![svelte-preprocess-react](./static/svelte-preprocess-react.svg)](https://www.npmjs.com/package/svelte-preprocess-react)
 
 # Svelte Preprocess React
 
@@ -29,14 +29,14 @@ The preprocessor compiles this to:
 
 ```html
 <script>
-  import sveltifyReact from "svelte-preprocess-react/sveltifyReact";
+  import sveltify from "svelte-preprocess-react/sveltify";
   import { createElement } from "react";
   import { createPortal } from "react-dom";
   import ReactDOM from "react-dom/client";
   import { renderToString } from "react-dom/server";
   import MyReactComponent from "./MyReactComponent.jsx";
 
-  const React$MyReactComponent = sveltifyReact(
+  const React$MyReactComponent = sveltify(
     MyReactComponent,
     createElement,
     createPortal,
@@ -77,20 +77,20 @@ export default {
 };
 ```
 
-svelte-preprocess-react is a _markup_ preprocessor, these runs before _script_ preprocessors,
-Passing the other preprocessor as option ensures that this preprocessor runs before the preprocessReact.
+svelte-preprocess-react is a _markup_ preprocessor, these run before the _script_ preprocessors,
+The preprocessor that is passed as an option is applied before running the preprocessReact preprocessor.
 
 ## Using Svelte inside React components
 
 > Extend
 
-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 react component you can use `reactifySvelte` to use the new Svelte component as a React component.
+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.
 
-```ts
-import reactifySvelte from "$lib/reactifySvelte";
+```jsx
+import reactify from "$lib/reactify";
 import ButtonSvelte from "../components/Button.svelte";
 
-const Button = reactifySvelte(ButtonSvelte);
+const Button = reactify(ButtonSvelte);
 
 function MyComponent() {
   return <Button onClick={() => console.log("clicked")}>Click me</Button>;

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/bfanger/svelte-preprocess-react.git"
   },
-  "version": "0.7.1",
+  "version": "0.8.0",
   "license": "MIT",
   "type": "module",
   "scripts": {

playwright/tests/sveltifyReact.spec.ts → playwright/tests/sveltify.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test.use({ viewport: { width: 480, height: 360 } });
-test.describe("sveltifyReact", () => {
+test.describe("sveltify", () => {
   test("props", async ({ page }) => {
     await page.goto("/playwright");
     await expect(page.locator("text=Ready")).toBeVisible();

src/demo/components/Examples.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import sveltifyReact from "$lib/sveltifyReact";
+  import sveltify from "$lib/sveltify";
   import { createElement } from "react";
   import { renderToString } from "react-dom/server";
   import ClickerReact from "../../tests/fixtures/Clicker";
@@ -10,21 +10,21 @@
   let count = 1;
   export let ReactDOM: any; // The 'react-dom/client' import for React 18+, 'react-dom' for React 16 & 17
 
-  const Counter = sveltifyReact(
+  const Counter = sveltify(
     CounterReact,
     createElement,
     createPortal,
     ReactDOM,
     renderToString
   );
-  const Clicker = sveltifyReact(
+  const Clicker = sveltify(
     ClickerReact,
     createElement,
     createPortal,
     ReactDOM,
     renderToString
   );
-  const Alert = sveltifyReact(
+  const Alert = sveltify(
     AlertReact,
     createElement,
     createPortal,

src/demo/react-components/Counter.tsx

@@ -2,10 +2,10 @@
  * A react component using a Svelte Button component
  */
 import * as React from "react";
-import reactifySvelte from "../../lib/reactifySvelte";
+import reactify from "../../lib/reactify";
 import ButtonSvelte from "../components/Button.svelte";
 
-const Button = reactifySvelte(ButtonSvelte);
+const Button = reactify(ButtonSvelte);
 
 type Props = {
   initial?: number;

src/lib/preprocess.ts

@@ -84,7 +84,7 @@ function transform(content: string, options: TransformOptions) {
   const prefix = "React$$";
   let portal: string;
   const imports = [
-    `import ${prefix}sveltify from "svelte-preprocess-react/sveltifyReact"`,
+    `import ${prefix}sveltify from "svelte-preprocess-react/sveltify"`,
     `import { createElement as ${prefix}createElement} from "react"`,
   ];
   if (options.react >= 18) {

src/lib/reactifySvelte.ts → src/lib/reactify.ts

@@ -22,7 +22,7 @@ export type SvelteConstructor<Props = any, Events = any, Slot = any> = {
 /**
  * Convert a Svelte component into a React component.
  */
-export default function reactifySvelte<P = any, E = any>(
+export default function reactify<P = any, E = any>(
   SvelteComponent: SvelteConstructor<P, E>
 ): FunctionComponent<P & SvelteEventHandlers<E>> {
   const { name } = SvelteComponent as any;

src/lib/sveltifyReact.ts → src/lib/sveltify.ts

@@ -25,7 +25,7 @@ type Sveltified<P> = ConstructorOf<SvelteComponentTyped<Omit<P, "children">>>;
 /**
  * Convert a React component into a Svelte component.
  */
-export default function sveltifyReact<P>(
+export default function sveltify<P>(
   reactComponent: FunctionComponent<P> | ComponentClass<P>,
   createElement: BridgeProps["createElement"],
   createPortal: BridgeProps["createPortal"],

src/routes/context-react.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import sveltifyReact from "$lib/sveltifyReact";
-
+  import sveltify from "$lib/sveltify";
   import React, { createContext, createElement, useContext } from "react";
   import { createPortal } from "react-dom";
   import ReactDOM from "react-dom/client";
@@ -11,18 +10,13 @@
     const ctx = useContext(Context);
     return createElement("h1", {}, ctx);
   };
-  const Provider = sveltifyReact(
+  const Provider = sveltify(
     ProviderReact,
     createElement,
     createPortal,
     ReactDOM
   );
-  const Child = sveltifyReact(
-    ChildReact,
-    createElement,
-    createPortal,
-    ReactDOM
-  );
+  const Child = sveltify(ChildReact, createElement, createPortal, ReactDOM);
 </script>
 
 <Provider value="Hello from react context provider">

src/routes/context-svelte.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import reactifySvelte from "$lib/reactifySvelte";
-  import sveltifyReact from "$lib/sveltifyReact";
+  import reactify from "$lib/reactify";
+  import sveltify from "$lib/sveltify";
   import { createElement } from "react";
   import { createPortal } from "react-dom";
   import ReactDOM from "react-dom/client";
@@ -9,8 +9,8 @@
 
   setContext("message", "Hello from svelte route");
 
-  const DebugContextReact = reactifySvelte(DebugContext);
-  const DebugContextReactSvelte = sveltifyReact(
+  const DebugContextReact = reactify(DebugContext);
+  const DebugContextReactSvelte = sveltify(
     DebugContextReact,
     createElement,
     createPortal,

src/routes/index.svelte

@@ -1,3 +1,7 @@
+<img
+  src="/svelte-preprocess-react.svg"
+  alt="Svelte logo in react colors and the React logo in svelte colors"
+/>
 <ul>
   <li><a href="/preprocessor">via preprocessor</a></li>
   <li><a href="/sveltify-react">via sveltifyReact</a></li>

src/routes/mini.svelte

@@ -1,19 +1,14 @@
 <script lang="ts">
-  import sveltifyReact from "$lib/sveltifyReact";
+  import sveltify from "$lib/sveltify";
 
   import { createElement } from "react";
   import { createPortal } from "react-dom";
   import ReactDOM from "react-dom/client";
 
   function HelloWord() {
-    return createElement("div", {}, "Hello world");
+    return createElement("div", null, "Hello world");
   }
-  const Component = sveltifyReact(
-    HelloWord,
-    createElement,
-    createPortal,
-    ReactDOM
-  );
+  const Component = sveltify(HelloWord, createElement, createPortal, ReactDOM);
 </script>
 
 <Component />

src/routes/playwright.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <script lang="ts">
-  import sveltifyReact from "$lib/sveltifyReact";
+  import sveltify from "$lib/sveltify";
 
   import { onMount } from "svelte";
   import ClickerReact from "../tests/fixtures/Clicker";
@@ -34,16 +34,11 @@
   let loading = true;
   onMount(() => {
     const win: any = window;
-    win.sveltifyReact = sveltifyReact;
+    win.sveltify = sveltify;
     win.createElement = createElement;
     win.ReactDOM = ReactDOM;
     win.ClickerReact = ClickerReact;
-    win.Clicker = sveltifyReact(
-      ClickerReact,
-      createElement,
-      createPortal,
-      ReactDOM
-    );
+    win.Clicker = sveltify(ClickerReact, createElement, createPortal, ReactDOM);
 
     loading = false;
   });