inviton-powerduck 0.0.340 → 0.0.341

package/common/ladda-lite.ts

@@ -319,8 +319,8 @@ namespace laddaLiteUtils {
 			}
 		}
 
-		if (!retTarget.className.includes('ladda-button-root')) {
-			retTarget.className += ' ladda-button-root';
+		if (!retTarget.classList.contains('ladda-button-root')) {
+			retTarget.classList.add('ladda-button-root');
 		}
 
 		return retTarget;
@@ -368,58 +368,76 @@ namespace laddaLiteUtils {
 		spinner: any;
 	}
 
-	export const createLaddaInstance = (button: any) => {
-		if (!globalState.windowExists) {
-			return;
+	/**
+	 * Brings `button` to a known-good ladda state and returns its (cached)
+	 * instance, (re)creating only whatever is missing. Safe — and meant — to be
+	 * called on every spin.
+	 *
+	 * Why idempotent instead of "create once": the host <button> is usually owned
+	 * by a framework (Vue, here). When that framework re-renders the button it
+	 * overwrites `className` and can rebuild the button's children, which strips
+	 * the `ladda-*` classes (the spinner CSS is entirely scoped to `.ladda-button`)
+	 * and/or the `.ladda-label` / `.ladda-spinner` wrappers. The original
+	 * create-once code then reused a cached instance and never restored any of it,
+	 * so the spinner silently broke on the 2nd/3rd activation. Re-asserting the
+	 * full contract here (without double-wrapping) makes it self-healing.
+	 */
+	export const ensureLadda = (button: any): LaddaInstance | null => {
+		if (!globalState.windowExists || button == null) {
+			return null;
 		}
 
-		const laddaLabel = document.createElement('span');
-		laddaLabel.setAttribute('class', 'ladda-label');
-
-		// Wrap innerHTML into new element
-		const docRange = document.createRange();
-		docRange.selectNodeContents(button);
-		docRange.surroundContents(laddaLabel);
-		button.appendChild(laddaLabel);
+		// Re-assert classes/attrs every time (a framework re-render may have dropped them).
+		button.classList.add('ladda-button-root');
+		button.classList.add('ladda-button');
+		button.setAttribute('data-style', 'zoom-in');
 
-		// Append spinner placeholder
-		const laddaSpinner = document.createElement('span');
-		laddaSpinner.setAttribute('class', 'ladda-spinner');
-		button.appendChild(laddaSpinner);
-		button.className += ' ladda-button';
+		// Wrap the (framework-rendered) content into a single .ladda-label, exactly
+		// once. If a re-render removed it, re-wrap; if it survived, reuse it as-is so
+		// we never produce nested .ladda-label > .ladda-label.
+		let spinnerHost: HTMLElement = button.querySelector(':scope > .ladda-spinner');
+		let label: HTMLElement = button.querySelector(':scope > .ladda-label');
+		if (label == null) {
+			label = document.createElement('span');
+			label.setAttribute('class', 'ladda-label');
+			const content = Array.prototype.slice.call(button.childNodes).filter((n: any) => n !== spinnerHost);
+			content.forEach((n: any) => label.appendChild(n));
+			button.insertBefore(label, button.firstChild);
+		}
 
-		const newId = Math.floor(Math.random() * 999999999 + 1);
-		button.setAttribute('data-style', 'zoom-in');
-		button.setAttribute(ID_ATTRIBUTE, newId);
+		if (spinnerHost == null) {
+			spinnerHost = document.createElement('span');
+			spinnerHost.setAttribute('class', 'ladda-spinner');
+			button.appendChild(spinnerHost);
+		}
 
-		const laddaInstance = {
-			timer: <any>null,
-			spinner: createSpinner(button),
-		};
+		// Resolve (or (re)create) the cached spinner instance for this button.
+		let id = button.getAttribute(ID_ATTRIBUTE);
+		let laddaInstance: LaddaInstance = id != null ? instanceCache[id] : null;
+		if (laddaInstance == null) {
+			id = String(Math.floor(Math.random() * 999999999 + 1));
+			button.setAttribute(ID_ATTRIBUTE, id);
+			laddaInstance = {
+				timer: <any>null,
+				spinner: createSpinner(button),
+			};
+			instanceCache[id] = laddaInstance;
+		}
 
-		instanceCache[newId] = laddaInstance;
 		return laddaInstance;
 	};
 }
 
 export class LaddaLite {
 	static showSpin(target: HTMLElement): void {
-		if (target == null) {
-			return;
-		}
-
-		if (!globalState.windowExists) {
+		if (target == null || !globalState.windowExists) {
 			return;
 		}
 
-		let laddaInstance;
 		const button = laddaLiteUtils.getTarget(target);
-		const instanceId = laddaLiteUtils.getInstanceId(button);
-
-		if (instanceId == null || button.querySelector('.ladda-spinner') == null) {
-			laddaInstance = laddaLiteUtils.createLaddaInstance(button);
-		} else {
-			laddaInstance = laddaLiteUtils.instanceCache[instanceId];
+		const laddaInstance = laddaLiteUtils.ensureLadda(button);
+		if (laddaInstance == null) {
+			return;
 		}
 
 		clearTimeout(laddaInstance.timer);
@@ -429,20 +447,21 @@ export class LaddaLite {
 	}
 
 	static hideSpin(target: HTMLElement): void {
-		if (target == null) {
-			return;
-		}
-
-		if (!globalState.windowExists) {
+		if (target == null || !globalState.windowExists) {
 			return;
 		}
 
 		const button = laddaLiteUtils.getTarget(target);
 		const instanceId = laddaLiteUtils.getInstanceId(button);
-		const laddaInstance = laddaLiteUtils.instanceCache[instanceId];
-		if (laddaInstance != null && instanceId != null) {
-			button.disabled = false;
-			button.removeAttribute('data-loading');
+		const laddaInstance = instanceId != null ? laddaLiteUtils.instanceCache[instanceId] : null;
+
+		// Always re-enable and clear the loading flag, even if the cached instance
+		// was lost (e.g. the framework replaced the button element) — never strand a
+		// disabled button.
+		button.disabled = false;
+		button.removeAttribute('data-loading');
+
+		if (laddaInstance != null) {
 			laddaInstance.timer = setTimeout(() => {
 				laddaInstance.spinner.stop();
 			}, 1000);

package/components/button/ladda-button.tsx

@@ -26,35 +26,64 @@ class LaddaButtonComponent extends TsxComponent<LaddaButtonArgs> implements Ladd
 	@Prop() loading!: boolean;
 	@Prop() clicked: (e: any) => Promise<any>;
 
+	// Whether the spinner should currently be showing. Tracked so `updated()` can
+	// restore the ladda DOM after a Vue re-render strips it (Ladda mutates this
+	// Vue-owned <button> out-of-band, so any patch can wipe its classes/wrappers).
+	private _spinning: boolean = false;
+
 	@Watch('loading')
 	onLoadingChanged(val: boolean) {
 		if (val) {
-			LaddaLite.showSpin(this.$el as HTMLElement);
+			this.spin(this.$el as HTMLElement);
 		} else {
-			LaddaLite.hideSpin(this.$el as HTMLElement);
+			this.unspin(this.$el as HTMLElement);
 		}
 	}
 
 	mounted() {
 		if (this.loading) {
-			LaddaLite.showSpin(this.$el as HTMLElement);
+			this.spin(this.$el as HTMLElement);
+		}
+	}
+
+	updated() {
+		// Vue just patched this button. If we're mid-spin and the patch stripped
+		// ladda's class or spinner wrapper, re-assert it (ensureLadda is idempotent,
+		// so this is a no-op when nothing was lost).
+		if (!this._spinning) {
+			return;
+		}
+
+		const el = this.$el as HTMLElement;
+		if (!el.classList.contains('ladda-button') || el.querySelector('.ladda-spinner') == null) {
+			LaddaLite.showSpin(el);
 		}
 	}
 
+	private spin(target: HTMLElement) {
+		this._spinning = true;
+		LaddaLite.showSpin(target);
+	}
+
+	private unspin(target: HTMLElement) {
+		this._spinning = false;
+		LaddaLite.hideSpin(target);
+	}
+
 	handleButtonClicked(e) {
 		let targetElem = e.target as HTMLElement;
 		if (targetElem.nodeName.toLowerCase() != 'button') {
 			targetElem = targetElem.closest('button') as HTMLElement;
 		}
 
-		LaddaLite.showSpin(targetElem);
+		this.spin(targetElem);
 
 		this.clicked(e)
 			.then(() => {
-				LaddaLite.hideSpin(targetElem);
+				this.unspin(targetElem);
 			})
 			.catch(() => {
-				LaddaLite.hideSpin(targetElem);
+				this.unspin(targetElem);
 			});
 	}
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.340",
+	"version": "0.0.341",
 	"files": [
 		"app/",
 		"common/",