Skip to content

Convert JSX examples to TypeScript#178

Merged
diegohaz merged 2 commits into
mainfrom
worktree-graceful-wibbling-blum
May 27, 2026
Merged

Convert JSX examples to TypeScript#178
diegohaz merged 2 commits into
mainfrom
worktree-graceful-wibbling-blum

Conversation

@diegohaz
Copy link
Copy Markdown
Owner

Summary

  • Renames the four remaining .jsx example apps (counter, i18n, theming, wizard-form) to .tsx so every file under examples/src/ is TypeScript.
  • Adds the minimal annotations each example needs — i18n gets Locale / TranslationKey from the translations map, theming annotates the initialColor hook prop, wizard-form introduces FormValues = Partial<Record<string, string | number>> plus FormState / StepProps. Counter stays inference-only.
  • Drops the now-unneeded allowJs / checkJs from examples/tsconfig.json and bumps the README example links from .jsx to .tsx.

Test plan

  • pnpm tsc
  • pnpm lint
  • pnpm dev and 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

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>
Comment thread examples/src/wizard-form/App.tsx Outdated
Copy link
Copy Markdown

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

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 .jsx to .tsx and adds minimal TypeScript annotations.
  • Updates examples/tsconfig.json to drop JS-related compiler options now that examples are TypeScript-only.
  • Updates README example links to point to the new .tsx files.

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/previous use setStep(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:23
  • register uses prevValues[name] || initialValue, which will overwrite legitimate falsy values like 0 or an empty string. Prefer a nullish check (e.g., ??) so only undefined/null triggers the fallback.
    examples/src/wizard-form/App.tsx:56
  • onChange always passes e.target.value (string) into update, even for the type="number" age field, so age will flip from number (initialValues) to string after edits. Consider normalizing (e.g., parse/valueAsNumber for number inputs) or restricting FormValues to 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>
@diegohaz
Copy link
Copy Markdown
Owner Author

Fixed

  • 2dd2e82 (reply): Converted UseFormInputProps and StepProps from type aliases to interface declarations per "Prefer interface whenever possible". The remaining type aliases in this PR (FormValues, FormState, Locale, TranslationKey) are utility/keyof types and cannot be expressed as interfaces, so they stay as type.

@diegohaz diegohaz merged commit 28d32e1 into main May 27, 2026
5 checks passed
@diegohaz diegohaz deleted the worktree-graceful-wibbling-blum branch May 27, 2026 22:07
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.

2 participants