feat: Add support for dot notation

Fixed #12

Author: Bob Fanger

src/lib/preprocessReact.ts

@@ -112,14 +112,15 @@ function transform(content: string, options: TransformOptions) {
   });
   const s = new MagicString(content, { filename: options.filename });
   const components = replaceReactTags(compiled.ast.html, s);
+  const aliases = Object.entries(components);
 
-  if (components.length === 0) {
+  if (aliases.length === 0) {
     return { code: content };
   }
   const script = compiled.ast.instance || (compiled.ast.module as Script);
-  const wrappers = components
-    .map((component) => {
-      return `const React$${component} = ${prefix}sveltify(${component}, ${portal}, ${prefix}ReactDOM${renderToString});`;
+  const wrappers = aliases
+    .map(([alias, expression]) => {
+      return `const ${alias} = ${prefix}sveltify(${expression}, ${portal}, ${prefix}ReactDOM${renderToString});`;
     })
     .join(";");
 
@@ -138,21 +139,28 @@ function transform(content: string, options: TransformOptions) {
 function replaceReactTags(
   node: TemplateNode,
   content: MagicString,
-  components: string[] = []
+  components: Record<string, string> = {}
 ) {
   /* eslint-disable no-param-reassign */
   if (node.type === "Element" && node.name.startsWith("react:")) {
     const tag = node as Element;
-    const component = tag.name.slice(6);
+    const componentExpression = tag.name.slice(6);
+    const alias = `React$${componentExpression.replace(/\./g, "$")}`;
     const tagStart = node.start;
     const tagEnd = node.end;
     const closeStart = tagEnd - tag.name.length - 3;
-    content.overwrite(tagStart + 1, tagStart + 7, "React$");
-    if (content.slice(closeStart, closeStart + 8) === `</react:`) {
-      content.overwrite(closeStart + 2, closeStart + 8, `React$`);
+    const hasCloseTag =
+      content.slice(closeStart, closeStart + 8) === `</react:`;
+    content.overwrite(tagStart + 1, tagStart + 1 + tag.name.length, alias);
+    if (hasCloseTag) {
+      content.overwrite(
+        closeStart + 2,
+        closeStart + 2 + tag.name.length,
+        alias
+      );
     }
-    if (components.includes(component) === false) {
-      components.push(component);
+    if (!components[alias]) {
+      components[alias] = componentExpression;
     }
     tag.attributes.forEach((attr) => {
       if (attr.type === "EventHandler") {

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

@@ -72,6 +72,20 @@ const React$Alert = React$$sveltify(Alert, React$$createPortal, React$$ReactDOM,
 "
 `;
 
+exports[`svelte-preprocess-react > should process <react:Context.Provider> tags 1`] = `
+"<script lang=\\"ts\\">import React$$sveltify from \\"svelte-preprocess-react/sveltify\\"; 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 \\"$lib/used\\";
+export let Context;
+used(Context);
+const React$Context$Provider = React$$sveltify(Context.Provider, React$$createPortal, React$$ReactDOM, React$$renderToString);</script>
+
+<React$Context$Provider children=\\"content\\" />
+
+<React$Context$Provider>
+  <button>ok</button>
+</React$Context$Provider>
+"
+`;
+
 exports[`svelte-preprocess-react > should process <react:component> tags 1`] = `
 "<script>import React$$sveltify from \\"svelte-preprocess-react/sveltify\\"; import React$$ReactDOM from \\"react-dom/client\\"; import { createPortal as React$$createPortal} from \\"react-dom\\"; import { renderToString as React$$renderToString } from \\"react-dom/server\\"; 
   // @ts-nocheck

src/tests/fixtures/Provider.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import used from "$lib/used";
+  import type { Context as ContentType } from "react";
+
+  export let Context: ContentType<any>;
+
+  used(Context);
+</script>
+
+<react:Context.Provider>content</react:Context.Provider>
+
+<react:Context.Provider>
+  <button>ok</button>
+</react:Context.Provider>

src/tests/preprocess.spec.ts

@@ -92,6 +92,17 @@ describe("svelte-preprocess-react", () => {
     );
     expect(output.code).toMatchSnapshot();
   });
+
+  it("should process <react:Context.Provider> tags", async () => {
+    const filename = resolveFilename("./fixtures/Provider.svelte");
+    const src = await readFile(filename, "utf8");
+    const output = await preprocess(
+      src,
+      preprocessReact({ preprocess: sveltePreprocess() }),
+      { filename }
+    );
+    expect(output.code).toMatchSnapshot();
+  });
 });
 
 const base = dirname(import.meta.url).replace("file://", "");