fix: removes warning about --experimental flags

README.md

@@ -5,7 +5,7 @@
 PagesJS is a collection of tools that make it easy to develop on [Yext Pages](https://www.yext.com/platform/pages). It provides 2 main tools:
 
 1. A default development server, backed by [Vite](https://vitejs.dev/), that makes local development fast and easy.
-1. A Vite plugin used to bundle your assets and templates for Yext Pages.
+2. A Vite plugin used to bundle your assets and templates for Yext Pages.
 
 ## Packages
 
@@ -17,11 +17,11 @@ PagesJS is a collection of tools that make it easy to develop on [Yext Pages](ht
 ## Utility Functions
 
 | Function                                                                                                 |
-| -------------------------------------------------------------------------------------------------------- | --- |
+| -------------------------------------------------------------------------------------------------------- |
 | [fetch()](https://github.com/yext/pages/blob/main/packages/pages/src/util/README.md#fetch)               |
 | [getRuntime()](https://github.com/yext/pages/blob/main/packages/pages/src/util/README.md#getRuntime)     |
 | [isProduction()](https://github.com/yext/pages/blob/main/packages/pages/src/util/README.md#isProduction) |
-| [useDocument()](https://github.com/yext/pages/blob/main/packages/pages/src/util/README.md#useDocument)   |     |
+| [useDocument()](https://github.com/yext/pages/blob/main/packages/pages/src/util/README.md#useDocument)   |
 
 ## Development
 

packages/pages/CHANGELOG.md

@@ -1,3 +1,29 @@
+#### 1.2.0-beta.0 (2024-08-01)
+
+##### New Features
+
+* **dev:**
+  *  override document visual configuration (#534) (f7b7e7e9)
+  *  add pageSets to global variable in header in dev mode (#531) (b239cbb5)
+* **scaffold:**
+  *  create dynamic and static templates on scaffold (#533) (0008e583)
+  *  create ve template on scaffold (#532) (4039f5bd)
+  *  add prompts for scaffold template (#529) (529ee240)
+* **util:**  add useDocument hook (#528) (f27199ab)
+
+##### Bug Fixes
+
+*  pnpm actions (083a7a54)
+
+##### Other Changes
+
+*  [email protected] (2953ca7a)
+*  [email protected] (dfb04527)
+
+##### Refactors
+
+*  change the type of additionalProperties in TemplateConfig to 'Record<string, any>' (#527) (8fd95b19)
+
 #### 1.1.1 (2024-06-13)
 
 ##### Bug Fixes

packages/pages/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yext/pages",
-  "version": "1.1.1",
+  "version": "1.2.0-beta.0",
   "description": "The default React development toolchain provided by Yext",
   "author": "[email protected]",
   "license": "BSD-3-Clause",

packages/pages/src/bin/spawn.ts

@@ -6,27 +6,11 @@ import path from "path";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const filePrefix = path.sep === path.win32.sep ? "file:\\\\" : "";
 const pathToPagesScript = path.resolve(__dirname, "./pages.js");
-const pathToLoader = filePrefix + path.resolve(__dirname, "./loader.js");
-
-const nodeVersion = Number(
-  spawnSync("node", ["-v"], { encoding: "utf-8" })
-    .stdout.substring(1)
-    .split(".")[0]
-);
-
-const experimentalFlags = ["--experimental-vm-modules"];
-if (nodeVersion === 18) {
-  experimentalFlags.push("--experimental-specifier-resolution=node");
-} else {
-  experimentalFlags.push("--experimental-loader");
-  experimentalFlags.push(pathToLoader);
-}
 
 const results = spawnSync(
   "node",
-  [...experimentalFlags, pathToPagesScript, ...process.argv.slice(2)],
+  [pathToPagesScript, ...process.argv.slice(2)],
   {
     stdio: "inherit",
   }

packages/pages/src/common/src/parsers/puckConfigParser.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from "vitest";
+import fs from "node:fs";
+import { addDataToPuckConfig } from "./puckConfigParser.js";
+
+describe("addDataToPuckConfig", () => {
+  it("should throw an error if the filepath is invalid", () => {
+    expect(() => addDataToPuckConfig("fileName", "invalid/filepath")).toThrow(
+      'Filepath "invalid/filepath" is invalid.'
+    );
+  });
+
+  it("correctly adds new config to the puck config file", () => {
+    try {
+      fs.writeFileSync(
+        "test.tsx",
+        `export const puckConfigs = new Map<string, Config<any>>([
+          ["location", locationConfig],
+        ]);`
+      );
+      addDataToPuckConfig("foo", "test.tsx");
+      const modifiedContent = fs.readFileSync("test.tsx", "utf-8");
+      expect(modifiedContent).toContain('["foo", fooConfig]');
+      expect(modifiedContent).toContain(
+        `export const fooConfig: Config<FooProps>`
+      );
+    } finally {
+      if (fs.existsSync("test.tsx")) {
+        fs.unlinkSync("test.tsx");
+      }
+    }
+  });
+});

packages/pages/src/common/src/parsers/puckConfigParser.ts

@@ -0,0 +1,43 @@
+import fs from "node:fs";
+import SourceFileParser, { createTsMorphProject } from "./sourceFileParser.js";
+import { newConfig } from "../../../scaffold/template/sampleTemplates.js";
+import { SyntaxKind } from "ts-morph";
+
+/**
+ * Adds variables to the puck config file and adds the new config to
+ * the exported map.
+ * @param fileName template name with invalid chars and spaces removed
+ * @param filepath /src/puck/ve.config.ts
+ */
+export function addDataToPuckConfig(fileName: string, filepath: string) {
+  if (!fs.existsSync(filepath)) {
+    throw new Error(`Filepath "${filepath}" is invalid.`);
+  }
+  const parser = new SourceFileParser(filepath, createTsMorphProject());
+
+  const puckConfigsStatement = parser.getVariableStatement("puckConfigs");
+
+  const formattedTemplateName =
+    fileName.charAt(0).toUpperCase() + fileName.slice(1);
+
+  const puckConfigsStartLocation = puckConfigsStatement.getStart();
+  parser.insertStatement(
+    newConfig(formattedTemplateName, fileName),
+    puckConfigsStartLocation
+  );
+
+  const puckConfigsDeclaration = parser.getVariableDeclaration("puckConfigs");
+  const puckConfigsInitializer = puckConfigsDeclaration.getInitializer();
+  if (
+    puckConfigsInitializer &&
+    puckConfigsInitializer.getKind() === SyntaxKind.NewExpression
+  ) {
+    const newExpression = puckConfigsInitializer;
+    const puckConfigsArray = newExpression.getFirstChildByKindOrThrow(
+      SyntaxKind.ArrayLiteralExpression
+    );
+    puckConfigsArray.addElement(`["${fileName}", ${fileName}Config]`);
+  }
+  parser.format();
+  parser.save();
+}

packages/pages/src/common/src/parsers/sourceFileParser.ts

@@ -277,4 +277,16 @@ export default class SourceFileParser {
   removeUnusedImports() {
     this.sourceFile.fixUnusedIdentifiers();
   }
+
+  format() {
+    this.sourceFile.formatText();
+  }
+
+  getVariableStatement(variableName: string) {
+    return this.sourceFile.getVariableStatementOrThrow(variableName);
+  }
+
+  getVariableDeclaration(variableName: string) {
+    return this.sourceFile.getVariableDeclarationOrThrow(variableName);
+  }
 }

packages/pages/src/common/src/template/hydration.ts

@@ -1,6 +1,7 @@
 import { HeadConfig, renderHeadConfigToString } from "./head.js";
 import { convertToPosixPath } from "./paths.js";
 import { TemplateRenderProps } from "./types.js";
+import { FeaturesConfig } from "../feature/features.js";
 
 /**
  * Imports the custom hydration template and entrypoint template as modules and calls
@@ -134,21 +135,29 @@ const getCommonInjectedIndexHtml = (
  * @param clientHydrationString
  * @param indexHtml
  * @param appLanguage
+ * @param templatesConfig
  * @param headConfig
  * @returns the server template to render in the Vite dev environment
  */
 export const getIndexTemplateDev = (
   clientHydrationString: string | undefined,
   indexHtml: string,
   appLanguage: string,
+  templatesConfig: FeaturesConfig,
   headConfig?: HeadConfig
 ): string => {
-  return getCommonInjectedIndexHtml(
+  let commonIndex = getCommonInjectedIndexHtml(
     clientHydrationString,
     indexHtml,
     appLanguage,
     headConfig
   );
+  commonIndex = injectIntoEndOfHead(
+    commonIndex,
+    `<script>const pageSets = ${JSON.stringify(templatesConfig, null)}</script>`
+  );
+
+  return commonIndex;
 };
 
 /**

packages/pages/src/dev/server/middleware/sendAppHTML.ts

@@ -13,6 +13,11 @@ import {
   getHydrationTemplateDev,
   getIndexTemplateDev,
 } from "../../../common/src/template/hydration.js";
+import {
+  getTemplateModules,
+  getTemplatesConfig,
+} from "../../../generate/templates/createTemplatesJson.js";
+import { FeaturesConfig } from "../../../common/src/feature/features.js";
 
 /**
  * Renders the HTML for a given {@link TemplateModuleInternal}
@@ -53,6 +58,13 @@ export default async function sendAppHTML(
     clientServerRenderTemplates.serverRenderTemplatePath
   )) as ServerRenderTemplate;
 
+  const { templateModules, redirectModules } =
+    await getTemplateModules(projectStructure);
+  const templatesConfig: FeaturesConfig = getTemplatesConfig(
+    templateModules,
+    redirectModules
+  );
+
   const clientInjectedIndexHtml = getIndexTemplateDev(
     clientHydrationString,
     serverRenderTemplateModule.getIndexHtml
@@ -62,6 +74,7 @@ export default async function sendAppHTML(
         })
       : serverRenderTemplateModule.indexHtml,
     getLang(headConfig, props),
+    templatesConfig,
     headConfig
   );
 

packages/pages/src/dev/server/middleware/serverRenderRoute.ts

@@ -1,5 +1,6 @@
 import { RequestHandler } from "express-serve-static-core";
 import { ViteDevServer } from "vite";
+import merge from "lodash/merge.js";
 import { propsLoader } from "../ssr/propsLoader.js";
 import {
   parseAsStaticUrl,
@@ -88,6 +89,9 @@ export const serverRenderRoute =
         return;
       }
 
+      const overrides = JSON.parse(req?.body?.overrides ?? "{}");
+      merge(document, overrides);
+
       const props = await propsLoader({
         templateModuleInternal,
         document,

packages/pages/src/dev/server/server.ts

@@ -191,9 +191,18 @@ export const createServer = async (
     }
   });
 
+  app.post(
+    /^\/(.+)/,
+    serverRenderRoute({
+      vite,
+      dynamicGenerateData,
+      projectStructure,
+    })
+  );
+
   // When a page is requested that is anything except the root, call our
   // serverRenderRoute middleware.
-  app.use(
+  app.get(
     /^\/(.+)/,
     useProdURLs
       ? serverRenderSlugRoute({

packages/pages/src/generate/features/features.ts

@@ -1,26 +1,13 @@
 import { ProjectStructure } from "../../common/src/project/structure.js";
-import { getTemplateFilepaths } from "../../common/src/template/internal/getTemplateFilepaths.js";
 import { Command } from "commander";
 import { createTemplatesJson } from "../templates/createTemplatesJson.js";
 import { logErrorAndExit } from "../../util/logError.js";
-import { getRedirectFilePaths } from "../../common/src/redirect/internal/getRedirectFilepaths.js";
 
 const handler = async ({ scope }: { scope: string }): Promise<void> => {
   const projectStructure = await ProjectStructure.init({ scope });
-  const templateFilepaths = getTemplateFilepaths(
-    projectStructure.getTemplatePaths()
-  );
-  const redirectFilepaths = getRedirectFilePaths(
-    projectStructure.getRedirectPaths()
-  );
 
   try {
-    await createTemplatesJson(
-      templateFilepaths,
-      redirectFilepaths,
-      projectStructure,
-      "FEATURES"
-    );
+    await createTemplatesJson(projectStructure, "FEATURES");
   } catch (error) {
     logErrorAndExit(error);
   }