npm - hotstaq - Versions diffs - 0.9.21 → 0.9.23 - Mend

hotstaq 0.9.21 → 0.9.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/build/src/HotStaq.d.ts +61 -2
package/build/src/HotStaq.d.ts.map +1 -1
package/build/src/HotStaq.js +163 -75
package/build/src/HotStaq.js.map +1 -1
package/build/src/HotStaqRegisterComponent.d.ts.map +1 -1
package/build/src/HotStaqRegisterComponent.js +9 -0
package/build/src/HotStaqRegisterComponent.js.map +1 -1
package/build/tsconfig.tsbuildinfo +1 -1
package/build-web/HotStaq.js +2 -2
package/build-web/HotStaq.min.js +262 -262
package/package.json +1 -1
package/src/HotStaq.ts +207 -109
package/src/HotStaqRegisterComponent.ts +11 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "hotstaq",
-  "version": "0.9.21",
+  "version": "0.9.23",
   "description": "A friendly web framework that fits nicely into devops and CI/CD pipelines.",
   "bin": {
     "hotstaq": "./bin/hotstaq"

package/src/HotStaq.ts CHANGED Viewed

@@ -238,7 +238,7 @@ export class HotStaq implements IHotStaq
 	/**
 	 * The current version of HotStaq.
 	 */
-	static version: string = "0.9.21";
+	static version: string = "0.9.23";
 	/**
 	 * Indicates if this is a web build.
 	 */
@@ -297,9 +297,23 @@ export class HotStaq implements IHotStaq
 	 */
 	static onBeforeNavigate: (path: string) => boolean | Promise<boolean> = null;
 	/**
-	 * Event fired after SPA navigation completes.
+	 * Event fired after an SPA navigation has rendered the new content,
+	 * but before HotStaq executes that content's inline <script> tags.
+	 *
+	 * Return `false` to take ownership of running those scripts yourself —
+	 * HotStaq will then skip its own execution pass. Returning `true`,
+	 * `undefined`, or having no handler at all lets HotStaq execute them
+	 * (the default), which is what makes inline page scripts run on SPA
+	 * navigation. See `onAfterUseOutput` for the full-render equivalent.
+	 */
+	static onAfterNavigate: (path: string) => void | boolean | Promise<void | boolean> = null;
+	/**
+	 * Event fired after `useOutput` has rendered a full document, but before
+	 * HotStaq executes that document's inline <script> tags. Same return-value
+	 * gate as `onAfterNavigate`: return `false` to run the scripts yourself;
+	 * otherwise HotStaq executes them.
 	 */
-	static onAfterNavigate: (path: string) => void | Promise<void> = null;
+	static onAfterUseOutput: (output: string) => void | boolean | Promise<void | boolean> = null;
 	/**
 	 * Override the framework's default 404 rendering.
 	 *
@@ -763,9 +777,7 @@ export class HotStaq implements IHotStaq
 				HotStaq.baseValidator (options, key, validation, value, 100);
-				const uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/;
-				if (uuidRegex.test (value) === false)
+				if (HotStaq.isUUID (value) === false)
 					throw new HttpError(`UUID parameter '${key}' must be a valid UUID.`, 400);
 				return ({ value: value });
@@ -1083,6 +1095,82 @@ export class HotStaq implements IHotStaq
 		return (false);
 	}
+	/**
+	 * Check whether a value is a valid RFC-4122 UUID (versions 1-5).
+	 *
+	 * This is the same strict check the `UUID` validator enforces, exposed as
+	 * a reusable boolean helper so client code can validate ids (e.g. a
+	 * `?id=` URL parameter) without catching the validator's thrown HttpError.
+	 */
+	static isUUID (value: any): boolean
+	{
+		if (typeof (value) !== "string")
+			return (false);
+		return (HotStaq.uuidRegex.test (value));
+	}
+	/**
+	 * The strict RFC-4122 (versions 1-5) UUID pattern shared by `isUUID` and
+	 * the `UUID` validator.
+	 */
+	static uuidRegex: RegExp = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/;
+	/**
+	 * Remove elements already in the document that share an id with `subtree`
+	 * (or any of its descendants).
+	 *
+	 * A component placed via `documentSelector` lands OUTSIDE its own <tag> —
+	 * e.g. <admin-edit> appends its modal to <body>. On SPA navigation the
+	 * <tag> upgrades again and appends a SECOND copy with the same id, leaving
+	 * a stale orphan that id-based lookups (document.getElementById,
+	 * querySelector('#id'), bootstrap.Modal.getInstance('#id')) resolve to
+	 * instead of the live one. Call this with the incoming subtree BEFORE it is
+	 * inserted so only the fresh copy survives.
+	 *
+	 * `subtree` is expected to still be detached at call time; the contains()
+	 * guard keeps it (and anything inside it) safe regardless.
+	 */
+	static removeStaleDuplicateIds (subtree: HTMLElement): void
+	{
+		if ((subtree == null) || (typeof (document) === "undefined"))
+			return;
+		let ids: string[] = [];
+		if ((subtree.id != null) && (subtree.id !== ""))
+			ids.push (subtree.id);
+		let descendants: NodeListOf<Element> = subtree.querySelectorAll ("[id]");
+		for (let iIdx = 0; iIdx < descendants.length; iIdx++)
+		{
+			let id: string = descendants[iIdx].getAttribute ("id");
+			if ((id != null) && (id !== ""))
+				ids.push (id);
+		}
+		for (let iIdx = 0; iIdx < ids.length; iIdx++)
+		{
+			let id: string = ids[iIdx];
+			// getElementById returns the first match in document order; loop so
+			// multiple accumulated orphans all get cleared. The guard bounds it.
+			let guard: number = 0;
+			let existing: HTMLElement = document.getElementById (id);
+			while ((existing != null) && (existing !== subtree) &&
+				(subtree.contains (existing) === false) && (guard < 100))
+			{
+				if (existing.parentNode != null)
+					existing.parentNode.removeChild (existing);
+				existing = document.getElementById (id);
+				guard++;
+			}
+		}
+	}
 	/**
 	 * Sanitize an HTML string.
 	 */
@@ -2848,72 +2936,98 @@ export class HotStaq implements IHotStaq
 	}
 	/**
-	 * Replace the current HTML page with the output.
-	 * This is meant for web browser use only.
+	 * Execute the <script> elements found within `root`.
+	 *
+	 * A <script> inserted into the DOM via `innerHTML` is inert — the HTML
+	 * spec only runs a script when it is *inserted into the document with
+	 * its content already present*. So after we swap new markup in (full
+	 * render or SPA partial swap), its inline scripts never ran. For each
+	 * not-yet-executed <script>, build a fresh element, copy `type`/`src`
+	 * and — for inline scripts — set `.text` BEFORE insertion, then swap it
+	 * in so the browser runs it.
+	 *
+	 * Each executed script is tagged `data-hotstaq-executed` and skipped on
+	 * any later pass, so calling this twice (or alongside an app that runs
+	 * some scripts itself) never double-fires one.
 	 */
-	static async useOutput (output: string): Promise<void>
+	protected static async executeInlineScripts (root: Document | HTMLElement): Promise<void>
 	{
-		if (HotStaq.onOutputReceived != null)
-			HotStaq.onOutputReceived (output);
+		let tmpScripts = root.getElementsByTagName ("script");
-		let parser = new DOMParser ();
-		let child = parser.parseFromString (output, "text/html");
-		let htmlObj: HTMLHtmlElement = document.getElementsByTagName('html')[0];
+		if (tmpScripts.length < 1)
+			return;
-		htmlObj.innerHTML = child.getElementsByTagName('html')[0].innerHTML;
+		// Snapshot first — the loop mutates the DOM while iterating.
+		let scripts: HTMLScriptElement[] = [];
-		// Thanks to newfurniturey at:
-		// https://stackoverflow.com/questions/22945884/domparser-appending-script-tags-to-head-body-but-not-executing
-		let tmpScripts = document.getElementsByTagName('script');
-		if (tmpScripts.length > 0) {
-			// push all of the document's script tags into an array
-			// (to prevent dom manipulation while iterating over dom nodes)
-			let scripts: HTMLScriptElement[] = [];
-			for (let i = 0; i < tmpScripts.length; i++) {
-				scripts.push(tmpScripts[i]);
-			}
+		for (let i = 0; i < tmpScripts.length; i++)
+			scripts.push (tmpScripts[i]);
-			// iterate over all script tags and create duplicate tags for each
-			for (let i = 0; i < scripts.length; i++) {
-				let s: HTMLScriptElement = document.createElement('script');
+		for (let i = 0; i < scripts.length; i++)
+		{
+			let orig: HTMLScriptElement = scripts[i];
-				// add the new node to the page
-				scripts[i].parentNode.appendChild(s);
+			if (orig.getAttribute ("data-hotstaq-executed") != null)
+				continue;
-				// remove the original (non-executing) node from the page
-				scripts[i].parentNode.removeChild(scripts[i]);
+			let src: string = orig.getAttribute ("src");
+			let hasSrc: boolean = (src != null) && (src !== "");
+			let content: string = orig.textContent || "";
-				await new Promise<void> ((resolve2, reject2) =>
-					{
-						s.onload = () =>
-							{
-								resolve2 ();
-							};
+			// Nothing to run — just mark it so we don't revisit it.
+			if ((hasSrc === false) && (content === ""))
+			{
+				orig.setAttribute ("data-hotstaq-executed", "1");
-						let hasSrc: boolean = false;
+				continue;
+			}
-						if (scripts[i].getAttribute ("src") != null)
-						{
-							if (scripts[i].getAttribute ("src") !== "")
-							{
-								s.setAttribute ("src", scripts[i].getAttribute ("src"));
-								hasSrc = true;
-							}
-						}
+			let s: HTMLScriptElement = document.createElement ("script");
+			let type: string = orig.getAttribute ("type");
-						if (scripts[i].getAttribute ("type") != null)
-						{
-							if (scripts[i].getAttribute ("type") !== "")
-								s.setAttribute ("type", scripts[i].getAttribute ("type"));
-						}
+			if ((type != null) && (type !== ""))
+				s.setAttribute ("type", type);
-						s.innerHTML = scripts[i].innerHTML;
+			if (hasSrc === true)
+				s.setAttribute ("src", src);
+			else
+				// MUST be set before insertion, otherwise the script is inert.
+				s.text = content;
-						if (hasSrc === false)
-							resolve2 ();
-					});
-			}
+			s.setAttribute ("data-hotstaq-executed", "1");
+			await new Promise<void> ((resolve2, reject2) =>
+				{
+					s.onload  = () => { resolve2 (); };
+					s.onerror = () => { resolve2 (); };
+					if (orig.parentNode != null)
+						orig.parentNode.replaceChild (s, orig);
+					else
+						document.head.appendChild (s);
+					// Inline scripts execute synchronously on insertion; only
+					// src scripts need to wait for onload.
+					if (hasSrc === false)
+						resolve2 ();
+				});
 		}
+	}
+	/**
+	 * Replace the current HTML page with the output.
+	 * This is meant for web browser use only.
+	 */
+	static async useOutput (output: string): Promise<void>
+	{
+		if (HotStaq.onOutputReceived != null)
+			HotStaq.onOutputReceived (output);
+		let parser = new DOMParser ();
+		let child = parser.parseFromString (output, "text/html");
+		let htmlObj: HTMLHtmlElement = document.getElementsByTagName('html')[0];
+		htmlObj.innerHTML = child.getElementsByTagName('html')[0].innerHTML;
 		if (HotStaq.dispatchReadyEvents === true)
 		{
@@ -2923,6 +3037,27 @@ export class HotStaq implements IHotStaq
 		if (HotStaq.onReadyEvent != null)
 			HotStaq.onReadyEvent (output);
+		// Run the rendered document's inline scripts last — and let the app
+		// gate it. onAfterUseOutput returning false means the app will run
+		// them itself, so HotStaq stands down. Otherwise HotStaq executes
+		// them (the default), which is what makes inline scripts in a
+		// useOutput-rendered page actually run.
+		let runScripts: boolean = true;
+		if (HotStaq.onAfterUseOutput != null)
+		{
+			let result: any = HotStaq.onAfterUseOutput (output);
+			if (result instanceof Promise)
+				result = await result;
+			if (result === false)
+				runScripts = false;
+		}
+		if (runScripts === true)
+			await HotStaq.executeInlineScripts (document);
 	}
 	/**
@@ -3091,55 +3226,6 @@ export class HotStaq implements IHotStaq
 		// Replace only the target content.
 		targetEl.innerHTML = contentHTML;
-		// Execute any script tags that were in the new content.
-		let tmpScripts = targetEl.getElementsByTagName ('script');
-		if (tmpScripts.length > 0)
-		{
-			let scripts: HTMLScriptElement[] = [];
-			for (let i = 0; i < tmpScripts.length; i++)
-				scripts.push (tmpScripts[i]);
-			for (let i = 0; i < scripts.length; i++)
-			{
-				let s: HTMLScriptElement = document.createElement ('script');
-				scripts[i].parentNode.appendChild (s);
-				scripts[i].parentNode.removeChild (scripts[i]);
-				await new Promise<void> ((resolve2, reject2) =>
-					{
-						s.onload = () =>
-							{
-								resolve2 ();
-							};
-						let hasSrc: boolean = false;
-						if (scripts[i].getAttribute ("src") != null)
-						{
-							if (scripts[i].getAttribute ("src") !== "")
-							{
-								s.setAttribute ("src", scripts[i].getAttribute ("src"));
-								hasSrc = true;
-							}
-						}
-						if (scripts[i].getAttribute ("type") != null)
-						{
-							if (scripts[i].getAttribute ("type") !== "")
-								s.setAttribute ("type", scripts[i].getAttribute ("type"));
-						}
-						s.innerHTML = scripts[i].innerHTML;
-						if (hasSrc === false)
-							resolve2 ();
-					});
-			}
-		}
 		if (HotStaq.dispatchReadyEvents === true)
 		{
 			document.dispatchEvent (new Event ("DOMContentLoaded"));
@@ -3149,14 +3235,26 @@ export class HotStaq implements IHotStaq
 		if (HotStaq.onReadyEvent != null)
 			HotStaq.onReadyEvent (output);
-		// Fire onAfterNavigate hook.
+		// Fire onAfterNavigate hook, then execute the new content's inline
+		// scripts — unless the hook returned false, in which case the app is
+		// running them itself and HotStaq stands down. Running them after the
+		// hook lets the app prep the DOM first; running them at all is the
+		// fix for inline page scripts silently failing on SPA navigation.
+		let runScripts: boolean = true;
 		if (HotStaq.onAfterNavigate != null)
 		{
-			let result = HotStaq.onAfterNavigate (path);
+			let result: any = HotStaq.onAfterNavigate (path);
 			if (result instanceof Promise)
-				await result;
+				result = await result;
+			if (result === false)
+				runScripts = false;
 		}
+		if (runScripts === true)
+			await HotStaq.executeInlineScripts (targetEl);
 	}
 	/**

package/src/HotStaqRegisterComponent.ts CHANGED Viewed

@@ -296,7 +296,17 @@ export function registerComponent (tag: string, elementOptions: ElementDefinitio
 						if (parentNode == null)
 							throw new Error (`Unable to find document node with selector '${output.documentSelector}'`);
+						// Placing via documentSelector lands this element OUTSIDE
+						// its own <tag> (e.g. admin-edit appends its modal to
+						// <body>). On SPA navigation the tag upgrades again and
+						// would leave the previous copy behind as a duplicate-id
+						// orphan that id lookups resolve to instead of this fresh
+						// one — the root cause of stale-modal bugs that pages
+						// otherwise work around by rebinding. Clear the orphans
+						// before placing the new copy.
+						HotStaq.removeStaleDuplicateIds (compHtmlElement2);
 						compHtmlElement2.parentElement.removeChild (compHtmlElement2);
 						parentNode.appendChild (compHtmlElement2);