@squiz/dxp-cli-next 5.24.0-develop.4 → 5.25.0-develop.1

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

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const parse_args_1 = require("./parse-args");
+describe('parseZonesList', () => {
+    it('returns empty object when given empty string', () => {
+        const result = (0, parse_args_1.parseZonesList)('', {});
+        expect(result).toEqual({});
+    });
+    it('parses single zone with equals separator', () => {
+        const result = (0, parse_args_1.parseZonesList)('main=./main.html', {});
+        expect(result).toEqual({
+            main: ['./main.html'],
+        });
+    });
+    it('parses single zone with colon separator', () => {
+        const result = (0, parse_args_1.parseZonesList)('main:./main.html', {});
+        expect(result).toEqual({
+            main: ['./main.html'],
+        });
+    });
+    it('parses comma-separated zones with equals separator', () => {
+        const result = (0, parse_args_1.parseZonesList)('header=./header.html,main=./main.html,footer=./footer.html', {});
+        expect(result).toEqual({
+            header: ['./header.html'],
+            main: ['./main.html'],
+            footer: ['./footer.html'],
+        });
+    });
+    it('parses comma-separated zones with colon separator', () => {
+        const result = (0, parse_args_1.parseZonesList)('header:./header.html,main:./main.html,footer:./footer.html', {});
+        expect(result).toEqual({
+            header: ['./header.html'],
+            main: ['./main.html'],
+            footer: ['./footer.html'],
+        });
+    });
+    it('accumulates multiple values for the same zone', () => {
+        const previous = { main: ['./main.0.html'] };
+        const result = (0, parse_args_1.parseZonesList)('main=./main.1.html', previous);
+        expect(result).toEqual({
+            main: ['./main.0.html', './main.1.html'],
+        });
+    });
+    it('accumulates values from multiple zone flags', () => {
+        let result = (0, parse_args_1.parseZonesList)('main=./main.html', {});
+        result = (0, parse_args_1.parseZonesList)('sidebar=./sidebar.html', result);
+        result = (0, parse_args_1.parseZonesList)('footer=./footer.html', result);
+        expect(result).toEqual({
+            main: ['./main.html'],
+            sidebar: ['./sidebar.html'],
+            footer: ['./footer.html'],
+        });
+    });
+    it('handles mixed syntax with equals and colons', () => {
+        const result = (0, parse_args_1.parseZonesList)('header=./header.html,main:./main.html', {});
+        expect(result).toEqual({
+            header: ['./header.html'],
+            main: ['./main.html'],
+        });
+    });
+    it('ignores malformed inputs', () => {
+        const result = (0, parse_args_1.parseZonesList)('malformed,main=,=./file.html', {});
+        expect(result).toEqual({});
+    });
+    it('handles complex example with multiple formats', () => {
+        let result = (0, parse_args_1.parseZonesList)('header:./header.html', {});
+        result = (0, parse_args_1.parseZonesList)('main:./main.0.html,main:./main.1.html', result);
+        result = (0, parse_args_1.parseZonesList)('sidebar=./sidebar.0.html', result);
+        expect(result).toEqual({
+            header: ['./header.html'],
+            main: ['./main.0.html', './main.1.html'],
+            sidebar: ['./sidebar.0.html'],
+        });
+    });
+});
+describe('parseOptionsList', () => {
+    it('returns empty object when given empty string', () => {
+        const result = (0, parse_args_1.parseOptionsList)('', {});
+        expect(result).toEqual({});
+    });
+    it('parses single option with equals separator', () => {
+        const result = (0, parse_args_1.parseOptionsList)('theme=dark', {});
+        expect(result).toEqual({
+            theme: 'dark',
+        });
+    });
+    it('parses single option with colon separator', () => {
+        const result = (0, parse_args_1.parseOptionsList)('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', {});
+        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', {});
+        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);
+        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);
+        expect(result).toEqual({
+            theme: 'dark',
+            containerSize: 'standard',
+            sidebarPosition: 'right',
+        });
+    });
+    it('handles mixed syntax with equals and colons', () => {
+        const result = (0, parse_args_1.parseOptionsList)('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', {});
+        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);
+        expect(result).toEqual({
+            containerSize: 'standard',
+            sidebarPosition: 'right',
+            colorTheme: 'dark',
+        });
+    });
+});

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

@@ -0,0 +1,33 @@
+export interface LayoutDefinition {
+    name: string;
+    displayName?: string;
+    description?: string;
+    entry?: string;
+    template?: string;
+    zones: Record<string, ZoneDefinition>;
+    options?: Record<string, OptionDefinition>;
+}
+export interface ExtendedLayoutDefinition extends LayoutDefinition {
+    template: string;
+}
+export interface ZoneDefinition {
+    displayName: string;
+    description: string;
+    minNodes: number;
+    maxNodes?: number;
+}
+export interface OptionDefinition {
+    displayName: string;
+    description: string;
+    values: string[];
+}
+/**
+ * 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 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>;

package/lib/page/utils/render.js

@@ -0,0 +1,58 @@
+"use strict";
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderLayout = void 0;
+const handlebars_1 = __importDefault(require("handlebars"));
+/**
+ * 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 layoutDefinition Optional layout definition object to pass to the template
+ * @returns The rendered HTML
+ */
+function renderLayout(templateContent, zoneContents, layoutOptions, layoutDefinition) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            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;
+                }
+                else {
+                    flattenedOptions[key] = optionValue;
+                }
+            }
+            return template({
+                zones: zones,
+                options: flattenedOptions,
+                layout: layoutDefinition,
+            });
+        }
+        catch (error) {
+            return `<div class="error">Error rendering template: ${error.message}</div>`;
+        }
+    });
+}
+exports.renderLayout = renderLayout;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,134 @@
+"use strict";
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const render_1 = require("./render");
+const handlebars_1 = __importDefault(require("handlebars"));
+describe('renderLayout', () => {
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+    it('should render a simple template with zone content', () => __awaiter(void 0, void 0, void 0, function* () {
+        const templateContent = '<div class="container">{{zones.main}}</div>';
+        const zoneContents = {
+            main: '<p>Content 1</p><p>Content 2</p>',
+        };
+        const layoutOptions = {};
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutOptions);
+        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* () {
+        const templateContent = '<div class="container {{options.size}}">{{zones.main}}</div>';
+        const zoneContents = {
+            main: '<p>Content</p>',
+        };
+        const layoutOptions = {
+            size: 'large',
+        };
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutOptions);
+        expect(result).toContain('<div class="container large">');
+        expect(result).toContain('<p>Content</p>');
+    }));
+    it('should handle multiple zones', () => __awaiter(void 0, void 0, void 0, function* () {
+        const templateContent = `
+      <div class="container">
+        <div class="main">{{zones.main}}</div>
+        <div class="sidebar">{{zones.sidebar}}</div>
+      </div>
+    `;
+        const zoneContents = {
+            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);
+        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>');
+    }));
+    it('should handle complex option values with selectedValue property', () => __awaiter(void 0, void 0, void 0, function* () {
+        const templateContent = `
+      <div class="theme-{{options.theme}}">
+        <div class="main">{{zones.main}}</div>
+        <div class="sidebar">{{zones.sidebar}}</div>
+      </div>
+    `;
+        const zoneContents = {
+            main: '<p>Content</p>',
+        };
+        const layoutOptions = {
+            theme: { selectedValue: 'dark' },
+        };
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, layoutOptions);
+        expect(result).toContain('<div class="theme-dark">');
+    }));
+    it('should use SafeString to prevent HTML escaping', () => __awaiter(void 0, void 0, void 0, function* () {
+        const templateContent = '<div>{{zones.content}}</div>';
+        const zoneContents = {
+            content: '<strong>Bold Text</strong>',
+        };
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, {});
+        expect(result).toContain('<strong>Bold Text</strong>');
+    }));
+    it('should handle empty zone content gracefully', () => __awaiter(void 0, void 0, void 0, function* () {
+        const templateContent = '<div>{{zones.main}}</div>';
+        const zoneContents = {
+            main: '',
+        };
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, {});
+        expect(result).toEqual('<div></div>');
+    }));
+    it('should include layout definition in template data when provided', () => __awaiter(void 0, void 0, void 0, function* () {
+        const templateContent = '<div class="{{layout.name}}">{{zones.main}}</div>';
+        const zoneContents = {
+            main: '<p>Content</p>',
+        };
+        const layoutDefinition = {
+            name: 'test-layout',
+            displayName: 'Test Layout',
+            template: templateContent,
+            zones: {
+                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">');
+    }));
+    it('should handle rendering errors gracefully', () => __awaiter(void 0, void 0, void 0, function* () {
+        const templateContent = '{{#invalid}}Invalid Handlebars Syntax{{/invalid}}';
+        const zoneContents = { main: '<p>Content</p>' };
+        handlebars_1.default.compile = jest.fn().mockImplementation(() => {
+            throw new Error('Handlebars compilation error');
+        });
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, {});
+        expect(result).toContain('<div class="error">');
+        expect(result).toContain('Handlebars compilation error');
+    }));
+    it('should handle compilation errors during template execution', () => __awaiter(void 0, void 0, void 0, function* () {
+        const templateContent = '{{invalidHelper}}';
+        const zoneContents = { main: '<p>Content</p>' };
+        handlebars_1.default.compile = jest.fn().mockImplementation(() => {
+            return () => {
+                throw new Error('Template execution error');
+            };
+        });
+        const result = yield (0, render_1.renderLayout)(templateContent, zoneContents, {});
+        expect(result).toContain('<div class="error">');
+        expect(result).toContain('Template execution error');
+    }));
+});

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

@@ -0,0 +1,12 @@
+import { ExtendedLayoutDefinition } from './render';
+interface DevServerOptions {
+    configPath: string;
+    layoutDefinition: ExtendedLayoutDefinition;
+    zoneContent: Record<string, string[]>;
+    layoutOptions: Record<string, string>;
+    stylesheet?: string;
+    port: number;
+    openBrowser: boolean;
+}
+export declare function startDevServer(options: DevServerOptions): Promise<void>;
+export {};

package/lib/page/utils/server.js

@@ -0,0 +1,201 @@
+"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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startDevServer = void 0;
+const definitions_1 = require("../utils/definitions");
+const render_1 = require("./render");
+const fs = __importStar(require("fs/promises"));
+const fs_1 = require("fs");
+const http = __importStar(require("http"));
+const opener_1 = __importDefault(require("opener"));
+const dx_logger_lib_1 = require("@squiz/dx-logger-lib");
+const logger = (0, dx_logger_lib_1.getLogger)({
+    name: 'layout-dev-server',
+    format: 'human',
+});
+function startDevServer(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { configPath, layoutOptions, 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}`);
+            // Serve main layout page on root
+            if (url.pathname === '/') {
+                try {
+                    const layoutDefinition = yield (0, definitions_1.loadLayoutDefinition)(configPath);
+                    if (!layoutDefinition || !layoutDefinition.template) {
+                        throw new Error('Template content not found in layout definition');
+                    }
+                    const zoneContents = {};
+                    // Concatenate all files for this zone into a single string
+                    for (const [zoneName, filePaths] of Object.entries(options.zoneContent)) {
+                        let combinedContent = '';
+                        for (const filePath of filePaths) {
+                            try {
+                                const content = yield fs.readFile(filePath, 'utf-8');
+                                combinedContent += content;
+                            }
+                            catch (error) {
+                                logger.warn(`Failed to load file ${filePath}: ${error}`);
+                                combinedContent += `<!-- Error loading ${filePath}: ${error} -->`;
+                            }
+                        }
+                        zoneContents[zoneName] = combinedContent;
+                    }
+                    // Load stylesheet content fresh for each request
+                    let stylesheetContent = '';
+                    if (options.stylesheet && (0, fs_1.existsSync)(options.stylesheet)) {
+                        stylesheetContent = yield fs.readFile(options.stylesheet, 'utf-8');
+                    }
+                    // Use the renderLayout helper
+                    const html = yield (0, render_1.renderLayout)(layoutDefinition.template, zoneContents, layoutOptions, layoutDefinition);
+                    // for hot-reload script
+                    const fullHtml = `
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <meta charset="UTF-8">
+              <meta name="viewport" content="width=device-width, initial-scale=1.0">
+              <title>${layoutDefinition.displayName || layoutDefinition.name} - Layout Development</title>
+              <style>${stylesheetContent}</style>
+              <script>
+                // Client-side polling for changes
+                let lastModified = new Date().toISOString();
+                
+                // Poll the server every second to check for changes
+                function checkForChanges() {
+                  fetch('/check-changes?lastModified=' + encodeURIComponent(lastModified))
+                    .then(response => response.json())
+                    .then(data => {
+                      if (data.hasChanges) {
+                        console.log('Changes detected, reloading at', new Date().toISOString());
+                        lastModified = data.lastModified;
+                        location.reload();
+                      } else {
+                        lastModified = data.lastModified;
+                        setTimeout(checkForChanges, 1000);
+                      }
+                    })
+                    .catch(err => {
+                      console.error('Error checking for changes:', err);
+                      // Retry after a delay
+                      setTimeout(checkForChanges, 5000);
+                    });
+                }
+                
+                // Start checking for changes
+                checkForChanges();
+              </script>
+            </head>
+            <body>
+              ${html}
+            </body>
+          </html>
+        `;
+                    res.writeHead(200, { 'Content-Type': 'text/html' });
+                    res.end(fullHtml);
+                }
+                catch (error) {
+                    logger.error(`Error rendering layout: ${error}`);
+                    res.writeHead(500, { 'Content-Type': 'text/plain' });
+                    res.end(`Error rendering layout: ${error}`);
+                }
+            }
+            // Simplified hot reloading endpoint
+            else if (url.pathname === '/check-changes') {
+                const clientLastModified = url.searchParams.get('lastModified') || new Date(0).toISOString();
+                try {
+                    const layoutTemplatePath = (yield (0, definitions_1.loadLayoutFromFile)(configPath)).entry;
+                    // Check all relevant files for modifications
+                    const watchPaths = [
+                        configPath,
+                        layoutTemplatePath,
+                        ...Object.values(options.zoneContent).flat(),
+                        ...(options.stylesheet ? [options.stylesheet] : []),
+                    ];
+                    let hasChanges = false;
+                    let latestModified = clientLastModified;
+                    for (const filePath of watchPaths) {
+                        if ((0, fs_1.existsSync)(filePath)) {
+                            const stats = yield fs.stat(filePath);
+                            const fileModified = stats.mtime.toISOString();
+                            if (fileModified > clientLastModified) {
+                                hasChanges = true;
+                            }
+                            if (fileModified > latestModified) {
+                                latestModified = fileModified;
+                            }
+                        }
+                    }
+                    res.writeHead(200, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({
+                        hasChanges,
+                        lastModified: latestModified,
+                    }));
+                }
+                catch (error) {
+                    logger.error(`Error checking file changes: ${error}`);
+                    res.writeHead(500, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({
+                        error: `Error checking changes: ${error}`,
+                        hasChanges: false,
+                        lastModified: clientLastModified,
+                    }));
+                }
+            }
+            else {
+                // Redirect to the base path for any other routes
+                res.writeHead(302, {
+                    Location: '/',
+                });
+                res.end();
+            }
+        }));
+        server.listen(port, () => {
+            const url = `http://localhost:${port}/`;
+            logger.info(`Layout development server started at ${url}`);
+            if (openBrowser) {
+                (0, opener_1.default)(url);
+            }
+        });
+        process.on('SIGINT', () => {
+            logger.info('Shutting down server...');
+            server.close();
+        });
+    });
+}
+exports.startDevServer = startDevServer;

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

@@ -0,0 +1 @@
+export {};