@squiz/dxp-cli-next 5.31.0-develop.4 → 5.31.0-develop.6

package/lib/page/utils/parse-args.spec.js

@@ -73,50 +73,50 @@ describe('parseZonesList', () => {
         });
     });
 });
-describe('parseOptionsList', () => {
+describe('parsePropertiesList', () => {
     it('returns empty object when given empty string', () => {
-        const result = (0, parse_args_1.parseOptionsList)('', {});
+        const result = (0, parse_args_1.parsePropertiesList)('', {});
         expect(result).toEqual({});
     });
-    it('parses single option with equals separator', () => {
-        const result = (0, parse_args_1.parseOptionsList)('theme=dark', {});
+    it('parses single property with equals separator', () => {
+        const result = (0, parse_args_1.parsePropertiesList)('theme=dark', {});
         expect(result).toEqual({
             theme: 'dark',
         });
     });
-    it('parses single option with colon separator', () => {
-        const result = (0, parse_args_1.parseOptionsList)('theme:dark', {});
+    it('parses single property with colon separator', () => {
+        const result = (0, parse_args_1.parsePropertiesList)('theme:dark', {});
         expect(result).toEqual({
             theme: 'dark',
         });
     });
-    it('parses comma-separated options with equals separator', () => {
-        const result = (0, parse_args_1.parseOptionsList)('theme=dark,containerSize=standard,sidebarPosition=right', {});
+    it('parses comma-separated properties with equals separator', () => {
+        const result = (0, parse_args_1.parsePropertiesList)('theme=dark,containerSize=standard,sidebarPosition=right', {});
         expect(result).toEqual({
             theme: 'dark',
             containerSize: 'standard',
             sidebarPosition: 'right',
         });
     });
-    it('parses comma-separated options with colon separator', () => {
-        const result = (0, parse_args_1.parseOptionsList)('theme:dark,containerSize:standard,sidebarPosition:right', {});
+    it('parses comma-separated properties with colon separator', () => {
+        const result = (0, parse_args_1.parsePropertiesList)('theme:dark,containerSize:standard,sidebarPosition:right', {});
         expect(result).toEqual({
             theme: 'dark',
             containerSize: 'standard',
             sidebarPosition: 'right',
         });
     });
-    it('later options override earlier ones', () => {
-        let result = (0, parse_args_1.parseOptionsList)('theme=light', {});
-        result = (0, parse_args_1.parseOptionsList)('theme=dark', result);
+    it('later properties override earlier ones', () => {
+        let result = (0, parse_args_1.parsePropertiesList)('theme=light', {});
+        result = (0, parse_args_1.parsePropertiesList)('theme=dark', result);
         expect(result).toEqual({
             theme: 'dark',
         });
     });
-    it('accumulates values from multiple option flags', () => {
-        let result = (0, parse_args_1.parseOptionsList)('theme=dark', {});
-        result = (0, parse_args_1.parseOptionsList)('containerSize=standard', result);
-        result = (0, parse_args_1.parseOptionsList)('sidebarPosition=right', result);
+    it('accumulates values from multiple property flags', () => {
+        let result = (0, parse_args_1.parsePropertiesList)('theme=dark', {});
+        result = (0, parse_args_1.parsePropertiesList)('containerSize=standard', result);
+        result = (0, parse_args_1.parsePropertiesList)('sidebarPosition=right', result);
         expect(result).toEqual({
             theme: 'dark',
             containerSize: 'standard',
@@ -124,19 +124,19 @@ describe('parseOptionsList', () => {
         });
     });
     it('handles mixed syntax with equals and colons', () => {
-        const result = (0, parse_args_1.parseOptionsList)('theme=dark,containerSize:standard', {});
+        const result = (0, parse_args_1.parsePropertiesList)('theme=dark,containerSize:standard', {});
         expect(result).toEqual({
             theme: 'dark',
             containerSize: 'standard',
         });
     });
     it('ignores malformed inputs', () => {
-        const result = (0, parse_args_1.parseOptionsList)('malformed,theme=,=dark', {});
+        const result = (0, parse_args_1.parsePropertiesList)('malformed,theme=,=dark', {});
         expect(result).toEqual({});
     });
     it('handles complex example with multiple formats', () => {
-        let result = (0, parse_args_1.parseOptionsList)('containerSize:standard', {});
-        result = (0, parse_args_1.parseOptionsList)('sidebarPosition=right,colorTheme=dark', result);
+        let result = (0, parse_args_1.parsePropertiesList)('containerSize:standard', {});
+        result = (0, parse_args_1.parsePropertiesList)('sidebarPosition=right,colorTheme=dark', result);
         expect(result).toEqual({
             containerSize: 'standard',
             sidebarPosition: 'right',
@@ -144,3 +144,141 @@ describe('parseOptionsList', () => {
         });
     });
 });
+describe('normalizeLayoutProperties', () => {
+    it('returns empty object when given no properties', () => {
+        const result = (0, parse_args_1.normalizeLayoutProperties)({}, {});
+        expect(result).toEqual({});
+    });
+    it('returns properties unchanged when layoutDefinition has no properties', () => {
+        const properties = {
+            theme: 'dark',
+            size: 'large',
+        };
+        const result = (0, parse_args_1.normalizeLayoutProperties)(properties, {});
+        expect(result).toEqual(properties);
+    });
+    it('converts string "true" to boolean true for boolean-type properties', () => {
+        const properties = {
+            showFooter: 'true',
+        };
+        const layoutDefinition = {
+            properties: {
+                showFooter: {
+                    type: 'boolean',
+                },
+            },
+        };
+        const result = (0, parse_args_1.normalizeLayoutProperties)(properties, layoutDefinition);
+        expect(result).toEqual({
+            showFooter: true,
+        });
+        expect(typeof result.showFooter).toBe('boolean');
+    });
+    it('converts string "false" to boolean false for boolean-type properties', () => {
+        const properties = {
+            showFooter: 'false',
+        };
+        const layoutDefinition = {
+            properties: {
+                showFooter: {
+                    type: 'boolean',
+                },
+            },
+        };
+        const result = (0, parse_args_1.normalizeLayoutProperties)(properties, layoutDefinition);
+        expect(result).toEqual({
+            showFooter: false,
+        });
+        expect(typeof result.showFooter).toBe('boolean');
+    });
+    it('leaves string properties unchanged for non-boolean types', () => {
+        const properties = {
+            theme: 'dark',
+            customTitle: 'My Title',
+        };
+        const layoutDefinition = {
+            properties: {
+                theme: {
+                    type: 'string',
+                },
+                customTitle: {
+                    type: 'string',
+                },
+            },
+        };
+        const result = (0, parse_args_1.normalizeLayoutProperties)(properties, layoutDefinition);
+        expect(result).toEqual(properties);
+    });
+    it('handles mixed boolean and string properties', () => {
+        const properties = {
+            showFooter: 'true',
+            showHeader: 'false',
+            theme: 'dark',
+            customTitle: 'Test',
+        };
+        const layoutDefinition = {
+            properties: {
+                showFooter: { type: 'boolean' },
+                showHeader: { type: 'boolean' },
+                theme: { type: 'string' },
+                customTitle: { type: 'string' },
+            },
+        };
+        const result = (0, parse_args_1.normalizeLayoutProperties)(properties, layoutDefinition);
+        expect(result).toEqual({
+            showFooter: true,
+            showHeader: false,
+            theme: 'dark',
+            customTitle: 'Test',
+        });
+    });
+    it('throws error for invalid boolean value', () => {
+        const properties = {
+            showFooter: 'yes',
+        };
+        const layoutDefinition = {
+            properties: {
+                showFooter: {
+                    type: 'boolean',
+                },
+            },
+        };
+        expect(() => (0, parse_args_1.normalizeLayoutProperties)(properties, layoutDefinition)).toThrow('Invalid boolean value "yes" for property "showFooter". Must be "true" or "false".');
+    });
+    it('only normalizes properties that exist in layoutDefinition', () => {
+        const properties = {
+            showFooter: 'true',
+            unknownProperty: 'true',
+        };
+        const layoutDefinition = {
+            properties: {
+                showFooter: {
+                    type: 'boolean',
+                },
+            },
+        };
+        const result = (0, parse_args_1.normalizeLayoutProperties)(properties, layoutDefinition);
+        expect(result).toEqual({
+            showFooter: true,
+            unknownProperty: 'true', // Left as string because not in layoutDefinition
+        });
+    });
+    it('preserves properties not present in layoutDefinition properties', () => {
+        const properties = {
+            showFooter: 'true',
+            theme: 'dark',
+        };
+        const layoutDefinition = {
+            properties: {
+                showFooter: {
+                    type: 'boolean',
+                },
+            },
+        };
+        const result = (0, parse_args_1.normalizeLayoutProperties)(properties, layoutDefinition);
+        expect(result).toEqual({
+            showFooter: true,
+            theme: 'dark', // Preserved even though not in layoutDefinition
+        });
+    });
+});

package/lib/page/utils/render.d.ts

@@ -4,30 +4,48 @@ export interface LayoutDefinition {
     description?: string;
     entry?: string;
     template?: string;
-    zones: Record<string, ZoneDefinition>;
-    options?: Record<string, OptionDefinition>;
+    zones: ZoneDefinition[];
+    properties?: Record<string, PropertyDefinition>;
 }
 export interface ExtendedLayoutDefinition extends LayoutDefinition {
     template: string;
 }
 export interface ZoneDefinition {
+    key: string;
     displayName: string;
     description: string;
-    minNodes?: number;
-    maxNodes?: number;
 }
-export interface OptionDefinition {
-    displayName: string;
+/**
+ * Layout option value types.
+ */
+export declare const LayoutOptionValueType: {
+    readonly stringEnum: "string-enum";
+    readonly boolean: "boolean";
+    readonly text: "text";
+};
+export declare type LayoutOptionValueType = typeof LayoutOptionValueType[keyof typeof LayoutOptionValueType];
+export declare const LayoutOptionValueTypes: readonly ["string-enum", "boolean", "text"];
+/**
+ * Layout property types.
+ */
+export declare const LayoutPropertyType: {
+    readonly string: "string";
+    readonly boolean: "boolean";
+};
+export declare type LayoutPropertyType = typeof LayoutPropertyType[keyof typeof LayoutPropertyType];
+export interface PropertyDefinition {
+    title: string;
     description: string;
-    values: string[];
+    type: LayoutPropertyType;
+    enum?: string[] | boolean[];
 }
 /**
  * Renders a layout using Handlebars templating
  *
  * @param templateContent The Handlebars template string
  * @param zoneContents Content for each zone as single concatenated strings
- * @param layoutOptions Options for the layout
+ * @param layoutProperties Properties for the layout (can include boolean values for boolean-type properties)
  * @param layoutDefinition Optional layout definition object to pass to the template
  * @returns The rendered HTML
  */
-export declare function renderLayout(templateContent: string, zoneContents: Record<string, string>, layoutOptions: Record<string, any>, layoutDefinition?: ExtendedLayoutDefinition): Promise<string>;
+export declare function renderLayout(templateContent: string, zoneContents: Record<string, string>, layoutProperties: Record<string, string | boolean>, layoutDefinition?: ExtendedLayoutDefinition): Promise<string>;

package/lib/page/utils/render.js

@@ -12,41 +12,95 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderLayout = void 0;
+exports.renderLayout = exports.LayoutPropertyType = exports.LayoutOptionValueTypes = exports.LayoutOptionValueType = void 0;
 const handlebars_1 = __importDefault(require("handlebars"));
+/**
+ * Layout option value types.
+ */
+exports.LayoutOptionValueType = {
+    stringEnum: 'string-enum',
+    boolean: 'boolean',
+    text: 'text',
+};
+exports.LayoutOptionValueTypes = [
+    exports.LayoutOptionValueType.stringEnum,
+    exports.LayoutOptionValueType.boolean,
+    exports.LayoutOptionValueType.text,
+];
+/**
+ * Layout property types.
+ */
+exports.LayoutPropertyType = {
+    string: 'string',
+    boolean: 'boolean',
+};
+/**
+ * Registers global Handlebars helpers
+ * TODO: Consider how these can be shared with page-contents-lib
+ */
+function registerGlobalHelpers() {
+    handlebars_1.default.registerHelper('toLowerCase', function (text) {
+        return typeof text === 'string' ? text.toLowerCase() : '';
+    });
+    handlebars_1.default.registerHelper('toUpperCase', function (text) {
+        return typeof text === 'string' ? text.toUpperCase() : '';
+    });
+    handlebars_1.default.registerHelper('ifEq', function (first, second, options) {
+        if (first === second) {
+            return options.fn(this);
+        }
+        else {
+            return options.inverse(this);
+        }
+    });
+    handlebars_1.default.registerHelper('ifNotEq', function (first, second, options) {
+        if (first !== second) {
+            return options.fn(this);
+        }
+        else {
+            return options.inverse(this);
+        }
+    });
+    handlebars_1.default.registerHelper('stringify', function (object) {
+        return JSON.stringify(object);
+    });
+}
 /**
  * Renders a layout using Handlebars templating
  *
  * @param templateContent The Handlebars template string
  * @param zoneContents Content for each zone as single concatenated strings
- * @param layoutOptions Options for the layout
+ * @param layoutProperties Properties for the layout (can include boolean values for boolean-type properties)
  * @param layoutDefinition Optional layout definition object to pass to the template
  * @returns The rendered HTML
  */
-function renderLayout(templateContent, zoneContents, layoutOptions, layoutDefinition) {
+function renderLayout(templateContent, zoneContents, layoutProperties, layoutDefinition) {
     return __awaiter(this, void 0, void 0, function* () {
         try {
+            registerGlobalHelpers();
             const template = handlebars_1.default.compile(templateContent);
             const zones = {};
             for (const [zoneName, content] of Object.entries(zoneContents)) {
                 // Wrap the content in SafeString to prevent HTML escaping
                 zones[zoneName] = new handlebars_1.default.SafeString(content);
             }
-            const flattenedOptions = {};
-            for (const [key, value] of Object.entries(layoutOptions)) {
-                const optionValue = value;
-                if (optionValue &&
-                    typeof optionValue === 'object' &&
-                    'selectedValue' in optionValue) {
-                    flattenedOptions[key] = optionValue.selectedValue;
+            const flattenedProperties = {};
+            for (const [key, value] of Object.entries(layoutProperties)) {
+                const propertyValue = value;
+                if (propertyValue &&
+                    typeof propertyValue === 'object' &&
+                    'selectedValue' in propertyValue) {
+                    flattenedProperties[key] = propertyValue.selectedValue;
                 }
                 else {
-                    flattenedOptions[key] = optionValue;
+                    flattenedProperties[key] = propertyValue;
                 }
             }
             return template({
                 zones: zones,
-                options: flattenedOptions,
+                // Still provide options for existing templates that use it
+                options: flattenedProperties,
+                properties: flattenedProperties,
                 layout: layoutDefinition,
             });
         }

package/lib/page/utils/render.spec.js

@@ -23,21 +23,21 @@ describe('renderLayout', () => {
         const zoneContents = {
             main: '<p>Content 1</p><p>Content 2</p>',
         };
-        const layoutOptions = {};
-        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutOptions);
+        const layoutProperties = {};
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutProperties);
         expect(result).toContain('<div class="container">');
         expect(result).toContain('<p>Content 1</p>');
         expect(result).toContain('<p>Content 2</p>');
     }));
-    it('should apply layout options to the template', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('should apply layout properties to the template (with deprecated options support)', () => __awaiter(void 0, void 0, void 0, function* () {
         const templateContent = '<div class="container {{options.size}}">{{zones.main}}</div>';
         const zoneContents = {
             main: '<p>Content</p>',
         };
-        const layoutOptions = {
+        const layoutProperties = {
             size: 'large',
         };
-        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutOptions);
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutProperties);
         expect(result).toContain('<div class="container large">');
         expect(result).toContain('<p>Content</p>');
     }));
@@ -52,8 +52,8 @@ describe('renderLayout', () => {
             main: '<p>Main Content</p>',
             sidebar: '<div>Sidebar Item 1</div><div>Sidebar Item 2</div>',
         };
-        const layoutOptions = {};
-        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutOptions);
+        const layoutProperties = {};
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutProperties);
         expect(result).toContain('<div class="main"><p>Main Content</p></div>');
         expect(result).toContain('<div class="sidebar"><div>Sidebar Item 1</div><div>Sidebar Item 2</div></div>');
     }));
@@ -67,10 +67,10 @@ describe('renderLayout', () => {
         const zoneContents = {
             main: '<p>Content</p>',
         };
-        const layoutOptions = {
-            theme: { selectedValue: 'dark' },
+        const layoutProperties = {
+            theme: 'dark',
         };
-        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutOptions);
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutProperties);
         expect(result).toContain('<div class="theme-dark">');
     }));
     it('should use SafeString to prevent HTML escaping', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -98,13 +98,13 @@ describe('renderLayout', () => {
             name: 'test-layout',
             displayName: 'Test Layout',
             template: templateContent,
-            zones: {
-                main: {
+            zones: [
+                {
+                    key: 'main',
                     displayName: 'Main Content',
                     description: 'Main content area',
-                    minNodes: 1,
                 },
-            },
+            ],
         };
         const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, {}, layoutDefinition);
         expect(result).toContain('<div class="test-layout">');

package/lib/page/utils/server.d.ts

@@ -3,7 +3,7 @@ interface DevServerOptions {
     configPath: string;
     layoutDefinition: ExtendedLayoutDefinition;
     zoneContent: Record<string, string[]>;
-    layoutOptions: Record<string, string>;
+    layoutProperties: Record<string, string | boolean>;
     stylesheet?: string;
     port: number;
     openBrowser: boolean;

package/lib/page/utils/server.js

@@ -49,7 +49,7 @@ const logger = (0, dx_logger_lib_1.getLogger)({
 });
 function startDevServer(options) {
     return __awaiter(this, void 0, void 0, function* () {
-        const { configPath, layoutOptions, port, openBrowser } = options;
+        const { configPath, layoutProperties, port, openBrowser } = options;
         // Create HTTP server with stateless request handling
         const server = http.createServer((req, res) => __awaiter(this, void 0, void 0, function* () {
             const url = new URL(req.url || '/', `http://localhost:${port}`);
@@ -82,7 +82,7 @@ function startDevServer(options) {
                         stylesheetContent = yield fs.readFile(options.stylesheet, 'utf-8');
                     }
                     // Use the renderLayout helper
-                    const html = yield (0, render_1.renderLayout)(layoutDefinition.template, zoneContents, layoutOptions, layoutDefinition);
+                    const html = yield (0, render_1.renderLayout)(layoutDefinition.template, zoneContents, layoutProperties, layoutDefinition);
                     // for hot-reload script
                     const fullHtml = `
           <!DOCTYPE html>

package/lib/page/utils/server.spec.js

@@ -76,25 +76,25 @@ describe('startDevServer', () => {
         displayName: 'Test Layout',
         description: 'A test layout',
         entry: 'path/to/template.html',
-        template: '<div class="{{options.size}}">{{{zones.main}}}</div>',
-        zones: {
-            main: {
+        template: '<div class="{{properties.size}}">{{{zones.main}}}</div>',
+        zones: [
+            {
+                key: 'main',
                 displayName: 'Main Content',
                 description: 'Main content area',
-                minNodes: 1,
             },
-            sidebar: {
+            {
+                key: 'sidebar',
                 displayName: 'Sidebar',
                 description: 'Sidebar content',
-                minNodes: 0,
-                maxNodes: 3,
             },
-        },
-        options: {
+        ],
+        properties: {
             size: {
-                displayName: 'Size',
+                title: 'Size',
                 description: 'Container size',
-                values: ['small', 'medium', 'large'],
+                enum: ['small', 'medium', 'large'],
+                type: 'string',
             },
         },
     };
@@ -105,7 +105,7 @@ describe('startDevServer', () => {
             main: ['/path/to/main.html'],
             sidebar: ['/path/to/sidebar1.html', '/path/to/sidebar2.html'],
         },
-        layoutOptions: {
+        layoutProperties: {
             size: 'large',
         },
         stylesheet: '/path/to/styles.css',
@@ -221,7 +221,7 @@ describe('startDevServer', () => {
         expect(mockRenderLayout).toHaveBeenCalledWith(mockLayoutDefinition.template, expect.objectContaining({
             main: '<p>Main content</p>',
             sidebar: '<div>Sidebar item</div><div>Sidebar item</div>',
-        }), mockServerOptions.layoutOptions, mockLayoutDefinition);
+        }), mockServerOptions.layoutProperties, mockLayoutDefinition);
     }));
     it('should set up check-changes endpoint for client polling', () => __awaiter(void 0, void 0, void 0, function* () {
         const mockRequest = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/dxp-cli-next",
-  "version": "5.31.0-develop.4",
+  "version": "5.31.0-develop.6",
   "repository": {
     "url": "https://gitlab.squiz.net/dxp/dxp-cli-next"
   },