DFBE Studio

Technical Documentation

Architecture & Performance

This guide explains the internal design of @dfbe/core and how it achieves high performance with a small bundle size.

1. Multi-Entry Architecture

The package is split into three main entry points. This is critical for keeping end-user (production) bundles small while still providing rich metadata for builder (admin) tools.

@dfbe/core (Main Engine)

Purpose: Form rendering and runtime logic. Contains: FormEngineProvider, FieldRenderer, useFormEngine, Zod schema generator. Bundle Size: ~13 KB (ESM).

@dfbe/core/validator (Schema Validator)

Purpose: Validating the JSON schema itself. Contains: Zod schemas that validate if your JSON conforms to the FormSchema spec. Typical Use: Inside the Studio's JSON editor or build scripts.

@dfbe/core/registry (Builder Metadata)

Purpose: Providing metadata about available components and validation rules. Contains: VALIDATION_REGISTRY, COMPONENTS_REGISTRY. Typical Use: Powering the Property Panel and Toolbox in the Form Builder.

2. Logic Evaluation Engine

The logic engine is optimized for high performance. When a value changes:

  1. The engine identifies which rules are affected by that specific field (using a dependency map built at render time via extractFieldDependencies).
  2. It evaluates the field's rules array in a linear pass O(N) — where N is the number of rules on that specific field, not all fields in the form.
  3. It patches the field states in a single batch via useMemo to avoid multiple re-renders.

3. Log Stripping & Production Optimization

The core package uses tsup for bundling and is configured to automatically strip all console.log, console.warn, and console.debug calls in the production build.

This ensures that:

  • Sensitive internal data is never leaked to the console.
  • The production bundle is not bloated by string literals and logging logic.

4. Headless Design Philosophy

The engine does not own the UI. It only owns the Logic State.

  • Responsibility of Engine: Validation, Conditionals, Step Navigation, Value Transformation.
  • Responsibility of Consumer: Layout, CSS, Input Components, Loading States.

This separation allows the DFBE to be used with Shadcn UI, Material UI, Tailwind CSS, or even Native Mobile (React Native) in the future.