@makerinc/ssr-component 1.0.1 → 1.1.0
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 +55 -15
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,11 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
React component for embedding [Maker](https://ai.maker.co) projects with server-side rendering (SSR).
|
|
4
4
|
|
|
5
|
+
## Why Server-Side Rendering?
|
|
6
|
+
|
|
7
|
+
Server-side rendering means your content is fully prepared on the server before it reaches your visitor's browser. Think of it like having a chef prepare your meal in the kitchen rather than asking you to cook it yourself at your table.
|
|
8
|
+
|
|
9
|
+
**Key Benefits:**
|
|
10
|
+
|
|
11
|
+
- **Faster Loading**: Users see content immediately instead of waiting for JavaScript to build the page
|
|
12
|
+
- **Better SEO**: Search engines can easily read and index your content, improving your website's discoverability
|
|
13
|
+
- **Improved Accessibility**: Screen readers and other assistive technologies get complete content right away
|
|
14
|
+
- **Reliable Performance**: Your content displays properly even if JavaScript fails to load or is disabled
|
|
15
|
+
|
|
16
|
+
> **⚠️ Important Note**: SSR may not work properly with pages that contain animated components or complex interactive elements that rely on client-side state. Animations and dynamic behaviors are captured as static snapshots during server-side rendering.
|
|
17
|
+
|
|
5
18
|
## Features
|
|
6
19
|
|
|
7
20
|
- Server-side rendering for optimal performance
|
|
8
21
|
- SEO-friendly with meta tags and proper HTML structure
|
|
9
|
-
- Client-side hydration for interactive components
|
|
10
22
|
- TypeScript support
|
|
11
23
|
- Works with Next.js, React Server Components, and any React framework
|
|
12
24
|
|
|
@@ -52,7 +64,7 @@ Store your API key in environment variables and pass it to the component:
|
|
|
52
64
|
```tsx
|
|
53
65
|
const apiKey = process.env.MAKER_SSR_API_KEY!;
|
|
54
66
|
|
|
55
|
-
<MakerComponent apiKey={apiKey} projectId="your_project_id"
|
|
67
|
+
<MakerComponent apiKey={apiKey} projectId="your_project_id" />;
|
|
56
68
|
```
|
|
57
69
|
|
|
58
70
|
### Validation Pattern
|
|
@@ -176,6 +188,32 @@ export default async function Page() {
|
|
|
176
188
|
}
|
|
177
189
|
```
|
|
178
190
|
|
|
191
|
+
**With Version Specification:**
|
|
192
|
+
|
|
193
|
+
Use the `version` option to render a specific version of your Maker project:
|
|
194
|
+
|
|
195
|
+
```tsx
|
|
196
|
+
import { MakerComponent } from "@maker/ssr-component";
|
|
197
|
+
|
|
198
|
+
export default async function Page() {
|
|
199
|
+
const apiKey = process.env.MAKER_SSR_API_KEY!;
|
|
200
|
+
|
|
201
|
+
return (
|
|
202
|
+
<div>
|
|
203
|
+
<h1>My Page</h1>
|
|
204
|
+
<MakerComponent
|
|
205
|
+
apiKey={apiKey}
|
|
206
|
+
projectId="your_project_id"
|
|
207
|
+
options={{
|
|
208
|
+
device: "desktop",
|
|
209
|
+
version: "1767692001255", // Render specific version
|
|
210
|
+
}}
|
|
211
|
+
/>
|
|
212
|
+
</div>
|
|
213
|
+
);
|
|
214
|
+
}
|
|
215
|
+
```
|
|
216
|
+
|
|
179
217
|
### Next.js (Pages Router)
|
|
180
218
|
|
|
181
219
|
```tsx
|
|
@@ -241,19 +279,20 @@ The main component for embedding Maker projects.
|
|
|
241
279
|
|
|
242
280
|
#### Props
|
|
243
281
|
|
|
244
|
-
| Prop | Type
|
|
245
|
-
| ----------- |
|
|
246
|
-
| `apiKey` | `string`
|
|
247
|
-
| `projectId` | `string`
|
|
248
|
-
| `options` | `MakerComponentOptions`
|
|
282
|
+
| Prop | Type | Required | Description |
|
|
283
|
+
| ----------- | ----------------------- | -------- | --------------------------------- |
|
|
284
|
+
| `apiKey` | `string` | Yes | Your Maker SSR API key |
|
|
285
|
+
| `projectId` | `string` | Yes | Your Maker project ID |
|
|
286
|
+
| `options` | `MakerComponentOptions` | No | Configuration options (see below) |
|
|
249
287
|
|
|
250
288
|
#### MakerComponentOptions
|
|
251
289
|
|
|
252
|
-
| Option
|
|
253
|
-
|
|
|
254
|
-
| `debug`
|
|
255
|
-
| `device`
|
|
256
|
-
| `cacheBust`
|
|
290
|
+
| Option | Type | Default | Description |
|
|
291
|
+
| ----------- | ----------------------------------- | ------- | -------------------------------------------- |
|
|
292
|
+
| `debug` | `boolean` | `false` | Enable debug logging |
|
|
293
|
+
| `device` | `"mobile" \| "desktop" \| "tablet"` | - | Specify device type for responsive rendering |
|
|
294
|
+
| `cacheBust` | `boolean` | `false` | Bypass cache and fetch fresh content |
|
|
295
|
+
| `version` | `string` | - | Specify version of the project to render |
|
|
257
296
|
|
|
258
297
|
### MakerClientScripts
|
|
259
298
|
|
|
@@ -272,6 +311,7 @@ export type MakerComponentOptions = {
|
|
|
272
311
|
debug?: boolean;
|
|
273
312
|
device?: "mobile" | "desktop" | "tablet";
|
|
274
313
|
cacheBust?: boolean;
|
|
314
|
+
version?: string;
|
|
275
315
|
};
|
|
276
316
|
|
|
277
317
|
export type Script = {
|
|
@@ -298,9 +338,9 @@ export type PageData = {
|
|
|
298
338
|
|
|
299
339
|
## Environment Variables
|
|
300
340
|
|
|
301
|
-
| Variable
|
|
302
|
-
|
|
|
303
|
-
| `MAKER_SSR_API_KEY`
|
|
341
|
+
| Variable | Required | Description |
|
|
342
|
+
| ------------------- | -------- | ------------------ |
|
|
343
|
+
| `MAKER_SSR_API_KEY` | Yes | Your Maker API key |
|
|
304
344
|
|
|
305
345
|
## How It Works
|
|
306
346
|
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/maker-component.tsx"],"names":["React"],"mappings":";;;;;;;;;AAGA,IAAM,OAAA,GAAU,IAAA;AAEhB,eAAe,eAAA,CACb,MAAA,EACA,SAAA,EACA,OAAA,EACmB;AACnB,EAAA,MAAM,WAAW,MAAM,KAAA;AAAA,IACrB,iCAAiC,OAAO,CAAA,QAAA,CAAA;AAAA,IACxC;AAAA,MACE,MAAA,EAAQ,MAAA;AAAA,MACR,OAAA,EAAS;AAAA,QACP,aAAA,EAAe,UAAU,MAAM,CAAA;AAAA,OACjC;AAAA,MACA,IAAA,EAAM,KAAK,SAAA,CAAU;AAAA,QACnB,GAAA,EAAK,SAAA;AAAA,QACL,QAAQ,OAAA,EAAS,MAAA;AAAA,QACjB,WAAW,OAAA,EAAS;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/maker-component.tsx"],"names":["React"],"mappings":"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","file":"index.js","sourcesContent":["import React from \"react\";\nimport type { MakerComponentOptions, PageData, Script } from \"./types\";\n\nconst VERSION = \"v1\";\n\nasync function fetchSSRContent(\n apiKey: string,\n projectId: string,\n options?: MakerComponentOptions\n): Promise<PageData> {\n const response = await fetch(\n `https://ssr.maker.new/api/ssr/${VERSION}/content`,\n {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${apiKey}`,\n },\n body: JSON.stringify({\n idn: projectId,\n device: options?.device,\n cacheBust: options?.cacheBust,\n version: options?.version,\n }),\n }\n );\n if (options?.debug) {\n console.log(\n \"[debug-maker-component] Debug info: \",\n response.headers.get(\"x-debug-info\")\n );\n }\n if (!response.ok) {\n throw new Error(\"Failed to fetch SSR content\");\n }\n return response.json();\n}\n\nfunction renderMetaTags(meta: PageData[\"meta\"]) {\n return meta?.map((m, i) =>\n m.charset ? (\n <meta key={`m-cs-${i}`} charSet={m.charset} />\n ) : m.name ? (\n <meta key={`m-n-${i}`} name={m.name} content={m.content || \"\"} />\n ) : m.property ? (\n <meta key={`m-p-${i}`} property={m.property} content={m.content || \"\"} />\n ) : null\n );\n}\n\nfunction renderFonts(fonts: string[]) {\n return fonts.map((href, i) =>\n /\\.(woff2?|otf|ttf)(\\?|#|$)/i.test(href) ? (\n <link\n key={`font-${i}`}\n rel=\"preload\"\n as=\"font\"\n href={href}\n crossOrigin=\"anonymous\"\n />\n ) : (\n <link key={`mkr-font-css-${i}`} rel=\"stylesheet\" href={href} />\n )\n );\n}\n\nfunction renderStylesheets(stylesheets: string[]) {\n return stylesheets.map((href, i) => (\n <link key={`mkr-css-${i}`} rel=\"stylesheet\" href={href} />\n ));\n}\n\nfunction renderInlineStyles(inlineStyles: string[]) {\n return inlineStyles?.map((css, i) => (\n <style\n key={`mkr-inline-css-${i}`}\n dangerouslySetInnerHTML={{ __html: css }}\n />\n ));\n}\n\nfunction renderScripts(scripts: Script[]) {\n if (scripts && scripts.length > 0) {\n return scripts\n .filter(\n (script) =>\n script.inline || (script.src && !script.src.includes(\"posthog\"))\n )\n .reduce<Script[]>((acc, script) => {\n const found = acc.find(\n (s) => s.src === script.src && s.inline === script.inline\n );\n if (!found) {\n acc.push(script);\n }\n return acc;\n }, [])\n .map((script) => (\n <script\n key={script.src || script.inline}\n type={script.type || \"text/javascript\"}\n src={script.src}\n dangerouslySetInnerHTML={\n script.inline ? { __html: script.inline } : undefined\n }\n />\n ));\n }\n}\n\nexport async function MakerComponent({\n apiKey,\n projectId,\n options,\n}: {\n apiKey: string;\n projectId: string;\n options?: MakerComponentOptions;\n}) {\n if (!apiKey) {\n throw new Error(\"MAKER_SSR_API_KEY is not set in environment variables\");\n }\n if (!projectId) {\n throw new Error(\"Project ID is required\");\n }\n if (options?.debug) {\n console.log(\"[debug-maker-component] Props: \", {\n projectId,\n options,\n });\n }\n const pageData = await fetchSSRContent(apiKey, projectId, options);\n console.log(\"[maker-component] Current version: 1.0.1\");\n return (\n <main\n className={`mkr-component-${projectId}`}\n suppressHydrationWarning={true}\n >\n <section aria-hidden className=\"hidden\">\n {renderMetaTags(pageData.meta)}\n {renderFonts(pageData.fonts)}\n {renderStylesheets(pageData.stylesheets)}\n {renderInlineStyles(pageData.inlineStyles)}\n </section>\n <div\n dangerouslySetInnerHTML={{ __html: pageData.body }}\n suppressHydrationWarning={true}\n />\n {renderScripts(pageData.scripts)}\n </main>\n );\n}\n"]}
|
package/dist/index.mjs
CHANGED
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/maker-component.tsx"],"names":[],"mappings":";;;AAGA,IAAM,OAAA,GAAU,IAAA;AAEhB,eAAe,eAAA,CACb,MAAA,EACA,SAAA,EACA,OAAA,EACmB;AACnB,EAAA,MAAM,WAAW,MAAM,KAAA;AAAA,IACrB,iCAAiC,OAAO,CAAA,QAAA,CAAA;AAAA,IACxC;AAAA,MACE,MAAA,EAAQ,MAAA;AAAA,MACR,OAAA,EAAS;AAAA,QACP,aAAA,EAAe,UAAU,MAAM,CAAA;AAAA,OACjC;AAAA,MACA,IAAA,EAAM,KAAK,SAAA,CAAU;AAAA,QACnB,GAAA,EAAK,SAAA;AAAA,QACL,QAAQ,OAAA,EAAS,MAAA;AAAA,QACjB,WAAW,OAAA,EAAS;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/maker-component.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import React from \"react\";\nimport type { MakerComponentOptions, PageData, Script } from \"./types\";\n\nconst VERSION = \"v1\";\n\nasync function fetchSSRContent(\n apiKey: string,\n projectId: string,\n options?: MakerComponentOptions\n): Promise<PageData> {\n const response = await fetch(\n `https://ssr.maker.new/api/ssr/${VERSION}/content`,\n {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${apiKey}`,\n },\n body: JSON.stringify({\n idn: projectId,\n device: options?.device,\n cacheBust: options?.cacheBust,\n version: options?.version,\n }),\n }\n );\n if (options?.debug) {\n console.log(\n \"[debug-maker-component] Debug info: \",\n response.headers.get(\"x-debug-info\")\n );\n }\n if (!response.ok) {\n throw new Error(\"Failed to fetch SSR content\");\n }\n return response.json();\n}\n\nfunction renderMetaTags(meta: PageData[\"meta\"]) {\n return meta?.map((m, i) =>\n m.charset ? (\n <meta key={`m-cs-${i}`} charSet={m.charset} />\n ) : m.name ? (\n <meta key={`m-n-${i}`} name={m.name} content={m.content || \"\"} />\n ) : m.property ? (\n <meta key={`m-p-${i}`} property={m.property} content={m.content || \"\"} />\n ) : null\n );\n}\n\nfunction renderFonts(fonts: string[]) {\n return fonts.map((href, i) =>\n /\\.(woff2?|otf|ttf)(\\?|#|$)/i.test(href) ? (\n <link\n key={`font-${i}`}\n rel=\"preload\"\n as=\"font\"\n href={href}\n crossOrigin=\"anonymous\"\n />\n ) : (\n <link key={`mkr-font-css-${i}`} rel=\"stylesheet\" href={href} />\n )\n );\n}\n\nfunction renderStylesheets(stylesheets: string[]) {\n return stylesheets.map((href, i) => (\n <link key={`mkr-css-${i}`} rel=\"stylesheet\" href={href} />\n ));\n}\n\nfunction renderInlineStyles(inlineStyles: string[]) {\n return inlineStyles?.map((css, i) => (\n <style\n key={`mkr-inline-css-${i}`}\n dangerouslySetInnerHTML={{ __html: css }}\n />\n ));\n}\n\nfunction renderScripts(scripts: Script[]) {\n if (scripts && scripts.length > 0) {\n return scripts\n .filter(\n (script) =>\n script.inline || (script.src && !script.src.includes(\"posthog\"))\n )\n .reduce<Script[]>((acc, script) => {\n const found = acc.find(\n (s) => s.src === script.src && s.inline === script.inline\n );\n if (!found) {\n acc.push(script);\n }\n return acc;\n }, [])\n .map((script) => (\n <script\n key={script.src || script.inline}\n type={script.type || \"text/javascript\"}\n src={script.src}\n dangerouslySetInnerHTML={\n script.inline ? { __html: script.inline } : undefined\n }\n />\n ));\n }\n}\n\nexport async function MakerComponent({\n apiKey,\n projectId,\n options,\n}: {\n apiKey: string;\n projectId: string;\n options?: MakerComponentOptions;\n}) {\n if (!apiKey) {\n throw new Error(\"MAKER_SSR_API_KEY is not set in environment variables\");\n }\n if (!projectId) {\n throw new Error(\"Project ID is required\");\n }\n if (options?.debug) {\n console.log(\"[debug-maker-component] Props: \", {\n projectId,\n options,\n });\n }\n const pageData = await fetchSSRContent(apiKey, projectId, options);\n console.log(\"[maker-component] Current version: 1.0.1\");\n return (\n <main\n className={`mkr-component-${projectId}`}\n suppressHydrationWarning={true}\n >\n <section aria-hidden className=\"hidden\">\n {renderMetaTags(pageData.meta)}\n {renderFonts(pageData.fonts)}\n {renderStylesheets(pageData.stylesheets)}\n {renderInlineStyles(pageData.inlineStyles)}\n </section>\n <div\n dangerouslySetInnerHTML={{ __html: pageData.body }}\n suppressHydrationWarning={true}\n />\n {renderScripts(pageData.scripts)}\n </main>\n );\n}\n"]}
|