Repository: alloy-framework/alloy
Pull request #29 (2024-09-20 00:25:11)

Make UsingDirective reactive
The values for namespaces come from a reactive value, thus we need to observe its changes.

pkg-pr-new[bot]: 
[Open in Stackblitz](https://pkg.pr.new/template/9426c14d-48fd-41a1-9636-9154bded141b)


<details><summary><b>@alloy-js/babel-plugin-alloy</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/babel-plugin-alloy@29
```

</p></details>
      
    

<details><summary><b>@alloy-js/babel-plugin-jsx-dom-expressions</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/babel-plugin-jsx-dom-expressions@29
```

</p></details>
      
    

<details><summary><b>babel-preset-alloy</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/babel-preset-alloy@29
```

</p></details>
      
    

<details><summary><b>@alloy-js/csharp</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/csharp@29
```

</p></details>
      
    

<details><summary><b>@alloy-js/core</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/core@29
```

</p></details>
      
    

<details><summary><b>@alloy-js/java</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/java@29
```

</p></details>
      
    

<details><summary><b>@alloy-js/prettier-plugin-alloy</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/prettier-plugin-alloy@29
```

</p></details>
      
    

<details><summary><b>@alloy-js/typescript</b></summary><p>

```
pnpm add https://pkg.pr.new/alloy-framework/alloy/@alloy-js/typescript@29
```

</p></details>
      
    

_commit: <a href="https://github.com/alloy-framework/alloy/runs/30407202058"><code>ef30935</code></a>_


Patch:
diff --git a/packages/csharp/src/components/UsingDirective.tsx b/packages/csharp/src/components/UsingDirective.tsx
index 7e09d24..f4fd398 100644
--- a/packages/csharp/src/components/UsingDirective.tsx
+++ b/packages/csharp/src/components/UsingDirective.tsx
@@ -5,11 +5,15 @@ export interface UsingDirectiveProps {
 }
 
 // one ore more C# using directives
-export function UsingDirective(props: UsingDirectiveProps): string {
-  props.namespaces.sort();
-  return core
-    .mapJoin(props.namespaces, (namespace) => {
-      return `using ${namespace};`;
-    })
-    .join("");
+export function UsingDirective(props: UsingDirectiveProps) {
+  // we need core.memo here so that the contents are in a reactive context.
+  // the values for namespaces are reactive thus we need to observe any changes.
+  return core.memo(() => {
+    props.namespaces.sort();
+    return core
+      .mapJoin(props.namespaces, (namespace) => {
+        return `using ${namespace};`;
+      })
+      .join("");
+  });
 }


Test patch:
diff --git a/packages/csharp/test/using.test.tsx b/packages/csharp/test/using.test.tsx
index fa3149f..af07961 100644
--- a/packages/csharp/test/using.test.tsx
+++ b/packages/csharp/test/using.test.tsx
@@ -59,7 +59,7 @@ it("adds using statement across namespaces", () => {
         </csharp.SourceFile>
       </csharp.Namespace>
       <csharp.Namespace name='Client'>
-        <csharp.SourceFile path="Client.cs">
+        <csharp.SourceFile path="Client.cs" using={["System"]}>
           <csharp.Class accessModifier='public' name="Client">
             <csharp.ClassMethod accessModifier="public" name="MethodOne" parameters={params} returns={outputTypeRefkey} />
           </csharp.Class>
@@ -84,6 +84,7 @@ it("adds using statement across namespaces", () => {
 
   expect(res.contents[1].contents).toBe(coretest.d`
     using Models;
+    using System;
     namespace Client
     {
       public class Client