fix: Add support for trailing comma's in in sveltify() & improved detection of intrinsic elements.

Fixes #51

Author: bfanger

package.json

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

src/lib/preprocessReact.js

@@ -150,12 +150,28 @@ function transform(content, options) {
               }
             }
           }
+
           if ("end" in componentsArg && typeof componentsArg.end === "number") {
+            let tailingComma = false;
+            const lastProp = componentsArg.properties.at(-1);
+            if (
+              lastProp &&
+              "end" in lastProp &&
+              typeof lastProp.end === "number"
+            ) {
+              tailingComma = s
+                .slice(lastProp.end, componentsArg.end - 1)
+                .includes(",");
+            }
             for (const [alias, { expression }] of aliases) {
               if (!aliased.has(alias)) {
+                if (!tailingComma) {
+                  s.appendRight(componentsArg.end - 1, ", ");
+                  tailingComma = true;
+                }
                 s.appendRight(
                   componentsArg.end - 1,
-                  `, ${alias}: ${expression === expression.toLowerCase() ? JSON.stringify(expression) : expression} `,
+                  `${alias}: ${expression.substring(0, 1) === expression.substring(0, 1).toLowerCase() ? JSON.stringify(expression) : expression}, `,
                 );
               }
             }

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

@@ -17,6 +17,20 @@ exports[`svelte-preprocess-react > should convert text content to react children
 "
 `;
 
+exports[`svelte-preprocess-react > should detect tailing comma when adding aliases 1`] = `
+"<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react"; import { createPortal as inject$$createPortal } from "react-dom";
+  const react = sveltify({
+    section: "section",
+  h1: "h1", p: "p", }, { ReactDOM: inject$$ReactDOM, createPortal: inject$$createPortal, renderToString: inject$$renderToString });
+;</script>
+
+<react.section>
+  <react.h1 react$children="Title" />
+  <react.p react$children="Description" />
+</react.section>
+"
+`;
+
 exports[`svelte-preprocess-react > should import 'react-dom/server' when ssr is enabled 1`] = `
 "<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react"; import { createPortal as inject$$createPortal } from "react-dom";
   import Clicker from "./Clicker";
@@ -80,7 +94,7 @@ exports[`svelte-preprocess-react > should process <react.Component.Item> tags 1`
 "<script lang="ts">import inject$$ReactDOM from "react-dom/client"; import { renderToString as inject$$renderToString } from "react-dom/server"; import { sveltify } from "svelte-preprocess-react"; import { createPortal as inject$$createPortal } from "react-dom";
   import List from "./List";
 
-  const react = sveltify({ List , inject$$List$Item: List.Item , inject$$List$Item$Icon: List.Item.Icon }, { ReactDOM: inject$$ReactDOM, createPortal: inject$$createPortal, renderToString: inject$$renderToString });
+  const react = sveltify({ List , inject$$List$Item: List.Item, inject$$List$Item$Icon: List.Item.Icon, }, { ReactDOM: inject$$ReactDOM, createPortal: inject$$createPortal, renderToString: inject$$renderToString });
 ;</script>
 
 <react.List>

src/tests/fixtures/TrailingComma.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  const react = sveltify({
+    section: "section",
+  });
+</script>
+
+<react.section>
+  <react.h1>Title</react.h1>
+  <react.p>Description</react.p>
+</react.section>

src/tests/preprocess.spec.ts

@@ -139,6 +139,13 @@ describe("svelte-preprocess-react", () => {
     const output = await preprocess(src, preprocessReact(), { filename });
     expect(output.code).toMatchSnapshot();
   });
+
+  it("should detect tailing comma when adding aliases", async () => {
+    const filename = resolveFilename("./fixtures/TrailingComma.svelte");
+    const src = await readFile(filename, "utf8");
+    const output = await preprocess(src, preprocessReact(), { filename });
+    expect(output.code).toMatchSnapshot();
+  });
 });
 
 const base = dirname(fileURLToPath(import.meta.url));