create-plasmic-app 0.0.39 → 0.0.40

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.
Files changed (3) hide show
  1. package/dist/templates/nextjs.js +18 -13
  2. package/package.json +1 -1
  3. package/src/templates/nextjs.ts +18 -13
package/dist/templates/nextjs.js CHANGED
@@ -34,7 +34,10 @@ function makeNextjsCatchallPage(format) {
34
34
  const ts = format === "ts";
35
35
  return `
36
36
  import * as React from "react";
37
- import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
37
+ import {
38
+ PlasmicComponent,
39
+ extractPlasmicQueryData,
40
+ } from "@plasmicapp/loader-nextjs";
38
41
  ${file_utils_1.ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
39
42
  import {
40
43
  ComponentRenderData,
@@ -45,8 +48,9 @@ import { PLASMIC } from "../plasmic-init";
45
48
 
46
49
  export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
47
50
  plasmicData?: ComponentRenderData;
51
+ queryCache?: Record<string, any>;
48
52
  }`)}) {
49
- const { plasmicData } = props;
53
+ const { plasmicData, queryCache } = props;
50
54
  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
51
55
  return <Error statusCode={404} />;
52
56
  }
@@ -54,6 +58,7 @@ export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
54
58
  <PlasmicRootProvider
55
59
  loader={PLASMIC}
56
60
  prefetchedData={plasmicData}
61
+ prefetchedQueryData={queryCache}
57
62
  >
58
63
  <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
59
64
  </PlasmicRootProvider>
@@ -64,18 +69,18 @@ export const getStaticProps${file_utils_1.ifTs(ts, `: GetStaticProps`)} = async
64
69
  const { catchall } = context.params ?? {};
65
70
  const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? \`/\${catchall.join('/')}\` : '/';
66
71
  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
67
- if (plasmicData) {
68
- return {
69
- props: { plasmicData },
70
-
71
- // Use revalidate if you want incremental static regeneration
72
- revalidate: 60
73
- };
74
- }
75
- return {
72
+ if (!plasmicData) {
76
73
  // non-Plasmic catch-all
77
- props: {},
78
- };
74
+ return { props: {} };
75
+ }
76
+ // Cache the necessary data fetched for the page
77
+ const queryCache = await extractPlasmicQueryData(
78
+ <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
79
+ <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
80
+ </PlasmicRootProvider>
81
+ );
82
+ // Use revalidate if you want incremental static regeneration
83
+ return { props: { plasmicData, queryCache }, revalidate: 60 };
79
84
  }
80
85
 
81
86
  export const getStaticPaths${file_utils_1.ifTs(ts, `: GetStaticPaths`)} = async () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-plasmic-app",
3
- "version": "0.0.39",
3
+ "version": "0.0.40",
4
4
  "description": "Create Plasmic-powered React apps",
5
5
  "main": "./dist/lib.js",
6
6
  "types": "./dist/lib.d.ts",
package/src/templates/nextjs.ts CHANGED
@@ -37,7 +37,10 @@ export function makeNextjsCatchallPage(format: "ts" | "js"): string {
37
37
  const ts = format === "ts";
38
38
  return `
39
39
  import * as React from "react";
40
- import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
40
+ import {
41
+ PlasmicComponent,
42
+ extractPlasmicQueryData,
43
+ } from "@plasmicapp/loader-nextjs";
41
44
  ${ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
42
45
  import {
43
46
  ComponentRenderData,
@@ -50,9 +53,10 @@ export default function PlasmicLoaderPage(props${ifTs(
50
53
  ts,
51
54
  `: {
52
55
  plasmicData?: ComponentRenderData;
56
+ queryCache?: Record<string, any>;
53
57
  }`
54
58
  )}) {
55
- const { plasmicData } = props;
59
+ const { plasmicData, queryCache } = props;
56
60
  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
57
61
  return <Error statusCode={404} />;
58
62
  }
@@ -60,6 +64,7 @@ export default function PlasmicLoaderPage(props${ifTs(
60
64
  <PlasmicRootProvider
61
65
  loader={PLASMIC}
62
66
  prefetchedData={plasmicData}
67
+ prefetchedQueryData={queryCache}
63
68
  >
64
69
  <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
65
70
  </PlasmicRootProvider>
@@ -73,18 +78,18 @@ export const getStaticProps${ifTs(
73
78
  const { catchall } = context.params ?? {};
74
79
  const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? \`/\${catchall.join('/')}\` : '/';
75
80
  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
76
- if (plasmicData) {
77
- return {
78
- props: { plasmicData },
79
-
80
- // Use revalidate if you want incremental static regeneration
81
- revalidate: 60
82
- };
83
- }
84
- return {
81
+ if (!plasmicData) {
85
82
  // non-Plasmic catch-all
86
- props: {},
87
- };
83
+ return { props: {} };
84
+ }
85
+ // Cache the necessary data fetched for the page
86
+ const queryCache = await extractPlasmicQueryData(
87
+ <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
88
+ <PlasmicComponent component={plasmicData.entryCompMetas[0].name} />
89
+ </PlasmicRootProvider>
90
+ );
91
+ // Use revalidate if you want incremental static regeneration
92
+ return { props: { plasmicData, queryCache }, revalidate: 60 };
88
93
  }
89
94
 
90
95
  export const getStaticPaths${ifTs(ts, `: GetStaticPaths`)} = async () => {