@dataverse-kit/export-engine

@dataverse-kit/export-engine

Code generator for Dynamics 365 / Power Platform front-ends. It takes a form-builder design (FormBuilderProject — the document model produced by the form-builder app) and emits a self-contained TypeScript + React (Fluent UI v8) project for one of three targets, complete with a live Dataverse data-access layer and Dataverse subgrids rendered via vendored @dataverse-kit/grid-kit hosts.

What it does

• One design → three targets: 'pcf' | 'static-web-app' | 'web-resource'. All targets funnel through one shared emission engine (generateAllFormCode), so subgrids, CRUD, and business rules behave identically across them.
• Live data access: emits a React-Query Dataverse data-access layer (generateDataAccessLayer) so generated forms create/read/update/delete real records (mock/preview exports stay display-only by design).
• Rich subgrids: flat (read-only / editable / card), grouped, nested (inline / side-panel / hover-callout / detail-pane), and focused-view (master-detail) — each emitted as the matching grid-kit host with a toolbar + per-row command menu (delete / activate / refresh / new / export / add-existing / filter / column-chooser).
• Self-contained output: grid-kit source is vendored under src/lib/grid-kit/**, so a generated project only needs to resolve react + @fluentui/react.

When to use it

Use export-engine when you want to turn a visually designed form into runnable, deployable code rather than hand-writing it — e.g. scaffolding a Dynamics custom page, a Static Web App, a classic web resource, or a PCF control from a design. It is the engine behind create-dynamics-app --from-design. Reach for it (vs. composing grid-kit / reusable-components by hand) when the source of truth is a design document, not bespoke React.

Install

npm install @dataverse-kit/export-engine

Most users consume it indirectly via create-dynamics-app --from-design ./design.json <name>.

Minimal example

import { previewExport, exportProject, type GeneratedFile } from '@dataverse-kit/export-engine';

const options = {
  target: 'static-web-app', // 'pcf' | 'static-web-app' | 'web-resource'
  includeDataAccessLayer: true,
};

// previewExport returns the generated files in memory…
const files: GeneratedFile[] = previewExport(formBuilderProject, options);
// …each file is { path, content }. Write them to disk yourself, or let
// exportProject (returns void) write a folder/zip directly:
await exportProject(formBuilderProject, { ...options, exportMethod: 'folder' });

Key exports

Notes

• Fluent UI v8 is the grid-kit story; under componentLibrary: 'fluent-v9' subgrids fall back to native Fluent v9 <DataGrid> and do not vendor grid-kit.
• Releases are Changesets-driven: add a .changeset/*.md, merge to main, then merge the auto-opened "Version Packages" PR to publish.

See CLAUDE.md for the full architecture/subgrid reference.