@contember/bindx-react 0.1.42 → 0.1.44

package/dist/jsx/collectorProxy.d.ts

@@ -10,5 +10,5 @@ import { type EntityAccessor } from './types.js';
  * @param entityName - The entity type name (e.g., 'Task'), used for schema lookups
  * @param schemaRegistry - The schema registry for field type information
  */
-export declare function createCollectorProxy<T>(scope: SelectionScope, entityName?: string | null, schemaRegistry?: SchemaRegistry<Record<string, object>> | null): EntityAccessor<T>;
+export declare function createCollectorProxy<T>(scope: SelectionScope, entityName?: string | null, schemaRegistry?: SchemaRegistry<Record<string, object>> | null, parentPath?: readonly string[]): EntityAccessor<T>;
 //# sourceMappingURL=collectorProxy.d.ts.map

package/dist/jsx/collectorProxy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collectorProxy.d.ts","sourceRoot":"","sources":["../../src/jsx/collectorProxy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAyB,MAAM,kBAAkB,CAAA;AACxE,OAAO,EACN,KAAK,cAAc,EAUnB,MAAM,YAAY,CAAA;AASnB;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACrC,KAAK,EAAE,cAAc,EACrB,UAAU,GAAE,MAAM,GAAG,IAAW,EAChC,cAAc,GAAE,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,IAAW,GAClE,cAAc,CAAC,CAAC,CAAC,CA2CnB"}
+{"version":3,"file":"collectorProxy.d.ts","sourceRoot":"","sources":["../../src/jsx/collectorProxy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAyB,MAAM,kBAAkB,CAAA;AACxE,OAAO,EACN,KAAK,cAAc,EAUnB,MAAM,YAAY,CAAA;AASnB;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACrC,KAAK,EAAE,cAAc,EACrB,UAAU,GAAE,MAAM,GAAG,IAAW,EAChC,cAAc,GAAE,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG,IAAW,EACpE,UAAU,GAAE,SAAS,MAAM,EAAO,GAChC,cAAc,CAAC,CAAC,CAAC,CA2CnB"}

package/dist/jsx/components/Entity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Entity.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/Entity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAKrH,OAAO,KAAK,EAAkB,SAAS,EAAiB,MAAM,aAAa,CAAA;AAC3E,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAiB,KAAK,UAAU,EAAgF,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAI1M;;;GAGG;AACH,UAAU,eAAe,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAChE,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC3B,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACxE,qBAAqB;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAA;CAC9C;AAED;;GAEG;AACH,UAAU,aAAa,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACjG,sFAAsF;IACtF,EAAE,EAAE,iBAAiB,CAAA;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,uBAAuB;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;GAEG;AACH,UAAU,iBAAiB,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACrG,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,8DAA8D;IAC9D,MAAM,EAAE,IAAI,CAAA;IACZ,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACrF,aAAa,CAAC,QAAQ,CAAC,GACvB,iBAAiB,CAAC,QAAQ,CAAC,CAAA;AAsP9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,UAAU,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1D,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC1B,YAAY,GAAG,IAAI,CA2BrB;AAGD,eAAO,MAAM,MAAM,EAAkC,OAAO,UAAU,CAAA"}
+{"version":3,"file":"Entity.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/Entity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAKrH,OAAO,KAAK,EAAkB,SAAS,EAAiB,MAAM,aAAa,CAAA;AAC3E,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAiB,KAAK,UAAU,EAAgF,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAI1M;;;GAGG;AACH,UAAU,eAAe,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAChE,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC3B,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACxE,qBAAqB;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAA;CAC9C;AAED;;GAEG;AACH,UAAU,aAAa,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACjG,sFAAsF;IACtF,EAAE,EAAE,iBAAiB,CAAA;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,uBAAuB;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;GAEG;AACH,UAAU,iBAAiB,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAE,SAAQ,eAAe,CAAC,QAAQ,CAAC;IACrG,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,8DAA8D;IAC9D,MAAM,EAAE,IAAI,CAAA;IACZ,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACrF,aAAa,CAAC,QAAQ,CAAC,GACvB,iBAAiB,CAAC,QAAQ,CAAC,CAAA;AAiR9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,UAAU,CAAC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1D,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC1B,YAAY,GAAG,IAAI,CA2BrB;AAGD,eAAO,MAAM,MAAM,EAAkC,OAAO,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@contember/bindx-react",
-	"version": "0.1.42",
+	"version": "0.1.44",
 	"description": "Type-safe React data binding framework",
 	"type": "module",
 	"main": "./src/index.ts",
@@ -15,8 +15,8 @@
 		"react": ">=18.0.0"
 	},
 	"dependencies": {
-		"@contember/bindx": "0.1.42",
-		"@contember/bindx-client": "0.1.42",
+		"@contember/bindx": "0.1.44",
+		"@contember/bindx-client": "0.1.44",
 		"@contember/graphql-client": "^2.1.0-beta.1",
 		"@radix-ui/primitive": "^1.1.3",
 		"@radix-ui/react-slot": "^1.2.4"

package/src/hooks/useEntity.ts

@@ -324,8 +324,8 @@ export function useEntity(
 
 	// --- EntityHandle ---
 	const rawHandle = useMemo(
-		() => EntityHandle.createRaw(id, entityType, store, dispatcher, schemaRegistry as SchemaRegistry<Record<string, object>>),
-		[id, entityType, store, dispatcher, schemaRegistry, snapshot],
+		() => EntityHandle.createRaw(id, entityType, store, dispatcher, schemaRegistry as SchemaRegistry<Record<string, object>>, undefined, selectionMeta),
+		[id, entityType, store, dispatcher, schemaRegistry, snapshot, selectionMeta],
 	)
 
 	const handle = useMemo(
@@ -333,11 +333,10 @@ export function useEntity(
 		[rawHandle],
 	)
 
-	useEffect(() => {
-		return () => {
-			rawHandle.dispose()
-		}
-	}, [rawHandle])
+	// `snapshot` is a useMemo dep, so `rawHandle` is recreated on every entity data change (to give
+	// memoized children a fresh reference). Superseded handles need no cleanup: EntityHandle is a
+	// stateless live view that owns no resources (see BaseHandle), so it is reclaimed by GC once
+	// unreferenced and a handle a consumer still holds stays usable for late reads/writes.
 
 	// --- Persist & reset callbacks ---
 	const persist = useCallback(async () => {

package/src/hooks/useEntityList.ts

@@ -174,18 +174,22 @@ export function useEntityList(
 	const { store, dispatcher, batcher } = useBindxContext()
 
 	// --- Selection resolution ---
+	// Both selection paths (definer 3rd-arg and pre-resolved options.selection)
+	// are stabilized identically: the raw meta is resolved every render, but its
+	// reference is only swapped when the serialized query content actually
+	// changes. This keeps `selectionMeta` identity stable across content-identical
+	// renders (e.g. DataGrid rebuilding a new-but-equal selection object), which
+	// in turn keeps the data-loading effect from refiring spuriously.
 	// resolveSelectionMeta is a pure function; useRef is called unconditionally.
-	const resolvedMeta = definer ? resolveSelectionMeta(definer) : null
-	const definerQueryKey = resolvedMeta ? JSON.stringify(buildQueryFromSelection(resolvedMeta)) : null
-	const selectionRef = useRef<{ meta: SelectionMeta; queryKey: string } | null>(null)
+	const rawMeta = definer ? resolveSelectionMeta(definer) : options.selection!
+	const selectionContentKey = JSON.stringify(buildQueryFromSelection(rawMeta))
+	const selectionRef = useRef<{ meta: SelectionMeta; contentKey: string } | null>(null)
 
-	if (definerQueryKey && resolvedMeta) {
-		if (!selectionRef.current || selectionRef.current.queryKey !== definerQueryKey) {
-			selectionRef.current = { meta: resolvedMeta, queryKey: definerQueryKey }
-		}
+	if (!selectionRef.current || selectionRef.current.contentKey !== selectionContentKey) {
+		selectionRef.current = { meta: rawMeta, contentKey: selectionContentKey }
 	}
 
-	const selectionMeta = definer ? selectionRef.current!.meta : options.selection!
+	const selectionMeta = selectionRef.current.meta
 
 	// --- Stable options key ---
 	const optionsKey = useMemo(
@@ -199,11 +203,14 @@ export function useEntityList(
 	)
 
 	// --- Effective query key for cache invalidation ---
+	// Derived from the stable selectionContentKey so it keeps identity while the
+	// query content is unchanged, even if the caller passes a fresh selection object.
 	const effectiveQueryKey = useMemo(() => {
 		if (options.queryKey) return options.queryKey
-		const query = buildQueryFromSelection(selectionMeta)
-		return JSON.stringify({ entityType, query })
-	}, [options.queryKey, selectionMeta, entityType])
+		// selectionContentKey is already the serialized query; just namespace it
+		// by entity type (avoids double-encoding the JSON string).
+		return `${entityType}:${selectionContentKey}`
+	}, [options.queryKey, selectionContentKey, entityType])
 
 	// --- List state tracking ---
 	const listStateRef = useRef<{
@@ -283,6 +290,26 @@ export function useEntityList(
 		[store],
 	)
 
+	// Discard never-persisted drafts when the list unmounts. List-level creates are
+	// top-level roots (nothing else anchors them); dropping the root and running the
+	// reachability-aware sweep frees a truly-orphaned draft while preserving one that
+	// was meanwhile connected into another live parent (the diamond / shared-create
+	// case). A persisted draft (rekeyed to a server id) is left untouched.
+	useEffect(() => {
+		return () => {
+			let unrooted = false
+			for (const item of listStateRef.current.items) {
+				if (isTempId(item.id) && !store.getPersistedId(entityType, item.id)) {
+					store.unregisterRootEntity(entityType, item.id)
+					unrooted = true
+				}
+			}
+			if (unrooted) {
+				store.sweepUnreachableCreated()
+			}
+		}
+	}, [store, entityType])
+
 	// --- Snapshot ---
 	const getSnapshot = useCallback((): UseEntityListResult<any> => {
 		const state = listStateRef.current
@@ -314,6 +341,8 @@ export function useEntityList(
 					store,
 					dispatcher,
 					schemaRegistry as SchemaRegistry<Record<string, object>>,
+					undefined,
+					selectionMeta,
 				) as unknown as EntityAccessor<any>
 			})
 
@@ -341,7 +370,7 @@ export function useEntityList(
 		}
 
 		return result
-	}, [entityType, store, dispatcher, schemaRegistry, addItem, removeItem, moveItem])
+	}, [entityType, store, dispatcher, schemaRegistry, selectionMeta, addItem, removeItem, moveItem])
 
 	const isEqual = useCallback(
 		(a: UseEntityListResult<any>, b: UseEntityListResult<any>): boolean => {

package/src/jsx/collectorProxy.ts

@@ -33,13 +33,14 @@ export function createCollectorProxy<T>(
 	scope: SelectionScope,
 	entityName: string | null = null,
 	schemaRegistry: SchemaRegistry<Record<string, object>> | null = null,
+	parentPath: readonly string[] = [],
 ): EntityAccessor<T> {
 	const fieldsProxy = new Proxy({} as EntityFields<T>, {
 		get(_, fieldName: string): FieldAccessor<unknown> | HasManyAccessor<unknown> | HasOneAccessor<unknown> {
 			// Return a collector ref that works for all field types
 			// The actual type (scalar/hasMany/hasOne) will be determined
 			// by how it's used in components or by schema lookup
-			return createCollectorFieldRef(scope, fieldName, entityName, schemaRegistry)
+			return createCollectorFieldRef(scope, fieldName, entityName, schemaRegistry, parentPath)
 		},
 	})
 
@@ -97,6 +98,7 @@ function createCollectorFieldRef(
 	fieldName: string,
 	entityName: string | null,
 	schemaRegistry: SchemaRegistry<Record<string, object>> | null,
+	parentPath: readonly string[] = [],
 ): CollectorRef {
 	// Look up field type from schema if available
 	const fieldDef = entityName && schemaRegistry
@@ -132,11 +134,17 @@ function createCollectorFieldRef(
 		return childScope
 	}
 
+	// Absolute path from the root collector to this field. `fieldName` / `path`
+	// stay relative (last segment only) so selection/relation metadata is
+	// unaffected; `fullPath` carries the dotted chain for DataGrid columns.
+	const fullPath = [...parentPath, fieldName]
+
 	const meta = {
 		entityType: targetEntityName ?? '', // Collection phase - entity type from schema
 		entityId: '', // Collection phase - no entity
 		path: [fieldName],
 		fieldName,
+		fullPath,
 		isArray: isHasManyRelation,
 		isRelation: isHasOneRelation || isHasManyRelation,
 		enumName,
@@ -149,8 +157,10 @@ function createCollectorFieldRef(
 		get(_, nestedFieldName: string) {
 			// Get child scope (upgrades to relation)
 			const scope = getChildScope()
-			// Create nested field ref in the child scope, passing target entity info
-			return createCollectorFieldRef(scope, nestedFieldName, targetEntityName, schemaRegistry)
+			// Create nested field ref in the child scope, passing target entity info.
+			// Thread the current field's fullPath so e.g. `it.author.name` carries
+			// the dotted absolute path `['author', 'name']`.
+			return createCollectorFieldRef(scope, nestedFieldName, targetEntityName, schemaRegistry, fullPath)
 		},
 	})
 
@@ -158,7 +168,9 @@ function createCollectorFieldRef(
 		// Get child scope and mark as array relation
 		const scope = getChildScope()
 		parentScope.markAsArray(fieldName)
-		// Call fn once with collector to gather nested selection, passing target entity info
+		// Call fn once with collector to gather nested selection, passing target entity info.
+		// Items of a has-many start a fresh path: dotted where/sort paths only
+		// make sense across has-one chains, not across collection items.
 		fn(createCollectorProxy<unknown>(scope, targetEntityName, schemaRegistry), 0)
 		return []
 	}
@@ -211,9 +223,11 @@ function createCollectorFieldRef(
 		$isDirty: false,
 		$fields: hasOneFieldsProxy,
 		get $entity(): EntityAccessor<unknown> {
-			// Get child scope (upgrades to relation) and return proxy with scope
+			// Get child scope (upgrades to relation) and return proxy with scope.
+			// Thread fullPath for has-one so nested fields keep their dotted chain;
+			// has-many items start fresh (handled via getById/map).
 			const scope = getChildScope()
-			return createCollectorProxy<unknown>(scope, targetEntityName, schemaRegistry)
+			return createCollectorProxy<unknown>(scope, targetEntityName, schemaRegistry, isHasManyRelation ? [] : fullPath)
 		},
 		$delete: () => {},
 		$remove: () => {},

package/src/jsx/components/Entity.tsx

@@ -185,6 +185,28 @@ function EntityCreateMode({
 		return id
 	}, [entityType, store])
 
+	// Lifecycle of the draft entity:
+	// - Re-seed it under the SAME temp id if a previous unmount's cleanup removed
+	//   it. This keeps the form bound across a React StrictMode mount→cleanup→mount
+	//   cycle (effects run twice in dev), where the memoized id survives but the
+	//   snapshot would otherwise be gone. No-op on first mount and after the entity
+	//   was persisted (rekeyed to a server id).
+	// - On unmount, discard a never-persisted draft. Drop its root registration and
+	//   let the reachability-aware sweep reclaim it ONLY if nothing else references
+	//   it — a draft connected into another live parent stays reachable and survives
+	//   (the diamond / shared-create case). A persisted entity is left untouched.
+	useEffect(() => {
+		if (!store.getPersistedId(entityType, tempId) && !store.hasEntity(entityType, tempId)) {
+			store.createEntity(entityType, { id: tempId })
+		}
+		return () => {
+			if (!store.getPersistedId(entityType, tempId)) {
+				store.unregisterRootEntity(entityType, tempId)
+				store.sweepUnreachableCreated()
+			}
+		}
+	}, [store, entityType, tempId])
+
 	// Subscribe to store changes for this entity
 	const subscribe = useCallback(
 		(callback: () => void) => store.subscribeToEntity(entityType, tempId, callback),
@@ -298,7 +320,12 @@ function EntityHandleRenderer({
 		[rawHandle],
 	)
 
-	useEffect(() => () => { rawHandle.dispose() }, [rawHandle])
+	// `version` is a useMemo dep, so `rawHandle` is recreated on every entity data change (to give
+	// memoized children a fresh reference). Superseded handles need no cleanup: EntityHandle and its
+	// child Field/HasMany handles are stateless live views that own no resources (see BaseHandle),
+	// so they are reclaimed by GC once unreferenced — and a consumer that still holds an accessor
+	// from an earlier render (e.g. the Slate block editor dispatching `setValue` from an async
+	// onChange after the version bumped) can keep using it.
 
 	const result = children(handle as EntityAccessor<unknown>)
 	return <>{annotateElement(result, { 'data-entity': entityType, 'data-entity-id': entityId })}</>