fix: support lowercase member expressions in JSX elements

[codesmith17]

## Summary
This PR 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 Problem
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:

```tsx
// This was broken before:
const form = useForm();
<form.CancelButton>Cancel</form.CancelButton> // Treated as string, broke UI

Users were forced to use uppercase variable names as a workaround:

// Workaround that worked:
const FormContent = useForm();
<FormContent.CancelButton>Cancel</FormContent.CancelButton> // Worked correctly

The Solution

Updated jsx-scope-inject.ts (line 58-63) to check for member expressions (containing dots) before checking case sensitivity:

// Before (broken):
const as = /^[A-Z]/.test(originalJsxElementName)
  ? t.identifier(originalJsxElementName)
  : originalJsxElementName;

// After (fixed):
const isMemberExpression = originalJsxElementName.includes(".");
const isComponent = /^[A-Z]/.test(originalJsxElementName);
const as = isMemberExpression || isComponent
  ? t.identifier(originalJsxElementName)
  : originalJsxElementName;

Changes

• Updated packages/compiler/src/jsx-scope-inject.ts to recognize member expressions
• Added test component demonstrating both cases work correctly
• Now both form.Button and Form.Button are correctly treated as component identifiers

Testing

Tested with the vite-project demo showing both lowercase and uppercase member expressions render and function correctly with full styling and interactivity preserved.

Impact

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

• Tanstack Forms (form.Field, form.Input, etc.)
• Headless UI patterns (dialog.Panel, menu.Item, etc.)
• Any library using lowercase + member expressions

Fixes #1165

[Copilot]

Pull Request Overview

This PR attempts to fix an issue 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 fix adds a check for member expressions (containing dots) before the uppercase check in the compiler.

Key changes:

• Updated jsx-scope-inject.ts to detect member expressions using .includes(".")
• Added a test component demonstrating both lowercase and uppercase member expression patterns

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
packages/compiler/src/jsx-scope-inject.ts	Added member expression detection logic to determine when JSX elements should be treated as component references
demo/vite-project/src/components/tanstack-form-test.tsx	Added demo component showcasing the fix for Tanstack Forms pattern with both lowercase and uppercase variable names

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Using t.identifier() with a dotted string like "form.Button" creates an invalid AST node because JavaScript identifiers cannot contain dots. For member expressions, you need to build a proper member expression AST structure.

Consider creating a helper function that parses the dotted string and builds the correct AST:

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;
}

Then use it like:

const as = isMemberExpression || isComponent
  ? createMemberExpressionFromString(originalJsxElementName)
  : originalJsxElementName;

This will correctly generate form.Button as a member expression AST node instead of an invalid identifier.

[Copilot]

The heading says "Broken" but this test file is included in the PR that fixes the issue. After the fix, this case should work correctly. Consider updating the heading to something like "Previously broken: Lowercase variable name (form) - now fixed" to accurately reflect the current state.

Suggested change

	<h3>Broken: Lowercase variable name (form)</h3>
	<h3>Previously broken: Lowercase variable name (form) - now fixed</h3>

[Copilot]

[nitpick] The comment could be more specific about the rationale. Consider expanding it to explain why member expressions need special handling:

// 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

This makes it clearer for future maintainers why both conditions are checked.

Suggested change

	// 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.

[codesmith17]

Addressed the comments @maxprilutskiy