fix: Autocorrect bad exports

.prettierignore

@@ -1,4 +1,5 @@
 /.svelte-kit
 /build
 /dist
-/node_modules
+/node_modules
+/pnpm-lock.yaml

package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/bfanger/svelte-preprocess-react.git"
   },
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -43,49 +43,51 @@
     ]
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.45.1",
     "@sveltejs/adapter-static": "^3.0.2",
-    "@sveltejs/kit": "^2.5.17",
+    "@sveltejs/kit": "^2.5.18",
     "@sveltejs/package": "^2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/svelte": "^5.1.0",
-    "@types/node": "^20.14.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/svelte": "^5.2.0",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-triple": "^1.2.1",
+    "eslint-config-triple": "^1.2.4",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-svelte": "^2.40.0",
+    "eslint-plugin-svelte": "^2.42.0",
     "happy-dom": "^14.12.3",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sass": "^1.77.6",
-    "svelte": "5.0.0-next.164",
-    "svelte-check": "^3.8.1",
-    "svelte2tsx": "^0.7.10",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.1",
+    "sass": "^1.77.8",
+    "svelte": "5.0.0-next.183",
+    "svelte-check": "^3.8.4",
+    "svelte2tsx": "^0.7.13",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.2"
   },
   "dependencies": {
-    "magic-string": "^0.30.10"
+    "magic-string": "^0.30.10",
+    "react-youtube": "^10.1.0",
+    "svelte-youtube-lite": "^0.5.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

src/demo/components/Examples.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { renderToString } from "react-dom/server";
   import { createPortal } from "react-dom";
+  import { renderToString } from "react-dom/server";
+  import { sveltify } from "svelte-preprocess-react";
   import ClickerReact from "../../tests/fixtures/Clicker";
-  import CounterReact from "../react-components/Counter";
   import AlertReact from "../react-components/Alert";
-  import { sveltify } from "svelte-preprocess-react";
+  import CounterReact from "../react-components/Counter";
 
   const { ReactDOM } = $props(); // The 'react-dom/client' import for React 18+, 'react-dom' for React 16 & 17
 

src/lib/hooks.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { writable, type Readable } from "svelte/store";
 import type ReactDOMServer from "react-dom/server";
+import * as React from "react";
 import { getContext, onDestroy } from "svelte";
+import { type Readable, writable } from "svelte/store";
 import type { TreeNode } from "./internal/types";
 
 export default function hooks<T>(

src/lib/index.ts

@@ -1,5 +1,5 @@
-export { default as useStore } from "./useStore.js";
+export { default as hooks } from "./hooks.js";
 export { default as reactify } from "./reactify.js";
 export { default as sveltify } from "./sveltify.svelte.js";
 export { default as used } from "./used.js";
-export { default as hooks } from "./hooks.js";
+export { default as useStore } from "./useStore.js";

src/lib/internal/Bridge.svelte.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import SvelteToReactContext from "./SvelteToReactContext.js";
-import Child from "./Child.js";
 import type { TreeNode } from "./types.js";
+import Child from "./Child.js";
+import SvelteToReactContext from "./SvelteToReactContext.js";
 
 export type BridgeProps = {
   node: TreeNode;

src/lib/internal/types.ts

@@ -62,6 +62,6 @@ export type SvelteInit = {
   childrenSource: HTMLElement | undefined; // An element containing the children from Svelte, inject as children into the React component
   svelteChildren: Snippet | undefined; // The svelte children prop (snippet/slot)
   context: Map<any, any>; // The full Svelte context
-  hooks: Array<{ Hook: FunctionComponent; key: number }>;
+  hooks: { Hook: FunctionComponent; key: number }[];
   parent?: TreeNode;
 };

src/lib/preprocessReact.js

@@ -100,12 +100,10 @@ function transform(content, options) {
     renderToString = `, ${prefix}renderToString`;
   }
 
-  const ast = /** @type {import("svelte/compiler").LegacyRoot} */ (
-    parse(content, {
-      filename: options.filename,
-      modern: false,
-    })
-  );
+  const ast = parse(content, {
+    filename: options.filename,
+    modern: false,
+  });
   const s = new MagicString(content, { filename: options.filename });
   const components = replaceReactTags(ast.html, s);
   const aliases = Object.entries(components);

src/lib/react-router/Link.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
+import type { To } from "./types";
 import locationToUrl from "./internal/locationToUrl.js";
 import RouterContext from "./internal/RouterContext.js";
-import type { To } from "./types";
 
 export type LinkProps = Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,

src/lib/react-router/NavLink.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import Link, { type LinkProps } from "./Link.js";
-import useRouterContext from "./internal/useRouterContext.js";
-import locationToUrl from "./internal/locationToUrl.js";
 import type { RouteCondition } from "./types.js";
+import locationToUrl from "./internal/locationToUrl.js";
+import useRouterContext from "./internal/useRouterContext.js";
+import Link, { type LinkProps } from "./Link.js";
 
 export type NavLinkProps = Omit<
   LinkProps,

src/lib/react-router/index.ts

@@ -4,6 +4,6 @@ export * from "./types.js";
 export const RouterProvider = RouterContext.Provider;
 export { default as Link } from "./Link.js";
 export { default as NavLink } from "./NavLink.js";
+export { default as useHistory } from "./useHistory.js";
 export { default as useLocation } from "./useLocation.js";
 export { default as useParams } from "./useParams.js";
-export { default as useHistory } from "./useHistory.js";

src/lib/react-router/useLocation.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import useRouterContext from "./internal/useRouterContext.js";
 import type { Location } from "./types";
+import useRouterContext from "./internal/useRouterContext.js";
 
 export default function useLocation(): Location {
   const {

src/lib/reactify.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { mount, unmount } from "svelte";
 import { render } from "svelte/server";
-import SvelteWrapper from "./internal/SvelteWrapper.svelte";
-import SvelteToReactContext from "./internal/SvelteToReactContext.js";
 import type { SvelteEventHandlers } from "./internal/types";
+import SvelteToReactContext from "./internal/SvelteToReactContext.js";
+import SvelteWrapper from "./internal/SvelteWrapper.svelte";
 
 const server = typeof document === "undefined";
 

src/lib/sveltify.svelte.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
 import type ReactDOMServer from "react-dom/server";
+import * as React from "react";
 import type { SvelteInit, TreeNode } from "./internal/types.js";
-import ReactWrapper from "./internal/ReactWrapper.svelte";
 import Bridge, { type BridgeProps } from "./internal/Bridge.svelte.js";
+import ReactWrapper from "./internal/ReactWrapper.svelte";
 import { setPayload } from "./reactify.js";
 
 let sharedRoot: TreeNode | undefined;
@@ -16,6 +16,15 @@ export default function sveltify<P>(
   ReactDOMClient: any,
   renderToString?: typeof ReactDOMServer.renderToString,
 ): any {
+  if (
+    typeof reactComponent !== "function" &&
+    typeof reactComponent === "object" &&
+    "default" in reactComponent &&
+    typeof (reactComponent as any).default === "function"
+  ) {
+    // Fix SSR import issue where node doesn't import the esm version. 'react-youtube'
+    reactComponent = (reactComponent as any).default; // eslint-disable-line no-param-reassign
+  }
   const client = typeof document !== "undefined";
 
   function Sveltified(anchorOrPayload: any, $$props: any) {
@@ -24,9 +33,9 @@ export default function sveltify<P>(
     $$props.svelteInit = (init: SvelteInit) => {
       if (!init.parent && !sharedRoot) {
         let portalTarget = $state<HTMLElement | undefined>();
-        const hooks = $state<
-          Array<{ Hook: React.FunctionComponent; key: number }>
-        >([]);
+        const hooks = $state<{ Hook: React.FunctionComponent; key: number }[]>(
+          [],
+        );
         const rootNode: TreeNode = {
           key:
             typeof anchorOrPayload.anchor === "undefined"

src/routes/context-react/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import React, { createContext, createElement, useContext } from "react";
+  import type React from "react";
+  import { createContext, createElement, useContext } from "react";
   import { createPortal } from "react-dom";
   import ReactDOM from "react-dom/client";
   import { renderToString } from "react-dom/server";

src/routes/context-svelte/+page.svelte

@@ -3,8 +3,8 @@
   import ReactDOM from "react-dom/client";
   import { renderToString } from "react-dom/server";
   import { setContext } from "svelte";
-  import DebugContext from "../../demo/components/DebugContext.svelte";
   import { reactify, sveltify } from "svelte-preprocess-react";
+  import DebugContext from "../../demo/components/DebugContext.svelte";
 
   setContext("message", "Hello from svelte route");
 

src/routes/hooks/+page.svelte

@@ -2,9 +2,9 @@
   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 { AuthProvider, type Auth } from "./react-auth";
-  import Nested from "./HookWithContext.svelte";
   import { hooks, used } from "svelte-preprocess-react";
+  import Nested from "./HookWithContext.svelte";
+  import { type Auth, AuthProvider } from "./react-auth";
 
   used(AuthProvider);
 

src/routes/hooks/HookWithContext.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { useAuth } from "./react-auth";
   import { hooks } from "svelte-preprocess-react";
+  import { useAuth } from "./react-auth";
 
   const auth = hooks(useAuth);
 </script>

src/routes/lazy/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { lazy } from "react";
-  import { browser } from "$app/environment";
   import { used } from "svelte-preprocess-react";
+  import { browser } from "$app/environment";
 
   const Counter = lazy(() => import("../../demo/react-components/Counter"));
   used(Counter);

src/routes/playwright/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { mount, onMount, unmount } from "svelte";
+  import { sveltify } from "svelte-preprocess-react";
   import type { PageData } from "./$types";
   import StatefulClicker from "./StatefulClicker.svelte";
-  import { sveltify } from "svelte-preprocess-react";
 
   export let data: PageData;
 

src/routes/playwright/StatefulClicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createPortal } from "react-dom";
-  import ClickerReact from "../../tests/fixtures/Clicker";
   import { sveltify } from "svelte-preprocess-react";
+  import ClickerReact from "../../tests/fixtures/Clicker";
 
   type Props = { ReactDOM: any };
   const { ReactDOM }: Props = $props();

src/routes/preprocessor/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Counter from "../../demo/react-components/Counter";
-  import Alert from "../../demo/react-components/Alert";
   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)
 </script>

src/routes/react-router/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import Menu from "./Menu";
+  import { used } from "svelte-preprocess-react";
   import { RouterProvider } from "svelte-preprocess-react/react-router";
-  import { page } from "$app/stores";
   import { goto } from "$app/navigation";
-  import { used } from "svelte-preprocess-react";
+  import { page } from "$app/stores";
+  import Menu from "./Menu";
 
   used(RouterProvider, Menu);
 </script>

src/routes/react-router/[slug]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { page } from "$app/stores";
   import { used } from "svelte-preprocess-react";
   import { Link } from "svelte-preprocess-react/react-router";
+  import { page } from "$app/stores";
 
   used(Link);
 </script>

src/routes/youtube/react/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+  import YouTube from "react-youtube";
+</script>
+
+<react:YouTube videoId="DXQl1G54DJY" opts={{ playerVars: { start: 2569 } }} />

src/routes/youtube/svelte/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+  import { Youtube } from "svelte-youtube-lite";
+  import YouTubeWrapper from "./YouTubeWrapper";
+</script>
+
+<react:YouTubeWrapper id="AdNJ3fydeao" />

src/routes/youtube/svelte/YouTubeWrapper.tsx

@@ -0,0 +1,5 @@
+import { reactify } from "svelte-preprocess-react";
+import { Youtube } from "svelte-youtube-lite";
+
+const YoutubeWrapper = reactify(Youtube);
+export default YoutubeWrapper;

src/tests/__snapshots__/preprocess.spec.ts.snap

@@ -173,8 +173,8 @@ const Component = () => null;
 `;
 
 exports[`svelte-preprocess-react > should process on:event forwarding 1`] = `
-"<script lang="ts">import { sveltify as React$$sveltify } from "svelte-preprocess-react"; 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 Clicker from "./Clicker";
-import { used } from "svelte-preprocess-react";
+"<script lang="ts">import { sveltify as React$$sveltify } from "svelte-preprocess-react"; 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 { used } from "svelte-preprocess-react";
+import Clicker from "./Clicker";
 used(Clicker);
 let { value = 0, onCount } = $props();
 ;const React$Clicker = React$$sveltify(Clicker, React$$createPortal, React$$ReactDOM, React$$renderToString);</script>

src/tests/fixtures/Forwarding.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Clicker from "./Clicker";
   import { used } from "svelte-preprocess-react";
+  import Clicker from "./Clicker";
 
   used(Clicker);
 

src/tests/preprocess.spec.ts

@@ -2,8 +2,8 @@ import { readFile } from "node:fs/promises";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-import { describe, expect, it } from "vitest";
 import { preprocess } from "svelte/compiler";
+import { describe, expect, it } from "vitest";
 import preprocessReact from "../lib/preprocessReact";
 
 describe("svelte-preprocess-react", () => {

src/tests/reactify.spec.ts

@@ -1,6 +1,6 @@
-import { describe, expect, it } from "vitest";
 import * as React from "react";
 import { renderToString } from "react-dom/server";
+import { describe, expect, it } from "vitest";
 import reactify from "../lib/reactify";
 import DogSvelte from "./fixtures/Dog.svelte";