Feat/UI lib

packages/bindx-react/src/jsx/withCollector.ts

@@ -7,39 +7,35 @@ import type { ReactNode } from 'react'
  * analyzing runtime children. Props contain collector proxies, so field accesses
  * are tracked automatically. The returned JSX is analyzed for nested components.
  *
+ * When called with a single argument, the component function itself is used as
+ * staticRender. This works when the component is pure JSX (no hooks) and delegates
+ * to an inner component that has its own `getSelection`.
+ *
  * @example
  * ```tsx
- * // Simple: children is a render prop receiving has-one entity
- * export const SelectField = withCollector(
- *   function SelectField({ field, children, ... }) { ... },
- *   (props) => props.children(props.field.$entity)
- * )
- *
- * // Composing with HasMany for iteration
- * export const DefaultRepeater = withCollector(
- *   function DefaultRepeater({ field, children, ... }) { ... },
- *   (props) => (
- *     <HasMany field={props.field}>
- *       {item => props.children(item, collectionItemInfo)}
- *     </HasMany>
- *   )
+ * // Single-arg: component IS the staticRender (no hooks, delegates to inner)
+ * export const StyledRepeater = withCollector(
+ *   function StyledRepeater({ field, children }) {
+ *     return (
+ *       <RepeaterCore field={field}>
+ *         {(items) => <div>{items.map((e, info) => children(e, info))}</div>}
+ *       </RepeaterCore>
+ *     )
+ *   }
  * )
  *
- * // 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
- *   }
+ * // Two-arg: explicit staticRender for components with hooks or custom collection
+ * export const SelectField = withCollector(
+ *   function SelectField({ field, children }) { ... },
+ *   (props) => props.children(props.field.$entity)
  * )
  * ```
  */
 export function withCollector<TComponent extends (...args: never[]) => ReactNode>(
 	component: TComponent,
-	staticRender: (props: Parameters<TComponent>[0]) => ReactNode,
+	staticRender?: (props: Parameters<TComponent>[0]) => ReactNode,
 ): TComponent {
-	(component as TComponent & { staticRender: typeof staticRender }).staticRender = staticRender
+	const render = staticRender ?? component as unknown as (props: Parameters<TComponent>[0]) => ReactNode
+	;(component as TComponent & { staticRender: typeof render }).staticRender = render
 	return component
 }

packages/bindx-repeater/src/components/BlockRepeater.tsx

@@ -71,7 +71,7 @@ export function BlockRepeater<
 	sortableBy,
 	blocks,
 	children,
-}: BlockRepeaterProps<TEntity, TSelected, TBrand, TEntityName, TSchema, TBlockNames>): ReactElement {
+}: BlockRepeaterProps<TEntity, TSelected, TBrand, TEntityName, TSchema, TBlockNames>): ReactElement | null {
 	const fieldAccessor = useHasMany(field)
 	const sortedItems = useSortedItems(fieldAccessor, sortableBy)
 
@@ -198,6 +198,9 @@ export function BlockRepeater<
 		}
 	}, [field, sortableBy, blocks, discriminationField])
 
+	if (!children) {
+		return null
+	}
 	return <>{children(items, methods)}</>
 }
 
@@ -219,44 +222,88 @@ function createBlockRepeaterWithSelection() {
 		: null
 
 	const scope = new SelectionScope()
-	const collectorEntity = createCollectorProxy<unknown>(scope)
-
-	const mockItems: BlockRepeaterItems<unknown> = {
-		map: (fn) => {
-			fn(collectorEntity, {
-				index: 0,
-				isFirst: true,
-				isLast: true,
-				remove: () => {},
-				moveUp: () => {},
-				moveDown: () => {},
-				blockType: null,
-				block: undefined,
-			})
-			return []
-		},
-		length: 0,
-	}
+	const collectorEntity = createCollectorProxy<object>(scope)
+
+	const blockNames = Object.keys(props.blocks) as string[]
+	const blocksRecord = props.blocks as Record<string, BlockDefinition>
+
+	// Path 1: collect field deps from block renderers
+	// Calls staticRender if present, or any other callable properties (render, form)
+	// that accept (entity, info) and return ReactNode.
+	for (const blockName of blockNames) {
+		const block = blocksRecord[blockName]
+		if (!block) continue
+
+		const mockInfo: BlockRepeaterItemInfo = {
+			index: 0,
+			isFirst: true,
+			isLast: true,
+			remove: () => {},
+			moveUp: () => {},
+			moveDown: () => {},
+			blockType: blockName,
+			block: { name: blockName, label: block.label },
+		}
+
+		const renderers = block.staticRender
+			? [block.staticRender]
+			: collectBlockRenderers(block)
 
-	const mockMethods: BlockRepeaterMethods<string> = {
-		addItem: () => {},
-		isEmpty: true,
-		blockList: [],
+		for (const renderer of renderers) {
+			const jsx = renderer(collectorEntity, mockInfo)
+			if (jsx) {
+				collectNested(jsx)
+			}
+		}
 	}
 
-	const syntheticChildren = props.children(mockItems, mockMethods)
+	// Path 2: children callback — for headless use or when blocks lack staticRender
+	let jsxSelection: SelectionMeta | undefined
+	if (props.children) {
+		const mockItems: BlockRepeaterItems<unknown> = {
+			map: (fn) => {
+				for (const blockName of blockNames) {
+					fn(collectorEntity, {
+						index: 0,
+						isFirst: true,
+						isLast: true,
+						remove: () => {},
+						moveUp: () => {},
+						moveDown: () => {},
+						blockType: blockName,
+						block: { name: blockName, label: blocksRecord[blockName]?.label },
+					})
+				}
+				// Also call with null blockType for any fallback/default rendering paths
+				fn(collectorEntity, {
+					index: 0,
+					isFirst: true,
+					isLast: true,
+					remove: () => {},
+					moveUp: () => {},
+					moveDown: () => {},
+					blockType: null,
+					block: undefined,
+				})
+				return []
+			},
+			length: 0,
+		}
+
+		const mockMethods: BlockRepeaterMethods<string> = {
+			addItem: () => {},
+			isEmpty: true,
+			blockList: [],
+		}
 
-	// Call block render/form functions so the collector proxy records field accesses
-	const blockJsx: ReactNode[] = []
-	for (const blockDef of Object.values(props.blocks) as BlockDefinition[]) {
-		if (blockDef.render) blockJsx.push(blockDef.render(collectorEntity as EntityAccessor<object>))
-		if (blockDef.form) blockJsx.push(blockDef.form(collectorEntity as EntityAccessor<object>))
+		const syntheticChildren = props.children(mockItems, mockMethods)
+		jsxSelection = collectNested(syntheticChildren)
 	}
 
-	const jsxSelection = collectNested([syntheticChildren, ...blockJsx])
-
 	const nestedSelection = scope.toSelectionMeta()
-	mergeSelections(nestedSelection, jsxSelection)
+	if (jsxSelection) {
+		mergeSelections(nestedSelection, jsxSelection)
+	}
 
 	// Add discrimination field to selection
 	nestedSelection.fields.set(props.discriminationField, {
@@ -301,3 +348,19 @@ function createBlockRepeaterWithSelection() {
 }
 
 export const BlockRepeaterWithMeta = createBlockRepeaterWithSelection()
+
+type BlockRenderer = (entity: EntityAccessor<object>, info: BlockRepeaterItemInfo) => ReactNode
+
+/**
+ * Discovers callable renderer functions on a block definition (e.g., render, form).
+ * Used during selection collection to call all renderers with a collector proxy.
+ */
+function collectBlockRenderers(block: BlockDefinition): BlockRenderer[] {
+	const renderers: BlockRenderer[] = []
+	for (const value of Object.values(block)) {
+		if (typeof value === 'function') {
+			renderers.push(value as BlockRenderer)
+		}
+	}
+	return renderers
+}

packages/bindx-repeater/src/components/index.ts

@@ -1,2 +1,2 @@
-export { Repeater, RepeaterWithMeta } from './Repeater.js'
-export { BlockRepeater, BlockRepeaterWithMeta } from './BlockRepeater.js'
+export { Repeater } from './Repeater.js'
+export { BlockRepeater } from './BlockRepeater.js'

packages/bindx-repeater/src/index.ts

@@ -33,5 +33,5 @@ export {
 } from './utils/index.js'
 
 // Components
-export { Repeater, RepeaterWithMeta } from './components/index.js'
-export { BlockRepeater, BlockRepeaterWithMeta } from './components/index.js'
+export { Repeater } from './components/index.js'
+export { BlockRepeater } from './components/index.js'

packages/bindx-repeater/src/types.ts

@@ -133,10 +133,15 @@ export interface RepeaterProps<
  */
 export interface BlockDefinition<TEntity extends object = object, TSelected = TEntity> {
 	label?: ReactNode
-	/** Render function for block preview. Used for selection collection. */
-	render?: (entity: EntityAccessor<TEntity, TSelected>) => ReactNode
-	/** Form function for block editing. Used for selection collection. */
-	form?: (entity: EntityAccessor<TEntity, TSelected>) => ReactNode
+	/**
+	 * Called during selection collection to discover field dependencies for this block type.
+	 * Receives a collector proxy entity and block info.
+	 * Return JSX that accesses all fields this block type needs.
+	 *
+	 * When present, core getSelection calls this directly per block type
+	 * instead of relying on the children callback for field discovery.
+	 */
+	staticRender?: (entity: EntityAccessor<object>, info: BlockRepeaterItemInfo) => ReactNode
 }
 
 /**
@@ -223,5 +228,5 @@ export interface BlockRepeaterProps<
 	blocks: Record<TBlockNames, BlockDefinition>
 
 	/** Render function that receives items collection and methods */
-	children: BlockRepeaterRenderFn<TEntity, TSelected, TBrand, TEntityName, TSchema, TBlockNames>
+	children?: BlockRepeaterRenderFn<TEntity, TSelected, TBrand, TEntityName, TSchema, TBlockNames>
 }

packages/bindx-ui/package.json

@@ -3,7 +3,10 @@
 	"version": "0.1.23",
 	"type": "module",
 	"exports": {
-		".": "./src/index.ts"
+		".": "./src/index.ts",
+		"./vite-plugin": "./src/vite-plugin.ts",
+		"./utils": "./src/utils/index.ts",
+		"./_internal/*": "./src/*"
 	},
 	"scripts": {
 		"build": "vite build",
@@ -31,7 +34,13 @@
 		"tailwind-merge": "^3.3.1"
 	},
 	"peerDependencies": {
-		"react": ">=18.0.0"
+		"react": ">=18.0.0",
+		"vite": ">=5.0.0"
+	},
+	"peerDependenciesMeta": {
+		"vite": {
+			"optional": true
+		}
 	},
 	"devDependencies": {
 		"@types/react": "^19.1.8",
@@ -43,5 +52,11 @@
 		"url": "https://github.com/contember/bindx.git",
 		"directory": "packages/bindx-ui"
 	},
-	"license": "MIT"
+	"license": "MIT",
+	"bin": {
+		"bindx-ui": "./dist/cli/cli.js"
+	},
+	"imports": {
+		"#bindx-ui/*": "./src/*"
+	}
 }