@mints-cloud/cxf-codegen 1.0.0 → 1.0.2

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 CHANGED
@@ -15,33 +15,46 @@ Your project needs thin wrapper files that import from this library. The `create
15
15
  ### `pages/_app.tsx`
16
16
 
17
17
  ```tsx
18
- import "cxf-codegen/register";
19
- export { default } from "cxf-codegen/pages/app";
18
+ import '@/styles/globals.css'
19
+ import '@mints-cloud/cxf-codegen/register';
20
+ import CxfApp from '@mints-cloud/cxf-codegen/pages/app';
21
+ import projectcss from '../components/plasmic/<your-project>/plasmic.module.css';
22
+
23
+ export default function App(props) {
24
+ return <CxfApp {...props} tokenClass={projectcss.plasmic_tokens} />;
25
+ }
20
26
  ```
21
27
 
22
28
  ### `pages/api/[...path].ts`
23
29
 
24
30
  ```ts
25
- export { default } from "cxf-codegen/pages/api/cxf";
31
+ export { default } from '@mints-cloud/cxf-codegen/pages/api/cxf';
26
32
  ```
27
33
 
28
34
  ### `pages/api/assets/[...path].ts`
29
35
 
30
36
  ```ts
31
- export { default } from "cxf-codegen/pages/api/assets";
37
+ export { default } from '@mints-cloud/cxf-codegen/pages/api/assets';
32
38
  ```
33
39
 
34
40
  ### `pages/plasmic-host.tsx`
35
41
 
36
42
  ```tsx
37
- import "cxf-codegen/register";
38
- export { default } from "cxf-codegen/pages/plasmic-host";
43
+ import '@mints-cloud/cxf-codegen/register';
44
+ import { PlasmicHost } from '@mints-cloud/cxf-codegen/pages/plasmic-host';
45
+ import projectcss from '../components/plasmic/<your-project>/plasmic.module.css';
46
+
47
+ export default function MyPlasmicHost() {
48
+ return <PlasmicHost tokenClass={projectcss.plasmic_tokens} />;
49
+ }
39
50
  ```
40
51
 
52
+ The `tokenClass` prop ensures Plasmic design tokens are applied correctly in the canvas.
53
+
41
54
  ### `next.config.mjs`
42
55
 
43
56
  ```js
44
- import { cxfNextConfig } from "cxf-codegen";
57
+ import { cxfNextConfig } from "@mints-cloud/cxf-codegen";
45
58
  export default cxfNextConfig;
46
59
  ```
47
60
 
@@ -85,13 +98,21 @@ Data is available via `$ctx.response.*`:
85
98
  Use `createServerProps` for pages that need pre-fetched data:
86
99
 
87
100
  ```tsx
88
- import { ServerPageWrapper, createServerProps, ServerPageProps } from "cxf-codegen";
101
+ import { ServerPageWrapper, createServerProps, ServerPageProps } from "@mints-cloud/cxf-codegen";
89
102
  import { PlasmicHomepage } from "../components/plasmic/Homepage";
90
103
 
91
104
  function Homepage(props: ServerPageProps) {
92
105
  return (
93
106
  <ServerPageWrapper {...props}>
94
- <PlasmicHomepage />
107
+ <GlobalContextsProvider>
108
+ <PageParamsProvider__
109
+ route={useRouter()?.pathname}
110
+ params={useRouter()?.query}
111
+ query={useRouter()?.query}
112
+ >
113
+ <PlasmicHomepage />
114
+ </PageParamsProvider__>
115
+ </GlobalContextsProvider>
95
116
  </ServerPageWrapper>
96
117
  );
97
118
  }
@@ -1,4 +1,8 @@
1
1
  import type { AppProps } from "next/app";
2
- export declare function CxfApp({ Component, pageProps }: AppProps): import("react/jsx-runtime").JSX.Element;
2
+ type CxfAppProps = AppProps & {
3
+ tokenClass?: string;
4
+ appRootId?: string;
5
+ };
6
+ export declare function CxfApp({ Component, pageProps, tokenClass, appRootId }: CxfAppProps): import("react/jsx-runtime").JSX.Element;
3
7
  export default CxfApp;
4
8
  //# sourceMappingURL=app.d.ts.map
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,4 +1,37 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
2
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
37
  };
@@ -9,20 +42,146 @@ const react_web_1 = require("@plasmicapp/react-web");
9
42
  const query_1 = require("@plasmicapp/react-web/lib/query");
10
43
  const head_1 = __importDefault(require("next/head"));
11
44
  const link_1 = __importDefault(require("next/link"));
12
- function CxfApp({ Component, pageProps }) {
13
- // Detect ISR pages using explicit markers
14
- const serverPageProps = pageProps;
45
+ const React = __importStar(require("react"));
46
+ function isNonEmptyObject(value) {
47
+ return !!value && typeof value === "object" && !Array.isArray(value) && Object.keys(value).length > 0;
48
+ }
49
+ function CxfApp({ Component, pageProps, tokenClass, appRootId = "plasmic-app" }) {
50
+ const storeRef = React.useRef({
51
+ endpointData: {},
52
+ queryCache: {},
53
+ meta: {},
54
+ });
55
+ // Merge page props from hard loads / direct SSR navigation.
56
+ const incoming = pageProps;
57
+ if (isNonEmptyObject(incoming.endpointData)) {
58
+ storeRef.current.endpointData = {
59
+ ...storeRef.current.endpointData,
60
+ ...incoming.endpointData,
61
+ };
62
+ }
63
+ if (isNonEmptyObject(incoming.queryCache)) {
64
+ storeRef.current.queryCache = {
65
+ ...storeRef.current.queryCache,
66
+ ...incoming.queryCache,
67
+ };
68
+ }
69
+ if (incoming.buildId) {
70
+ storeRef.current.meta.buildId = incoming.buildId;
71
+ }
72
+ if (incoming.buildTimestamp) {
73
+ storeRef.current.meta.buildTimestamp = incoming.buildTimestamp;
74
+ }
75
+ if (incoming._prefetchEnabled != null) {
76
+ storeRef.current.meta._prefetchEnabled = incoming._prefetchEnabled;
77
+ }
78
+ // Merge page props from /_next/data responses used by client navigation + prefetch.
79
+ React.useEffect(() => {
80
+ if (typeof window === "undefined") {
81
+ return;
82
+ }
83
+ const originalFetch = window.fetch.bind(window);
84
+ window.fetch = async (...args) => {
85
+ const response = await originalFetch(...args);
86
+ try {
87
+ const input = args[0];
88
+ let url = "";
89
+ if (typeof input === "string") {
90
+ url = input;
91
+ }
92
+ else if (input instanceof URL) {
93
+ url = input.toString();
94
+ }
95
+ else {
96
+ url = input.url;
97
+ }
98
+ if (url.includes("/_next/data/")) {
99
+ const clone = response.clone();
100
+ const contentType = clone.headers.get("content-type") || "";
101
+ if (clone.ok && contentType.includes("application/json")) {
102
+ const json = (await clone.json());
103
+ const nextPageProps = json?.pageProps;
104
+ if (isNonEmptyObject(nextPageProps?.endpointData)) {
105
+ storeRef.current.endpointData = {
106
+ ...storeRef.current.endpointData,
107
+ ...nextPageProps.endpointData,
108
+ };
109
+ }
110
+ if (isNonEmptyObject(nextPageProps?.queryCache)) {
111
+ storeRef.current.queryCache = {
112
+ ...storeRef.current.queryCache,
113
+ ...nextPageProps.queryCache,
114
+ };
115
+ }
116
+ if (nextPageProps?.buildId) {
117
+ storeRef.current.meta.buildId = nextPageProps.buildId;
118
+ }
119
+ if (nextPageProps?.buildTimestamp) {
120
+ storeRef.current.meta.buildTimestamp = nextPageProps.buildTimestamp;
121
+ }
122
+ if (nextPageProps?._prefetchEnabled != null) {
123
+ storeRef.current.meta._prefetchEnabled = nextPageProps._prefetchEnabled;
124
+ }
125
+ }
126
+ }
127
+ }
128
+ catch {
129
+ // Intentionally ignore parsing issues; never block navigation.
130
+ }
131
+ return response;
132
+ };
133
+ return () => {
134
+ window.fetch = originalFetch;
135
+ };
136
+ }, []);
137
+ React.useEffect(() => {
138
+ if (!tokenClass) {
139
+ return;
140
+ }
141
+ const applyTokenClass = () => {
142
+ document.documentElement.classList.add(tokenClass);
143
+ document.body.classList.add(tokenClass);
144
+ document.getElementById(appRootId)?.classList.add(tokenClass);
145
+ };
146
+ applyTokenClass();
147
+ const observer = new MutationObserver(() => {
148
+ applyTokenClass();
149
+ });
150
+ observer.observe(document.body, { childList: true, subtree: true });
151
+ return () => {
152
+ observer.disconnect();
153
+ document.documentElement.classList.remove(tokenClass);
154
+ document.body.classList.remove(tokenClass);
155
+ document.getElementById(appRootId)?.classList.remove(tokenClass);
156
+ };
157
+ }, [tokenClass, appRootId]);
158
+ const mergedEndpointData = storeRef.current.endpointData;
159
+ const mergedQueryCache = storeRef.current.queryCache;
160
+ const safePageProps = {
161
+ ...pageProps,
162
+ ...storeRef.current.meta,
163
+ ...(isNonEmptyObject(mergedEndpointData)
164
+ ? { endpointData: { ...mergedEndpointData } }
165
+ : { endpointData: undefined }),
166
+ ...(isNonEmptyObject(mergedQueryCache)
167
+ ? { queryCache: { ...mergedQueryCache } }
168
+ : { queryCache: undefined }),
169
+ };
170
+ // Detect ISR/SSR pages using explicit markers and merged caches.
171
+ const serverPageProps = safePageProps;
15
172
  const isServerPage = Boolean(serverPageProps._prefetchEnabled ||
16
173
  Component.isrEnabled ||
17
174
  serverPageProps.queryCache ||
18
175
  serverPageProps.endpointData);
19
- // Fast path: minimal server-side rendering for ISR pages
20
- // This bypasses heavy client-side initialization during build time
21
- if (typeof window === 'undefined' && isServerPage) {
22
- 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 }) }));
23
- }
24
- // Regular path: full initialization for client-side and non-ISR pages
25
- // This preserves all functionality for interactive pages
26
- 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 }) }) }));
176
+ // Fast path: minimal server-side rendering for ISR pages.
177
+ if (typeof window === "undefined" && isServerPage) {
178
+ 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 }) }));
179
+ }
180
+ // Regular path: full initialization for client-side and non-ISR pages.
181
+ 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 }) }) }));
182
+ if (tokenClass) {
183
+ return (0, jsx_runtime_1.jsx)("div", { className: tokenClass, children: content });
184
+ }
185
+ return content;
27
186
  }
28
187
  exports.default = CxfApp;
@@ -1,3 +1,17 @@
1
- export declare function PlasmicHost(): import("react/jsx-runtime").JSX.Element;
1
+ export interface PlasmicHostProps {
2
+ /**
3
+ * The Plasmic token class to apply to document elements.
4
+ * Typically obtained from your project's plasmic.module.css file:
5
+ * `import projectcss from "./components/plasmic/<project>/plasmic.module.css"`
6
+ * Then pass `projectcss.plasmic_tokens` as the tokenClass prop.
7
+ */
8
+ tokenClass?: string;
9
+ /**
10
+ * The ID of the app root element to apply the token class to.
11
+ * Defaults to "plasmic-app".
12
+ */
13
+ appRootId?: string;
14
+ }
15
+ export declare function PlasmicHost({ tokenClass, appRootId }: PlasmicHostProps): import("react/jsx-runtime").JSX.Element;
2
16
  export default PlasmicHost;
3
17
  //# sourceMappingURL=plasmic-host.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,15 +1,63 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
2
35
  Object.defineProperty(exports, "__esModule", { value: true });
3
36
  exports.PlasmicHost = PlasmicHost;
4
37
  const jsx_runtime_1 = require("react/jsx-runtime");
38
+ const React = __importStar(require("react"));
5
39
  const host_1 = require("@plasmicapp/host");
6
- // You can register any code components that you want to use here; see
7
- // https://docs.plasmic.app/learn/code-components-ref/
8
- // And configure your Plasmic project to use the host url pointing at
9
- // the /plasmic-host page of your nextjs app (for example,
10
- // http://localhost:3000/plasmic-host). See
11
- // https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
12
- function PlasmicHost() {
40
+ function PlasmicHost({ tokenClass, appRootId = 'plasmic-app' }) {
41
+ React.useEffect(() => {
42
+ if (!tokenClass)
43
+ return;
44
+ const applyTokenClass = () => {
45
+ document.documentElement.classList.add(tokenClass);
46
+ document.body.classList.add(tokenClass);
47
+ document.getElementById(appRootId)?.classList.add(tokenClass);
48
+ };
49
+ applyTokenClass();
50
+ const observer = new MutationObserver(() => {
51
+ applyTokenClass();
52
+ });
53
+ observer.observe(document.body, { childList: true, subtree: true });
54
+ return () => {
55
+ observer.disconnect();
56
+ document.documentElement.classList.remove(tokenClass);
57
+ document.body.classList.remove(tokenClass);
58
+ document.getElementById(appRootId)?.classList.remove(tokenClass);
59
+ };
60
+ }, [tokenClass, appRootId]);
13
61
  return (0, jsx_runtime_1.jsx)(host_1.PlasmicCanvasHost, {});
14
62
  }
15
63
  exports.default = PlasmicHost;
package/dist/register.js CHANGED
@@ -8,7 +8,7 @@ function registerCodeComponents() {
8
8
  name: "ApiCall",
9
9
  displayName: "API Call",
10
10
  importName: "ApiCall",
11
- importPath: "cxf-codegen/components/ApiCall",
11
+ importPath: "@mints-cloud/cxf-codegen/components/ApiCall",
12
12
  section: "CXF",
13
13
  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.",
14
14
  providesData: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mints-cloud/cxf-codegen",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Plasmic CXF codegen library for Next.js applications",
5
5
  "author": "Ruben Gomez",
6
6
  "license": "MIT",