lovable-ssr 0.1.20 → 0.1.22

package/dist/components/BrowserRouteDataProvider.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 /**
- * Wraps children with HelmetProvider and RouteDataProvider using initial data from the browser:
+ * Wraps children with SEOProvider and RouteDataProvider using initial data from the browser:
  * - window.__PRELOADED_DATA__ (from SSR)
  * - window.location.pathname + RouterService for matchedRoute and routeParams
  *

package/dist/components/BrowserRouteDataProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrowserRouteDataProvider.d.ts","sourceRoot":"","sources":["../../src/components/BrowserRouteDataProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CA4B7E"}
+{"version":3,"file":"BrowserRouteDataProvider.d.ts","sourceRoot":"","sources":["../../src/components/BrowserRouteDataProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CA4B7E"}

package/dist/components/BrowserRouteDataProvider.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ReactHelmetAsync from 'react-helmet-async';
 import RouterService from '../router/RouterService.js';
 import { RouteDataProvider } from '../router/RouteDataContext.js';
-const { HelmetProvider } = ReactHelmetAsync;
+import { SEOProvider } from './SEOContext.js';
 /**
- * Wraps children with HelmetProvider and RouteDataProvider using initial data from the browser:
+ * Wraps children with SEOProvider and RouteDataProvider using initial data from the browser:
  * - window.__PRELOADED_DATA__ (from SSR)
  * - window.location.pathname + RouterService for matchedRoute and routeParams
  *
@@ -23,5 +22,5 @@ export function BrowserRouteDataProvider({ children }) {
         routeParams: routeParamsResult.routeParams,
         searchParams: Object.keys(searchParams).length > 0 ? searchParams : routeParamsResult.searchParams,
     };
-    return (_jsx(HelmetProvider, { children: _jsx(RouteDataProvider, { initialData: preloadedData, initialRoute: matchedRoute, initialParams: initialParams, children: children }) }));
+    return (_jsx(SEOProvider, { children: _jsx(RouteDataProvider, { initialData: preloadedData, initialRoute: matchedRoute, initialParams: initialParams, children: children }) }));
 }

package/dist/components/SEO.d.ts

@@ -1,15 +1,9 @@
-export interface SEOProps {
-    title: string;
-    description: string;
-    image?: string;
-    url?: string;
-    type?: string;
-    noindex?: boolean;
-    structuredData?: object;
-}
+import { type SEOProps } from './SEOContext.js';
+export type { SEOProps };
 /**
- * Centralized SEO component for meta tags and JSON-LD.
- * Use within HelmetProvider (provided by framework at app level).
+ * Centralized SEO: meta tags and JSON-LD.
+ * SSR: reports to context for head injection.
+ * Client: updates document.title and meta via useEffect.
  */
-export declare function SEO({ title, description, image, url, type, noindex, structuredData, }: SEOProps): import("react/jsx-runtime").JSX.Element;
+export declare function SEO(props: SEOProps): null;
 //# sourceMappingURL=SEO.d.ts.map

package/dist/components/SEO.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SEO.d.ts","sourceRoot":"","sources":["../../src/components/SEO.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,EACH,IAAgB,EAChB,OAAe,EACf,cAAc,GACf,EAAE,QAAQ,2CAuBV"}
+{"version":3,"file":"SEO.d.ts","sourceRoot":"","sources":["../../src/components/SEO.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE/D,YAAY,EAAE,QAAQ,EAAE,CAAC;AA4FzB;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,QAiBlC"}

package/dist/components/SEO.js

@@ -1,10 +1,108 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ReactHelmetAsync from 'react-helmet-async';
-const { Helmet } = ReactHelmetAsync;
+import { useEffect } from 'react';
+import { useSEOContext } from './SEOContext.js';
+function upsertMeta(doc, selector, attrs) {
+    let el = doc.querySelector(selector);
+    if (!el) {
+        el = doc.createElement('meta');
+        doc.head.appendChild(el);
+    }
+    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
+}
+function applySEODOM(props) {
+    if (typeof document === 'undefined')
+        return;
+    document.title = props.title;
+    upsertMeta(document, 'meta[name="description"]', {
+        name: 'description',
+        content: props.description,
+    });
+    if (props.noindex) {
+        upsertMeta(document, 'meta[name="robots"]', {
+            name: 'robots',
+            content: 'noindex, nofollow',
+        });
+    }
+    if (props.url) {
+        let canon = document.querySelector('link[rel="canonical"]');
+        if (!canon) {
+            canon = document.createElement('link');
+            canon.setAttribute('rel', 'canonical');
+            document.head.appendChild(canon);
+        }
+        canon.setAttribute('href', props.url);
+    }
+    upsertMeta(document, 'meta[property="og:title"]', {
+        property: 'og:title',
+        content: props.title,
+    });
+    upsertMeta(document, 'meta[property="og:description"]', {
+        property: 'og:description',
+        content: props.description,
+    });
+    upsertMeta(document, 'meta[property="og:type"]', {
+        property: 'og:type',
+        content: props.type ?? 'website',
+    });
+    if (props.url) {
+        upsertMeta(document, 'meta[property="og:url"]', {
+            property: 'og:url',
+            content: props.url,
+        });
+    }
+    if (props.image) {
+        upsertMeta(document, 'meta[property="og:image"]', {
+            property: 'og:image',
+            content: props.image,
+        });
+    }
+    upsertMeta(document, 'meta[name="twitter:card"]', {
+        name: 'twitter:card',
+        content: 'summary_large_image',
+    });
+    upsertMeta(document, 'meta[name="twitter:title"]', {
+        name: 'twitter:title',
+        content: props.title,
+    });
+    upsertMeta(document, 'meta[name="twitter:description"]', {
+        name: 'twitter:description',
+        content: props.description,
+    });
+    if (props.image) {
+        upsertMeta(document, 'meta[name="twitter:image"]', {
+            name: 'twitter:image',
+            content: props.image,
+        });
+    }
+    if (props.structuredData) {
+        let script = document.querySelector('script[data-seo-jsonld]');
+        if (!script) {
+            script = document.createElement('script');
+            script.setAttribute('type', 'application/ld+json');
+            script.setAttribute('data-seo-jsonld', '');
+            document.head.appendChild(script);
+        }
+        script.textContent = JSON.stringify(props.structuredData);
+    }
+}
 /**
- * Centralized SEO component for meta tags and JSON-LD.
- * Use within HelmetProvider (provided by framework at app level).
+ * Centralized SEO: meta tags and JSON-LD.
+ * SSR: reports to context for head injection.
+ * Client: updates document.title and meta via useEffect.
  */
-export function SEO({ title, description, image, url, type = 'website', noindex = false, structuredData, }) {
-    return (_jsxs(Helmet, { children: [_jsx("title", { children: title }), _jsx("meta", { name: "description", content: description }), noindex && _jsx("meta", { name: "robots", content: "noindex, nofollow" }), url && _jsx("link", { rel: "canonical", href: url }), url && _jsx("meta", { property: "og:url", content: url }), _jsx("meta", { property: "og:title", content: title }), _jsx("meta", { property: "og:description", content: description }), _jsx("meta", { property: "og:type", content: type }), image && _jsx("meta", { property: "og:image", content: image }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "twitter:title", content: title }), _jsx("meta", { name: "twitter:description", content: description }), image && _jsx("meta", { name: "twitter:image", content: image }), structuredData && (_jsx("script", { type: "application/ld+json", children: JSON.stringify(structuredData) }))] }));
+export function SEO(props) {
+    const ctx = useSEOContext();
+    if (ctx)
+        ctx.setMeta(props);
+    useEffect(() => {
+        applySEODOM(props);
+    }, [
+        props.title,
+        props.description,
+        props.image,
+        props.url,
+        props.type,
+        props.noindex,
+        props.structuredData ? JSON.stringify(props.structuredData) : null,
+    ]);
+    return null;
 }

package/dist/components/SEOContext.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface SEOProps {
+    title: string;
+    description: string;
+    image?: string;
+    url?: string;
+    type?: string;
+    noindex?: boolean;
+    structuredData?: object;
+}
+type SEOContextValue = {
+    setMeta: (meta: SEOProps) => void;
+};
+export declare function useSEOContext(): SEOContextValue | null;
+export declare function SEOProvider({ children, captureRef, }: {
+    children: ReactNode;
+    captureRef?: {
+        current: SEOProps | null;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SEOContext.d.ts.map

package/dist/components/SEOContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SEOContext.d.ts","sourceRoot":"","sources":["../../src/components/SEOContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACnC,CAAC;AAIF,wBAAgB,aAAa,IAAI,eAAe,GAAG,IAAI,CAEtD;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE;QAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,CAAA;KAAE,CAAC;CAC3C,2CASA"}

package/dist/components/SEOContext.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const SEOContext = createContext(null);
+export function useSEOContext() {
+    return useContext(SEOContext);
+}
+export function SEOProvider({ children, captureRef, }) {
+    const setMeta = (meta) => {
+        if (captureRef)
+            captureRef.current = meta;
+    };
+    return (_jsx(SEOContext.Provider, { value: { setMeta }, children: children }));
+}

package/dist/ssr/buildHeadHtml.d.ts

@@ -0,0 +1,8 @@
+import type { SEOProps } from '../components/SEOContext.js';
+export declare function buildHeadHtmlFromSEO(props: SEOProps): {
+    title: string;
+    meta: string;
+    link: string;
+    script: string;
+};
+//# sourceMappingURL=buildHeadHtml.d.ts.map

package/dist/ssr/buildHeadHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildHeadHtml.d.ts","sourceRoot":"","sources":["../../src/ssr/buildHeadHtml.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAW5D,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,QAAQ,GAAG;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAwBA"}

package/dist/ssr/buildHeadHtml.js

@@ -0,0 +1,32 @@
+function escapeHtml(s) {
+    return s
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+export function buildHeadHtmlFromSEO(props) {
+    const title = `<title>${escapeHtml(props.title)}</title>`;
+    const metaTags = [
+        `<meta name="description" content="${escapeHtml(props.description)}">`,
+        props.noindex ? '<meta name="robots" content="noindex, nofollow">' : null,
+        `<meta property="og:title" content="${escapeHtml(props.title)}">`,
+        `<meta property="og:description" content="${escapeHtml(props.description)}">`,
+        `<meta property="og:type" content="${escapeHtml(props.type ?? 'website')}">`,
+        props.url ? `<meta property="og:url" content="${escapeHtml(props.url)}">` : null,
+        props.image ? `<meta property="og:image" content="${escapeHtml(props.image)}">` : null,
+        '<meta name="twitter:card" content="summary_large_image">',
+        `<meta name="twitter:title" content="${escapeHtml(props.title)}">`,
+        `<meta name="twitter:description" content="${escapeHtml(props.description)}">`,
+        props.image ? `<meta name="twitter:image" content="${escapeHtml(props.image)}">` : null,
+    ].filter((t) => t != null);
+    const meta = metaTags.join('\n');
+    const link = props.url
+        ? `<link rel="canonical" href="${escapeHtml(props.url)}">`
+        : '';
+    const script = props.structuredData != null
+        ? `<script type="application/ld+json">${JSON.stringify(props.structuredData)}</script>`
+        : '';
+    return { title, meta, link, script };
+}

package/dist/ssr/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/ssr/render.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,OAAO,EAAE,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE9D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACxE;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;IAC1C;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED;;;GAGG;AACH,wBAAsB,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC,CAqDxF"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/ssr/render.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,EAAE,cAAc,EAAmB,MAAM,aAAa,CAAC;AAE9D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACxE;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,SAAS,CAAC;IAC1C;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED;;;GAGG;AACH,wBAAsB,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC,CAgDxF"}

package/dist/ssr/render.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { renderToString } from 'react-dom/server';
-import ReactHelmetAsync from 'react-helmet-async';
-import { StaticRouter } from 'react-router-dom/server';
-const { HelmetProvider } = ReactHelmetAsync;
+import { StaticRouter } from 'react-router-dom/server.js';
+import { SEOProvider } from '../components/SEOContext.js';
+import { buildHeadHtmlFromSEO } from './buildHeadHtml.js';
 import { AppRoutes } from '../components/AppRoutes.js';
 import { RouteDataProvider } from '../router/RouteDataContext.js';
 import RouterService from '../router/RouterService.js';
@@ -34,17 +34,12 @@ export async function render(url, options) {
             preloadedData = { ...preloadedData, is_success: false };
         }
     }
-    const helmetContext = {};
-    const inner = (_jsx(HelmetProvider, { context: helmetContext, children: _jsx(StaticRouter, { location: url, children: _jsx(RouteDataProvider, { initialData: preloadedData, initialRoute: matchedRoute, initialParams: params, children: _jsx(AppRoutes, {}) }) }) }));
+    const seoCapture = { current: null };
+    const inner = (_jsx(SEOProvider, { captureRef: seoCapture, children: _jsx(StaticRouter, { location: url, children: _jsx(RouteDataProvider, { initialData: preloadedData, initialRoute: matchedRoute, initialParams: params, children: _jsx(AppRoutes, {}) }) }) }));
     const app = options?.wrap ? options.wrap(inner) : inner;
     const html = renderToString(app);
-    const helmet = helmetContext.helmet
-        ? {
-            title: helmetContext.helmet.title.toString(),
-            meta: helmetContext.helmet.meta.toString(),
-            link: helmetContext.helmet.link.toString(),
-            script: helmetContext.helmet.script.toString(),
-        }
+    const helmet = seoCapture.current
+        ? buildHeadHtmlFromSEO(seoCapture.current)
         : undefined;
     return { html, preloadedData, helmet };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lovable-ssr",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "SSR and route data engine for Lovable projects",
   "license": "MIT",
   "keywords": [
@@ -43,12 +43,10 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-helmet-async": "^2.0.5",
     "react-router-dom": "^6.0.0"
   },
   "dependencies": {
-    "express": "^4.21.0",
-    "react-helmet-async": "^2.0.5"
+    "express": "^4.21.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",