create-plasmic-app 0.0.46 → 0.0.49

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

@@ -61,15 +61,25 @@ const gatsbyStrategy = {
         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* () {
+        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,
+        });
+        if (!installedHelmet || !installedHelmetPlugin || !installedHelmetTypes) {
+            return false;
+        }
         if (scheme === "loader") {
-            return ((yield npm_utils_1.installUpgrade("@plasmicapp/loader-gatsby", {
+            return yield npm_utils_1.installUpgrade("@plasmicapp/loader-gatsby", {
                 workingDir: projectPath,
-            })) &&
-                (yield npm_utils_1.installUpgrade("react-helmet", { workingDir: projectPath })) &&
-                (yield npm_utils_1.installUpgrade("gatsby-plugin-react-helmet", {
-                    workingDir: projectPath,
-                })));
+            });
         }
         else {
             return yield common_1.installCodegenDeps({ projectPath });
@@ -86,7 +96,9 @@ const gatsbyStrategy = {
                 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;) {

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,15 @@ 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))}
+      Head={Helmet}
     >
       <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>
@@ -74,7 +77,7 @@ const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken, useTypescript) => `
       },
     ], // An array of project ids.
     preview: false,
-    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.${useTypescript ? "tsx" : "jsx"}"),
+    defaultPlasmicPage: ${useTypescript ? "path" : "require"}.resolve("./src/templates/defaultPlasmicPage.${useTypescript ? "tsx" : "jsx"}"),
   },
 },
 {
@@ -210,10 +213,11 @@ function wrapAppRootForCodegen() {
     return `
 import React from "react";
 import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Helmet from "react-helmet";
 
 export const wrapRootElement = ({ element }) => {
   return (
-    <PlasmicRootProvider>
+    <PlasmicRootProvider Head={Helmet}>
       {element}
     </PlasmicRootProvider>
   );

package/dist/templates/nextjs.js

@@ -42,6 +42,7 @@ import {
 } from "@plasmicapp/loader-nextjs";
 ${file_utils_1.ifTs(ts, `import type { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import Error from "next/error";
+import Head from "next/head";
 import { useRouter } from "next/router";
 import { PLASMIC } from "../plasmic-init";
 
@@ -61,7 +62,8 @@ export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
       prefetchedData={plasmicData}
       prefetchedQueryData={queryCache}
       pageParams={pageMeta.params}
-      pageQuery={router.query${file_utils_1.ifTs(ts, " as Record<string, string>")}}
+      pageQuery={router.query}
+      Head={Head}
     >
       <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
@@ -83,6 +85,7 @@ export const getStaticProps${file_utils_1.ifTs(ts, `: GetStaticProps`)} = async
       loader={PLASMIC}
       prefetchedData={plasmicData}
       pageParams={pageMeta.params}
+      Head={Head}
     >
       <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
@@ -146,10 +149,11 @@ function wrapAppRootForCodegen() {
     return `
 import '../styles/globals.css'
 import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Head from "next/head";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <PlasmicRootProvider>
+    <PlasmicRootProvider Head={Head}>
       <Component {...pageProps} />
     </PlasmicRootProvider>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.46",
+  "version": "0.0.49",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",

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

@@ -36,17 +36,30 @@ const gatsbyStrategy: CPAStrategy = {
     } -y ${dir}`;
     await spawnOrFail(`${createCommand}`, parent);
   },
-  installDeps: async ({ projectPath, scheme }) => {
+  installDeps: async ({ projectPath, scheme, useTypescript }) => {
+    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,
+      }
+    );
+    if (!installedHelmet || !installedHelmetPlugin || !installedHelmetTypes) {
+      return false;
+    }
+
     if (scheme === "loader") {
-      return (
-        (await installUpgrade("@plasmicapp/loader-gatsby", {
-          workingDir: projectPath,
-        })) &&
-        (await installUpgrade("react-helmet", { workingDir: projectPath })) &&
-        (await installUpgrade("gatsby-plugin-react-helmet", {
-          workingDir: projectPath,
-        }))
-      );
+      return await installUpgrade("@plasmicapp/loader-gatsby", {
+        workingDir: projectPath,
+      });
     } else {
       return await installCodegenDeps({ projectPath });
     }
@@ -71,7 +84,9 @@ const gatsbyStrategy: CPAStrategy = {
         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),

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,15 @@ const PlasmicGatsbyPage = ({ data }${ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
     <PlasmicRootProvider
       loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
+      pageParams={pageMeta.params}
+      pageQuery={Object.fromEntries(new URLSearchParams(location.search))}
+      Head={Helmet}
     >
       <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>
@@ -84,9 +90,11 @@ export const GATSBY_PLUGIN_CONFIG = (
       },
     ], // An array of project ids.
     preview: false,
-    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.${
-      useTypescript ? "tsx" : "jsx"
-    }"),
+    defaultPlasmicPage: ${
+      useTypescript ? "path" : "require"
+    }.resolve("./src/templates/defaultPlasmicPage.${
+  useTypescript ? "tsx" : "jsx"
+}"),
   },
 },
 {
@@ -234,10 +242,11 @@ export function wrapAppRootForCodegen(): string {
   return `
 import React from "react";
 import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Helmet from "react-helmet";
 
 export const wrapRootElement = ({ element }) => {
   return (
-    <PlasmicRootProvider>
+    <PlasmicRootProvider Head={Helmet}>
       {element}
     </PlasmicRootProvider>
   );

package/src/templates/nextjs.ts

@@ -45,6 +45,7 @@ import {
 } from "@plasmicapp/loader-nextjs";
 ${ifTs(ts, `import type { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import Error from "next/error";
+import Head from "next/head";
 import { useRouter } from "next/router";
 import { PLASMIC } from "../plasmic-init";
 
@@ -67,7 +68,8 @@ export default function PlasmicLoaderPage(props${ifTs(
       prefetchedData={plasmicData}
       prefetchedQueryData={queryCache}
       pageParams={pageMeta.params}
-      pageQuery={router.query${ifTs(ts, " as Record<string, string>")}}
+      pageQuery={router.query}
+      Head={Head}
     >
       <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
@@ -92,6 +94,7 @@ export const getStaticProps${ifTs(
       loader={PLASMIC}
       prefetchedData={plasmicData}
       pageParams={pageMeta.params}
+      Head={Head}
     >
       <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
@@ -155,10 +158,11 @@ export function wrapAppRootForCodegen(): string {
   return `
 import '../styles/globals.css'
 import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Head from "next/head";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <PlasmicRootProvider>
+    <PlasmicRootProvider Head={Head}>
       <Component {...pageProps} />
     </PlasmicRootProvider>
   );