pandora-box-dp

The dp-design (@dragonpass/atom-ui-mobile) component registry + provider for the Pandora Box low-code runtime. Lets a project render the dp-design nodes a builder produces with the app's own dp-design components — "builder == delivered" for the dp library, not just the engine templates.

@dragonpass/atom-ui-mobile is a peer (your app already ships it, from the private registry) and its CSS is provided by the host app (your app is a dp-design app), so this package bundles neither.

Install

npm install pandora-box-dp
# peers (your app already has these):
#   react, react-dom, @dragonpass/atom-ui-mobile

Usage

import { createRuntime } from 'pandora-box-react';
import { manifest } from 'pandora-box-manifest';
import { dpRegistry, DpProvider, DpConfig } from 'pandora-box-dp';
import { UpcomingList } from 'pandora-box-layout';

const PageRuntime = createRuntime({
  registry: { ...dpRegistry, UpcomingList },   // dp-design + engine templates
  manifest,                                     // full manifest (engine + dp)
  wrapper: DpProvider,                          // dp-design ConfigProvider
});

// provide the active locale at your app root
<DpConfig.Provider value={{ locale: 'zh' }}>
  <PageRuntime doc={pageJson} locale="zh" bindings={{ userBookings: orders }} />
</DpConfig.Provider>;

Components

Registers every dp-design component the builder/manifest exposes (currently 67), kept in lock-step with pandora-box-manifest — whatever ops can drag into a page, the runtime can render. The registry keys ARE the manifest type ids (which equal the @dragonpass/atom-ui-mobile export names), so no per-name remapping is needed.

pandora-box-manifest is the source of truth for the exact list. A name your installed @dragonpass/atom-ui-mobile doesn't actually export is skipped (defensive), so that node falls back at runtime rather than crashing.

License

MIT