create-plasmic-app 0.0.45 → 0.0.48

package/README.md

@@ -1,5 +1,5 @@
-
 # Create Plasmic App
+
 The easiest way to get started with Plasmic for a new code base is with `create-plasmic-app`. Under the hood, we'll use `create-next-app`, `create-gatsby`, or `create-react-app` to help create a new app, and set it up with Plasmic.
 
 ## Quickstart

package/dist/index.js

@@ -203,7 +203,7 @@ function run() {
                 name: "projectId",
                 message: `What is the URL of your project?
 If you don't have a project yet, create one by going to
-https://studio.plasmic.app/starters/simple-light
+https://studio.plasmic.app/starters/blank
 `,
             });
             projectId = rawProjectId

package/dist/lib.js

@@ -102,6 +102,7 @@ function create(args) {
         const installResult = yield cpaStrategy.installDeps({
             scheme,
             projectPath: resolvedProjectPath,
+            useTypescript,
         });
         if (!installResult) {
             throw new Error("Failed to install the Plasmic dependency");

package/dist/strategies/gatsby.js

@@ -49,16 +49,38 @@ const npm_utils_1 = require("../utils/npm-utils");
 const common_1 = require("./common");
 const gatsbyStrategy = {
     create: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        const { projectPath, template } = args;
-        const createCommand = `npx -p gatsby gatsby new ${projectPath}`;
-        const templateArg = template ? ` ${template}` : "";
-        yield cmd_utils_1.spawnOrFail(`${createCommand}${templateArg}`);
+        const { projectPath, template, useTypescript } = args;
+        if (template) {
+            console.log(`Warning: Ignoring template '${template}' (argument is not supported by Gatsby).`);
+        }
+        // create-gatsby does not support absolute paths as of 2022-08-12
+        // (see https://github.com/gatsbyjs/gatsby/issues/36381).
+        const parent = path_1.default.dirname(projectPath);
+        yield fs_1.promises.mkdir(parent, { recursive: true });
+        const dir = path_1.default.basename(projectPath);
+        const createCommand = `npx -p create-gatsby create-gatsby ${useTypescript ? "-ts" : ""} -y ${dir}`;
+        yield cmd_utils_1.spawnOrFail(`${createCommand}`, parent);
     }),
-    installDeps: ({ projectPath, scheme }) => __awaiter(void 0, void 0, void 0, function* () {
+    installDeps: ({ projectPath, scheme, useTypescript }) => __awaiter(void 0, void 0, void 0, function* () {
         if (scheme === "loader") {
-            return yield npm_utils_1.installUpgrade("@plasmicapp/loader-gatsby", {
+            const installedLoader = yield npm_utils_1.installUpgrade("@plasmicapp/loader-gatsby", {
+                workingDir: projectPath,
+            });
+            const installedHelmet = yield npm_utils_1.installUpgrade("react-helmet", {
+                workingDir: projectPath,
+            });
+            const installedHelmetTypes = !useTypescript ||
+                (yield npm_utils_1.installUpgrade("@types/react-helmet", {
+                    workingDir: projectPath,
+                    dev: true,
+                }));
+            const installedHelmetPlugin = yield npm_utils_1.installUpgrade("gatsby-plugin-react-helmet", {
                 workingDir: projectPath,
             });
+            return (installedLoader &&
+                installedHelmet &&
+                installedHelmetPlugin &&
+                installedHelmetTypes);
         }
         else {
             return yield common_1.installCodegenDeps({ projectPath });
@@ -67,21 +89,29 @@ const gatsbyStrategy = {
     overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
         var e_1, _a;
         const { projectId, projectPath, projectApiToken, useTypescript, scheme, } = args;
+        const extension = useTypescript ? "ts" : "js";
         if (scheme === "loader") {
-            // create-gatsby will create a default gatsby-config.js that we need to modify
-            const gatsbyConfigFile = path_1.default.join(projectPath, "gatsby-config.js");
+            // create-gatsby will create a default gatsby-config that we need to modify
+            const gatsbyConfigFile = path_1.default.join(projectPath, `gatsby-config.${extension}`);
             const rl = readline.createInterface({
                 input: fs_1.createReadStream(gatsbyConfigFile),
                 crlfDelay: Infinity,
             });
-            let result = "";
+            // Typescript doesn't accept require.resolve
+            // https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#requireresolve
+            let result = useTypescript ? `import path from "path";\n` : "";
+            const pluginConfig = gatsby_1.GATSBY_PLUGIN_CONFIG(projectId, lang_utils_1.ensure(projectApiToken), useTypescript);
             try {
                 for (var rl_1 = __asyncValues(rl), rl_1_1; rl_1_1 = yield rl_1.next(), !rl_1_1.done;) {
                     const line = rl_1_1.value;
-                    result += line + "\n";
-                    // Prepend PlasmicLoader to list of plugins
-                    if (line.includes("plugins:")) {
-                        result += gatsby_1.GATSBY_PLUGIN_CONFIG(projectId, lang_utils_1.ensure(projectApiToken), useTypescript);
+                    if (line.includes("plugins: []")) {
+                        result += "  plugins: [" + pluginConfig + "]\n";
+                    }
+                    else if (line.includes("plugins: [")) {
+                        result += line + pluginConfig + "\n";
+                    }
+                    else {
+                        result += line + "\n";
                     }
                 }
             }
@@ -102,16 +132,16 @@ const gatsbyStrategy = {
         const extension = useTypescript ? "ts" : "js";
         file_utils_1.deleteGlob(path_1.default.join(projectPath, "src/@(pages|components|templates)/*.*"));
         // Create a very basic 404 page - `gatsby build` fails without it.
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/404.js`), gatsby_1.GATSBY_404);
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/404.${extension}`), gatsby_1.GATSBY_404);
         // Add plasmic-host page
         yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/plasmic-host.${extension}x`), gatsby_1.makeGatsbyHostPage({
             useTypescript,
             scheme,
         }));
-        // Start with an empty gatsby-node.js
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "gatsby-node.js"), "");
+        // Start with an empty gatsby-node
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `gatsby-node.${extension}`), "");
         // Updates `gatsby-ssr` to include script tag for preamble
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "gatsby-ssr.js"), gatsby_1.GATSBY_SSR_CONFIG);
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `gatsby-ssr.${extension}x`), gatsby_1.GATSBY_SSR_CONFIG);
         if (scheme === "loader") {
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/plasmic-init.${extension}`), gatsby_1.makeGatsbyPlasmicInit(extension));
             const templatesFolder = path_1.default.join(projectPath, "src/templates");
@@ -131,9 +161,9 @@ const gatsbyStrategy = {
             yield file_utils_1.overwriteIndex(projectPath, "gatsby", scheme);
             // Overwrite the wrapper files to wrap PlasmicRootProvider
             const wrapperContent = gatsby_1.wrapAppRootForCodegen();
-            const browserFilePath = path_1.default.join(projectPath, "gatsby-browser.js");
+            const browserFilePath = path_1.default.join(projectPath, `gatsby-browser.${extension}x`);
             yield fs_1.promises.writeFile(browserFilePath, wrapperContent);
-            const ssrFilePath = path_1.default.join(projectPath, "gatsby-ssr.js");
+            const ssrFilePath = path_1.default.join(projectPath, `gatsby-ssr.${extension}x`);
             yield fs_1.promises.writeFile(ssrFilePath, wrapperContent);
         }
     }),

package/dist/strategies/types.d.ts

@@ -25,6 +25,7 @@ interface BuildArgs {
 interface InstallArgs {
     scheme: CodeScheme;
     projectPath: string;
+    useTypescript: boolean;
 }
 export interface CPAStrategy {
     create: (args: CreateArgs) => Promise<void>;

package/dist/templates/gatsby.js

@@ -13,7 +13,7 @@ import {
   InitOptions,
   ComponentRenderData,`)}
 } from "@plasmicapp/loader-gatsby";
-import { graphql } from "gatsby";
+import { graphql${file_utils_1.ifTs(ts, ", PageProps")} } from "gatsby";
 import { initPlasmicLoaderWithRegistrations } from "../plasmic-init";
 
 export const query = graphql\`
@@ -23,14 +23,14 @@ export const query = graphql\`
   }
 \`;
 
-${file_utils_1.ifTs(ts, `interface PlasmicGatsbyPageProps {
+${file_utils_1.ifTs(ts, `interface PlasmicGatsbyPageProps extends PageProps {
   data: {
     plasmicOptions: InitOptions
     plasmicComponents: ComponentRenderData
   }
 }
 `)}
-const PlasmicGatsbyPage = ({ data }${file_utils_1.ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
+const PlasmicGatsbyPage = ({ data, location }${file_utils_1.ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
   const {
     plasmicComponents,
     plasmicOptions,
@@ -41,12 +41,14 @@ const PlasmicGatsbyPage = ({ data }${file_utils_1.ifTs(ts, ": PlasmicGatsbyPageP
     <PlasmicRootProvider
       loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
+      pageParams={pageMeta.params}
+      pageQuery={Object.fromEntries(new URLSearchParams(location.search))}
     >
       <Helmet>
-        {pageMetadata.title && <title>{pageMetadata.title}</title>}
-        {pageMetadata.title && <meta property="og:title" content={pageMetadata.title} /> }
-        {pageMetadata.description && <meta property="og:description" content={pageMetadata.description} />}
-        {pageMetadata.openGraphImageUrl && <meta property="og:image" content={pageMetadata.openGraphImageUrl} />}
+        {pageMetadata?.title && <title>{pageMetadata.title}</title>}
+        {pageMetadata?.title && <meta property="og:title" content={pageMetadata.title} /> }
+        {pageMetadata?.description && <meta property="og:description" content={pageMetadata.description} />}
+        {pageMetadata?.openGraphImageUrl && <meta property="og:image" content={pageMetadata.openGraphImageUrl} />}
       </Helmet>
       <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
@@ -73,9 +75,13 @@ const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken, useTypescript) => `
         token: "${projectApiToken}",
       },
     ], // An array of project ids.
-    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.${useTypescript ? "tsx" : "jsx"}"),
+    preview: false,
+    defaultPlasmicPage: ${useTypescript ? "path" : "require"}.resolve("./src/templates/defaultPlasmicPage.${useTypescript ? "tsx" : "jsx"}"),
   },
 },
+{
+  resolve: "gatsby-plugin-react-helmet",
+}
 `;
 exports.GATSBY_PLUGIN_CONFIG = GATSBY_PLUGIN_CONFIG;
 const makeGatsbyHostPage = (opts) => {

package/dist/templates/nextjs.js

@@ -40,8 +40,9 @@ import {
   ComponentRenderData,
   PlasmicRootProvider,
 } from "@plasmicapp/loader-nextjs";
-${file_utils_1.ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
+${file_utils_1.ifTs(ts, `import type { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import Error from "next/error";
+import { useRouter } from "next/router";
 import { PLASMIC } from "../plasmic-init";
 
 export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
@@ -49,16 +50,20 @@ export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
   queryCache?: Record<string, any>;
 }`)}) {
   const { plasmicData, queryCache } = props;
+  const router = useRouter();
   if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
     return <Error statusCode={404} />;
   }
+  const pageMeta = plasmicData.entryCompMetas[0];
   return (
     <PlasmicRootProvider
       loader={PLASMIC}
       prefetchedData={plasmicData}
       prefetchedQueryData={queryCache}
+      pageParams={pageMeta.params}
+      pageQuery={router.query}
     >
-      <PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />
+      <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
   );
 }
@@ -71,10 +76,15 @@ export const getStaticProps${file_utils_1.ifTs(ts, `: GetStaticProps`)} = async
     // non-Plasmic catch-all
     return { props: {} };
   }
+  const pageMeta = plasmicData.entryCompMetas[0];
   // Cache the necessary data fetched for the page
   const queryCache = await extractPlasmicQueryData(
-    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
-      <PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />
+    <PlasmicRootProvider
+      loader={PLASMIC}
+      prefetchedData={plasmicData}
+      pageParams={pageMeta.params}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
   );
   // Use revalidate if you want incremental static regeneration
@@ -89,10 +99,7 @@ export const getStaticPaths${file_utils_1.ifTs(ts, `: GetStaticPaths`)} = async
         catchall: mod.path.substring(1).split("/"),
       },
     })),
-
-    // Turn on "fallback: 'blocking'" if you would like new paths created
-    // in Plasmic to be automatically available
-    fallback: false,
+    fallback: "blocking",
   };
 }
   `.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.45",
+  "version": "0.0.48",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -17,7 +17,7 @@
     "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch",
     "build": "eslint 'src/**' && tsc",
     "create-plasmic-app": "ts-node src/index.ts",
-    "prepare": "yarn build"
+    "prepare": "if-env PREPARE_NO_BUILD=true || yarn build"
   },
   "devDependencies": {
     "@types/findup-sync": "^2.0.2",
@@ -40,7 +40,7 @@
     "typescript": "^4.2.3"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.166",
+    "@plasmicapp/cli": "^0.1.185",
     "@sentry/node": "^6.2.2",
     "chalk": "^4.1.0",
     "execa": "^5.0.0",

package/src/index.ts

@@ -186,7 +186,7 @@ async function run(): Promise<void> {
       name: "projectId",
       message: `What is the URL of your project?
 If you don't have a project yet, create one by going to
-https://studio.plasmic.app/starters/simple-light
+https://studio.plasmic.app/starters/blank
 `,
     });
     projectId = rawProjectId

package/src/lib.ts

@@ -97,6 +97,7 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
   const installResult = await cpaStrategy.installDeps({
     scheme,
     projectPath: resolvedProjectPath,
+    useTypescript,
   });
 
   if (!installResult) {

package/src/strategies/gatsby.ts

@@ -19,17 +19,52 @@ import { CPAStrategy } from "./types";
 
 const gatsbyStrategy: CPAStrategy = {
   create: async (args) => {
-    const { projectPath, template } = args;
-    const createCommand = `npx -p gatsby gatsby new ${projectPath}`;
-    const templateArg = template ? ` ${template}` : "";
+    const { projectPath, template, useTypescript } = args;
+    if (template) {
+      console.log(
+        `Warning: Ignoring template '${template}' (argument is not supported by Gatsby).`
+      );
+    }
 
-    await spawnOrFail(`${createCommand}${templateArg}`);
+    // create-gatsby does not support absolute paths as of 2022-08-12
+    // (see https://github.com/gatsbyjs/gatsby/issues/36381).
+    const parent = path.dirname(projectPath);
+    await fs.mkdir(parent, { recursive: true });
+    const dir = path.basename(projectPath);
+    const createCommand = `npx -p create-gatsby create-gatsby ${
+      useTypescript ? "-ts" : ""
+    } -y ${dir}`;
+    await spawnOrFail(`${createCommand}`, parent);
   },
-  installDeps: async ({ projectPath, scheme }) => {
+  installDeps: async ({ projectPath, scheme, useTypescript }) => {
     if (scheme === "loader") {
-      return await installUpgrade("@plasmicapp/loader-gatsby", {
+      const installedLoader = await installUpgrade(
+        "@plasmicapp/loader-gatsby",
+        {
+          workingDir: projectPath,
+        }
+      );
+      const installedHelmet = await installUpgrade("react-helmet", {
         workingDir: projectPath,
       });
+      const installedHelmetTypes =
+        !useTypescript ||
+        (await installUpgrade("@types/react-helmet", {
+          workingDir: projectPath,
+          dev: true,
+        }));
+      const installedHelmetPlugin = await installUpgrade(
+        "gatsby-plugin-react-helmet",
+        {
+          workingDir: projectPath,
+        }
+      );
+      return (
+        installedLoader &&
+        installedHelmet &&
+        installedHelmetPlugin &&
+        installedHelmetTypes
+      );
     } else {
       return await installCodegenDeps({ projectPath });
     }
@@ -42,24 +77,33 @@ const gatsbyStrategy: CPAStrategy = {
       useTypescript,
       scheme,
     } = args;
+    const extension = useTypescript ? "ts" : "js";
 
     if (scheme === "loader") {
-      // create-gatsby will create a default gatsby-config.js that we need to modify
-      const gatsbyConfigFile = path.join(projectPath, "gatsby-config.js");
+      // create-gatsby will create a default gatsby-config that we need to modify
+      const gatsbyConfigFile = path.join(
+        projectPath,
+        `gatsby-config.${extension}`
+      );
       const rl = readline.createInterface({
         input: createReadStream(gatsbyConfigFile),
         crlfDelay: Infinity,
       });
-      let result = "";
+      // Typescript doesn't accept require.resolve
+      // https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#requireresolve
+      let result = useTypescript ? `import path from "path";\n` : "";
+      const pluginConfig = GATSBY_PLUGIN_CONFIG(
+        projectId,
+        ensure(projectApiToken),
+        useTypescript
+      );
       for await (const line of rl) {
-        result += line + "\n";
-        // Prepend PlasmicLoader to list of plugins
-        if (line.includes("plugins:")) {
-          result += GATSBY_PLUGIN_CONFIG(
-            projectId,
-            ensure(projectApiToken),
-            useTypescript
-          );
+        if (line.includes("plugins: []")) {
+          result += "  plugins: [" + pluginConfig + "]\n";
+        } else if (line.includes("plugins: [")) {
+          result += line + pluginConfig + "\n";
+        } else {
+          result += line + "\n";
         }
       }
       await fs.writeFile(gatsbyConfigFile, result);
@@ -81,7 +125,10 @@ const gatsbyStrategy: CPAStrategy = {
     deleteGlob(path.join(projectPath, "src/@(pages|components|templates)/*.*"));
 
     // Create a very basic 404 page - `gatsby build` fails without it.
-    await fs.writeFile(path.join(projectPath, `src/pages/404.js`), GATSBY_404);
+    await fs.writeFile(
+      path.join(projectPath, `src/pages/404.${extension}`),
+      GATSBY_404
+    );
 
     // Add plasmic-host page
     await fs.writeFile(
@@ -92,12 +139,12 @@ const gatsbyStrategy: CPAStrategy = {
       })
     );
 
-    // Start with an empty gatsby-node.js
-    await fs.writeFile(path.join(projectPath, "gatsby-node.js"), "");
+    // Start with an empty gatsby-node
+    await fs.writeFile(path.join(projectPath, `gatsby-node.${extension}`), "");
 
     // Updates `gatsby-ssr` to include script tag for preamble
     await fs.writeFile(
-      path.join(projectPath, "gatsby-ssr.js"),
+      path.join(projectPath, `gatsby-ssr.${extension}x`),
       GATSBY_SSR_CONFIG
     );
 
@@ -128,10 +175,13 @@ const gatsbyStrategy: CPAStrategy = {
 
       // Overwrite the wrapper files to wrap PlasmicRootProvider
       const wrapperContent = wrapAppRootForCodegen();
-      const browserFilePath = path.join(projectPath, "gatsby-browser.js");
+      const browserFilePath = path.join(
+        projectPath,
+        `gatsby-browser.${extension}x`
+      );
       await fs.writeFile(browserFilePath, wrapperContent);
 
-      const ssrFilePath = path.join(projectPath, "gatsby-ssr.js");
+      const ssrFilePath = path.join(projectPath, `gatsby-ssr.${extension}x`);
       await fs.writeFile(ssrFilePath, wrapperContent);
     }
   },

package/src/strategies/types.ts

@@ -30,6 +30,7 @@ interface BuildArgs {
 interface InstallArgs {
   scheme: CodeScheme;
   projectPath: string;
+  useTypescript: boolean;
 }
 
 export interface CPAStrategy {

package/src/templates/gatsby.ts

@@ -15,7 +15,7 @@ import {
   ComponentRenderData,`
   )}
 } from "@plasmicapp/loader-gatsby";
-import { graphql } from "gatsby";
+import { graphql${ifTs(ts, ", PageProps")} } from "gatsby";
 import { initPlasmicLoaderWithRegistrations } from "../plasmic-init";
 
 export const query = graphql\`
@@ -27,7 +27,7 @@ export const query = graphql\`
 
 ${ifTs(
   ts,
-  `interface PlasmicGatsbyPageProps {
+  `interface PlasmicGatsbyPageProps extends PageProps {
   data: {
     plasmicOptions: InitOptions
     plasmicComponents: ComponentRenderData
@@ -35,7 +35,10 @@ ${ifTs(
 }
 `
 )}
-const PlasmicGatsbyPage = ({ data }${ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
+const PlasmicGatsbyPage = ({ data, location }${ifTs(
+    ts,
+    ": PlasmicGatsbyPageProps"
+  )}) => {
   const {
     plasmicComponents,
     plasmicOptions,
@@ -46,12 +49,14 @@ const PlasmicGatsbyPage = ({ data }${ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
     <PlasmicRootProvider
       loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
+      pageParams={pageMeta.params}
+      pageQuery={Object.fromEntries(new URLSearchParams(location.search))}
     >
       <Helmet>
-        {pageMetadata.title && <title>{pageMetadata.title}</title>}
-        {pageMetadata.title && <meta property="og:title" content={pageMetadata.title} /> }
-        {pageMetadata.description && <meta property="og:description" content={pageMetadata.description} />}
-        {pageMetadata.openGraphImageUrl && <meta property="og:image" content={pageMetadata.openGraphImageUrl} />}
+        {pageMetadata?.title && <title>{pageMetadata.title}</title>}
+        {pageMetadata?.title && <meta property="og:title" content={pageMetadata.title} /> }
+        {pageMetadata?.description && <meta property="og:description" content={pageMetadata.description} />}
+        {pageMetadata?.openGraphImageUrl && <meta property="og:image" content={pageMetadata.openGraphImageUrl} />}
       </Helmet>
       <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
@@ -83,11 +88,17 @@ export const GATSBY_PLUGIN_CONFIG = (
         token: "${projectApiToken}",
       },
     ], // An array of project ids.
-    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.${
-      useTypescript ? "tsx" : "jsx"
-    }"),
+    preview: false,
+    defaultPlasmicPage: ${
+      useTypescript ? "path" : "require"
+    }.resolve("./src/templates/defaultPlasmicPage.${
+  useTypescript ? "tsx" : "jsx"
+}"),
   },
 },
+{
+  resolve: "gatsby-plugin-react-helmet",
+}
 `;
 
 export const makeGatsbyHostPage = (opts: {

package/src/templates/nextjs.ts

@@ -43,8 +43,9 @@ import {
   ComponentRenderData,
   PlasmicRootProvider,
 } from "@plasmicapp/loader-nextjs";
-${ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
+${ifTs(ts, `import type { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import Error from "next/error";
+import { useRouter } from "next/router";
 import { PLASMIC } from "../plasmic-init";
 
 export default function PlasmicLoaderPage(props${ifTs(
@@ -55,16 +56,20 @@ export default function PlasmicLoaderPage(props${ifTs(
 }`
   )}) {
   const { plasmicData, queryCache } = props;
+  const router = useRouter();
   if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
     return <Error statusCode={404} />;
   }
+  const pageMeta = plasmicData.entryCompMetas[0];
   return (
     <PlasmicRootProvider
       loader={PLASMIC}
       prefetchedData={plasmicData}
       prefetchedQueryData={queryCache}
+      pageParams={pageMeta.params}
+      pageQuery={router.query}
     >
-      <PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />
+      <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
   );
 }
@@ -80,10 +85,15 @@ export const getStaticProps${ifTs(
     // non-Plasmic catch-all
     return { props: {} };
   }
+  const pageMeta = plasmicData.entryCompMetas[0];
   // Cache the necessary data fetched for the page
   const queryCache = await extractPlasmicQueryData(
-    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
-      <PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />
+    <PlasmicRootProvider
+      loader={PLASMIC}
+      prefetchedData={plasmicData}
+      pageParams={pageMeta.params}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
   );
   // Use revalidate if you want incremental static regeneration
@@ -98,10 +108,7 @@ export const getStaticPaths${ifTs(ts, `: GetStaticPaths`)} = async () => {
         catchall: mod.path.substring(1).split("/"),
       },
     })),
-
-    // Turn on "fallback: 'blocking'" if you would like new paths created
-    // in Plasmic to be automatically available
-    fallback: false,
+    fallback: "blocking",
   };
 }
   `.trim();