diff --git a/package.json b/package.json index 5c639ba..dc640f8 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "type": "git", "url": "https://github.com/bfanger/svelte-preprocess-react.git" }, - "version": "0.10.0", + "version": "0.11.0", "license": "MIT", "type": "module", "scripts": { diff --git a/playwright/tests/hooks.spec.ts b/playwright/tests/hooks.spec.ts index 255ea7c..32b9565 100644 --- a/playwright/tests/hooks.spec.ts +++ b/playwright/tests/hooks.spec.ts @@ -3,7 +3,7 @@ import { test, expect } from "@playwright/test"; test.use({ viewport: { width: 480, height: 360 } }); test.describe("hooks", () => { test("counter", async ({ page }) => { - await page.goto("/hooks"); + await page.goto("/hooks", { waitUntil: "networkidle" }); await expect(page.locator('[data-testid="count"]')).toHaveText("0"); await page.locator('[data-testid="add"]').click(); await expect(page.locator('[data-testid="count"]')).toHaveText("1"); diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts index cf96aed..cda06f4 100644 --- a/src/lib/internal/types.ts +++ b/src/lib/internal/types.ts @@ -2,10 +2,6 @@ import type React from "react"; import type { ComponentClass, FunctionComponent } from "react"; import type { Readable, Writable } from "svelte/store"; -export type ConstructorOf = { - new (): T; -}; - export type HandlerName = `on${Capitalize}`; export type EventName = T extends `on${infer N}` ? Uncapitalize diff --git a/src/lib/preprocessReact.ts b/src/lib/preprocessReact.ts index c58cd80..ee8d4a9 100644 --- a/src/lib/preprocessReact.ts +++ b/src/lib/preprocessReact.ts @@ -125,7 +125,7 @@ function transform(content: string, options: TransformOptions) { .join(";"); if (!script) { - s.prepend(`\n\n`); + s.prepend(`\n\n`); } else { s.appendRight(script.content.end, wrappers); s.appendRight(script.content.start, `${imports.join("; ")}; `); @@ -160,7 +160,11 @@ function replaceReactTags( ); } if (!components[alias]) { - components[alias] = componentExpression; + if (componentExpression.match(/^[a-z-]+$/)) { + components[alias] = `"${componentExpression}"`; + } else { + components[alias] = componentExpression; + } } tag.attributes.forEach((attr) => { if (attr.type === "EventHandler") { diff --git a/src/lib/sveltify.ts b/src/lib/sveltify.ts index 46a2bfc..0ac8d57 100644 --- a/src/lib/sveltify.ts +++ b/src/lib/sveltify.ts @@ -3,7 +3,7 @@ import type { ComponentClass, FunctionComponent } from "react"; import type { SvelteComponentTyped } from "svelte/internal"; import type ReactDOMServer from "react-dom/server"; import { writable, type Readable } from "svelte/store"; -import type { ConstructorOf, SvelteInit, TreeNode } from "./internal/types"; +import type { SvelteInit, TreeNode } from "./internal/types"; import ReactWrapper from "./internal/ReactWrapper.svelte"; import Slot from "./internal/Slot.svelte"; import Bridge, { type BridgeProps } from "./internal/Bridge.js"; @@ -23,7 +23,11 @@ const tree: TreeNode = { hooks: writable([]), }; -type Sveltified

= ConstructorOf>>; +declare type Sveltified

> = new (args: { + target: any; + props?: P; +}) => SvelteComponentTyped

; + /** * Convert a React component into a Svelte component. */ @@ -32,7 +36,7 @@ export default function sveltify

( createPortal: BridgeProps["createPortal"], ReactDOMClient: any, renderToString?: typeof ReactDOMServer.renderToString -): Sveltified

{ +): Sveltified> { const Wrapper = ReactWrapper as any; const ssr = typeof Wrapper.$$render === "function"; if (ssr) { diff --git a/src/routes/preprocessor/+page.svelte b/src/routes/preprocessor/+page.svelte index 0284d1f..794c3ae 100644 --- a/src/routes/preprocessor/+page.svelte +++ b/src/routes/preprocessor/+page.svelte @@ -17,3 +17,4 @@ "Multiline content". {10 ** 4} Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nisi atque asperiores. +a div diff --git a/src/tests/__snapshots__/preprocess.spec.ts.snap b/src/tests/__snapshots__/preprocess.spec.ts.snap index f5b811c..d44d3ea 100644 --- a/src/tests/__snapshots__/preprocess.spec.ts.snap +++ b/src/tests/__snapshots__/preprocess.spec.ts.snap @@ -32,7 +32,7 @@ const React$Clicker = React$$sveltify(Clicker, React$$createPortal, React$$React exports[`svelte-preprocess-react > should inject a script tag 1`] = ` " @@ -132,6 +132,19 @@ const React$Clicker = React$$sveltify(Clicker, React$$createPortal, React$$React " `; +exports[`svelte-preprocess-react > should process (lowercase) tags 1`] = ` +" + + console.info(\\"clicked\\")}> + + +" +`; + exports[`svelte-preprocess-react > should support typescript when using preprocess 1`] = ` " diff --git a/src/tests/fixtures/Element.svelte b/src/tests/fixtures/Element.svelte new file mode 100644 index 0000000..f38a009 --- /dev/null +++ b/src/tests/fixtures/Element.svelte @@ -0,0 +1,3 @@ + console.info("clicked")}> + + diff --git a/src/tests/preprocess.spec.ts b/src/tests/preprocess.spec.ts index 6708cc6..24797bb 100644 --- a/src/tests/preprocess.spec.ts +++ b/src/tests/preprocess.spec.ts @@ -103,6 +103,12 @@ describe("svelte-preprocess-react", () => { ); expect(output.code).toMatchSnapshot(); }); + it("should process (lowercase) tags", async () => { + const filename = resolveFilename("./fixtures/Element.svelte"); + const src = await readFile(filename, "utf8"); + const output = await preprocess(src, preprocessReact(), { filename }); + expect(output.code).toMatchSnapshot(); + }); }); const base = dirname(import.meta.url).replace("file://", "");