Skip to content

Filter-function toolkit for @json-edit-react/utils (#343)#367

Merged
CarlosNZ merged 12 commits into
v2.0-devfrom
343-helpers-for-filter-functions
Jun 16, 2026
Merged

Filter-function toolkit for @json-edit-react/utils (#343)#367
CarlosNZ merged 12 commits into
v2.0-devfrom
343-helpers-for-filter-functions

Conversation

@CarlosNZ

Copy link
Copy Markdown
Owner

Closes #343.

Adds a composable predicate toolkit to @json-edit-react/utils for the editor's allow* props (allowEdit, allowDelete, allowAdd, allowTypeSelection, …) and searchFilter. Hand-writing those filters means destructuring key / path / level / value and combining by hand; the kit replaces that with small, named, composable pieces.

API

  • Property buildersbyKey, byPath (glob / RegExp / segment-array paths), byLevel, bySize, byType, byValue.
  • Position constantsroot, collections, primitives, inArray, inObject.
  • Combinatorsand / or / not; they thread searchText, so search bridges compose with structural builders.
  • Search bridgesmatchesSearch(mode?) (wraps core's matchNode / matchNodeKey) and matchRecord({ fields, path? }) (reveals a whole record when one of its fields matches the search).

Every builder returns one FilterPredicate shape — (node, searchText?) => boolean — whose optional second argument makes it assignable to both FilterFunction and SearchFilterFunction, so a single set of builders serves every filter prop.

Notes

  • Interning — each builder returns a referentially-stable instance per argument set, so a builder can be written inline on a prop (allowEdit={byKey('id')}) without churning the editor's fine-grained re-rendering.
  • Zero runtime deps — the search bridges reuse core's exported matchNode / matchNodeKey / extract (externalized in the build).
  • Glob pathsbyPath supports *, **, ?, {a,b} alternation and bracket/dotted index notation, with RegExp and segment-array escape hatches.

Demo & docs

  • Applies the kit across several dataDefinitions data sets (originals kept as comments) and adds a "Filter toolkit" example page that highlights matched nodes and exercises the search bridges.
  • Per-helper src/filters/README.md plus a base-README overview, an IDEAS.md update, and a changeset (@json-edit-react/utils, minor).

Tests cover the builders against a shared fixture, an RTL integration pass against a live <JsonEditor>, and the glob engine directly.

🤖 Generated with Claude Code

@github-actions

github-actions Bot commented Jun 16, 2026

Copy link
Copy Markdown

Bundle size impact

@json-edit-react/utils

Format Base raw PR raw Δ raw Base gzip PR gzip Δ gzip
esm 3.37 KB 6.37 KB 🔺 +3.00 KB (+89.21%) 1.49 KB 2.69 KB 🔺 +1.20 KB (+80.71%)
cjs 3.46 KB 6.54 KB 🔺 +3.08 KB (+89.02%) 1.47 KB 2.66 KB 🔺 +1.18 KB (+80.33%)

Measured from build/index.{cjs,esm}.js. Gzip at level 9.

Comment on lines +3 to +7
// Compiles a path pattern into a matcher over a node's `path`. The three input
// forms collapse to two strategies: a RegExp is tested against the stringified
// path; a glob string or a segment array compiles to a sequence of per-segment
// matchers plus the `**` globstar. Compilation happens once (at builder-call
// time, behind `intern`); the returned matcher runs per node.

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The docstring here should give a brief overview of the glob pattern matching rules -- what does * and ** do, etc?

<JsonEditor allowAdd={not(root)} allowDelete={not(root)} data={data} setData={setData} />
```

You can write these **inline**, as above, without a `useMemo` or hoisting them out of render — see [Referential stability](#referential-stability) for why that's safe.

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs a link to the Example page. Assume example will be hosted at the same URL as the current demo: https://carlosnz.github.io/json-edit-react/

Add a brief glob-matching-rules overview to _glob.ts's docstring and a
link to the live demo in the filters README quick-start.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@CarlosNZ CarlosNZ merged commit 5e4a765 into v2.0-dev Jun 16, 2026
2 checks passed
@CarlosNZ CarlosNZ deleted the 343-helpers-for-filter-functions branch June 16, 2026 11:39
CarlosNZ added a commit that referenced this pull request Jun 16, 2026
Resolves the stacked-PR squash cascade: #367 (the filter toolkit) landed on
v2.0-dev as a squash, conflicting with this branch's copy of the same work.
Kept this branch's evolution (filters moved to the /filters subpath,
custom-component data→value fix) and pulled in the two late-#367 doc edits
that weren't here yet (filters/README live-demo link, _glob.ts glob-rules
comment).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.

Filter-function toolkit for /utils — composable predicates for allow* props and searchFilter

1 participant