blocks-client-sdk
@blocksdiy/blocks-client-sdk: what a Blocks app uses to work with the platform, wherever the app runs (Blocks' hosting, pnpm dev, the builder's sandbox, or a host of your own).
| Entry | What it holds |
|---|---|
@blocksdiy/blocks-client-sdk/clientSdk | ClientSdk: entities, actions, files, users. |
@blocksdiy/blocks-client-sdk/reactSdk | React hooks over the client, and the navigation helpers (getRouteUrl, getLoginUrl, logOut); needs react-router. |
@blocksdiy/blocks-client-sdk/app | BlocksApp, the app's React tree, and the host contract a page hosting Blocks apps implements; needs react-router. |
@blocksdiy/blocks-client-sdk/page | Page types for legacy pages-mode apps. |
@blocksdiy/blocks-client-sdk | Everything from clientSdk and reactSdk. |
The app entry
An app's src/main.tsx renders BlocksApp with the modules it globbed. BlocksApp holds what any Blocks app needs wherever it runs: the router, the sign-in screen, the SDK client, the app's routes (file-system routes, or legacy pages) with error boundaries, and the default 404 and loading screens. On the dev server it hosts itself (window.__BLOCKS_DEV__, src/app/dev-server/).
What only Blocks' own hosting needs (the builder canvas's tools, the mobile app's wiring) is not here: it lives in apps/app-render, which plugs it in through the host contract (src/app/host.ts):
- state the tree reads, kept current by the host:
setBlocksHost,updateBlocksHost; - extensions, set once before rendering (
setBlocksHostExtensions): aRouterLayerinside the app's router, aShellaround its routes, aSignInscreen in place of the tree's login, and the reportsonReady,onPageChange,onMissingPage,onAppError,onSignOutandonRoutesResolved.
Folder (src/app/) | What it holds |
|---|---|
BlocksApp.tsx | The tree: router, the host's router layer, sign-in, client, routes. |
AppRoutes.tsx | The app's routes in either mode, with the reports, error boundaries, 404 and loading. |
host.ts | The host contract. |
SdkProvider.tsx | The SDK client around the app's routes, on the host's token and user. |
types.ts | The app and route types the contract and the shapes share. |
app-shape/ | What an app's code amounts to: a bundle or globbed modules, shaped into routes or pages. |
sign-in/ | The login and its platform calls. |
dev-server/ | Self-hosting on the dev server. |
ui/ | The tree's own screens' styles (shadcn's look, on the app's tokens) and icons. |
hooks/ | The tree's own hooks: scroll to the top on a page change. |