Skip to content

Fix PropertyAccessExpression in JSX tags (Context.Provider, React.Fragment)#13

Merged
evilbocchi merged 7 commits intomainfrom
copilot/fix-unknown-tag-error
Feb 2, 2026
Merged

Fix PropertyAccessExpression in JSX tags (Context.Provider, React.Fragment)#13
evilbocchi merged 7 commits intomainfrom
copilot/fix-unknown-tag-error

Conversation

Copy link
Contributor

Copilot AI commented Feb 2, 2026

JSX elements using PropertyAccessExpression tag names (Ctx.Provider, React.Fragment) were transformed to UnknownTag, breaking compilation.

Changes

  • Added jsxTagExpressionToString utility: Handles Identifier, PropertyAccessExpression, ThisExpression, and JsxNamespacedName
  • Updated tag extraction: getJsxTagName and getTagName now use the utility instead of only handling Identifier
  • Enhanced createTagReference: Accepts JsxTagNameExpression and preserves PropertyAccessExpression in output
  • Updated code generators: generateFinePatchBlock, generateMemoizedBlock, and generateOptimizedElement extract and use tag expressions
  • Fixed dependency tracking: Extracts base identifier (Ctx) from PropertyAccessExpression (Ctx.Provider)
  • Added comprehensive test coverage: Integration tests for Context.Provider, React.Fragment, and Providers with dynamic props to prevent regressions

Example

Before:

<layerContext.Provider value={depth + 1} />

Generated: React.createElement(UnknownTag, ...) → compilation error

After:

<layerContext.Provider value={depth + 1} />

Generates: React.createElement(layerContext.Provider, { value: depth + 1 })

Testing

  • ✅ All 72 tests pass (70 original + 2 new)
  • ✅ Added test for Context.Provider with dynamic props
  • ✅ Added test for React.Fragment
  • ✅ Added test verifying Providers with dynamic props aren't misclassified as static
  • ✅ Build succeeds with no errors
  • ✅ No security vulnerabilities
Original prompt

This section details on the original issue you should resolve

<issue_title>Doesnt work with contexts?</issue_title>
<issue_description>I have just installed this for the first time and tried to compile this code:

import React, { createContext, useContext } from "@rbxts/react";

const layerContext = createContext(0);

export default () => {
	const depth = useContext(layerContext);

	return <layerContext.Provider value={depth + 1}></layerContext.Provider>;
};

However it is failing:

Source/Client/UserInterface/Components/Layer.tsx:6:32 - error TS2304: Cannot find name 'UnknownTag'.

      return React.createElement(UnknownTag, {
                                                  ~~~~~~~~~~

[5:10:09 pm] Found 1 error. Watching for file changes.
```</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI changed the title [WIP] Fix compilation error with context usage Fix PropertyAccessExpression in JSX tags (Context.Provider, React.Fragment) Feb 2, 2026
Copilot AI requested a review from evilbocchi February 2, 2026 11:23
@evilbocchi evilbocchi marked this pull request as ready for review February 2, 2026 11:28
Copilot AI review requested due to automatic review settings February 2, 2026 11:29
@coderabbitai
Copy link

coderabbitai bot commented Feb 2, 2026

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

  • 🔍 Trigger a full review

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes JSX tag-name handling so member-expression tags like Ctx.Provider / React.Fragment are preserved through transformation instead of being replaced with UnknownTag, preventing compile failures for Context Providers and other property-access JSX tags.

Changes:

  • Added jsxTagExpressionToString helper and updated tag-name extraction to support PropertyAccessExpression, ThisExpression, and namespaced tags.
  • Updated code generation to pass the original JsxTagNameExpression into React.createElement(...) so member expressions remain intact.
  • Updated dependency tracking logic and added an integration test for Context.Provider.

Reviewed changes

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

Show a summary per file
File Description
transformer/src/utils.ts Introduces shared JSX tag expression → string conversion utility.
transformer/src/index.ts Uses the new utility for tag-name logging/debug paths (and avoids UnknownTag for member expressions).
transformer/src/analyzer.ts Uses the new utility for tag-name extraction and adjusts dependency tracking for member expressions.
transformer/src/transformer.ts Updates React.createElement generation to preserve member-expression tag references.
transformer/test/transformer.integration.test.ts Adds integration coverage for Context.Provider not producing UnknownTag.
demo/src/context-test.tsx Adds a demo repro/example for context Provider JSX.

@evilbocchi evilbocchi merged commit 944e32d into main Feb 2, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Doesnt work with contexts?

3 participants