JSX runtime (part 2 of 3) - more formal rendering logic for both classic and new jsx runtimes #3947

JasonVMo · 2025-07-25T19:43:47Z

Platforms Impacted

all

Description of changes

This further centralizes the render logic and provides both classic and jsx-runtime implementations. It also does a few other things:

Create more correct patterns around composition and staged rendering. It turns out the handling of children was incorrect, and in the case where the JSX handlers are omitted will cause indeterminate behavior with children. This also creates some type divergence.
Fixed the typings on the render functions to correctly mirror createElement/jsx/jsxs
Moved memo-cache, immutable-merge, and merge-props documentation into the correct package, and created a reference link to the new locations.

Verification

Builds, tests, bundling, running the testers and trying the controls. Also inspection of .tsx -> .js output as well as snapshot test results for render trees (which remain unchanged).

Other Notes

I will be creating unit tests as part of the final change where I turn on the new runtime. I need to figure out how to correctly unit test both classic and jsx scenarios at the same time.

packages/framework-base/src/component-patterns/stagedComponent.tsx

packages/framework-base/src/component-patterns/README.md

rurikoaraki

- with suggestions, which is apparently not an option with GH

…sic and new jsx runtimes (#3947) * rework jsx helpers for both new and old runtimes * implement both new and old render patterns for classic and jsx-runtimes * Change files * move package README.md files to be next to the source code * update documentation * Change files * prettier format updates to documentation * tweak documentation just a bit

…x-errors (#3948) * create a more robust depcheck implementation * fix missing eslint config dependencies * apply depcheck fix to directories to fix error level issues * fix missing deps for private packages * applying package updates * JSX runtime (part 2 of 3) - more formal rendering logic for both classic and new jsx runtimes (#3947) * rework jsx helpers for both new and old runtimes * implement both new and old render patterns for classic and jsx-runtimes * Change files * move package README.md files to be next to the source code * update documentation * Change files * prettier format updates to documentation * tweak documentation just a bit * applying package updates * apply more dependency fixes * JSX runtime (part 2 of 3) - more formal rendering logic for both classic and new jsx runtimes (#3947) * rework jsx helpers for both new and old runtimes * implement both new and old render patterns for classic and jsx-runtimes * Change files * move package README.md files to be next to the source code * update documentation * Change files * prettier format updates to documentation * tweak documentation just a bit * applying package updates * switch to pnpm and fix to build stage * fix dependencies up through linting * fix babel and jest configs and add dedicated babel config package * split jest configurations into a separate package * fix more tests * move repo to pnpm, create babel and jest config packages, fix dependencies * Change files * add missing @types/jest devDependency * fix ios/mac pod install * fix align-deps issue * fix more align-deps / depcheck issues * switch back to node-modules temporarily to deal with appium issues as a separate pr * add build fixes for node-modules linking * revert podfiles to non-pnpm behavior, fix prettier issues, respond to PR feedback --------- Co-authored-by: UI-Fabric-RN-Bot <[email protected]>

JasonVMo added 6 commits July 24, 2025 11:37

rework jsx helpers for both new and old runtimes

cbb6a70

implement both new and old render patterns for classic and jsx-runtimes

307bb76

Change files

f3826ef

move package README.md files to be next to the source code

09f5144

update documentation

cfb86b0

Change files

52ac4df

JasonVMo requested a review from a team as a code owner July 25, 2025 19:43

prettier format updates to documentation

50008e7