diff --git a/packages/pages/src/scaffold/template/generate.ts b/packages/pages/src/scaffold/template/generate.ts index f96c7da6..6410e28b 100644 --- a/packages/pages/src/scaffold/template/generate.ts +++ b/packages/pages/src/scaffold/template/generate.ts @@ -27,22 +27,27 @@ export const generateTemplate = async ( validateTemplateName(templateName, projectStructure) || "Please ensure the name provided isn't already used and is valid.", }, + // TODO: Add this back when hybrid VE templates are supported + // { + // type: "confirm", + // name: "isVisualEditor", + // message: "Is this a Visual Editor template?", + // initial: true, + // }, { - type: "confirm", - name: "isVisualEditor", - message: "Is this a Visual Editor template?", - initial: true, - }, - { - type: (prev) => (prev ? null : "toggle"), + // type: (prev) => (prev ? null : "toggle"), + type: "toggle", name: "isDynamic", message: "Is this a static or dynamic template?", initial: true, active: "Dynamic", inactive: "Static", }, + ]; + + const entityScopeQuestions: PromptObject[] = [ { - type: (prev) => (prev ? "select" : null), + type: "select", name: "entityScope", message: "How would you like you to define the entity scope for your template?", @@ -83,9 +88,15 @@ export const generateTemplate = async ( if (response.isVisualEditor) { await generateVETemplate(response, projectStructure); } else { - response.isDynamic - ? await generateDynamicTemplate(response, projectStructure) - : await generateStaticTemplate(response.templateName, projectStructure); + if (response.isDynamic) { + const subsequentResponse = await prompts(entityScopeQuestions); + await generateDynamicTemplate( + { ...response, ...subsequentResponse }, + projectStructure + ); + } else { + await generateStaticTemplate(response.templateName, projectStructure); + } } }; @@ -140,11 +151,7 @@ const generateVETemplate = async ( fs.writeFileSync( path.join(templatePath, `${templateFileName}.tsx`), - visualEditorTemplateCode( - templateFileName, - response.entityScope, - response.filter - ) + visualEditorTemplateCode(templateFileName) ); addVETemplateToConfig(templateFileName, projectStructure); @@ -174,7 +181,7 @@ const addVEDependencies = async () => { await updatePackageDependency("@yext/visual-editor", null, true); await updatePackageDependency( "@measured/puck", - "0.16.0-canary.39e7f40", + { specificVersion: "0.17.1" }, true ); await installDependencies(); diff --git a/packages/pages/src/scaffold/template/sampleTemplates.test.ts b/packages/pages/src/scaffold/template/sampleTemplates.test.ts index 1b83d6d3..abd211be 100644 --- a/packages/pages/src/scaffold/template/sampleTemplates.test.ts +++ b/packages/pages/src/scaffold/template/sampleTemplates.test.ts @@ -6,7 +6,14 @@ import { visualEditorTemplateCode, } from "./sampleTemplates.js"; import fs from "node:fs"; -import { Project } from "ts-morph"; +import { Diagnostic, Project, ts } from "ts-morph"; + +const filterOutModuleErrors = (d: Diagnostic) => { + return ( + !d.getMessageText().toString().includes("Cannot find module") && + !d.getMessageText().toString().includes("Cannot use JSX") + ); +}; describe("newConfigFile", () => { it("confirm returned code has no warnings", () => { @@ -19,13 +26,7 @@ describe("newConfigFile", () => { project.addSourceFileAtPath(filePath); const diagnostics = project .getPreEmitDiagnostics() - .filter( - (d) => - !d - .getMessageText() - .toString() - .includes("Cannot find module '@measured/puck'") - ); + .filter(filterOutModuleErrors); expect(diagnostics.length).toBe(0); } finally { if (fs.existsSync("test.tsx")) { @@ -37,11 +38,7 @@ describe("newConfigFile", () => { describe("visualEditorTemplateCode", () => { it("confirm returned code has no warnings", () => { - const fileContent = visualEditorTemplateCode( - "testTemplate", - "entityTypes", - ["location"] - ); + const fileContent = visualEditorTemplateCode("testTemplate"); const filePath = "test.tsx"; try { @@ -50,11 +47,7 @@ describe("visualEditorTemplateCode", () => { project.addSourceFileAtPath(filePath); const diagnostics = project .getPreEmitDiagnostics() - .filter( - (d) => - !d.getMessageText().toString().includes("Cannot find module") && - !d.getMessageText().toString().includes("Cannot use JSX") - ); + .filter(filterOutModuleErrors); expect(diagnostics.length).toBe(0); } finally { if (fs.existsSync("test.tsx")) { @@ -75,11 +68,7 @@ describe("staticTemplate", () => { project.addSourceFileAtPath(filePath); const diagnostics = project .getPreEmitDiagnostics() - .filter( - (d) => - !d.getMessageText().toString().includes("Cannot find module") && - !d.getMessageText().toString().includes("Cannot use JSX") - ); + .filter(filterOutModuleErrors); expect(diagnostics.length).toBe(0); } finally { if (fs.existsSync("test.tsx")) { @@ -102,11 +91,7 @@ describe("dynamicTemplate", () => { project.addSourceFileAtPath(filePath); const diagnostics = project .getPreEmitDiagnostics() - .filter( - (d) => - !d.getMessageText().toString().includes("Cannot find module") && - !d.getMessageText().toString().includes("Cannot use JSX") - ); + .filter(filterOutModuleErrors); expect(diagnostics.length).toBe(0); } finally { if (fs.existsSync("test.tsx")) { diff --git a/packages/pages/src/scaffold/template/sampleTemplates.ts b/packages/pages/src/scaffold/template/sampleTemplates.ts index 73c4051a..1157e0df 100644 --- a/packages/pages/src/scaffold/template/sampleTemplates.ts +++ b/packages/pages/src/scaffold/template/sampleTemplates.ts @@ -1,53 +1,23 @@ -export const visualEditorTemplateCode = ( - templateName: string, - entityScope: string, - filter: string[] -): string => { +export const visualEditorTemplateCode = (templateName: string): string => { const formattedTemplateName = templateName.charAt(0).toUpperCase() + templateName.slice(1); - const filterCode = `${entityScope}: ${JSON.stringify(filter)},`; const config = `${templateName}Config`; - return `import { + return `import "@yext/visual-editor/style.css"; +import { Template, GetPath, - TemplateConfig, TemplateProps, TemplateRenderProps, GetHeadConfig, HeadConfig, } from "@yext/pages"; -import { Config, Render } from "@measured/puck"; +import { Render } from "@measured/puck"; import { ${config} } from "../ve.config"; -import { DocumentProvider } from "@yext/pages/util"; -import { resolveVisualEditorData } from "@yext/visual-editor"; - -export const config: TemplateConfig = { - name: "${templateName}", - stream: { - $id: "${templateName}-stream", - filter: { - ${filterCode} - }, - fields: [ - "id", - "name", - "slug", - "c_visualConfigurations", - "c_pages_layouts.c_visualConfiguration", - ], - localization: { - locales: ["en"], - }, - }, - additionalProperties: { - isVETemplate: true, - } -}; - -export const transformProps = async (data: TemplateRenderProps) => { - return resolveVisualEditorData(data, "${templateName}"); -}; +import { applyTheme, VisualEditorProvider } from "@yext/visual-editor"; +import { themeConfig } from "../../theme.config"; +import { buildSchema } from "../utils/buildSchema"; +import { AnalyticsProvider } from "@yext/pages-components"; export const getHeadConfig: GetHeadConfig = ({ document, @@ -55,20 +25,47 @@ export const getHeadConfig: GetHeadConfig = ({ return { title: document.name, charset: "UTF-8", - viewport: "width=device-width, initial-scale=1" + viewport: "width=device-width, initial-scale=1", + tags: [ + { + type: "link", + attributes: { + rel: "icon", + type: "image/x-icon", + }, + }, + ], + other: [applyTheme(document, themeConfig), buildSchema(document)].join( + "\\n" + ), }; }; export const getPath: GetPath = ({ document }) => { - return document.slug ? document.slug : "${templateName}/" + document.id; + const localePath = document.locale !== "en" ? \`\${document.locale}/\` : ""; + return document.address + ? \`\${localePath}\${document.address.region}/\${document.address.city}/\${document.address.line1}-\${document.id.toString()}\` + : \`\${localePath}\${document.id.toString()}\`; }; -const ${formattedTemplateName}: Template = ({ document }) => { - const { visualTemplate } = document; +const ${formattedTemplateName}: Template = (props) => { + const { document } = props; + // temporary: guard for generated repo-based static page + if (!document?.__?.layout) { + return <>; + } + return ( - - - + + + + + ); }; @@ -153,6 +150,7 @@ export const getPath: GetPath = ({ document }) => { }; const ${formattedTemplateName}: Template = ({ document }) => { + console.log(document); return (
${formattedTemplateName} page
); @@ -171,6 +169,7 @@ export const staticTemplate = (templateName: string) => { TemplateProps, TemplateRenderProps, GetHeadConfig, + Template, } from "@yext/pages"; export const getPath: GetPath = () => { @@ -185,9 +184,9 @@ export const getHeadConfig: GetHeadConfig = () => { }; }; -const ${formattedTemplateName} = (data: TemplateRenderProps) => { +const ${formattedTemplateName}: Template = () => { return ( -
${templateName} page
+
${templateName} page
); };