test: {:else}, {:then} and {:catch} blocks

Author: bfanger

src/lib/preprocessReact.ts

@@ -7,6 +7,9 @@ import type {
   TemplateNode,
   Transition,
 } from "svelte/types/compiler/interfaces";
+import type IfBlock from "svelte/types/compiler/compile/nodes/IfBlock";
+import type EachBlock from "svelte/types/compiler/compile/nodes/EachBlock";
+import type AwaitBlock from "svelte/types/compiler/compile/nodes/AwaitBlock";
 import type {
   PreprocessorGroup,
   Processed,
@@ -218,16 +221,16 @@ function replaceReactTags(
   node.children?.forEach((child) => {
     replaceReactTags(child, content, components);
   });
-  // traverse else branch of IfBlock
-  node.else?.children?.forEach((child: TemplateNode) => {
+  (node as IfBlock | EachBlock).else?.children?.forEach((child) => {
     replaceReactTags(child, content, components);
   });
-  // traverse then branch of AwaitBlock
-  node.then?.children?.forEach((child: TemplateNode) => {
+  (node as AwaitBlock).pending?.children?.forEach((child) => {
     replaceReactTags(child, content, components);
   });
-  // traverse catch branch of AwaitBlock
-  node.catch?.children?.forEach((child: TemplateNode) => {
+  (node as AwaitBlock).then?.children?.forEach((child) => {
+    replaceReactTags(child, content, components);
+  });
+  (node as AwaitBlock).catch?.children?.forEach((child: TemplateNode) => {
     replaceReactTags(child, content, components);
   });
   return components;

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

@@ -145,6 +145,36 @@ const React$button = React$$sveltify(\\"button\\", React$$createPortal, React$$R
 "
 `;
 
+exports[`svelte-preprocess-react > should process {:else} {:then} and {:catch} sections 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\\"; const number = 1;
+const Component = () => null;
+export {};
+const React$Component = React$$sveltify(Component, React$$createPortal, React$$ReactDOM, React$$renderToString);</script>
+
+{#if number === 1}
+  <React$Component />
+{:else if number === 2}
+  <React$Component />
+{:else}
+  <React$Component />
+{/if}
+
+{#each [] as item}
+  <React$Component />
+{:else}
+  <React$Component />
+{/each}
+
+{#await Promise.resolve()}
+  <React$Component />
+{:then}
+  <React$Component />
+{:catch}
+  <React$Component />
+{/await}
+"
+`;
+
 exports[`svelte-preprocess-react > should support typescript when using preprocess 1`] = `
 "<script lang=\\"ts\\">export let title;
 </script>

src/tests/fixtures/Blocks.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type React from "react";
+
+  const number = 1;
+
+  const Component: React.FC = () => null;
+</script>
+
+{#if number === 1}
+  <react:Component />
+{:else if number === 2}
+  <react:Component />
+{:else}
+  <react:Component />
+{/if}
+
+{#each [] as item}
+  <react:Component />
+{:else}
+  <react:Component />
+{/each}
+
+{#await Promise.resolve()}
+  <react:Component />
+{:then}
+  <react:Component />
+{:catch}
+  <react:Component />
+{/await}

src/tests/preprocess.spec.ts

@@ -109,6 +109,16 @@ describe("svelte-preprocess-react", () => {
     const output = await preprocess(src, preprocessReact(), { filename });
     expect(output.code).toMatchSnapshot();
   });
+  it("should process {:else} {:then} and {:catch} sections", async () => {
+    const filename = resolveFilename("./fixtures/Blocks.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://", "");