chore: Added sveltifyReact tests

.gitignore

@@ -7,3 +7,6 @@ node_modules
 /storybook-static
 /test-results
 .env
+/test-results/
+/playwright-report/
+/playwright/.cache/

package.json

@@ -16,7 +16,9 @@
     "lint:eslint": "eslint --ext=js,ts,svelte --max-warnings=0 src",
     "format": "prettier --write . && eslint --ext=js,ts,svelte --fix src",
     "prepare": "husky install",
-    "test": "vitest run --passWithNoTests",
+    "test": "concurrently -c \"#fcc72a\",\"#45ba4b\" --kill-others-on-fail \"npm:test:*\"",
+    "test:vitest": "vitest run",
+    "test:playwright": "playwright test",
     "vitest": "vitest watch"
   },
   "prettier": "eslint-config-triple/.prettierrc",
@@ -35,6 +37,7 @@
     ]
   },
   "devDependencies": {
+    "@playwright/test": "^1.22.2",
     "@sveltejs/adapter-static": "next",
     "@sveltejs/kit": "next",
     "@testing-library/svelte": "^3.1.0",
@@ -76,7 +79,7 @@
     "magic-string": "^0.26.2"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   }
 }

playwright.config.ts

@@ -0,0 +1,28 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+const baseURL = "http://localhost:3000";
+const nodeVersion = parseInt(process.version.match(/v([0-9]+)\./)[1], 10);
+// https://github.com/nodejs/node/issues/40702
+const webServer =
+  nodeVersion >= 17
+    ? undefined
+    : {
+        command: "npm run dev",
+        url: baseURL,
+        reuseExistingServer: true,
+      };
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./playwright/tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  use: {
+    baseURL,
+    trace: "retain-on-failure",
+  },
+  webServer,
+};
+
+export default config;

playwright/tests/sveltifyReact.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+
+test.use({ viewport: { width: 480, height: 360 } });
+test.beforeEach(async ({ page }) => {
+  await page.goto("/playwright");
+  await expect(page.locator("text=Ready")).toBeVisible();
+});
+test.describe("sveltifyReact", () => {
+  test("props", async ({ page }) => {
+    await page.evaluate(function mount() {
+      const win = window as any;
+      const target = document.getElementById("playground");
+      win.app = new win.Clicker({
+        target,
+        props: {
+          count: 123,
+          onCount(count) {
+            win.app.$set({ count });
+          },
+        },
+      });
+    });
+    const message = page.locator('[data-testid="message"]');
+    await expect(message).toContainText("You clicked 123 times");
+    await page.click("text=+");
+    await expect(message).toContainText("You clicked 124 times");
+    await page.evaluate("app.$set({ count: 200 })");
+    await expect(message).toContainText("You clicked 200 times");
+  });
+});

src/lib/internal/React18Wrapper.svelte

@@ -1,38 +1,38 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { afterUpdate } from "svelte";
   import React, { createElement } from "react";
   import { createRoot, type Root } from "react-dom/client";
   import { renderToString } from "react-dom/server";
 
-  export let ReactComponent: React.FC;
+  export let ReactComponent: React.FunctionComponent | React.ComponentClass;
 
   const html = ReactComponent
     ? renderToString(createElement(ReactComponent, $$props))
     : "";
 
-  let el: Element;
   let root: Root | undefined;
 
-  $: if (root && $$props) {
-    rerender();
+  function reactRoot(el: Element) {
+    const app = createRoot(el);
+    root = app;
+    return {
+      destroy() {
+        app.unmount();
+      },
+    };
   }
 
-  onMount(() => {
-    root = createRoot(el);
-    rerender();
-    return () => {
-      root?.unmount();
-    };
-  });
-  function rerender() {
+  afterUpdate(() => {
     if (!root) {
       return;
     }
-    root.render(createElement(ReactComponent, $$props));
-  }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { ReactComponent: _, ...props } = $$props;
+    root.render(createElement(ReactComponent, props));
+  });
 </script>
 
-<react-wrapper bind:this={el}>{@html html}</react-wrapper>
+<react-wrapper use:reactRoot>{@html html}</react-wrapper>
 
 <style>
   react-wrapper {

src/routes/api/react-version.json.ts

@@ -0,0 +1,9 @@
+import detectReactVersion from "$lib/internal/detectReactVersion";
+import type { RequestHandler } from "@sveltejs/kit";
+
+// eslint-disable-next-line import/prefer-default-export
+export const get: RequestHandler = async () => {
+  return {
+    body: await detectReactVersion(),
+  };
+};

src/routes/playwright.svelte

@@ -0,0 +1,72 @@
+<script lang="ts" context="module">
+  /**
+   * This page exposes variables on the window object that can be used by the Playwright tests.
+   */
+
+  import type { Load } from "@sveltejs/kit";
+
+  export const load: Load = async ({ fetch }) => {
+    const reactVersion = await (await fetch("/api/react-version.json")).json();
+    const sveltifyReactModule =
+      reactVersion <= 17
+        ? () => import("$lib/sveltifyReact17")
+        : () => import("$lib/sveltifyReact18");
+    return {
+      props: {
+        reactVersion,
+        sveltifyReact: (await sveltifyReactModule()).default,
+      },
+    };
+  };
+</script>
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import ClickerReact from "../tests/fixtures/Clicker";
+
+  export let reactVersion: number;
+  export let sveltifyReact: any;
+
+  let loading = true;
+  onMount(() => {
+    const win: any = window;
+    win.sveltifyReact = sveltifyReact;
+    win.ClickerReact = ClickerReact;
+    win.Clicker = sveltifyReact(ClickerReact);
+
+    loading = false;
+  });
+</script>
+
+<div class="ui">
+  <p>Using React {reactVersion}</p>
+  {#if loading}
+    <h1 class="loading">Loading...</h1>
+  {:else}
+    <h1>Ready</h1>
+  {/if}
+</div>
+
+<div id="playground" />
+
+<style lang="scss">
+  .ui {
+    text-align: center;
+    margin: 10px;
+  }
+  p {
+    font: 14px sans-serif;
+    color: #585866;
+    margin: 0;
+  }
+
+  h1 {
+    font: 20px sans-serif;
+    margin: 0;
+    color: #416c28;
+    letter-spacing: 0.1em;
+    &.loading {
+      color: #686b94;
+    }
+  }
+</style>

src/routes/sveltify-react18.svelte

@@ -1,9 +1,18 @@
 <script lang="ts">
   import sveltifyReact18 from "$lib/sveltifyReact18";
+  import ClickerReact from "../tests/fixtures/Clicker";
+  import CounterReact from "../demo/react-components/Counter";
 
-  import Counter from "../demo/react-components/Counter";
-
-  const ReactCounter = sveltifyReact18(Counter);
+  let count = 1;
+  const Counter = sveltifyReact18(CounterReact);
+  const Clicker = sveltifyReact18(ClickerReact);
 </script>
 
-<ReactCounter initial={10} onCount={console.info} />
+<Counter initial={10} onCount={console.info} />
+
+<Clicker
+  {count}
+  onCount={() => {
+    count = Math.random();
+  }}
+/>

yarn.lock

@@ -103,6 +103,14 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playwright/test@^1.22.2":
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.22.2.tgz#b848f25f8918140c2d0bae8e9227a40198f2dd4a"
+  integrity sha512-cCl96BEBGPtptFz7C2FOSN3PrTnJ3rPpENe+gYCMx4GNNDlN4tmo2D89y13feGKTMMAIVrXfSQ/UmaQKLy1XLA==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.22.2"
+
 "@rollup/pluginutils@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
@@ -2292,6 +2300,11 @@ pidtree@^0.6.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
   integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
 
+[email protected]:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.22.2.tgz#ed2963d79d71c2a18d5a6fd25b60b9f0a344661a"
+  integrity sha512-w/hc/Ld0RM4pmsNeE6aL/fPNWw8BWit2tg+TfqJ3+p59c6s3B6C8mXvXrIPmfQEobkcFDc+4KirNzOQ+uBSP1Q==
+
 postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"