Skip to content

Add AutoType custom component - #394

Merged
CarlosNZ merged 2 commits into
mainfrom
393-auto-type
Jul 1, 2026
Merged

Add AutoType custom component#394
CarlosNZ merged 2 commits into
mainfrom
393-auto-type

Conversation

@CarlosNZ

Copy link
Copy Markdown
Owner

Closes #393.

A new AutoType component 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.
  • Applies to every value node (guard ({ 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.
  • No type selector by design — pair it with 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: a StringEdit over the value.

An unchanged confirm keeps the original value via a value === nodeData.value check: the edit buffer holds the committed value verbatim until the first keystroke, and nodeData.value is 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 jsonParse component prop (default JSON.parse) accepts a lenient parser such as JSON5.parse for unquoted keys, single quotes and trailing commas. jsonStringify was deliberately not added — guarded to leaf nodes, the component only ever serialises primitives, where String() matches any JSON serializer.

Included

  • Component + definition + barrel export.
  • Regression test (packages/components/test/AutoType.test.tsx, 12 cases): parse table, string fallback, leaf → collection, leaf → array, unchanged-revert, and the custom jsonParse override.
  • README "Available components" row + details section, and a CHANGELOG entry under the pending 0.9.0-beta.4.
  • A JSON5-powered demo example at /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).
  • Full Jest suite: 30 suites, 712 passed, no regressions.
  • Demo tsc -b ✅.

🤖 Generated with Claude Code

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>
@github-actions

Copy link
Copy Markdown

Bundle size impact

@json-edit-react/components

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>
@CarlosNZ
CarlosNZ merged commit 3def638 into main Jul 1, 2026
2 checks passed
@CarlosNZ
CarlosNZ deleted the 393-auto-type branch July 1, 2026 10:38
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.

Custom components: "Auto-type" custom node

1 participant