Repository navigation
feat(target-react): emit cross-file types and generics - #75
Merged
Merged
Conversation
React's output imports the types its source imports by name, from a `.ts` module or a package as written and from a child's output, and the main component's output writes the module's type exports in source order (ADR-0067, ADR-0068). A generic component is a generic function component, and the events', models' and slots' interfaces whose members name a type parameter take it too. A form control bound to a model of such a type casts its string value to it. The types and generics cases pass every live layer on React, with consumer fixtures for each, so React's quarantine is empty again and its test helpers read these cases. The canary injector also finds the body of a generic function component. Co-authored-by: multica-agent <github@multica.ai>
🚀 Deploying Preview to Cloudflare 🚀Preview URL: https://react-types-generics-uxf-462-unframework.blue-water-0397.workers.dev (commit e4d1057)This URL reflects your latest Preview deploymentPreview Deployments by commit
|
…terfaces Setup code that a type parameter types stays inside a generic function component instead of being hoisted to module scope. The handle and the attributes interface take the type parameters an exposed function names, and every interface declares only the parameters its members name, with those their constraints and defaults name. A multiple select casts its values to a generic model's type, and a field bound to state whose type is inferred casts to that state's type. React's own interface names no longer take a name the module imports or exports as a type. Co-authored-by: multica-agent <github@multica.ai>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
Cross-file types and generic components on React (ADR-0067, ADR-0068). Only React's output changes.
import typeby name where the output reads the type:./typesor a package as written, and a child's types from its output (import Field, { type FieldProps } from "./Field"). The output of a module's main component writes the module's type exports and re-exports in source order among the types it copies. A generic component is a generic function component,function List<T>(…), with its constraints and defaults as written. The events', models' and slots' interfaces whose members name a type parameter take the parameters too (PickerSlots<T>). A<select>, text field or textarea bound to a model of such a type casts its string value to it (event.target.value as T), which TypeScript can't narrow on its own.types/(8),generics/(4) anddiagnostics/generic-slot-props, with React consumer fixtures for the 12 rendering cases, including thetypeand generic misuses. No shared expectation changes.function List<T extends { id: string }>(…) {), with a unit test. Without it, the L3, L5 and L13 canaries fail on React's generic outputs.Parity matrix
types/andgenerics/, every target:compile84 tests,toolchain:*84,ssr:*126, andbrowser:*113 passed and 1 skipped (Astro,interactivity). Angular's browser project ran from a checkout whose path holds no.ts: 38 passed..ts: 8817 passed, 242 skipped, 12 failed. The 12 failures arelocator.screenshottimeouts at L10 on Angular, Svelte, Solid and Qwik, none of them on React. The matrix shows no missing cell and no stale entry.pnpm test:canaries L4 L3-mismatched-closing-tag L5-debugger L5-framework-rule: all caught on every target.Checklist
feat(web): sell the next framework on the homepage.pnpm format:check,pnpm lint,pnpm check-typesandpnpm testpass. (The first three pass. In place ofpnpm test: React's package tests, the harness and repo tests, and the whole integration suite as above.)pnpm changeset(see.changeset/README.md).pnpm build, thenpnpm --filter web lighthouse, still scores at least 0.95 in every category.