Convert JSX examples to TypeScript#178
Merged
Merged
Conversation
Renames the counter, i18n, theming, and wizard-form example apps from `.jsx` to `.tsx` so every file in `examples/src/` is TypeScript. Adds the minimal annotations each example needs, drops `allowJs`/`checkJs` from the examples tsconfig, and updates the README links. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diegohaz
commented
May 27, 2026
There was a problem hiding this comment.
Pull request overview
Converts the remaining JSX-based example apps to TypeScript so examples/src/ is fully .ts/.tsx, and updates supporting configuration/docs accordingly.
Changes:
- Renames the counter, i18n, theming, and wizard-form examples from
.jsxto.tsxand adds minimal TypeScript annotations. - Updates
examples/tsconfig.jsonto drop JS-related compiler options now that examples are TypeScript-only. - Updates README example links to point to the new
.tsxfiles.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/constate/README.md | Updates example links to .tsx. |
| examples/tsconfig.json | Removes allowJs/checkJs now that examples are TS-only. |
| examples/src/wizard-form/App.tsx | Migrates wizard-form example to TS with new types for form state/props. |
| examples/src/theming/App.tsx | Adds a typed initialColor prop for the theme hook/provider. |
| examples/src/i18n/App.tsx | Adds locale/translation key types and typed select/label props. |
| examples/src/counter/App.tsx | Adds the counter example as a .tsx file (TypeScript inference-only). |
| examples/src/App.tsx | Updates example imports to the new .tsx paths. |
Comments suppressed due to low confidence (3)
examples/src/wizard-form/App.tsx:10
next/previoususesetStep(step ± 1), which can apply stale state when updates are batched or called multiple times quickly. Use the functional updater form so the new state is derived from the latest step value.
examples/src/wizard-form/App.tsx:23registerusesprevValues[name] || initialValue, which will overwrite legitimate falsy values like0or an empty string. Prefer a nullish check (e.g.,??) so onlyundefined/nulltriggers the fallback.
examples/src/wizard-form/App.tsx:56onChangealways passese.target.value(string) intoupdate, even for thetype="number"age field, soagewill flip fromnumber(initialValues) tostringafter edits. Consider normalizing (e.g., parse/valueAsNumber for number inputs) or restrictingFormValuesto strings to keep types consistent.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Converts `UseFormInputProps` and `StepProps` from `type` aliases to `interface` declarations. Other type aliases in the PR (`FormValues`, `FormState`, `Locale`, `TranslationKey`) are utility/union types and stay as `type`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Owner
Author
|
Fixed
|
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.
Summary
.jsxexample apps (counter,i18n,theming,wizard-form) to.tsxso every file underexamples/src/is TypeScript.Locale/TranslationKeyfrom thetranslationsmap, theming annotates theinitialColorhook prop, wizard-form introducesFormValues = Partial<Record<string, string | number>>plusFormState/StepProps. Counter stays inference-only.allowJs/checkJsfromexamples/tsconfig.jsonand bumps the README example links from.jsxto.tsx.Test plan
pnpm tscpnpm lintpnpm devand click through each example to confirm the converted apps still render the same (counter increments, i18n switches locale, theming opens the color picker, wizard-form walks both steps)🤖 Generated with Claude Code