create-plasmic-app 0.0.143 → 0.0.145

package/dist/gatsby/gatsby.js

@@ -1,27 +1,4 @@
 "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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -31,13 +8,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __asyncValues = (this && this.__asyncValues) || function (o) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -46,7 +16,6 @@ exports.gatsbyStrategy = exports.GATSBY_TEMPLATES = void 0;
 const fs_1 = require("fs");
 const lodash_1 = __importDefault(require("lodash"));
 const path_1 = __importDefault(require("path"));
-const readline = __importStar(require("readline"));
 const cmd_utils_1 = require("../utils/cmd-utils");
 const codegen_1 = require("../utils/codegen");
 const file_utils_1 = require("../utils/file-utils");
@@ -95,7 +64,6 @@ exports.gatsbyStrategy = {
         }
     }),
     overwriteConfig: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, e_1, _b, _c;
         const { projectId, projectPath, projectApiToken, jsOrTs, scheme } = args;
         const packageName = path_1.default.basename(projectPath);
         // Update package.json: adding name and description, removing license and author
@@ -108,40 +76,8 @@ exports.gatsbyStrategy = {
         delete packageJsonObject.author;
         yield fs_1.promises.writeFile(packageJsonPath, JSON.stringify(packageJsonObject, null, 2));
         if (scheme === "loader") {
-            // create-gatsby will create a default gatsby-config that we need to modify
             const gatsbyConfigFile = path_1.default.join(projectPath, `gatsby-config.${jsOrTs}`);
-            const rl = readline.createInterface({
-                input: (0, fs_1.createReadStream)(gatsbyConfigFile),
-                crlfDelay: Infinity,
-            });
-            // Typescript doesn't accept require.resolve
-            // https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#requireresolve
-            let result = (0, file_utils_1.ifTs)(jsOrTs, `import path from "path";\n`);
-            const pluginConfig = (0, template_1.GATSBY_PLUGIN_CONFIG)(projectId, (0, lang_utils_1.ensure)(projectApiToken, "Missing projectApiToken"), jsOrTs);
-            try {
-                for (var _d = true, rl_1 = __asyncValues(rl), rl_1_1; rl_1_1 = yield rl_1.next(), _a = rl_1_1.done, !_a; _d = true) {
-                    _c = rl_1_1.value;
-                    _d = false;
-                    const line = _c;
-                    if (line.includes("plugins: []")) {
-                        result += "  plugins: [" + pluginConfig + "]\n";
-                    }
-                    else if (line.includes("plugins: [")) {
-                        result += line + pluginConfig + "\n";
-                    }
-                    else {
-                        result += line + "\n";
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (!_d && !_a && (_b = rl_1.return)) yield _b.call(rl_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-            yield fs_1.promises.writeFile(gatsbyConfigFile, result);
+            yield fs_1.promises.writeFile(gatsbyConfigFile, (0, template_1.makeGatsbyConfig)(projectId, (0, lang_utils_1.ensure)(projectApiToken, "Missing projectApiToken"), jsOrTs));
         }
     }),
     generateFiles: (args) => __awaiter(void 0, void 0, void 0, function* () {
@@ -156,8 +92,9 @@ exports.gatsbyStrategy = {
             jsOrTs,
             scheme,
         }));
-        // Start with an empty gatsby-node
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `gatsby-node.${jsOrTs}`), "");
+        // gatsby-node implements onCreatePage to prefetch query data for SSG.
+        // For codegen scheme, leave it empty.
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `gatsby-node.${jsOrTs}`), scheme === "loader" ? (0, template_1.makeGatsbyNode)(jsOrTs) : "");
         // Updates `gatsby-ssr` to include script tag for preamble
         yield fs_1.promises.writeFile(path_1.default.join(projectPath, `gatsby-ssr.${jsOrTs}x`), template_1.GATSBY_SSR_CONFIG);
         if (scheme === "loader") {

package/dist/gatsby/template.d.ts

@@ -1,7 +1,8 @@
 import { JsOrTs, SchemeType } from "../utils/types";
 export declare function makeGatsbyDefaultPage(jsOrTs: JsOrTs): string;
 export declare const GATSBY_404 = "const NotFound = () => {\n  return \"Not Found\";\n};\nexport default NotFound;\n";
-export declare function GATSBY_PLUGIN_CONFIG(projectId: string, projectApiToken: string, jsOrTs: JsOrTs): string;
+export declare function makeGatsbyConfig(projectId: string, projectApiToken: string, jsOrTs: JsOrTs): string;
+export declare function makeGatsbyNode(jsOrTs: JsOrTs): string;
 export declare function makeGatsbyHostPage(opts: {
     jsOrTs: JsOrTs;
     scheme: SchemeType;

package/dist/gatsby/template.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapAppRootForCodegen = exports.makeGatsbyPlasmicInit = exports.GATSBY_SSR_CONFIG = exports.makeGatsbyHostPage = exports.GATSBY_PLUGIN_CONFIG = exports.GATSBY_404 = exports.makeGatsbyDefaultPage = void 0;
+exports.wrapAppRootForCodegen = exports.makeGatsbyPlasmicInit = exports.GATSBY_SSR_CONFIG = exports.makeGatsbyHostPage = exports.makeGatsbyNode = exports.makeGatsbyConfig = exports.GATSBY_404 = exports.makeGatsbyDefaultPage = void 0;
 const file_utils_1 = require("../utils/file-utils");
 function makeGatsbyDefaultPage(jsOrTs) {
     return `import React from "react";
@@ -21,14 +21,17 @@ export const query = graphql\`
   }
 \`;
 
-${(0, file_utils_1.ifTs)(jsOrTs, `interface PlasmicGatsbyPageProps extends PageProps {
+${(0, file_utils_1.ifTs)(jsOrTs, `export interface PlasmicGatsbyPageProps extends PageProps {
   data: {
     plasmicOptions: InitOptions
     plasmicComponents: ComponentRenderData
   }
+  pageContext: {
+    queryCache?: Record<string, any>
+  }
 }
 `)}
-const PlasmicGatsbyPage = ({ data, location }${(0, file_utils_1.ifTs)(jsOrTs, ": PlasmicGatsbyPageProps")}) => {
+const PlasmicGatsbyPage = ({ data, location, pageContext }${(0, file_utils_1.ifTs)(jsOrTs, ": PlasmicGatsbyPageProps")}) => {
   const {
     plasmicComponents,
     plasmicOptions,
@@ -39,6 +42,7 @@ const PlasmicGatsbyPage = ({ data, location }${(0, file_utils_1.ifTs)(jsOrTs, ":
     <PlasmicRootProvider
       loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
+      prefetchedQueryData={pageContext.queryCache}
       pageRoute={pageMeta.path}
       pageParams={pageMeta.params}
       pageQuery={Object.fromEntries(new URLSearchParams(location.search))}
@@ -64,26 +68,115 @@ exports.GATSBY_404 = `const NotFound = () => {
 };
 export default NotFound;
 `;
-function GATSBY_PLUGIN_CONFIG(projectId, projectApiToken, jsOrTs) {
-    return `{
-  resolve: "@plasmicapp/loader-gatsby",
-  options: {
-    projects: [
-      {
-        id: "${projectId}",
-        token: "${projectApiToken}",
-      },
-    ], // An array of project ids.
-    preview: false,
-    defaultPlasmicPage: ${jsOrTs === "ts" ? "path" : "require"}.resolve("./src/templates/defaultPlasmicPage.${jsOrTs}x"),
+function makeGatsbyConfig(projectId, projectApiToken, jsOrTs) {
+    return `${jsOrTs === "ts"
+        ? `import path from "path";
+import type { GatsbyConfig } from "gatsby";`
+        : `const path = require("path");`}
+
+${jsOrTs === "ts" ? `` : `/** @type {import("gatsby").GatsbyConfig} */\n`}const config${(0, file_utils_1.ifTs)(jsOrTs, `: GatsbyConfig`)} = {
+  siteMetadata: {
+    siteUrl: \`https://www.yourdomain.tld\`,
   },
-},
-{
-  resolve: "gatsby-plugin-react-helmet",
+  graphqlTypegen: true,
+  plugins: [
+    {
+      resolve: "@plasmicapp/loader-gatsby",
+      options: {
+        projects: [
+          {
+            id: "${projectId}",
+            token: "${projectApiToken}",
+          },
+        ], // An array of project ids.
+        preview: false,
+        defaultPlasmicPage: path.resolve("./src/templates/defaultPlasmicPage.${jsOrTs}x"),
+      },
+    },
+    {
+      resolve: "gatsby-plugin-react-helmet",
+    },
+  ],
+};
+
+${jsOrTs === "ts" ? `export default config` : `module.exports = config`};
+`;
 }
+exports.makeGatsbyConfig = makeGatsbyConfig;
+function makeGatsbyNode(jsOrTs) {
+    return `/**
+ * Implement Gatsby's Node APIs in this file.
+ *
+ * See: https://www.gatsbyjs.com/docs/node-apis/
+ *
+ * \`onCreatePage\` runs \`extractPlasmicQueryData\` at build time so that the
+ * SSG'd HTML for each Plasmic page contains its actual rendered content,
+ * rather than the \`<Suspense fallback>\` ("Loading...") of unresolved data
+ * queries.
+ */
+${jsOrTs === "ts"
+        ? `import type { CreatePageArgs } from "gatsby";
+import * as React from "react";
+import {
+  extractPlasmicQueryData,
+  PlasmicComponent,
+  PlasmicRootProvider,
+} from "@plasmicapp/loader-gatsby";
+import type { GatsbyPluginOptions } from "@plasmicapp/loader-gatsby";
+import gatsbyConfig from "./gatsby-config";
+import { initPlasmicLoaderWithRegistrations } from "./src/plasmic-init";
+import type { PlasmicGatsbyPageProps } from "./src/templates/defaultPlasmicPage";`
+        : `const React = require("react");
+const {
+  extractPlasmicQueryData,
+  PlasmicComponent,
+  PlasmicRootProvider,
+} = require("@plasmicapp/loader-gatsby");
+const gatsbyConfig = require("./gatsby-config");
+const { initPlasmicLoaderWithRegistrations } = require("./src/plasmic-init");`}
+
+const plasmicLoaderOptions = gatsbyConfig.plugins.find(
+  (p) => p && p.resolve === "@plasmicapp/loader-gatsby"
+)${(0, file_utils_1.ifTs)(jsOrTs, `!`)}.options${(0, file_utils_1.ifTs)(jsOrTs, ` as GatsbyPluginOptions`)};
+const PLASMIC = initPlasmicLoaderWithRegistrations(plasmicLoaderOptions);
+
+${jsOrTs === "ts" ? `export const onCreatePage =` : `exports.onCreatePage =`} async ({ page, actions }${(0, file_utils_1.ifTs)(jsOrTs, `: CreatePageArgs<PlasmicGatsbyPageProps["pageContext"]>`)}) => {
+  if (page.component !== plasmicLoaderOptions.defaultPlasmicPage) {
+    return;
+  }
+  if (page.context?.queryCache) {
+    return;
+  }
+
+  const componentData = await PLASMIC.maybeFetchComponentData(page.path);
+  if (!componentData) {
+    return;
+  }
+  const meta = componentData.entryCompMetas[0];
+
+  const queryCache = await extractPlasmicQueryData(
+    React.createElement(
+      PlasmicRootProvider,
+      {
+        loader: PLASMIC,
+        prefetchedData: componentData,
+        pageRoute: meta.path,
+        pageParams: meta.params,
+        pageQuery: {},
+      },
+      React.createElement(PlasmicComponent, { component: meta.displayName })
+    )
+  );
+
+  actions.deletePage(page);
+  actions.createPage({
+    ...page,
+    context: { ...page.context, queryCache },
+  });
+};
 `;
 }
-exports.GATSBY_PLUGIN_CONFIG = GATSBY_PLUGIN_CONFIG;
+exports.makeGatsbyNode = makeGatsbyNode;
 function makeGatsbyHostPage(opts) {
     const { jsOrTs, scheme } = opts;
     if (scheme === "loader") {
@@ -181,12 +274,14 @@ exports.onRenderBody = ({ pathname, setHeadComponents }) => {
 }
 `;
 function makeGatsbyPlasmicInit(jsOrTs) {
-    return `import {
-  initPlasmicLoader,${(0, file_utils_1.ifTs)(jsOrTs, `
-  InitOptions,`)}
-} from "@plasmicapp/loader-gatsby";
+    return `${jsOrTs === "ts"
+        ? `import {
+  initPlasmicLoader,
+  InitOptions,
+} from "@plasmicapp/loader-gatsby";`
+        : `const { initPlasmicLoader } = require("@plasmicapp/loader-gatsby");`}
 
-export function initPlasmicLoaderWithRegistrations(plasmicOptions${(0, file_utils_1.ifTs)(jsOrTs, ": InitOptions")}) {
+${(0, file_utils_1.ifTs)(jsOrTs, `export `)}function initPlasmicLoaderWithRegistrations(plasmicOptions${(0, file_utils_1.ifTs)(jsOrTs, `: InitOptions`)}) {
   const PLASMIC = initPlasmicLoader(plasmicOptions);
 
   // You can register any code components that you want to use here; see
@@ -200,7 +295,9 @@ export function initPlasmicLoaderWithRegistrations(plasmicOptions${(0, file_util
 
   return PLASMIC;
 }
-`;
+${jsOrTs === "ts"
+        ? ``
+        : `\nmodule.exports = { initPlasmicLoaderWithRegistrations };\n`}`;
 }
 exports.makeGatsbyPlasmicInit = makeGatsbyPlasmicInit;
 function wrapAppRootForCodegen() {

package/dist/nextjs/nextjs.js

@@ -107,6 +107,8 @@ function generateFilesAppDir(args) {
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
         }
         else {
+            // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
+            (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "app", "layout.*"));
             // ./app/layout.tsx
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `layout.${jsOrTs}x`), (0, layout_1.makeLayout_app_codegen)(jsOrTs));
             // ./plasmic-init-client.tsx

package/dist/nextjs/templates/app-codegen/plasmic-init-client.js

@@ -5,8 +5,7 @@ const file_utils_1 = require("../../../utils/file-utils");
 function makePlasmicInitClient_app_codegen(jsOrTs) {
     return `"use client";
 
-import * as React from "react";
-import { PlasmicRootProvider } from "@plasmicapp/react-web";
+${(0, file_utils_1.ifTs)(jsOrTs, 'import type * as React from "react";\n')}import { PlasmicRootProvider } from "@plasmicapp/react-web";
 import Link from "next/link";
 
 /**

package/dist/tanstack/tanstack.js

@@ -38,7 +38,17 @@ exports.tanstackStrategy = {
         const projectName = path_1.default.basename(fullProjectPath);
         const parentDir = path_1.default.dirname(fullProjectPath);
         process.chdir(parentDir);
-        const createCommand = `npx create-tsrouter-app@latest ${projectName} --template file-router --add-ons start`;
+        const createCommand = [
+            `npx create-tsrouter-app@latest ${projectName}`,
+            "--framework React",
+            "--router-only",
+            "--no-toolchain",
+            "--package-manager yarn",
+            "--git",
+            "--no-intent",
+            "--no-examples",
+            "--yes",
+        ].join(" ");
         yield (0, cmd_utils_1.spawnOrFail)(createCommand);
         // Install peer-dep of @tanstack/react-router-with-query
         yield (0, npm_utils_1.installUpgrade)("@tanstack/react-query", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.143",
+  "version": "0.0.145",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -47,5 +47,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "5f674c9df3345496989eb0d1e09ddd30604757a9"
+  "gitHead": "a20807890e3caf3707c6bd214440d539ae53c01f"
 }

package/src/gatsby/gatsby.ts

@@ -1,24 +1,23 @@
-import { createReadStream, existsSync, promises as fs } from "fs";
+import { existsSync, promises as fs } from "fs";
 import L from "lodash";
 import path from "path";
-import * as readline from "readline";
 import { spawnOrFail } from "../utils/cmd-utils";
 import { installCodegenDeps, runCodegenSync } from "../utils/codegen";
 import {
   deleteGlob,
   generateWelcomePage,
   getPlasmicConfig,
-  ifTs,
 } from "../utils/file-utils";
 import { ensure } from "../utils/lang-utils";
 import { installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy } from "../utils/strategy";
 import {
   GATSBY_404,
-  GATSBY_PLUGIN_CONFIG,
   GATSBY_SSR_CONFIG,
+  makeGatsbyConfig,
   makeGatsbyDefaultPage,
   makeGatsbyHostPage,
+  makeGatsbyNode,
   makeGatsbyPlasmicInit,
   wrapAppRootForCodegen,
 } from "./template";
@@ -89,33 +88,18 @@ export const gatsbyStrategy: CPAStrategy = {
     );
 
     if (scheme === "loader") {
-      // create-gatsby will create a default gatsby-config that we need to modify
       const gatsbyConfigFile = path.join(
         projectPath,
         `gatsby-config.${jsOrTs}`
       );
-      const rl = readline.createInterface({
-        input: createReadStream(gatsbyConfigFile),
-        crlfDelay: Infinity,
-      });
-      // Typescript doesn't accept require.resolve
-      // https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#requireresolve
-      let result = ifTs(jsOrTs, `import path from "path";\n`);
-      const pluginConfig = GATSBY_PLUGIN_CONFIG(
-        projectId,
-        ensure(projectApiToken, "Missing projectApiToken"),
-        jsOrTs
+      await fs.writeFile(
+        gatsbyConfigFile,
+        makeGatsbyConfig(
+          projectId,
+          ensure(projectApiToken, "Missing projectApiToken"),
+          jsOrTs
+        )
       );
-      for await (const line of rl) {
-        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);
     }
   },
   generateFiles: async (args) => {
@@ -140,8 +124,12 @@ export const gatsbyStrategy: CPAStrategy = {
       })
     );
 
-    // Start with an empty gatsby-node
-    await fs.writeFile(path.join(projectPath, `gatsby-node.${jsOrTs}`), "");
+    // gatsby-node implements onCreatePage to prefetch query data for SSG.
+    // For codegen scheme, leave it empty.
+    await fs.writeFile(
+      path.join(projectPath, `gatsby-node.${jsOrTs}`),
+      scheme === "loader" ? makeGatsbyNode(jsOrTs) : ""
+    );
 
     // Updates `gatsby-ssr` to include script tag for preamble
     await fs.writeFile(

package/src/gatsby/template.ts

@@ -25,15 +25,18 @@ export const query = graphql\`
 
 ${ifTs(
   jsOrTs,
-  `interface PlasmicGatsbyPageProps extends PageProps {
+  `export interface PlasmicGatsbyPageProps extends PageProps {
   data: {
     plasmicOptions: InitOptions
     plasmicComponents: ComponentRenderData
   }
+  pageContext: {
+    queryCache?: Record<string, any>
+  }
 }
 `
 )}
-const PlasmicGatsbyPage = ({ data, location }${ifTs(
+const PlasmicGatsbyPage = ({ data, location, pageContext }${ifTs(
     jsOrTs,
     ": PlasmicGatsbyPageProps"
   )}) => {
@@ -47,6 +50,7 @@ const PlasmicGatsbyPage = ({ data, location }${ifTs(
     <PlasmicRootProvider
       loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
+      prefetchedQueryData={pageContext.queryCache}
       pageRoute={pageMeta.path}
       pageParams={pageMeta.params}
       pageQuery={Object.fromEntries(new URLSearchParams(location.search))}
@@ -73,29 +77,127 @@ export const GATSBY_404 = `const NotFound = () => {
 export default NotFound;
 `;
 
-export function GATSBY_PLUGIN_CONFIG(
+export function makeGatsbyConfig(
   projectId: string,
   projectApiToken: string,
   jsOrTs: JsOrTs
 ): string {
-  return `{
-  resolve: "@plasmicapp/loader-gatsby",
-  options: {
-    projects: [
-      {
-        id: "${projectId}",
-        token: "${projectApiToken}",
-      },
-    ], // An array of project ids.
-    preview: false,
-    defaultPlasmicPage: ${
-      jsOrTs === "ts" ? "path" : "require"
-    }.resolve("./src/templates/defaultPlasmicPage.${jsOrTs}x"),
+  return `${
+    jsOrTs === "ts"
+      ? `import path from "path";
+import type { GatsbyConfig } from "gatsby";`
+      : `const path = require("path");`
+  }
+
+${
+  jsOrTs === "ts" ? `` : `/** @type {import("gatsby").GatsbyConfig} */\n`
+}const config${ifTs(jsOrTs, `: GatsbyConfig`)} = {
+  siteMetadata: {
+    siteUrl: \`https://www.yourdomain.tld\`,
   },
-},
-{
-  resolve: "gatsby-plugin-react-helmet",
+  graphqlTypegen: true,
+  plugins: [
+    {
+      resolve: "@plasmicapp/loader-gatsby",
+      options: {
+        projects: [
+          {
+            id: "${projectId}",
+            token: "${projectApiToken}",
+          },
+        ], // An array of project ids.
+        preview: false,
+        defaultPlasmicPage: path.resolve("./src/templates/defaultPlasmicPage.${jsOrTs}x"),
+      },
+    },
+    {
+      resolve: "gatsby-plugin-react-helmet",
+    },
+  ],
+};
+
+${jsOrTs === "ts" ? `export default config` : `module.exports = config`};
+`;
 }
+
+export function makeGatsbyNode(jsOrTs: JsOrTs): string {
+  return `/**
+ * Implement Gatsby's Node APIs in this file.
+ *
+ * See: https://www.gatsbyjs.com/docs/node-apis/
+ *
+ * \`onCreatePage\` runs \`extractPlasmicQueryData\` at build time so that the
+ * SSG'd HTML for each Plasmic page contains its actual rendered content,
+ * rather than the \`<Suspense fallback>\` ("Loading...") of unresolved data
+ * queries.
+ */
+${
+  jsOrTs === "ts"
+    ? `import type { CreatePageArgs } from "gatsby";
+import * as React from "react";
+import {
+  extractPlasmicQueryData,
+  PlasmicComponent,
+  PlasmicRootProvider,
+} from "@plasmicapp/loader-gatsby";
+import type { GatsbyPluginOptions } from "@plasmicapp/loader-gatsby";
+import gatsbyConfig from "./gatsby-config";
+import { initPlasmicLoaderWithRegistrations } from "./src/plasmic-init";
+import type { PlasmicGatsbyPageProps } from "./src/templates/defaultPlasmicPage";`
+    : `const React = require("react");
+const {
+  extractPlasmicQueryData,
+  PlasmicComponent,
+  PlasmicRootProvider,
+} = require("@plasmicapp/loader-gatsby");
+const gatsbyConfig = require("./gatsby-config");
+const { initPlasmicLoaderWithRegistrations } = require("./src/plasmic-init");`
+}
+
+const plasmicLoaderOptions = gatsbyConfig.plugins.find(
+  (p) => p && p.resolve === "@plasmicapp/loader-gatsby"
+)${ifTs(jsOrTs, `!`)}.options${ifTs(jsOrTs, ` as GatsbyPluginOptions`)};
+const PLASMIC = initPlasmicLoaderWithRegistrations(plasmicLoaderOptions);
+
+${
+  jsOrTs === "ts" ? `export const onCreatePage =` : `exports.onCreatePage =`
+} async ({ page, actions }${ifTs(
+    jsOrTs,
+    `: CreatePageArgs<PlasmicGatsbyPageProps["pageContext"]>`
+  )}) => {
+  if (page.component !== plasmicLoaderOptions.defaultPlasmicPage) {
+    return;
+  }
+  if (page.context?.queryCache) {
+    return;
+  }
+
+  const componentData = await PLASMIC.maybeFetchComponentData(page.path);
+  if (!componentData) {
+    return;
+  }
+  const meta = componentData.entryCompMetas[0];
+
+  const queryCache = await extractPlasmicQueryData(
+    React.createElement(
+      PlasmicRootProvider,
+      {
+        loader: PLASMIC,
+        prefetchedData: componentData,
+        pageRoute: meta.path,
+        pageParams: meta.params,
+        pageQuery: {},
+      },
+      React.createElement(PlasmicComponent, { component: meta.displayName })
+    )
+  );
+
+  actions.deletePage(page);
+  actions.createPage({
+    ...page,
+    context: { ...page.context, queryCache },
+  });
+};
 `;
 }
 
@@ -202,17 +304,21 @@ exports.onRenderBody = ({ pathname, setHeadComponents }) => {
 `;
 
 export function makeGatsbyPlasmicInit(jsOrTs: JsOrTs): string {
-  return `import {
-  initPlasmicLoader,${ifTs(
-    jsOrTs,
-    `
-  InitOptions,`
-  )}
-} from "@plasmicapp/loader-gatsby";
+  return `${
+    jsOrTs === "ts"
+      ? `import {
+  initPlasmicLoader,
+  InitOptions,
+} from "@plasmicapp/loader-gatsby";`
+      : `const { initPlasmicLoader } = require("@plasmicapp/loader-gatsby");`
+  }
 
-export function initPlasmicLoaderWithRegistrations(plasmicOptions${ifTs(
+${ifTs(
+  jsOrTs,
+  `export `
+)}function initPlasmicLoaderWithRegistrations(plasmicOptions${ifTs(
     jsOrTs,
-    ": InitOptions"
+    `: InitOptions`
   )}) {
   const PLASMIC = initPlasmicLoader(plasmicOptions);
 
@@ -227,7 +333,11 @@ export function initPlasmicLoaderWithRegistrations(plasmicOptions${ifTs(
 
   return PLASMIC;
 }
-`;
+${
+  jsOrTs === "ts"
+    ? ``
+    : `\nmodule.exports = { initPlasmicLoaderWithRegistrations };\n`
+}`;
 }
 
 export function wrapAppRootForCodegen(): string {