@uxf/page-builder

The contract of the UXF Page Builder, shared by the backoffice editors (@uxf/page-builder-cms), the web renderer (@uxf/page-builder-web) and the project:

• protocol – messages between the visual editor (backoffice) and the editor iframe (web);
• registry – defineRegistry and the types of the project's registry (layouts, groups, section types, languages). A section type's example is valid content in every language: the visual editor adds a new section with it at once and the add section drawer shows it rendered by the web;
• section-schema – section field schemas generated from the PHP section requests (uxf:page-builder:schema-gen) and the validation rules shared with the API;
• api-types – data types of the page builder REST API;
• routes – the web routes the editors open (edit and preview pages).

test-cases/section-validation.json holds the validation cases both the PHP bundle (uxf/page-builder) and the backoffice forms run, so the two sides validate a section the same way. test-cases/api-routes.json lists the bundle's routes the packages call (method and path); the backoffice API client and the web's render fetchers check every call against it, and the bundle checks it against its router, so a route renamed on one side fails a test.

No runtime dependencies.

Generated registry and section schemas

uxf:page-builder:schema-gen of the PHP bundle writes registry.json and section-schemas.json into each app (like the grid and form schemas). The package's uxf-page-builder-generator turns them into the modules the apps import:

"page-builder:gen": "uxf-page-builder-generator -s src/generated/page-builder-schema -o src/generated/page-builder"

Add it to the app's gen script. It writes registry.ts (registry, ProjectSectionType: the registry as a literal passed to defineRegistry, so a layout group naming an unknown section type fails the type check) and section-schemas.ts (sectionSchemas).

Install in a project

yarn add @uxf/page-builder

@uxf/page-builder-cms and @uxf/page-builder-web take it as a peer dependency. The validation cases and the route list in test-cases/ ship with the package.

Compatibility with the PHP bundle

The npm packages talk to the API of the composer bundle uxf/page-builder (fan monorepo), which is released separately. The routes the packages call and the section validation cases are pinned in test-cases/ and tested on both sides.

License

MIT