@otl-core/block-registry 1.1.7 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -157
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,159 +1,3 @@
|
|
|
1
1
|
# @otl-core/block-registry
|
|
2
2
|
|
|
3
|
-
Block registry
|
|
4
|
-
system for block components.
|
|
5
|
-
|
|
6
|
-
## Purpose
|
|
7
|
-
|
|
8
|
-
This package contains **ONLY infrastructure** - registry classes and renderers. Actual block
|
|
9
|
-
components (Markdown, Image, Video, etc.) remain in your application code for customization.
|
|
10
|
-
|
|
11
|
-
## SSR Compatibility
|
|
12
|
-
|
|
13
|
-
All components in this package are **server-component safe** and work with Next.js App Router SSR:
|
|
14
|
-
|
|
15
|
-
- No client-only hooks (useState, useEffect, useMemo, etc.)
|
|
16
|
-
- Pure synchronous logic
|
|
17
|
-
- Deterministic rendering
|
|
18
|
-
|
|
19
|
-
Individual block components in your app can be client components if they need interactivity - just
|
|
20
|
-
add `"use client"` at the top of those files.
|
|
21
|
-
|
|
22
|
-
## Installation
|
|
23
|
-
|
|
24
|
-
This package is part of the OTL CMS monorepo and uses workspace protocol:
|
|
25
|
-
|
|
26
|
-
```json
|
|
27
|
-
{
|
|
28
|
-
"dependencies": {
|
|
29
|
-
"@otl-core/block-registry": "workspace:*"
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Usage
|
|
35
|
-
|
|
36
|
-
### 1. Create a Registry Instance
|
|
37
|
-
|
|
38
|
-
```typescript
|
|
39
|
-
// In your app: src/lib/registries/block-registry.ts
|
|
40
|
-
import { BlockRegistry } from "@otl-core/block-registry";
|
|
41
|
-
import Markdown from "@/components/blocks/markdown";
|
|
42
|
-
import Image from "@/components/blocks/image";
|
|
43
|
-
// ... import all your block components
|
|
44
|
-
|
|
45
|
-
export const blockRegistry = new BlockRegistry();
|
|
46
|
-
|
|
47
|
-
// Register your blocks
|
|
48
|
-
blockRegistry.register("markdown", Markdown);
|
|
49
|
-
blockRegistry.register("image", Image);
|
|
50
|
-
// ... register all blocks
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### 2. Use BlockRenderer
|
|
54
|
-
|
|
55
|
-
```typescript
|
|
56
|
-
import { BlockRenderer } from '@otl-core/block-registry';
|
|
57
|
-
import { blockRegistry } from '@/lib/registries/block-registry';
|
|
58
|
-
|
|
59
|
-
export default function MyPage({ blocks }) {
|
|
60
|
-
return (
|
|
61
|
-
<div>
|
|
62
|
-
{blocks.map((block) => (
|
|
63
|
-
<BlockRenderer
|
|
64
|
-
key={block.id}
|
|
65
|
-
block={block}
|
|
66
|
-
blockRegistry={blockRegistry}
|
|
67
|
-
siteId="your-site-id" // Optional, for form blocks
|
|
68
|
-
/>
|
|
69
|
-
))}
|
|
70
|
-
</div>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
### 3. Form Block Support
|
|
76
|
-
|
|
77
|
-
Form blocks receive special props:
|
|
78
|
-
|
|
79
|
-
```typescript
|
|
80
|
-
// Your form block component
|
|
81
|
-
interface FormInputProps {
|
|
82
|
-
blockId: string;
|
|
83
|
-
siteId?: string;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
export default function FormInput({ blockId, siteId }: FormInputProps) {
|
|
87
|
-
// Your form block implementation
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// Register it with type starting with "form-"
|
|
91
|
-
blockRegistry.register("form-input", FormInput);
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
The BlockRenderer automatically detects form blocks (types starting with `"form-"`) and passes
|
|
95
|
-
`blockId` and `siteId` instead of `config`.
|
|
96
|
-
|
|
97
|
-
## API Reference
|
|
98
|
-
|
|
99
|
-
### BlockRegistry
|
|
100
|
-
|
|
101
|
-
```typescript
|
|
102
|
-
class BlockRegistry<TProps> {
|
|
103
|
-
register(type: string, component: ComponentType<TProps>): void;
|
|
104
|
-
get(type: string): ComponentType<TProps> | undefined;
|
|
105
|
-
has(type: string): boolean;
|
|
106
|
-
getAll(): string[];
|
|
107
|
-
size(): number;
|
|
108
|
-
}
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
### BlockRenderer Props
|
|
112
|
-
|
|
113
|
-
```typescript
|
|
114
|
-
interface BlockRendererProps {
|
|
115
|
-
block: BlockInstance; // The block to render
|
|
116
|
-
blockRegistry: BlockRegistry; // Registry containing block components
|
|
117
|
-
siteId?: string; // Optional, for form blocks
|
|
118
|
-
}
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
### Block Component Props
|
|
122
|
-
|
|
123
|
-
Regular blocks receive:
|
|
124
|
-
|
|
125
|
-
```typescript
|
|
126
|
-
interface BlockComponentProps {
|
|
127
|
-
config: Record<string, unknown>;
|
|
128
|
-
}
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
Form blocks receive:
|
|
132
|
-
|
|
133
|
-
```typescript
|
|
134
|
-
interface FormBlockComponentProps {
|
|
135
|
-
blockId: string;
|
|
136
|
-
siteId?: string;
|
|
137
|
-
}
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
## Error Handling
|
|
141
|
-
|
|
142
|
-
If a block type is not found in the registry, `ComponentNotFound` is rendered, which:
|
|
143
|
-
|
|
144
|
-
- Logs detailed error information in development
|
|
145
|
-
- Logs minimal error in production
|
|
146
|
-
- Calls global error handler if available (`window.__CMS_ERROR_HANDLER__`)
|
|
147
|
-
- Renders invisible placeholder to prevent layout breaks
|
|
148
|
-
|
|
149
|
-
## Best Practices
|
|
150
|
-
|
|
151
|
-
1. **Keep components in your app**: Don't put actual block components in this package
|
|
152
|
-
2. **Server-first**: Use server components by default, only add `"use client"` when needed
|
|
153
|
-
3. **Type safety**: Import types from this package for consistency
|
|
154
|
-
4. **Registry singleton**: Create one registry instance and export it
|
|
155
|
-
5. **Register all blocks**: Ensure all block types used in content are registered
|
|
156
|
-
|
|
157
|
-
## Examples
|
|
158
|
-
|
|
159
|
-
See `frontend/engine/examples/custom-block-example.tsx` for a complete example.
|
|
3
|
+
Block component registry for [OTL CMS](https://otl.studio). Maps CMS block types to React components.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@otl-core/block-registry",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Block registry and renderer for OTL CMS",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"url": "https://github.com/otl-core/block-registry.git"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@otl-core/cms-types": "^1.1.
|
|
37
|
+
"@otl-core/cms-types": "^1.1.9"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"react": ">=18.0.0"
|