From eb4e0bddabb41f36a994e90f13c531034df780ca Mon Sep 17 00:00:00 2001
From: Krishna Tripathi <kanchanlatakrishna@gmail.com>
Date: Fri, 31 Oct 2025 18:01:14 +0530
Subject: [PATCH 1/3] fix: support lowercase member expressions in JSX elements

This fixes issue #1165 where JSX elements using member expressions with
lowercase variable names (e.g., form.Button) were incorrectly treated as
HTML element strings instead of React component identifiers.

The compiler was only checking if element names started with an uppercase
letter, which broke common library patterns like Tanstack Forms that use
lowercase variables with member expressions.

Changes:
- Updated jsx-scope-inject.ts to check for member expressions (containing
  dots) before checking case sensitivity
- Now both 'form.Button' and 'Form.Button' are correctly treated as
  component identifiers
- Added test component demonstrating the fix works with both cases

This allows developers to use standard library conventions without being
forced to use uppercase variable names as a workaround.

Fixes #1165
---
 .../src/components/tanstack-form-test.tsx     | 123 ++++++++++++++++++
 packages/compiler/src/jsx-scope-inject.ts     |   5 +-
 2 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 demo/vite-project/src/components/tanstack-form-test.tsx

diff --git a/demo/vite-project/src/components/tanstack-form-test.tsx b/demo/vite-project/src/components/tanstack-form-test.tsx
new file mode 100644
index 000000000..7cd350245
--- /dev/null
+++ b/demo/vite-project/src/components/tanstack-form-test.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+
+// Simulating Tanstack Forms pattern
+function useForm() {
+  return {
+    AppForm: ({ children }: { children: React.ReactNode }) => (
+      <form style={{ padding: '20px', border: '2px solid blue' }}>{children}</form>
+    ),
+    CancelButton: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
+      <button 
+        type="button"
+        onClick={onClick}
+        style={{ 
+          padding: '10px 20px', 
+          backgroundColor: 'red', 
+          color: 'white',
+          marginRight: '10px',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        }}
+      >
+        {children}
+      </button>
+    ),
+    SubmitButton: ({ children }: { children: React.ReactNode }) => (
+      <button 
+        type="submit"
+        style={{ 
+          padding: '10px 20px', 
+          backgroundColor: 'green', 
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        }}
+      >
+        {children}
+      </button>
+    ),
+  };
+}
+
+// Simulating uppercase workaround
+function useFormUppercase() {
+  return {
+    AppForm: ({ children }: { children: React.ReactNode }) => (
+      <form style={{ padding: '20px', border: '2px solid green' }}>{children}</form>
+    ),
+    CancelButton: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
+      <button 
+        type="button"
+        onClick={onClick}
+        style={{ 
+          padding: '10px 20px', 
+          backgroundColor: 'red', 
+          color: 'white',
+          marginRight: '10px',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        }}
+      >
+        {children}
+      </button>
+    ),
+    SubmitButton: ({ children }: { children: React.ReactNode }) => (
+      <button 
+        type="submit"
+        style={{ 
+          padding: '10px 20px', 
+          backgroundColor: 'green', 
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        }}
+      >
+        {children}
+      </button>
+    ),
+  };
+}
+
+export default function TanstackFormTest() {
+  const form = useForm();
+  const FormContent = useFormUppercase();
+
+  const handleCancel = () => {
+    alert('Cancel clicked!');
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h2>Tanstack Forms + Lingo.dev Compiler Issue #1165</h2>
+      
+      <div style={{ marginBottom: '40px' }}>
+        <h3>❌ Broken: Lowercase variable name (form)</h3>
+        <p>Using: <code>const form = useForm()</code></p>
+        <p>Expected: Blue border, styled buttons with click functionality</p>
+        <form.AppForm>
+          <div>
+            <form.CancelButton onClick={handleCancel}>Cancel</form.CancelButton>
+            <form.SubmitButton>Submit</form.SubmitButton>
+          </div>
+        </form.AppForm>
+      </div>
+
+      <div>
+        <h3>✅ Working: Uppercase variable name (FormContent)</h3>
+        <p>Using: <code>const FormContent = useFormUppercase()</code></p>
+        <p>Expected: Green border, styled buttons with click functionality</p>
+        <FormContent.AppForm>
+          <div>
+            <FormContent.CancelButton onClick={handleCancel}>Cancel</FormContent.CancelButton>
+            <FormContent.SubmitButton>Submit</FormContent.SubmitButton>
+          </div>
+        </FormContent.AppForm>
+      </div>
+    </div>
+  );
+}
+
diff --git a/packages/compiler/src/jsx-scope-inject.ts b/packages/compiler/src/jsx-scope-inject.ts
index d1003a68a..87e52b18d 100644
--- a/packages/compiler/src/jsx-scope-inject.ts
+++ b/packages/compiler/src/jsx-scope-inject.ts
@@ -55,7 +55,10 @@ export const lingoJsxScopeInjectMutation = createCodeMutation((payload) => {
     } as any;
 
     // Add $as prop
-    const as = /^[A-Z]/.test(originalJsxElementName)
+    // Check if it's a member expression (contains dot) or starts with uppercase
+    const isMemberExpression = originalJsxElementName.includes(".");
+    const isComponent = /^[A-Z]/.test(originalJsxElementName);
+    const as = isMemberExpression || isComponent
       ? t.identifier(originalJsxElementName)
       : originalJsxElementName;
     setJsxAttributeValue(newNodePath, "$as", as);

From 862c0feb41f80dee21faca2f30261cc402854dc1 Mon Sep 17 00:00:00 2001
From: Krishna Tripathi <121955562+codesmith17@users.noreply.github.com>
Date: Fri, 31 Oct 2025 18:07:40 +0530
Subject: [PATCH 2/3] Update tanstack-form-test.tsx

---
 demo/vite-project/src/components/tanstack-form-test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/demo/vite-project/src/components/tanstack-form-test.tsx b/demo/vite-project/src/components/tanstack-form-test.tsx
index 7cd350245..709b2916d 100644
--- a/demo/vite-project/src/components/tanstack-form-test.tsx
+++ b/demo/vite-project/src/components/tanstack-form-test.tsx
@@ -95,7 +95,7 @@ export default function TanstackFormTest() {
       <h2>Tanstack Forms + Lingo.dev Compiler Issue #1165</h2>
       
       <div style={{ marginBottom: '40px' }}>
-        <h3>❌ Broken: Lowercase variable name (form)</h3>
+        <h3>Broken: Lowercase variable name (form)</h3>
         <p>Using: <code>const form = useForm()</code></p>
         <p>Expected: Blue border, styled buttons with click functionality</p>
         <form.AppForm>
@@ -107,7 +107,7 @@ export default function TanstackFormTest() {
       </div>
 
       <div>
-        <h3>✅ Working: Uppercase variable name (FormContent)</h3>
+        <h3>Working: Uppercase variable name (FormContent)</h3>
         <p>Using: <code>const FormContent = useFormUppercase()</code></p>
         <p>Expected: Green border, styled buttons with click functionality</p>
         <FormContent.AppForm>

From c9e7eb4d60badfc0f6d24775c4ca9e6613832418 Mon Sep 17 00:00:00 2001
From: Krishna Tripathi <kanchanlatakrishna@gmail.com>
Date: Fri, 14 Nov 2025 10:38:40 +0530
Subject: [PATCH 3/3] fix: properly handle member expressions in AST generation

- Add createMemberExpressionFromString() helper to build correct AST nodes
- Fix bug where t.identifier() was incorrectly used with dotted strings like 'form.Button'
- Improve code comments to explain member expression handling rationale
- Update demo heading to reflect that the issue is now fixed

This addresses all review comments from PR #1474
---
 .../src/components/tanstack-form-test.tsx     | 36 +++++++++----------
 packages/compiler/src/jsx-scope-inject.ts     | 25 +++++++++++--
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/demo/vite-project/src/components/tanstack-form-test.tsx b/demo/vite-project/src/components/tanstack-form-test.tsx
index 709b2916d..247060b8b 100644
--- a/demo/vite-project/src/components/tanstack-form-test.tsx
+++ b/demo/vite-project/src/components/tanstack-form-test.tsx
@@ -7,12 +7,12 @@ function useForm() {
       <form style={{ padding: '20px', border: '2px solid blue' }}>{children}</form>
     ),
     CancelButton: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
-      <button 
+      <button
         type="button"
         onClick={onClick}
-        style={{ 
-          padding: '10px 20px', 
-          backgroundColor: 'red', 
+        style={{
+          padding: '10px 20px',
+          backgroundColor: 'red',
           color: 'white',
           marginRight: '10px',
           border: 'none',
@@ -24,11 +24,11 @@ function useForm() {
       </button>
     ),
     SubmitButton: ({ children }: { children: React.ReactNode }) => (
-      <button 
+      <button
         type="submit"
-        style={{ 
-          padding: '10px 20px', 
-          backgroundColor: 'green', 
+        style={{
+          padding: '10px 20px',
+          backgroundColor: 'green',
           color: 'white',
           border: 'none',
           borderRadius: '4px',
@@ -48,12 +48,12 @@ function useFormUppercase() {
       <form style={{ padding: '20px', border: '2px solid green' }}>{children}</form>
     ),
     CancelButton: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
-      <button 
+      <button
         type="button"
         onClick={onClick}
-        style={{ 
-          padding: '10px 20px', 
-          backgroundColor: 'red', 
+        style={{
+          padding: '10px 20px',
+          backgroundColor: 'red',
           color: 'white',
           marginRight: '10px',
           border: 'none',
@@ -65,11 +65,11 @@ function useFormUppercase() {
       </button>
     ),
     SubmitButton: ({ children }: { children: React.ReactNode }) => (
-      <button 
+      <button
         type="submit"
-        style={{ 
-          padding: '10px 20px', 
-          backgroundColor: 'green', 
+        style={{
+          padding: '10px 20px',
+          backgroundColor: 'green',
           color: 'white',
           border: 'none',
           borderRadius: '4px',
@@ -93,9 +93,9 @@ export default function TanstackFormTest() {
   return (
     <div style={{ padding: '20px' }}>
       <h2>Tanstack Forms + Lingo.dev Compiler Issue #1165</h2>
-      
+
       <div style={{ marginBottom: '40px' }}>
-        <h3>Broken: Lowercase variable name (form)</h3>
+        <h3>✅ Previously broken: Lowercase variable name (form) - now fixed</h3>
         <p>Using: <code>const form = useForm()</code></p>
         <p>Expected: Blue border, styled buttons with click functionality</p>
         <form.AppForm>
diff --git a/packages/compiler/src/jsx-scope-inject.ts b/packages/compiler/src/jsx-scope-inject.ts
index 87e52b18d..a69c8c689 100644
--- a/packages/compiler/src/jsx-scope-inject.ts
+++ b/packages/compiler/src/jsx-scope-inject.ts
@@ -14,6 +14,25 @@ import { getJsxExpressions } from "./utils/jsx-expressions";
 import { collectJsxScopes, getJsxScopeAttribute } from "./utils/jsx-scope";
 import { setJsxAttributeValue } from "./utils/jsx-attribute";
 
+/**
+ * Creates a proper AST node from a string that may contain dots (member expressions).
+ * For example, "form.Button" becomes a member expression AST, while "Button" becomes an identifier.
+ * @param str - The string to convert (e.g., "form.Button" or "Button")
+ * @returns A Babel AST Expression node
+ */
+function createMemberExpressionFromString(str: string): t.Expression {
+  const parts = str.split('.');
+  if (parts.length === 1) {
+    return t.identifier(parts[0]);
+  }
+
+  let expr: t.Expression = t.identifier(parts[0]);
+  for (let i = 1; i < parts.length; i++) {
+    expr = t.memberExpression(expr, t.identifier(parts[i]));
+  }
+  return expr;
+}
+
 export const lingoJsxScopeInjectMutation = createCodeMutation((payload) => {
   const mode = getModuleExecutionMode(payload.ast, payload.params.rsc);
   const jsxScopes = collectJsxScopes(payload.ast);
@@ -55,11 +74,13 @@ export const lingoJsxScopeInjectMutation = createCodeMutation((payload) => {
     } as any;
 
     // Add $as prop
-    // Check if it's a member expression (contains dot) or starts with uppercase
+    // Check if it's a member expression (contains dot) or starts with uppercase.
+    // Member expressions (e.g., form.Button) and uppercase names (e.g., Button) 
+    // should be treated as component references, not HTML element strings.
     const isMemberExpression = originalJsxElementName.includes(".");
     const isComponent = /^[A-Z]/.test(originalJsxElementName);
     const as = isMemberExpression || isComponent
-      ? t.identifier(originalJsxElementName)
+      ? createMemberExpressionFromString(originalJsxElementName)
       : originalJsxElementName;
     setJsxAttributeValue(newNodePath, "$as", as);