@contember/bindx-react 0.1.56 → 0.1.59

package/src/jsx/index.ts

@@ -101,9 +101,27 @@ export {
 // Standalone createComponent function
 export { createComponent } from './standaloneCreateComponent.js'
 
+// Static (precompiled) selection validate-mode toggle
+export { setStaticSelectionValidation } from './componentFactory.js'
+
+// Compiled-selections killswitch — disable compiled literals at runtime without a rebuild
+export { setCompiledSelectionsEnabled } from './componentFactory.js'
+
+// Compiled selection contract (v2) — emitted by the selection compiler
+export type { CompiledSelection, CompiledHole } from './compiledSelection.js'
+
 // withCollector — attach staticRender to a component for selection collection
 export { withCollector } from './withCollector.js'
 
+// Declarative collector contracts — an alternative to a hand-written staticRender
+export {
+	COLLECTOR_CONTRACT,
+	itemOf,
+	entityOf,
+	type CallbackContract,
+	type CollectorContract,
+} from './collectorContract.js'
+
 export type {
 	SelectionPropMeta,
 	BindxComponentBase,

package/src/jsx/proxyShared.ts

@@ -16,6 +16,15 @@ export const ENTITY_ACCESSOR_PROPERTIES = new Set([
 	'__entityType', '__entityName', '__schema',
 ])
 
+/**
+ * String keys React probes on any object it treats as a JSX child: `$$typeof`
+ * (isValidElement) and the `@@iterator` fallback (getIteratorFn). A collector
+ * proxy must return undefined for these — delegating to field access would
+ * upgrade a scalar to a bogus relation. Symbol probes (Symbol.iterator, …) pass
+ * through the symbol branch already.
+ */
+export const REACT_ELEMENT_PROBE_KEYS = new Set(['$$typeof', '@@iterator'])
+
 /**
  * Wraps an object with $fields in a Proxy that supports direct field access.
  * - `entity.fieldName` is equivalent to `entity.$fields.fieldName`
@@ -29,6 +38,11 @@ export function wrapEntityRefWithFieldAccessProxy<T>(ref: { $fields: EntityField
 				return Reflect.get(target, prop)
 			}
 
+			// React element probes must not be captured as fields
+			if (REACT_ELEMENT_PROBE_KEYS.has(prop)) {
+				return Reflect.get(target, prop)
+			}
+
 			// Known accessor properties - pass through
 			if (ENTITY_ACCESSOR_PROPERTIES.has(prop)) {
 				return Reflect.get(target, prop)

package/src/jsx/withCollector.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react'
+import type { CollectorContract } from './collectorContract.js'
+import { COLLECTOR_CONTRACT, deriveContractStaticRender } from './collectorContract.js'
 
 /**
  * Attaches a static render function to a component for selection collection.
@@ -25,21 +27,34 @@ import type { ReactNode } from 'react'
  *   )
  * )
  *
- * // Programmatic field access (no JSX needed)
- * export const Uploader = withCollector(
- *   function Uploader({ field, fileType }) { ... },
- *   (props) => {
- *     const entity = props.field.$entity
- *     for (const ext of props.fileType.extractors) entity[ext.fieldName]
- *     return null
- *   }
+ * // Declarative contract instead of a hand-written staticRender: `children` is invoked
+ * // per item of the `field` has-many relation. The staticRender is derived automatically.
+ * export const ItemRepeater = withCollector(
+ *   function ItemRepeater({ field, children, ... }) { ... },
+ *   { children: itemOf('field') }
  * )
  * ```
  */
 export function withCollector<TComponent extends (...args: never[]) => ReactNode>(
 	component: TComponent,
 	staticRender: (props: Parameters<TComponent>[0]) => ReactNode,
+): TComponent
+export function withCollector<TComponent extends (...args: never[]) => ReactNode>(
+	component: TComponent,
+	contract: CollectorContract,
+): TComponent
+export function withCollector<TComponent extends (...args: never[]) => ReactNode>(
+	component: TComponent,
+	contractOrStaticRender: ((props: Parameters<TComponent>[0]) => ReactNode) | CollectorContract,
 ): TComponent {
-	(component as TComponent & { staticRender: typeof staticRender }).staticRender = staticRender
-	return component
+	// A function is a staticRender; a plain object is a declarative contract.
+	if (typeof contractOrStaticRender === 'function') {
+		return Object.assign(component, { staticRender: contractOrStaticRender })
+	}
+
+	const contract = contractOrStaticRender
+	return Object.assign(component, {
+		staticRender: deriveContractStaticRender(contract),
+		[COLLECTOR_CONTRACT]: contract,
+	})
 }