@mints-cloud/cxf-codegen 1.0.0 → 1.0.2

package/README.md

@@ -15,33 +15,46 @@ Your project needs thin wrapper files that import from this library. The `create
 ### `pages/_app.tsx`
 
 ```tsx
-import "cxf-codegen/register";
-export { default } from "cxf-codegen/pages/app";
+import '@/styles/globals.css'
+import '@mints-cloud/cxf-codegen/register';
+import CxfApp from '@mints-cloud/cxf-codegen/pages/app';
+import projectcss from '../components/plasmic/<your-project>/plasmic.module.css';
+
+export default function App(props) {
+  return <CxfApp {...props} tokenClass={projectcss.plasmic_tokens} />;
+}
 ```
 
 ### `pages/api/[...path].ts`
 
 ```ts
-export { default } from "cxf-codegen/pages/api/cxf";
+export { default } from '@mints-cloud/cxf-codegen/pages/api/cxf';
 ```
 
 ### `pages/api/assets/[...path].ts`
 
 ```ts
-export { default } from "cxf-codegen/pages/api/assets";
+export { default } from '@mints-cloud/cxf-codegen/pages/api/assets';
 ```
 
 ### `pages/plasmic-host.tsx`
 
 ```tsx
-import "cxf-codegen/register";
-export { default } from "cxf-codegen/pages/plasmic-host";
+import '@mints-cloud/cxf-codegen/register';
+import { PlasmicHost } from '@mints-cloud/cxf-codegen/pages/plasmic-host';
+import projectcss from '../components/plasmic/<your-project>/plasmic.module.css';
+
+export default function MyPlasmicHost() {
+  return <PlasmicHost tokenClass={projectcss.plasmic_tokens} />;
+}
 ```
 
+The `tokenClass` prop ensures Plasmic design tokens are applied correctly in the canvas.
+
 ### `next.config.mjs`
 
 ```js
-import { cxfNextConfig } from "cxf-codegen";
+import { cxfNextConfig } from "@mints-cloud/cxf-codegen";
 export default cxfNextConfig;
 ```
 
@@ -85,13 +98,21 @@ Data is available via `$ctx.response.*`:
 Use `createServerProps` for pages that need pre-fetched data:
 
 ```tsx
-import { ServerPageWrapper, createServerProps, ServerPageProps } from "cxf-codegen";
+import { ServerPageWrapper, createServerProps, ServerPageProps } from "@mints-cloud/cxf-codegen";
 import { PlasmicHomepage } from "../components/plasmic/Homepage";
 
 function Homepage(props: ServerPageProps) {
   return (
     <ServerPageWrapper {...props}>
-      <PlasmicHomepage />
+      <GlobalContextsProvider>
+        <PageParamsProvider__
+          route={useRouter()?.pathname}
+          params={useRouter()?.query}
+          query={useRouter()?.query}
+        >
+          <PlasmicHomepage />
+        </PageParamsProvider__>
+      </GlobalContextsProvider>
     </ServerPageWrapper>
   );
 }

package/dist/pages/app.d.ts

@@ -1,4 +1,8 @@
 import type { AppProps } from "next/app";
-export declare function CxfApp({ Component, pageProps }: AppProps): import("react/jsx-runtime").JSX.Element;
+type CxfAppProps = AppProps & {
+    tokenClass?: string;
+    appRootId?: string;
+};
+export declare function CxfApp({ Component, pageProps, tokenClass, appRootId }: CxfAppProps): import("react/jsx-runtime").JSX.Element;
 export default CxfApp;
 //# sourceMappingURL=app.d.ts.map

package/dist/pages/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/pages/app.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKzC,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,QAAQ,2CA6BxD;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/pages/app.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAMzC,KAAK,WAAW,GAAG,QAAQ,GAAG;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAYF,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,SAAyB,EAAE,EAAE,WAAW,2CA+KlG;AAED,eAAe,MAAM,CAAC"}

package/dist/pages/app.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,20 +42,146 @@ const react_web_1 = require("@plasmicapp/react-web");
 const query_1 = require("@plasmicapp/react-web/lib/query");
 const head_1 = __importDefault(require("next/head"));
 const link_1 = __importDefault(require("next/link"));
-function CxfApp({ Component, pageProps }) {
-    // Detect ISR pages using explicit markers
-    const serverPageProps = pageProps;
+const React = __importStar(require("react"));
+function isNonEmptyObject(value) {
+    return !!value && typeof value === "object" && !Array.isArray(value) && Object.keys(value).length > 0;
+}
+function CxfApp({ Component, pageProps, tokenClass, appRootId = "plasmic-app" }) {
+    const storeRef = React.useRef({
+        endpointData: {},
+        queryCache: {},
+        meta: {},
+    });
+    // Merge page props from hard loads / direct SSR navigation.
+    const incoming = pageProps;
+    if (isNonEmptyObject(incoming.endpointData)) {
+        storeRef.current.endpointData = {
+            ...storeRef.current.endpointData,
+            ...incoming.endpointData,
+        };
+    }
+    if (isNonEmptyObject(incoming.queryCache)) {
+        storeRef.current.queryCache = {
+            ...storeRef.current.queryCache,
+            ...incoming.queryCache,
+        };
+    }
+    if (incoming.buildId) {
+        storeRef.current.meta.buildId = incoming.buildId;
+    }
+    if (incoming.buildTimestamp) {
+        storeRef.current.meta.buildTimestamp = incoming.buildTimestamp;
+    }
+    if (incoming._prefetchEnabled != null) {
+        storeRef.current.meta._prefetchEnabled = incoming._prefetchEnabled;
+    }
+    // Merge page props from /_next/data responses used by client navigation + prefetch.
+    React.useEffect(() => {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const originalFetch = window.fetch.bind(window);
+        window.fetch = async (...args) => {
+            const response = await originalFetch(...args);
+            try {
+                const input = args[0];
+                let url = "";
+                if (typeof input === "string") {
+                    url = input;
+                }
+                else if (input instanceof URL) {
+                    url = input.toString();
+                }
+                else {
+                    url = input.url;
+                }
+                if (url.includes("/_next/data/")) {
+                    const clone = response.clone();
+                    const contentType = clone.headers.get("content-type") || "";
+                    if (clone.ok && contentType.includes("application/json")) {
+                        const json = (await clone.json());
+                        const nextPageProps = json?.pageProps;
+                        if (isNonEmptyObject(nextPageProps?.endpointData)) {
+                            storeRef.current.endpointData = {
+                                ...storeRef.current.endpointData,
+                                ...nextPageProps.endpointData,
+                            };
+                        }
+                        if (isNonEmptyObject(nextPageProps?.queryCache)) {
+                            storeRef.current.queryCache = {
+                                ...storeRef.current.queryCache,
+                                ...nextPageProps.queryCache,
+                            };
+                        }
+                        if (nextPageProps?.buildId) {
+                            storeRef.current.meta.buildId = nextPageProps.buildId;
+                        }
+                        if (nextPageProps?.buildTimestamp) {
+                            storeRef.current.meta.buildTimestamp = nextPageProps.buildTimestamp;
+                        }
+                        if (nextPageProps?._prefetchEnabled != null) {
+                            storeRef.current.meta._prefetchEnabled = nextPageProps._prefetchEnabled;
+                        }
+                    }
+                }
+            }
+            catch {
+                // Intentionally ignore parsing issues; never block navigation.
+            }
+            return response;
+        };
+        return () => {
+            window.fetch = originalFetch;
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!tokenClass) {
+            return;
+        }
+        const applyTokenClass = () => {
+            document.documentElement.classList.add(tokenClass);
+            document.body.classList.add(tokenClass);
+            document.getElementById(appRootId)?.classList.add(tokenClass);
+        };
+        applyTokenClass();
+        const observer = new MutationObserver(() => {
+            applyTokenClass();
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+            document.documentElement.classList.remove(tokenClass);
+            document.body.classList.remove(tokenClass);
+            document.getElementById(appRootId)?.classList.remove(tokenClass);
+        };
+    }, [tokenClass, appRootId]);
+    const mergedEndpointData = storeRef.current.endpointData;
+    const mergedQueryCache = storeRef.current.queryCache;
+    const safePageProps = {
+        ...pageProps,
+        ...storeRef.current.meta,
+        ...(isNonEmptyObject(mergedEndpointData)
+            ? { endpointData: { ...mergedEndpointData } }
+            : { endpointData: undefined }),
+        ...(isNonEmptyObject(mergedQueryCache)
+            ? { queryCache: { ...mergedQueryCache } }
+            : { queryCache: undefined }),
+    };
+    // Detect ISR/SSR pages using explicit markers and merged caches.
+    const serverPageProps = safePageProps;
     const isServerPage = Boolean(serverPageProps._prefetchEnabled ||
         Component.isrEnabled ||
         serverPageProps.queryCache ||
         serverPageProps.endpointData);
-    // Fast path: minimal server-side rendering for ISR pages
-    // This bypasses heavy client-side initialization during build time
-    if (typeof window === 'undefined' && isServerPage) {
-        return ((0, jsx_runtime_1.jsx)(react_web_1.PlasmicRootProvider, { Head: head_1.default, Link: link_1.default, children: (0, jsx_runtime_1.jsx)(Component, { ...pageProps }) }));
-    }
-    // Regular path: full initialization for client-side and non-ISR pages
-    // This preserves all functionality for interactive pages
-    return ((0, jsx_runtime_1.jsx)(react_web_1.PlasmicRootProvider, { Head: head_1.default, Link: link_1.default, children: (0, jsx_runtime_1.jsx)(query_1.PlasmicQueryDataProvider, { suspense: true, children: (0, jsx_runtime_1.jsx)(Component, { ...pageProps }) }) }));
+    // Fast path: minimal server-side rendering for ISR pages.
+    if (typeof window === "undefined" && isServerPage) {
+        return ((0, jsx_runtime_1.jsx)(react_web_1.PlasmicRootProvider, { Head: head_1.default, Link: link_1.default, children: (0, jsx_runtime_1.jsx)(Component, { ...safePageProps }) }));
+    }
+    // Regular path: full initialization for client-side and non-ISR pages.
+    const content = ((0, jsx_runtime_1.jsx)(react_web_1.PlasmicRootProvider, { Head: head_1.default, Link: link_1.default, children: (0, jsx_runtime_1.jsx)(query_1.PlasmicQueryDataProvider, { suspense: true, children: (0, jsx_runtime_1.jsx)(Component, { ...safePageProps }) }) }));
+    if (tokenClass) {
+        return (0, jsx_runtime_1.jsx)("div", { className: tokenClass, children: content });
+    }
+    return content;
 }
 exports.default = CxfApp;

package/dist/pages/plasmic-host.d.ts

@@ -1,3 +1,17 @@
-export declare function PlasmicHost(): import("react/jsx-runtime").JSX.Element;
+export interface PlasmicHostProps {
+    /**
+     * The Plasmic token class to apply to document elements.
+     * Typically obtained from your project's plasmic.module.css file:
+     * `import projectcss from "./components/plasmic/<project>/plasmic.module.css"`
+     * Then pass `projectcss.plasmic_tokens` as the tokenClass prop.
+     */
+    tokenClass?: string;
+    /**
+     * The ID of the app root element to apply the token class to.
+     * Defaults to "plasmic-app".
+     */
+    appRootId?: string;
+}
+export declare function PlasmicHost({ tokenClass, appRootId }: PlasmicHostProps): import("react/jsx-runtime").JSX.Element;
 export default PlasmicHost;
 //# sourceMappingURL=plasmic-host.d.ts.map

package/dist/pages/plasmic-host.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plasmic-host.d.ts","sourceRoot":"","sources":["../../src/pages/plasmic-host.tsx"],"names":[],"mappings":"AAUA,wBAAgB,WAAW,4CAE1B;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"plasmic-host.d.ts","sourceRoot":"","sources":["../../src/pages/plasmic-host.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,SAAyB,EAAE,EAAE,gBAAgB,2CA2BtF;AAED,eAAe,WAAW,CAAC"}

package/dist/pages/plasmic-host.js

@@ -1,15 +1,63 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlasmicHost = PlasmicHost;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
 const host_1 = require("@plasmicapp/host");
-// You can register any code components that you want to use here; see
-// https://docs.plasmic.app/learn/code-components-ref/
-// And configure your Plasmic project to use the host url pointing at
-// the /plasmic-host page of your nextjs app (for example,
-// http://localhost:3000/plasmic-host).  See
-// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
-function PlasmicHost() {
+function PlasmicHost({ tokenClass, appRootId = 'plasmic-app' }) {
+    React.useEffect(() => {
+        if (!tokenClass)
+            return;
+        const applyTokenClass = () => {
+            document.documentElement.classList.add(tokenClass);
+            document.body.classList.add(tokenClass);
+            document.getElementById(appRootId)?.classList.add(tokenClass);
+        };
+        applyTokenClass();
+        const observer = new MutationObserver(() => {
+            applyTokenClass();
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+            document.documentElement.classList.remove(tokenClass);
+            document.body.classList.remove(tokenClass);
+            document.getElementById(appRootId)?.classList.remove(tokenClass);
+        };
+    }, [tokenClass, appRootId]);
     return (0, jsx_runtime_1.jsx)(host_1.PlasmicCanvasHost, {});
 }
 exports.default = PlasmicHost;

package/dist/register.js

@@ -8,7 +8,7 @@ function registerCodeComponents() {
         name: "ApiCall",
         displayName: "API Call",
         importName: "ApiCall",
-        importPath: "cxf-codegen/components/ApiCall",
+        importPath: "@mints-cloud/cxf-codegen/components/ApiCall",
         section: "CXF",
         description: "API caller for CXF. Auto-handles path prefixes and auth; provides data via $ctx.response.*. GET auto-fetches; other methods trigger via 'trigger'. If no children, no loading UI.",
         providesData: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mints-cloud/cxf-codegen",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Plasmic CXF codegen library for Next.js applications",
   "author": "Ruben Gomez",
   "license": "MIT",