htmx-router 0.0.6 → 0.0.8

package/bin/render-args.d.ts

@@ -12,6 +12,7 @@ export declare enum MaskType {
 export declare class RenderArgs {
     req: http.IncomingMessage;
     res: http.ServerResponse;
+    title: string;
     params: MetaHTML;
     url: URL;
     shared: {
@@ -23,11 +24,12 @@ export declare class RenderArgs {
     _maskChain: MaskType[];
     _maxChain: number;
     constructor(req: http.IncomingMessage, res: http.ServerResponse, url: URL);
-    addLinks(links: MetaHTML[], override?: boolean): void;
-    addMeta(links: MetaHTML[], override?: boolean): void;
+    setTitle: (value: string) => void;
+    addLinks: (links: MetaHTML[], override?: boolean) => void;
+    addMeta: (links: MetaHTML[], override?: boolean) => void;
     Outlet: () => Promise<string>;
     _addOutlet(route: RouteLeaf): void;
     _applyMask(mask: boolean[], depth: number): void;
-    renderHeadHTML(): string;
+    renderHeadHTML: () => string;
 }
 export {};

package/bin/render-args.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderArgs = exports.MaskType = void 0;
+const titleScript = `<script>` +
+    `document.addEventListener("DOMContentLoaded",function(){` +
+    `document.body.addEventListener("setTitle",function(evt){document.title = evt.detail.value;})` +
+    `});` +
+    `</script>`;
 const attrRegex = /^[A-z][A-z\-0-9]+$/;
 function ValidateMetaHTML(val) {
     for (const key in val) {
@@ -24,6 +29,29 @@ var MaskType;
 })(MaskType || (exports.MaskType = MaskType = {}));
 class RenderArgs {
     constructor(req, res, url) {
+        this.setTitle = (value) => {
+            this.title = value;
+        };
+        this.addLinks = (links, override = false) => {
+            if (!ValidateMetaHTMLs(links))
+                throw new Error(`Provided links have invalid attribute`);
+            if (override) {
+                this.links = links;
+            }
+            else {
+                this.links.push(...links);
+            }
+        };
+        this.addMeta = (links, override = false) => {
+            if (!ValidateMetaHTMLs(links))
+                throw new Error(`Provided links have invalid attribute`);
+            if (override) {
+                this.meta = links;
+            }
+            else {
+                this.meta.push(...links);
+            }
+        };
         // unpacking Outlet caused this to be undefined
         // 	hence the weird def
         this.Outlet = () => {
@@ -38,10 +66,29 @@ class RenderArgs {
             const routeName = `hx-route-${depth.toString(16)}`;
             return route.render(this, mask, routeName);
         };
+        this.renderHeadHTML = () => {
+            let out = "";
+            for (const elm of this.links) {
+                out += "<link";
+                for (const attr in elm) {
+                    out += ` ${attr}="${elm[attr].replace(/"/g, "\\\"")}"`;
+                }
+                out += "></link>";
+            }
+            for (const elm of this.meta) {
+                out += "<meta";
+                for (const attr in elm) {
+                    out += ` ${attr}="${elm[attr].replace(/"/g, "\\\"")}"`;
+                }
+                out += "></meta>";
+            }
+            return out + titleScript;
+        };
         this.req = req;
         this.res = res;
         this.url = url;
         this.params = {};
+        this.title = "";
         this.shared = {};
         this.links = [];
         this.meta = [];
@@ -49,32 +96,14 @@ class RenderArgs {
         this._maskChain = [];
         this._maxChain = 0;
     }
-    addLinks(links, override = false) {
-        if (!ValidateMetaHTMLs(links))
-            throw new Error(`Provided links have invalid attribute`);
-        if (override) {
-            this.links = links;
-        }
-        else {
-            this.links.push(...links);
-        }
-    }
-    addMeta(links, override = false) {
-        if (!ValidateMetaHTMLs(links))
-            throw new Error(`Provided links have invalid attribute`);
-        if (override) {
-            this.meta = links;
-        }
-        else {
-            this.meta.push(...links);
-        }
-    }
     _addOutlet(route) {
         this._outletChain.push(route);
     }
     _applyMask(mask, depth) {
         const padded = new Array(this._outletChain.length - mask.length).fill(false);
-        padded.push(...mask);
+        for (let i = mask.length - 1; i >= 0; i--) {
+            padded.push(mask[i]);
+        }
         this._maskChain = padded
             .map((x, i) => x === true ?
             MaskType.hide :
@@ -83,23 +112,5 @@ class RenderArgs {
                 MaskType.headless);
         this._maxChain = this._maskChain.length;
     }
-    renderHeadHTML() {
-        let out = "";
-        for (const elm of this.links) {
-            out += "<link";
-            for (const attr in elm) {
-                out += ` ${attr}="${elm[attr].replace(/"/g, "\\\"")}"`;
-            }
-            out += "></link>";
-        }
-        for (const elm of this.meta) {
-            out += "<meta";
-            for (const attr in elm) {
-                out += ` ${attr}="${elm[attr].replace(/"/g, "\\\"")}"`;
-            }
-            out += "></meta>";
-        }
-        return out;
-    }
 }
 exports.RenderArgs = RenderArgs;

package/bin/router.js

@@ -95,10 +95,12 @@ class RouteTree {
             path = path.split(/[\./\\]/g);
         }
         if (path.length === 0) {
+            override.push(false);
             this.route = new RouteLeaf(module, override);
             return;
         }
         if (path.length === 1 && path[0] === "_index") {
+            override.push(false);
             this.default = new RouteLeaf(module, override);
             return;
         }
@@ -165,13 +167,27 @@ class RouteTree {
         try {
             const depth = BuildOutlet(this, args, from);
             if (from) {
-                res.setHeader('HX-Replace-Url', req.url || "/");
+                res.setHeader('HX-Push-Url', req.url || "/");
                 if (depth > 0) {
                     res.setHeader('HX-Retarget', `#hx-route-${depth.toString(16)}`);
                 }
                 res.setHeader('HX-Reswap', "outerHTML");
             }
-            return await args.Outlet();
+            const out = await args.Outlet();
+            if (args.title) {
+                const trigger = res.getHeader('HX-Trigger');
+                const entry = `{"setTitle":"${args.title.replace(/"/g, `\\"`)}"}`;
+                if (Array.isArray(trigger)) {
+                    res.setHeader('HX-Trigger', [...trigger, entry]);
+                }
+                else if (trigger) {
+                    res.setHeader('HX-Trigger', [trigger.toString(), entry]);
+                }
+                else {
+                    res.setHeader('HX-Trigger', [entry]);
+                }
+            }
+            return out;
         }
         catch (e) {
             if (e instanceof shared_1.Redirect)
@@ -255,7 +271,7 @@ function BuildOutlet(start, args, fromPath) {
         }
     }
     if (matching) {
-        depth = args._outletChain.length;
+        depth = args._outletChain.length - 1;
     }
     args._applyMask(mask, depth);
     return depth;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "htmx-router",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"description": "A remix.js style file path router for htmX websites",
 	"main": "./bin/index.js",
 	"scripts": {