Add AutoType custom component - #394
Merged
Merged
Conversation
An edit-only node for @json-edit-react/components that replaces the Type
selector with a single text input and infers the value's type from what
you type — "12.3" → number, "true" → boolean, "null" → null, {…}/[…] →
object/array, and anything else a string. It applies to every value node
(guarded to non-collections, so collections keep their built-in "Edit as
JSON" editor); pair it with allowTypeSelection={false}.
The detection lives in the definition's fromStandardType
(componentProps.jsonParse, default JSON.parse). An unchanged confirm
keeps the original value via a value === nodeData.value check — so a
string that merely looks like another type doesn't silently re-type.
Includes a regression test (parse table, string fallback, leaf →
collection, unchanged-revert, custom jsonParse), README + CHANGELOG
entries, and a JSON5-powered demo example at /examples/auto-type.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Bundle size impact
|
| Format | Base raw | PR raw | Δ raw | Base gzip | PR gzip | Δ gzip |
|---|---|---|---|---|---|---|
| esm | 13.97 KB | 14.47 KB | 🔺 +512 B (+3.58%) | 4.63 KB | 4.76 KB | 🔺 +136 B (+2.87%) |
| cjs | 14.56 KB | 15.10 KB | 🔺 +560 B (+3.76%) | 4.48 KB | 4.62 KB | 🔺 +136 B (+2.96%) |
Measured from build/index.{cjs,esm}.js. Gzip at level 9.
Links the component's docs to its /examples/auto-type demo page, matching the shields.io "▶ Live example" pill used in the utils README. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
Closes #393.
A new
AutoTypecomponent for@json-edit-react/components: an edit-only node that replaces the Type selector with a single plain text input and infers the value's type from what you type.12.3→ number,true/false→ boolean,null→ null,{"a":1}→ object,[1,2,3]→ array, and anything that doesn't parse stays a string.({ value }) => !isCollection(value)); collections aren't matched, so they keep their built-in "Edit as JSON" editor. The leaf→collection direction works too — type an object literal into a leaf and it grows into a real collection.allowTypeSelection={false}.How it works
The type detection lives in the definition's
fromStandardType(componentProps?.jsonParse ?? JSON.parse), so every confirm path (Enter / ✓ / Tab) funnels through one transform — the established pattern for the shipped components. The component itself is ~10 lines: aStringEditover the value.An unchanged confirm keeps the original value via a
value === nodeData.valuecheck: the edit buffer holds the committed value verbatim until the first keystroke, andnodeData.valueis the committed value, so opening and confirming a stringy value without editing it never silently re-types it. (A"0077"-style string stays a string regardless, since leading zeros aren't valid number syntax.)Optional
jsonParsecomponent prop (defaultJSON.parse) accepts a lenient parser such asJSON5.parsefor unquoted keys, single quotes and trailing commas.jsonStringifywas deliberately not added — guarded to leaf nodes, the component only ever serialises primitives, whereString()matches any JSON serializer.Included
packages/components/test/AutoType.test.tsx, 12 cases): parse table, string fallback, leaf → collection, leaf → array, unchanged-revert, and the customjsonParseoverride.0.9.0-beta.4./examples/auto-type.Verification
pnpm --filter @json-edit-react/components compile✅,build✅ (tree-shake check still passes —hyperlinkDefinition→ 1.2 kB, no heavy deps pulled).tsc -b✅.🤖 Generated with Claude Code