@contember/bindx-react 0.1.44 → 0.1.46

package/dist/hooks/ContemberBindxProvider.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-import { GraphQlClient } from '@contember/graphql-client';
 import { SnapshotStore, UndoManager, type SchemaDefinition, type SchemaNames, type UndoManagerConfig, type UpdateMode } from '@contember/bindx';
+import { type BindxGraphQlClient } from './BackendAdapterContext.js';
 /**
  * Converts SchemaNames (Contember format) to SchemaDefinition (bindx format)
  * so that a SchemaRegistry can be created for standalone hooks.
@@ -16,7 +16,7 @@ export interface ContemberBindxProviderProps {
     store?: SnapshotStore;
     /** Children */
     children: ReactNode;
-    client: GraphQlClient;
+    client: BindxGraphQlClient;
     /** Enable undo/redo functionality. Pass true to auto-create an UndoManager, or pass an UndoManager instance. */
     undoManager?: UndoManager | boolean;
     /** Configuration for auto-created undo manager (only used when undoManager={true}) */

package/dist/hooks/ContemberBindxProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContemberBindxProvider.d.ts","sourceRoot":"","sources":["../../src/hooks/ContemberBindxProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAAoB,aAAa,EAAuF,WAAW,EAAqC,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAiB,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAIxS;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAwBnG;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC3C,gDAAgD;IAChD,MAAM,EAAE,WAAW,CAAA;IACnB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,eAAe;IACf,QAAQ,EAAE,SAAS,CAAA;IAEnB,MAAM,EAAE,aAAa,CAAA;IAErB,gHAAgH;IAChH,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,CAAA;IACnC,sFAAsF;IACtF,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAA;IAC9B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAA;CACf;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,mEAkEjC,CAAA"}
+{"version":3,"file":"ContemberBindxProvider.d.ts","sourceRoot":"","sources":["../../src/hooks/ContemberBindxProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAoB,aAAa,EAAuF,WAAW,EAAqC,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAiB,KAAK,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACxS,OAAO,EAAwC,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAG1G;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,WAAW,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAwBnG;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC3C,gDAAgD;IAChD,MAAM,EAAE,WAAW,CAAA;IACnB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,eAAe;IACf,QAAQ,EAAE,SAAS,CAAA;IAEnB,MAAM,EAAE,kBAAkB,CAAA;IAE1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,WAAW,GAAG,OAAO,CAAA;IACnC,sFAAsF;IACtF,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAA;IAC9B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAA;CACf;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,mEAkEjC,CAAA"}

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;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"}
+{"version":3,"file":"Entity.d.ts","sourceRoot":"","sources":["../../../src/jsx/components/Entity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkG,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAKhJ,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;AAmT9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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.44",
+	"version": "0.1.46",
 	"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.44",
-		"@contember/bindx-client": "0.1.44",
+		"@contember/bindx": "0.1.46",
+		"@contember/bindx-client": "0.1.46",
 		"@contember/graphql-client": "^2.1.0-beta.1",
 		"@radix-ui/primitive": "^1.1.3",
 		"@radix-ui/react-slot": "^1.2.4"

package/src/hooks/ContemberBindxProvider.tsx

@@ -1,8 +1,7 @@
 import { memo, useMemo, type ReactNode } from 'react'
-import { GraphQlClient } from '@contember/graphql-client'
 import { ContentClient } from '@contember/bindx-client'
 import { ContemberAdapter, SnapshotStore, ActionDispatcher, BatchPersister, MutationCollector, ContemberSchemaMutationAdapter, UndoManager, SchemaRegistry, NotificationStore, type SchemaDefinition, type SchemaNames, type FieldDef, type UndoManagerConfig, type UpdateMode } from '@contember/bindx'
-import { BindxContext, type BindxContextValue } from './BackendAdapterContext.js'
+import { BindxContext, type BindxContextValue, type BindxGraphQlClient } from './BackendAdapterContext.js'
 import { QueryBatcher } from '../batching/QueryBatcher.js'
 
 /**
@@ -46,7 +45,7 @@ export interface ContemberBindxProviderProps {
 	/** Children */
 	children: ReactNode
 
-	client: GraphQlClient
+	client: BindxGraphQlClient
 
 	/** Enable undo/redo functionality. Pass true to auto-create an UndoManager, or pass an UndoManager instance. */
 	undoManager?: UndoManager | boolean

package/src/jsx/components/Entity.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useMemo, useRef, useSyncExternalStore, type ReactElement } from 'react'
+import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactElement } from 'react'
 import { useBindxContext, useSchemaRegistry } from '../../hooks/BackendAdapterContext.js'
 import { annotateElement } from '../devAnnotations.js'
 import { useEntity } from '../../hooks/useEntity.js'
@@ -163,49 +163,83 @@ interface CreateModeSnapshot {
 }
 
 /**
- * Internal component for create mode (creating a new entity)
+ * Internal component for create mode (creating a new entity).
+ *
+ * The draft entity is minted in a layout effect, NEVER during render. A
+ * render-phase store mutation is unsafe two ways:
+ *  - it leaks the draft whenever the render is discarded — StrictMode
+ *    double-invoke, an aborted concurrent render, a thrown render, Suspense —
+ *    because no effect cleanup runs for a render that never commits;
+ *  - it synchronously notifies the store's global subscribers, force-updating an
+ *    already-mounted aggregate subscriber (e.g. a `usePersist` consumer)
+ *    mid-render. React rejects that ("Cannot update a component while rendering a
+ *    different component") and the create form renders blank.
+ * A layout effect runs before paint, so the draft exists before the user sees
+ * anything and its creation notifies subscribers normally (no stale dirty state).
  */
 function EntityCreateMode({
 	entityType,
 	children,
-	error: errorFallback,
 	onPersisted,
 }: EntityCreateModeProps): ReactElement {
-	const { store, dispatcher } = useBindxContext()
-	const schemaRegistry = useSchemaRegistry()
+	const { store } = useBindxContext()
 	const tempIdRef = useRef<string | null>(null)
-
-	// Create entity once on mount (using ref to ensure only one creation)
-	const tempId = useMemo(() => {
-		if (tempIdRef.current) {
-			return tempIdRef.current
-		}
-		const id = store.createEntity(entityType)
-		tempIdRef.current = id
-		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 })
+	const [tempId, setTempId] = useState<string | null>(null)
+
+	useLayoutEffect(() => {
+		if (!tempIdRef.current) {
+			tempIdRef.current = store.createEntity(entityType)
+			setTempId(tempIdRef.current)
+		} else if (!store.getPersistedId(entityType, tempIdRef.current) && !store.hasEntity(entityType, tempIdRef.current)) {
+			// Re-seed under the SAME temp id if a previous cleanup removed it (a React
+			// StrictMode mount→cleanup→mount cycle), so the form stays bound across it.
+			store.createEntity(entityType, { id: tempIdRef.current })
 		}
 		return () => {
-			if (!store.getPersistedId(entityType, tempId)) {
-				store.unregisterRootEntity(entityType, tempId)
+			const id = tempIdRef.current
+			// 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.
+			if (id && !store.getPersistedId(entityType, id)) {
+				store.unregisterRootEntity(entityType, id)
 				store.sweepUnreachableCreated()
 			}
 		}
-	}, [store, entityType, tempId])
+	}, [store, entityType])
+
+	// First render, before the layout effect mints the draft. The draft is created
+	// before paint, so this empty frame is never visible.
+	if (tempId === null) {
+		return <></>
+	}
+
+	return (
+		<EntityCreateModeInner entityType={entityType} tempId={tempId} onPersisted={onPersisted}>
+			{children}
+		</EntityCreateModeInner>
+	)
+}
+
+/**
+ * Renders the create-mode draft once it exists. Split out of EntityCreateMode so
+ * its store subscriptions and selection collection always run against a real
+ * tempId (never null) — the hooks stay unconditional.
+ */
+function EntityCreateModeInner({
+	entityType,
+	tempId,
+	children,
+	onPersisted,
+}: {
+	entityType: string
+	tempId: string
+	children: (entity: EntityAccessor<unknown>) => React.ReactNode
+	onPersisted?: (id: string) => void
+}): ReactElement {
+	const { store, dispatcher } = useBindxContext()
+	const schemaRegistry = useSchemaRegistry()
 
 	// Subscribe to store changes for this entity
 	const subscribe = useCallback(