fix: React isn't ESM, changed imports for compatibility

Bob Fanger · Bob Fanger · commit 2d3518c48bed · 2022-10-21T15:51:40.000+02:00
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/bfanger/svelte-preprocess-react.git"
   },
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -68,7 +68,6 @@
     "eslint-plugin-only-warn": "^1.0.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-svelte3": "^4.0.0",
-    "happy-dom": "^6.0.4",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "postcss": "^8.4.16",
@@ -84,7 +83,7 @@
     "typescript": "^4.7.4",
     "vite": "^3.0.6",
     "vite-tsconfig-paths": "^3.5.0",
-    "vitest": "^0.23.2"
+    "vitest": "^0.24.3"
   },
   "dependencies": {
     "magic-string": "^0.26.2"
diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
@@ -1,4 +1,4 @@
-import React, { createElement } from "react";
+import * as React from "react";
 import { writable, type Readable } from "svelte/store";
 import type ReactDOMServer from "react-dom/server";
 import { getContext, onDestroy } from "svelte";
@@ -42,15 +42,15 @@ function standalone(
     if (!renderToString) {
       throw new Error("renderToString parameter is required for SSR");
     }
-    renderToString(createElement(Hook));
+    renderToString(React.createElement(Hook));
     return () => {};
   }
   const el = document.createElement("react-hooks");
   const root = ReactDOMClient.createRoot?.(el);
   if (root) {
-    root.render(createElement(Hook));
+    root.render(React.createElement(Hook));
   } else {
-    ReactDOMClient.render(createElement(Hook), el);
+    ReactDOMClient.render(React.createElement(Hook), el);
   }
   return () => {
     if (root) {
diff --git a/src/lib/internal/Bridge.ts b/src/lib/internal/Bridge.ts
@@ -1,5 +1,4 @@
-import type React from "react";
-import { createElement } from "react";
+import * as React from "react";
 import useStore from "../useStore.js";
 import SvelteToReactContext from "./SvelteToReactContext.js";
 import Child from "./Child.js";
@@ -23,7 +22,7 @@ const Bridge: React.FC<BridgeProps> = ({ createPortal, node }) => {
     return null;
   }
   const children: React.ReactElement[] = node.nodes.map((subnode) => {
-    return createElement(Bridge, {
+    return React.createElement(Bridge, {
       key: subnode.key,
       createPortal,
       node: subnode,
@@ -35,18 +34,18 @@ const Bridge: React.FC<BridgeProps> = ({ createPortal, node }) => {
     delete props.children;
   }
   if (slot) {
-    children.push(createElement(Child, { key: "svelte-slot", el: slot }));
+    children.push(React.createElement(Child, { key: "svelte-slot", el: slot }));
   }
   if (hooks.length >= 0) {
     children.push(
-      ...hooks.map(({ Hook, key }) => createElement(Hook, { key }))
+      ...hooks.map(({ Hook, key }) => React.createElement(Hook, { key }))
     );
   }
   return createPortal(
-    createElement(
+    React.createElement(
       SvelteToReactContext.Provider,
       { value: node.svelteInstance },
-      createElement(node.reactComponent, props, children)
+      React.createElement(node.reactComponent, props, children)
     ),
     target
   );
diff --git a/src/lib/internal/Child.ts b/src/lib/internal/Child.ts
@@ -1,11 +1,11 @@
-import { useRef, useEffect, createElement, type FC } from "react";
+import * as React from "react";
 
 type Props = {
   el: HTMLElement | undefined;
 };
-const Child: FC<Props> = ({ el }) => {
-  const ref = useRef<HTMLElement>();
-  useEffect(() => {
+const Child: React.FC<Props> = ({ el }) => {
+  const ref = React.useRef<HTMLElement>();
+  React.useEffect(() => {
     if (!ref.current) {
       return;
     }
@@ -15,7 +15,7 @@ const Child: FC<Props> = ({ el }) => {
       ref.current.appendChild(el);
     }
   }, [ref, el]);
-  return createElement("react-child", {
+  return React.createElement("react-child", {
     ref,
     style: { display: "contents" },
   });
diff --git a/src/lib/internal/ReactWrapper.svelte b/src/lib/internal/ReactWrapper.svelte
@@ -2,14 +2,14 @@
   import { writable } from "svelte/store";
   import { beforeUpdate, getContext, onDestroy, setContext } from "svelte";
   import type { SvelteInit, TreeNode } from "./types";
-  import type React from "react";
+  import type { FunctionComponent } from "react";
 
   export let svelteInit: (options: SvelteInit) => TreeNode;
 
   const props = writable<Record<string, any>>(extractProps($$props));
   const target = writable<HTMLElement | undefined>();
   const slot = writable<HTMLElement | undefined>();
-  const hooks = writable<Array<{ Hook: React.FC; key: number }>>([]);
+  const hooks = writable<Array<{ Hook: FunctionComponent; key: number }>>([]);
   const listeners: Array<() => void> = [];
 
   const parent = getContext<TreeNode | undefined>("ReactWrapper");
diff --git a/src/lib/internal/SvelteToReactContext.ts b/src/lib/internal/SvelteToReactContext.ts
@@ -1,5 +1,5 @@
-import { createContext } from "react";
+import * as React from "react";
 
-const SvelteToReactContext = createContext(undefined as any);
+const SvelteToReactContext = React.createContext(undefined as any);
 SvelteToReactContext.displayName = "SvelteToReactContext";
 export default SvelteToReactContext;
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
@@ -1,4 +1,3 @@
-import type React from "react";
 import type { ComponentClass, FunctionComponent } from "react";
 import type { Readable, Writable } from "svelte/store";
 
@@ -55,7 +54,7 @@ export type TreeNode = Omit<SvelteInit, "onDestroy"> & {
   svelteInstance: Readable<any>;
   reactComponent: FunctionComponent<any> | ComponentClass<any>;
   key: number;
-  hooks: Writable<Array<{ Hook: React.FC; key: number }>>;
+  hooks: Writable<Array<{ Hook: FunctionComponent; key: number }>>;
   nodes: TreeNode[];
 };
 
@@ -64,6 +63,6 @@ export type SvelteInit = {
   props: Readable<Record<string, any>>;
   target: Readable<HTMLElement | undefined>;
   slot: Readable<HTMLElement | undefined>;
-  hooks: Writable<Array<{ Hook: React.FC; key: number }>>;
+  hooks: Writable<Array<{ Hook: FunctionComponent; key: number }>>;
   onDestroy: (callback: () => void) => void;
 };
diff --git a/src/lib/preprocessReact.ts b/src/lib/preprocessReact.ts
@@ -167,7 +167,7 @@ function replaceReactTags(
       }
     }
     tag.attributes.forEach((attr) => {
-      if (attr.type === "EventHandler") {
+      if (attr.type === "EventHandler" && attr.expression !== null) {
         const event = attr as Transition;
         if (event.modifiers.length > 0) {
           throw new Error(
diff --git a/src/lib/reactify.ts b/src/lib/reactify.ts
@@ -1,11 +1,4 @@
-import {
-  createElement,
-  useContext,
-  useEffect,
-  useRef,
-  type ReactNode,
-} from "react";
-import type { FunctionComponent } from "react";
+import * as React from "react";
 import { get, type Readable } from "svelte/store";
 import SvelteWrapper from "./internal/SvelteWrapper.svelte";
 import SvelteToReactContext from "./internal/SvelteToReactContext.js";
@@ -24,23 +17,23 @@ export type SvelteConstructor<Props = any, Events = any, Slot = any> = {
  */
 export default function reactify<P = any, E = any>(
   SvelteComponent: SvelteConstructor<P, E>
-): FunctionComponent<P & SvelteEventHandlers<E>> {
+): React.FunctionComponent<P & SvelteEventHandlers<E>> {
   const { name } = SvelteComponent as any;
   const named = {
     [name](options: any) {
       const { children } = options;
       const props = extractProps(options);
       const events = extractListeners(options);
 
-      const wrapperRef = useRef<HTMLElement>();
-      const svelteRef = useRef<SvelteWrapper>();
-      const slotRef = useRef<HTMLElement>();
-      const childrenRef = useRef<HTMLElement>();
+      const wrapperRef = React.useRef<HTMLElement>();
+      const svelteRef = React.useRef<SvelteWrapper>();
+      const slotRef = React.useRef<HTMLElement>();
+      const childrenRef = React.useRef<HTMLElement>();
 
-      const context = useContext(SvelteToReactContext);
+      const context = React.useContext(SvelteToReactContext);
 
       // Mount Svelte component
-      useEffect(() => {
+      React.useEffect(() => {
         const target = wrapperRef.current;
         if (!target) {
           return undefined;
@@ -71,14 +64,14 @@ export default function reactify<P = any, E = any>(
       }, [wrapperRef]);
 
       // Sync props & events
-      useEffect(() => {
+      React.useEffect(() => {
         if (svelteRef.current) {
           svelteRef.current.$set({ props, events });
         }
       }, [props, svelteRef]);
 
       // Sync children/slot
-      useEffect(() => {
+      React.useEffect(() => {
         if (childrenRef.current) {
           if (
             slotRef.current &&
@@ -101,22 +94,22 @@ export default function reactify<P = any, E = any>(
           context: extractSvelteContext(context),
           $$slots,
         });
-        return createElement("svelte-wrapper", {
+        return React.createElement("svelte-wrapper", {
           style: {
             display: "contents",
           },
           dangerouslySetInnerHTML: { __html: result.html },
         });
       }
 
-      return createElement(
+      return React.createElement(
         "svelte-wrapper",
         {
           ref: wrapperRef,
           style: { display: "contents" },
         },
         children
-          ? createElement(
+          ? React.createElement(
               "react-children",
               {
                 ref: childrenRef,
@@ -164,7 +157,7 @@ function extractSvelteContext(reactContext: Readable<any> | undefined) {
 }
 
 function detectChildren(
-  children: ReactNode | ReactNode[] | undefined
+  children: React.ReactNode | React.ReactNode[] | undefined
 ): boolean {
   if (children === undefined) {
     return false;
diff --git a/src/lib/sveltify.ts b/src/lib/sveltify.ts
@@ -1,5 +1,4 @@
-import { createElement } from "react";
-import type { ComponentClass, FunctionComponent } from "react";
+import * as React from "react";
 import type { SvelteComponentTyped } from "svelte/internal";
 import type ReactDOMServer from "react-dom/server";
 import { writable, type Readable } from "svelte/store";
@@ -32,7 +31,7 @@ declare type Sveltified<P extends Record<string, any>> = new (args: {
  * Convert a React component into a Svelte component.
  */
 export default function sveltify<P>(
-  reactComponent: FunctionComponent<P> | ComponentClass<P>,
+  reactComponent: React.FunctionComponent<P> | React.ComponentClass<P>,
   createPortal: BridgeProps["createPortal"],
   ReactDOMClient: any,
   renderToString?: typeof ReactDOMServer.renderToString
@@ -55,14 +54,17 @@ export default function sveltify<P>(
         }
         const html = $$render.call(Slot, result, {}, bindings, slots, context);
         const vdom = html
-          ? createElement(
-              reactComponent as FunctionComponent,
+          ? React.createElement(
+              reactComponent as React.FunctionComponent,
               props,
-              createElement("svelte-slot", {
+              React.createElement("svelte-slot", {
                 dangerouslySetInnerHTML: { __html: html },
               })
             )
-          : createElement(reactComponent as FunctionComponent, props);
+          : React.createElement(
+              reactComponent as React.FunctionComponent,
+              props
+            );
         return renderToString(vdom);
       },
     } as any;
@@ -76,11 +78,11 @@ export default function sveltify<P>(
     document.head.appendChild(targetEl);
     if (root) {
       rerender = (props: BridgeProps) => {
-        root.render(createElement(Bridge, props));
+        root.render(React.createElement(Bridge, props));
       };
     } else {
       rerender = (props: BridgeProps) => {
-        ReactDOMClient.render(createElement(Bridge, props), rootEl);
+        ReactDOMClient.render(React.createElement(Bridge, props), rootEl);
       };
     }
   }
diff --git a/src/lib/useStore.ts b/src/lib/useStore.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import * as React from "react";
 import { get, type Readable } from "svelte/store";
 
 /**
@@ -12,8 +12,8 @@ import { get, type Readable } from "svelte/store";
  * }
  */
 export default function useStore<T>(store: Readable<T>): T {
-  const [value, setValue] = useState(() => get(store));
-  useEffect(() => {
+  const [value, setValue] = React.useState(() => get(store));
+  React.useEffect(() => {
     let first = true;
     const cancel = store.subscribe((next) => {
       if (first) {
diff --git a/src/routes/api/react-version.json/+server.ts b/src/routes/api/react-version.json/+server.ts
@@ -1,5 +1,5 @@
-import detectReactVersion from "$lib/internal/detectReactVersion";
 import type { RequestHandler } from "@sveltejs/kit";
+import detectReactVersion from "$lib/internal/detectReactVersion";
 
 export const GET: RequestHandler = async () => {
   return new Response(`${await detectReactVersion()}`, {
diff --git a/src/routes/sveltify-react/+server.ts b/src/routes/sveltify-react/+server.ts
@@ -1,5 +1,5 @@
-import detectReactVersion from "$lib/internal/detectReactVersion";
 import { redirect, type RequestHandler } from "@sveltejs/kit";
+import detectReactVersion from "$lib/internal/detectReactVersion";
 
 export const GET: RequestHandler = async () => {
   const version = await detectReactVersion();
diff --git a/src/tests/__snapshots__/preprocess.spec.ts.snap b/src/tests/__snapshots__/preprocess.spec.ts.snap
@@ -139,7 +139,7 @@ import React$$sveltify from \\"svelte-preprocess-react/sveltify\\"; import React
 const React$button = React$$sveltify(\\"button\\", React$$createPortal, React$$ReactDOM, React$$renderToString);
 </script>
 
-<React$button onClick={() => console.info(\\"clicked\\")}>
+<React$button onClick={() => console.info(\\"clicked\\")} on:keydown>
   <slot />
 </React$button>
 "
diff --git a/src/tests/fixtures/Element.svelte b/src/tests/fixtures/Element.svelte
@@ -1,3 +1,3 @@
-<react:button on:click={() => console.info("clicked")}>
+<react:button on:click={() => console.info("clicked")} on:keydown>
   <slot />
 </react:button>
diff --git a/src/tests/preprocess.spec.ts b/src/tests/preprocess.spec.ts
@@ -1,8 +1,8 @@
+import { readFile } from "fs/promises";
+import { dirname, resolve } from "path";
 import { describe, expect, it } from "vitest";
 import { preprocess } from "svelte/compiler";
 import sveltePreprocess from "svelte-preprocess";
-import { readFile } from "fs/promises";
-import { dirname, resolve } from "path";
 import preprocessReact from "../lib/preprocessReact";
 
 describe("svelte-preprocess-react", () => {
diff --git a/src/tests/reactify.spec.tsx b/src/tests/reactify.spec.tsx
@@ -6,10 +6,10 @@ import DogSvelte from "./fixtures/Dog.svelte";
 
 describe("reactify", () => {
   const Dog = reactify(DogSvelte);
-  type ReactProps = React.ComponentProps<typeof Dog>;
+  type ReactProps = React.ComponentProps<typeof Dog>; // in a tsx file, the resulting type is "any"  :-(
   it("renders a svelte-wrapper", () => {
     const props: ReactProps = { name: "Fido", onBark() {} };
-    const html = renderToString(<Dog/>);
+    const html = renderToString(<Dog />);
     expect(html).toMatchInlineSnapshot(
       '"<svelte-wrapper style=\\"display:contents\\"></svelte-wrapper>"'
     );
diff --git a/vite.config.ts b/vite.config.ts
@@ -9,7 +9,6 @@ const config: UserConfig = {
     fs: { allow: ["package"] },
   },
   test: {
-    environment: "happy-dom",
     exclude: [...configDefaults.exclude, "package", "playwright"],
   },
   resolve: {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -167,7 +167,7 @@ function replaceReactTags(`
`167`	`167`	`}`
`168`	`168`	`}`
`169`	`169`	`tag.attributes.forEach((attr) => {`
`170`		`- if (attr.type === "EventHandler") {`
	`170`	`+ if (attr.type === "EventHandler" && attr.expression !== null) {`
`171`	`171`	`const event = attr as Transition;`
`172`	`172`	`if (event.modifiers.length > 0) {`
`173`	`173`	`throw new Error(`