@makerinc/ssr-component 1.0.0

package/README.md

@@ -0,0 +1,393 @@
+# @maker/ssr-component
+
+React component for embedding [Maker](https://ai.maker.co) projects with server-side rendering (SSR).
+
+## Features
+
+- Server-side rendering for optimal performance
+- SEO-friendly with meta tags and proper HTML structure
+- Client-side hydration for interactive components
+- TypeScript support
+- Works with Next.js, React Server Components, and any React framework
+
+## Installation
+
+```bash
+npm install @maker/ssr-component
+```
+
+or
+
+```bash
+yarn add @maker/ssr-component
+```
+
+or
+
+```bash
+pnpm add @maker/ssr-component
+```
+
+## Prerequisites
+
+Before using this package, you'll need:
+
+1. **API Key**: A Maker SSR API key (contact Maker team to obtain one)
+2. **Project ID**: The unique identifier for your Maker project
+
+Set your API key as an environment variable:
+
+```env
+MAKER_SSR_API_KEY=your_api_key_here
+```
+
+## API Key Handling
+
+The `MakerComponent` requires an `apiKey` prop to authenticate with the Maker SSR API. Here are the recommended patterns:
+
+### Environment Variable (Recommended)
+
+Store your API key in environment variables and pass it to the component:
+
+```tsx
+const apiKey = process.env.MAKER_SSR_API_KEY!;
+
+<MakerComponent apiKey={apiKey} projectId="your_project_id" />
+```
+
+### Validation Pattern
+
+Always validate the API key before rendering:
+
+```tsx
+export default async function Page() {
+  const apiKey = process.env.MAKER_SSR_API_KEY;
+
+  if (!apiKey) {
+    throw new Error("MAKER_SSR_API_KEY is required");
+  }
+
+  return <MakerComponent apiKey={apiKey} projectId="your_project_id" />;
+}
+```
+
+### Graceful Error Handling
+
+For better user experience, handle missing API keys gracefully:
+
+```tsx
+export default async function Page() {
+  const apiKey = process.env.MAKER_SSR_API_KEY;
+
+  if (!apiKey) {
+    return <div>Configuration error: API key not found</div>;
+  }
+
+  return <MakerComponent apiKey={apiKey} projectId="your_project_id" />;
+}
+```
+
+**Security Note:** Never expose your API key in client-side code. Always access it from environment variables on the server side.
+
+## Usage
+
+### Next.js (App Router)
+
+**Basic Usage:**
+
+```tsx
+import { MakerComponent } from "@maker/ssr-component";
+
+export default async function Page() {
+  const apiKey = process.env.MAKER_SSR_API_KEY!;
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      <MakerComponent
+        apiKey={apiKey}
+        projectId="your_project_id"
+        options={{
+          debug: false,
+          device: "desktop",
+        }}
+      />
+    </div>
+  );
+}
+```
+
+**With API Key Validation:**
+
+```tsx
+import { MakerComponent } from "@maker/ssr-component";
+
+export default async function Page() {
+  const apiKey = process.env.MAKER_SSR_API_KEY;
+
+  if (!apiKey) {
+    return (
+      <div>
+        <h1>Configuration Error</h1>
+        <p>MAKER_SSR_API_KEY is not configured</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      <MakerComponent
+        apiKey={apiKey}
+        projectId="your_project_id"
+        options={{
+          debug: false,
+          device: "desktop",
+        }}
+      />
+    </div>
+  );
+}
+```
+
+**With Cache Busting:**
+
+Use `cacheBust: true` to bypass the cache and fetch fresh content. This is useful during development or when you need to ensure users see the latest version:
+
+```tsx
+import { MakerComponent } from "@maker/ssr-component";
+
+export default async function Page() {
+  const apiKey = process.env.MAKER_SSR_API_KEY!;
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      <MakerComponent
+        apiKey={apiKey}
+        projectId="your_project_id"
+        options={{
+          device: "desktop",
+          cacheBust: true, // Bypass cache and fetch fresh content
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Next.js (Pages Router)
+
+```tsx
+import { MakerComponent } from "@maker/ssr-component";
+
+export default function Page({ pageData }) {
+  return (
+    <div>
+      <h1>My Page</h1>
+      {/* You'll need to implement the server-side fetch yourself */}
+    </div>
+  );
+}
+
+export async function getServerSideProps() {
+  // Fetch data server-side
+  const response = await fetch("https://ssr.maker.new/api/ssr/v1/content", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${process.env.MAKER_SSR_API_KEY}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      idn: "your_project_id",
+    }),
+  });
+
+  const pageData = await response.json();
+  return { props: { pageData } };
+}
+```
+
+### Custom React SSR Setup
+
+If you're using a custom React SSR setup, you can import and use the components directly:
+
+```tsx
+import { MakerComponent } from "@maker/ssr-component";
+
+// In your server-side rendering function
+async function renderPage() {
+  const apiKey = process.env.MAKER_SSR_API_KEY;
+
+  if (!apiKey) {
+    throw new Error("MAKER_SSR_API_KEY environment variable is not set");
+  }
+
+  return (
+    <html>
+      <body>
+        <MakerComponent apiKey={apiKey} projectId="your_project_id" />
+      </body>
+    </html>
+  );
+}
+```
+
+## API Reference
+
+### MakerComponent
+
+The main component for embedding Maker projects.
+
+#### Props
+
+| Prop        | Type                      | Required | Description                                           |
+| ----------- | ------------------------- | -------- | ----------------------------------------------------- |
+| `apiKey`    | `string`                  | Yes      | Your Maker SSR API key                                |
+| `projectId` | `string`                  | Yes      | Your Maker project ID                                 |
+| `options`   | `MakerComponentOptions`   | No       | Configuration options (see below)                     |
+
+#### MakerComponentOptions
+
+| Option       | Type                                 | Default | Description                                        |
+| ------------ | ------------------------------------ | ------- | -------------------------------------------------- |
+| `debug`      | `boolean`                            | `false` | Enable debug logging                               |
+| `device`     | `"mobile" \| "desktop" \| "tablet"`  | -       | Specify device type for responsive rendering       |
+| `cacheBust`  | `boolean`                            | `false` | Bypass cache and fetch fresh content               |
+
+### MakerClientScripts
+
+A client-side component that handles script hydration. This is used internally by `MakerComponent` but can be used separately if needed.
+
+#### Props
+
+| Prop      | Type       | Required | Description                |
+| --------- | ---------- | -------- | -------------------------- |
+| `scripts` | `Script[]` | Yes      | Array of scripts to inject |
+
+### Types
+
+```typescript
+export type MakerComponentOptions = {
+  debug?: boolean;
+  device?: "mobile" | "desktop" | "tablet";
+  cacheBust?: boolean;
+};
+
+export type Script = {
+  src: string;
+  inline: string | null;
+  type?: string;
+};
+
+export type PageData = {
+  meta: Array<{
+    charset?: string;
+    name?: string;
+    property?: string;
+    content?: string;
+  }>;
+  fonts: string[];
+  title: string;
+  stylesheets: string[];
+  inlineStyles: string[];
+  scripts: Script[];
+  body: string;
+};
+```
+
+## Environment Variables
+
+| Variable             | Required | Description          |
+| -------------------- | -------- | -------------------- |
+| `MAKER_SSR_API_KEY`  | Yes      | Your Maker API key   |
+
+## How It Works
+
+1. **Server-Side**: The component fetches pre-rendered content from the Maker SSR API
+2. **Render**: HTML content, styles, and metadata are injected into your page
+3. **Client Hydration**: JavaScript loads and executes, making the content interactive
+4. **Interactive**: The embedded project becomes fully functional after hydration
+
+## Caching and Performance
+
+The Maker SSR API caches content by default for optimal performance. You have several options to control caching behavior:
+
+### Cache Busting
+
+Use the `cacheBust` option to bypass the cache and fetch fresh content:
+
+```tsx
+<MakerComponent
+  apiKey={apiKey}
+  projectId="your_project_id"
+  options={{ cacheBust: true }}
+/>
+```
+
+**Note:** Set `cacheBust: true` during development or when you need to ensure users see the latest version. For production, rely on caching strategies below for better performance.
+
+### Next.js App Router
+
+Use Next.js revalidation for caching:
+
+```tsx
+import { MakerComponent } from "@maker/ssr-component";
+
+// Revalidate every 60 seconds
+export const revalidate = 60;
+
+export default async function Page() {
+  const apiKey = process.env.MAKER_SSR_API_KEY!;
+
+  return <MakerComponent apiKey={apiKey} projectId="your_project_id" />;
+}
+```
+
+### Custom Caching
+
+Implement your own caching strategy to reduce API calls:
+
+```tsx
+import { cache } from "react";
+
+const getMakerContent = cache(async (projectId: string) => {
+  // Your caching logic here
+  // Could use Redis, memory cache, etc.
+});
+```
+
+## Troubleshooting
+
+### Error: MAKER_SSR_API_KEY is not set
+
+Make sure you've set the `MAKER_SSR_API_KEY` environment variable:
+
+```env
+MAKER_SSR_API_KEY=your_api_key_here
+```
+
+### Styles Not Loading
+
+- Verify your Content Security Policy allows external resources from Maker CDN
+- Check browser console for CORS errors
+- Ensure stylesheet URLs are accessible
+
+### Scripts Not Executing
+
+- Check browser console for JavaScript errors
+- Verify the `DOMContentLoaded` event is being fired
+- Check for Content Security Policy restrictions
+
+## Requirements
+
+- React >= 18.0.0
+- react-dom >= 18.0.0
+
+## License
+
+MIT
+
+## Support
+
+For issues, questions, or feature requests, contact the Maker team at [ai.maker.co](https://ai.maker.co).

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import React from 'react';
+
+type Script = {
+    src: string;
+    inline: string | null;
+    type?: string;
+};
+type PageData = {
+    meta: Array<{
+        charset?: string;
+        name?: string;
+        property?: string;
+        content?: string;
+    }>;
+    fonts: string[];
+    title: string;
+    stylesheets: string[];
+    inlineStyles: string[];
+    scripts: Script[];
+    body: string;
+};
+type MakerComponentOptions = {
+    debug?: boolean;
+    device?: "mobile" | "desktop" | "tablet";
+    cacheBust?: boolean;
+};
+
+declare function MakerComponent({ apiKey, projectId, options, }: {
+    apiKey: string;
+    projectId: string;
+    options?: MakerComponentOptions;
+}): Promise<React.JSX.Element>;
+
+export { MakerComponent, type MakerComponentOptions, type PageData, type Script };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+
+type Script = {
+    src: string;
+    inline: string | null;
+    type?: string;
+};
+type PageData = {
+    meta: Array<{
+        charset?: string;
+        name?: string;
+        property?: string;
+        content?: string;
+    }>;
+    fonts: string[];
+    title: string;
+    stylesheets: string[];
+    inlineStyles: string[];
+    scripts: Script[];
+    body: string;
+};
+type MakerComponentOptions = {
+    debug?: boolean;
+    device?: "mobile" | "desktop" | "tablet";
+    cacheBust?: boolean;
+};
+
+declare function MakerComponent({ apiKey, projectId, options, }: {
+    apiKey: string;
+    projectId: string;
+    options?: MakerComponentOptions;
+}): Promise<React.JSX.Element>;
+
+export { MakerComponent, type MakerComponentOptions, type PageData, type Script };

package/dist/index.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/maker-component.tsx
+var VERSION = "v1";
+async function fetchSSRContent(apiKey, projectId, options) {
+  const response = await fetch(
+    `https://ssr.maker.new/api/ssr/${VERSION}/content`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${apiKey}`
+      },
+      body: JSON.stringify({
+        idn: projectId,
+        device: options?.device,
+        cacheBust: options?.cacheBust
+      })
+    }
+  );
+  if (options?.debug) {
+    console.log(
+      "[debug-maker-component] Debug info: ",
+      response.headers.get("x-debug-info")
+    );
+  }
+  if (!response.ok) {
+    throw new Error("Failed to fetch SSR content");
+  }
+  return response.json();
+}
+function renderMetaTags(meta) {
+  return meta?.map(
+    (m, i) => m.charset ? /* @__PURE__ */ React__default.default.createElement("meta", { key: `m-cs-${i}`, charSet: m.charset }) : m.name ? /* @__PURE__ */ React__default.default.createElement("meta", { key: `m-n-${i}`, name: m.name, content: m.content || "" }) : m.property ? /* @__PURE__ */ React__default.default.createElement("meta", { key: `m-p-${i}`, property: m.property, content: m.content || "" }) : null
+  );
+}
+function renderFonts(fonts) {
+  return fonts.map(
+    (href, i) => /\.(woff2?|otf|ttf)(\?|#|$)/i.test(href) ? /* @__PURE__ */ React__default.default.createElement(
+      "link",
+      {
+        key: `font-${i}`,
+        rel: "preload",
+        as: "font",
+        href,
+        crossOrigin: "anonymous"
+      }
+    ) : /* @__PURE__ */ React__default.default.createElement("link", { key: `mkr-font-css-${i}`, rel: "stylesheet", href })
+  );
+}
+function renderStylesheets(stylesheets) {
+  return stylesheets.map((href, i) => /* @__PURE__ */ React__default.default.createElement("link", { key: `mkr-css-${i}`, rel: "stylesheet", href }));
+}
+function renderInlineStyles(inlineStyles) {
+  return inlineStyles?.map((css, i) => /* @__PURE__ */ React__default.default.createElement(
+    "style",
+    {
+      key: `mkr-inline-css-${i}`,
+      dangerouslySetInnerHTML: { __html: css }
+    }
+  ));
+}
+function renderScripts(scripts) {
+  if (scripts && scripts.length > 0) {
+    return scripts.reduce((acc, script) => {
+      const found = acc.find(
+        (s) => s.src === script.src && s.inline === script.inline
+      );
+      if (!found) {
+        acc.push(script);
+      }
+      return acc;
+    }, []).map((script) => /* @__PURE__ */ React__default.default.createElement(
+      "script",
+      {
+        key: script.src || script.inline,
+        type: script.type || "text/javascript",
+        src: script.src,
+        dangerouslySetInnerHTML: script.inline ? { __html: script.inline } : void 0
+      }
+    ));
+  }
+}
+async function MakerComponent({
+  apiKey,
+  projectId,
+  options
+}) {
+  if (!apiKey) {
+    throw new Error("MAKER_SSR_API_KEY is not set in environment variables");
+  }
+  if (!projectId) {
+    throw new Error("Project ID is required");
+  }
+  if (options?.debug) {
+    console.log("[debug-maker-component] Props: ", {
+      projectId,
+      options
+    });
+  }
+  const pageData = await fetchSSRContent(apiKey, projectId, options);
+  return /* @__PURE__ */ React__default.default.createElement(
+    "main",
+    {
+      className: `mkr-component-${projectId}`,
+      suppressHydrationWarning: true
+    },
+    /* @__PURE__ */ React__default.default.createElement("section", { "aria-hidden": true, className: "hidden" }, renderMetaTags(pageData.meta), renderFonts(pageData.fonts), renderStylesheets(pageData.stylesheets), renderInlineStyles(pageData.inlineStyles)),
+    /* @__PURE__ */ React__default.default.createElement(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: pageData.body },
+        suppressHydrationWarning: true
+      }
+    ),
+    renderScripts(pageData.scripts)
+  );
+}
+
+exports.MakerComponent = MakerComponent;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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      }),\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      .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  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

@@ -0,0 +1,121 @@
+import React from 'react';
+
+// src/maker-component.tsx
+var VERSION = "v1";
+async function fetchSSRContent(apiKey, projectId, options) {
+  const response = await fetch(
+    `https://ssr.maker.new/api/ssr/${VERSION}/content`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${apiKey}`
+      },
+      body: JSON.stringify({
+        idn: projectId,
+        device: options?.device,
+        cacheBust: options?.cacheBust
+      })
+    }
+  );
+  if (options?.debug) {
+    console.log(
+      "[debug-maker-component] Debug info: ",
+      response.headers.get("x-debug-info")
+    );
+  }
+  if (!response.ok) {
+    throw new Error("Failed to fetch SSR content");
+  }
+  return response.json();
+}
+function renderMetaTags(meta) {
+  return meta?.map(
+    (m, i) => m.charset ? /* @__PURE__ */ React.createElement("meta", { key: `m-cs-${i}`, charSet: m.charset }) : m.name ? /* @__PURE__ */ React.createElement("meta", { key: `m-n-${i}`, name: m.name, content: m.content || "" }) : m.property ? /* @__PURE__ */ React.createElement("meta", { key: `m-p-${i}`, property: m.property, content: m.content || "" }) : null
+  );
+}
+function renderFonts(fonts) {
+  return fonts.map(
+    (href, i) => /\.(woff2?|otf|ttf)(\?|#|$)/i.test(href) ? /* @__PURE__ */ React.createElement(
+      "link",
+      {
+        key: `font-${i}`,
+        rel: "preload",
+        as: "font",
+        href,
+        crossOrigin: "anonymous"
+      }
+    ) : /* @__PURE__ */ React.createElement("link", { key: `mkr-font-css-${i}`, rel: "stylesheet", href })
+  );
+}
+function renderStylesheets(stylesheets) {
+  return stylesheets.map((href, i) => /* @__PURE__ */ React.createElement("link", { key: `mkr-css-${i}`, rel: "stylesheet", href }));
+}
+function renderInlineStyles(inlineStyles) {
+  return inlineStyles?.map((css, i) => /* @__PURE__ */ React.createElement(
+    "style",
+    {
+      key: `mkr-inline-css-${i}`,
+      dangerouslySetInnerHTML: { __html: css }
+    }
+  ));
+}
+function renderScripts(scripts) {
+  if (scripts && scripts.length > 0) {
+    return scripts.reduce((acc, script) => {
+      const found = acc.find(
+        (s) => s.src === script.src && s.inline === script.inline
+      );
+      if (!found) {
+        acc.push(script);
+      }
+      return acc;
+    }, []).map((script) => /* @__PURE__ */ React.createElement(
+      "script",
+      {
+        key: script.src || script.inline,
+        type: script.type || "text/javascript",
+        src: script.src,
+        dangerouslySetInnerHTML: script.inline ? { __html: script.inline } : void 0
+      }
+    ));
+  }
+}
+async function MakerComponent({
+  apiKey,
+  projectId,
+  options
+}) {
+  if (!apiKey) {
+    throw new Error("MAKER_SSR_API_KEY is not set in environment variables");
+  }
+  if (!projectId) {
+    throw new Error("Project ID is required");
+  }
+  if (options?.debug) {
+    console.log("[debug-maker-component] Props: ", {
+      projectId,
+      options
+    });
+  }
+  const pageData = await fetchSSRContent(apiKey, projectId, options);
+  return /* @__PURE__ */ React.createElement(
+    "main",
+    {
+      className: `mkr-component-${projectId}`,
+      suppressHydrationWarning: true
+    },
+    /* @__PURE__ */ React.createElement("section", { "aria-hidden": true, className: "hidden" }, renderMetaTags(pageData.meta), renderFonts(pageData.fonts), renderStylesheets(pageData.stylesheets), renderInlineStyles(pageData.inlineStyles)),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: pageData.body },
+        suppressHydrationWarning: true
+      }
+    ),
+    renderScripts(pageData.scripts)
+  );
+}
+
+export { MakerComponent };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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      }),\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      .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  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/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@makerinc/ssr-component",
+  "version": "1.0.0",
+  "description": "React component for embedding Maker projects with server-side rendering",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.js"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "maker",
+    "ssr",
+    "react",
+    "component",
+    "server-side-rendering",
+    "nextjs"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}