Feature: support cross-file transform inputs with cache and watch invalidation

Open
#1,902 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
30/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Active
Tech stack
javascript
Domain
build-system

Research direction

No files or tests are named; start by reading related issues #918, #1488, and #1605, then trace Metro's transform cache and watch invalidation behavior. The work is done when a concrete design is selected and cross-file dependencies correctly invalidate cached transforms, including the Card.tsx and Screen.tsx example.

Written by the indexing model from the issue text.

Description

Metro has no supported way for a transform to state that its output depends on some other source file or graph-derived value.

For example:

// Card.tsx
export const Card = ({children}) => <View>{children}</View>;

// Screen.tsx
export const Screen = () => (
 <Card>
   <Text>Hello</Text>
 </Card>
);

Say that we wanted to transform Screen.tsx, but only if Card.tsx wraps its children under a View. If Card later changes its wrapper component to something else, we need to undo this transformation.

Currently, this is not possible. If Card.tsx changes, Metro transforms Card.tsx, but not the unchanged Screen.tsx. Instead, it returns the old, transformed Screen.tsx from its cache because its cache key does not include Card.tsx.

I see two possible designs:

  • A transform-dependency API that records additional file paths or input hashes.
  • A graph-level analysis hook that runs after dependency discovery but before final transforms, and provides immutable per-file data to workers.

Related: #918, #1488, and #1605.

Dominant language
JavaScript
Stars
5.6k
Forks
696
Avg merge
8m
Merged PRs (30d)
7

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react/metro

All issues in react/metro

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.