@jinntec/fore 3.3.2 → 4.0.0

package/src/UndoManager.js

@@ -0,0 +1,267 @@
+/**
+ * UndoManager - snapshot-based undo/redo for the instance data of one model.
+ *
+ * Off by default - a no-op until enabled (see the `undo` attribute on `<fx-model>` in
+ * fx-model.js), so forms that don't use it pay no cloning cost on every mutation.
+ *
+ * One instance lives on each `fx-model` as `model.undoManager`. Snapshots are captured
+ * around each outermost action chain (see `AbstractAction.execute()` / `_finalizePerform()`):
+ * `beginCapture()` clones the current instance data before the chain runs, and either
+ * `commit()` or `commitCoalesced()` pushes that clone onto the undo stack once the chain has
+ * actually mutated something. Chains that end without a mutation are dropped via `discard()`.
+ *
+ * A snapshot holds one entry per snapshotable instance (`type` 'xml' or 'json'), keyed by
+ * the `fx-instance` element itself. Keying by element (instead of id) also covers instances
+ * without an explicit id, which are not addressable through `model.getInstance()`.
+ *
+ * Two commit paths, deliberately different:
+ * - `commit()` - action-driven mutations (fx-setvalue, fx-insert, fx-delete, fx-reset,
+ *   fx-upload, drag-and-drop...). Each action chain is already a complete, deliberate
+ *   operation, so it always becomes its own undo step - clicking a "+1" button three times
+ *   undoes in three steps, not one.
+ * - `commitCoalesced()` - direct widget edits (typing into fx-control) while the widget is
+ *   genuinely focused. Merges into the currently open session until something closes it
+ *   (blur, or the explicit `<fx-commit-history>` action) - bounded by focus, not by a timer,
+ *   so it behaves the same whether typing takes one second or one minute.
+ */
+export class UndoManager {
+  /**
+   * @param {import('./fx-model.js').FxModel} model the model whose instances are managed
+   */
+  constructor(model) {
+    this.model = model;
+    /** master switch - set from the `undo` attribute on `<fx-model>`, off by default */
+    this.enabled = false;
+    this.maxDepth = 50;
+    this.undoStack = [];
+    this.redoStack = [];
+    this.pendingSnapshot = null;
+    /**
+     * While true, the next commit()/commitCoalesced()/discard() is swallowed without
+     * touching the stacks. Set by fx-undo/fx-redo so restoring a snapshot does not record
+     * itself as a new step.
+     */
+    this.suspended = false;
+    /**
+     * The currently open widget-edit coalescing session, if any: `{ key }`. Only one widget
+     * can be focused at a time, so a single slot is sufficient.
+     */
+    this.openSession = null;
+  }
+
+  /**
+   * Captures the current state of all instances. Called at the start of an outermost
+   * action chain. Unconditionally overwrites any stale pending snapshot - the `delay`
+   * path in `AbstractAction.execute()` can bail out without ever finalizing.
+   * No-op (no cloning) unless `enabled`.
+   */
+  beginCapture() {
+    if (!this.enabled) return;
+    this.pendingSnapshot = this._snapshot();
+  }
+
+  /**
+   * Turns the pending snapshot into its own, always-distinct undo step. Called at the end
+   * of an outermost action chain that mutated instance data - never coalesces, since an
+   * action chain is already a complete, deliberate operation.
+   *
+   * @param {*} touchedNode best-effort identification of the node the chain touched, used
+   *        only for the outside-scope diagnostic below, not for merging
+   */
+  commit(touchedNode) {
+    if (!this.enabled) {
+      this.suspended = false;
+      this.pendingSnapshot = null;
+      return;
+    }
+    if (this.suspended) {
+      this.suspended = false;
+      this.pendingSnapshot = null;
+      return;
+    }
+    if (!this.pendingSnapshot) return;
+
+    this._warnIfOutsideScope(touchedNode);
+
+    // a discrete, action-driven commit finalizes any in-progress widget-edit session too
+    // (belt-and-suspenders alongside fx-control's own blur handler)
+    this.openSession = null;
+
+    this.undoStack.push(this.pendingSnapshot);
+    while (this.undoStack.length > this.maxDepth) {
+      this.undoStack.shift();
+    }
+
+    this.redoStack = [];
+    this.pendingSnapshot = null;
+  }
+
+  /**
+   * Turns the pending snapshot into an undo step, merging into the currently open session
+   * if `sessionKey` matches it. Used only for direct widget edits while the widget is
+   * genuinely focused (see fx-control.js) - the session stands in for "the user is still
+   * editing this field," bounded by focus/blur rather than a fixed time window.
+   *
+   * @param {*} sessionKey identifies the node being edited; commits with the same key while
+   *        the session is open merge into the same undo step
+   */
+  commitCoalesced(sessionKey) {
+    if (!this.enabled) {
+      this.suspended = false;
+      this.pendingSnapshot = null;
+      return;
+    }
+    if (this.suspended) {
+      this.suspended = false;
+      this.pendingSnapshot = null;
+      return;
+    }
+    if (!this.pendingSnapshot) return;
+
+    this._warnIfOutsideScope(sessionKey);
+
+    if (this.openSession && this.openSession.key === sessionKey) {
+      // merging into the open session - its earlier snapshot already covers this edit
+      this.redoStack = [];
+      this.pendingSnapshot = null;
+      return;
+    }
+
+    this.undoStack.push(this.pendingSnapshot);
+    while (this.undoStack.length > this.maxDepth) {
+      this.undoStack.shift();
+    }
+
+    this.redoStack = [];
+    this.pendingSnapshot = null;
+    this.openSession = { key: sessionKey };
+  }
+
+  /**
+   * Closes the open coalescing session, if any. Called from fx-control.js on blur (no key -
+   * only one widget can be focused, so closing unconditionally is safe) and from the
+   * explicit `<fx-commit-history>` action, so the next edit - even to a still-focused field -
+   * starts a new undo step instead of merging into the current one.
+   *
+   * @param {*} [sessionKey] if given, only closes the session when it matches
+   */
+  endCoalescingSession(sessionKey) {
+    if (!this.openSession) return;
+    if (sessionKey === undefined || this.openSession.key === sessionKey) {
+      this.openSession = null;
+    }
+  }
+
+  /**
+   * Best-effort, one-time diagnostic for the "mixed" case that `FxModel.getEffectiveUndoManager()`
+   * does NOT handle: a model that owns some instances of its own but also mutates a shared
+   * instance belonging to some other model. `getEffectiveUndoManager()` only redirects when a
+   * model owns NO instances at all - a model with a mix keeps its own manager, so an edit to
+   * an instance outside that model's own set is recorded in a snapshot that never actually
+   * contained it, i.e. it looks tracked but silently isn't.
+   *
+   * Only checkable for XML DOM nodes (via `ownerDocument`); JSON lenses and string/ref
+   * keys are skipped rather than risk a false positive.
+   */
+  _warnIfOutsideScope(touchedNode) {
+    if (this._warnedOutsideScope) return;
+    if (!touchedNode || !touchedNode.ownerDocument) return;
+    const owningDoc = touchedNode.ownerDocument;
+    const known = this.model.instances.some(
+      instance => instance.type === 'xml' && instance.instanceData === owningDoc,
+    );
+    if (!known) {
+      this._warnedOutsideScope = true;
+      console.warn(
+        "undo: an edit touched an instance outside this model's own scope (and outside " +
+          'any ancestor delegation - see FxModel.getEffectiveUndoManager()) and may not be ' +
+          'undoable. See doc/shared-instance-refresh-investigation.md.',
+      );
+    }
+  }
+
+  /**
+   * Drops the pending snapshot. Called when an action chain ends without mutating anything.
+   */
+  discard() {
+    this.suspended = false;
+    this.pendingSnapshot = null;
+  }
+
+  /**
+   * Restores the most recent undo snapshot. The state being left is pushed onto the redo
+   * stack first.
+   *
+   * @returns {boolean} true if a snapshot was restored
+   */
+  undo() {
+    if (!this.enabled) return false;
+    return this._shift(this.undoStack, this.redoStack);
+  }
+
+  /**
+   * Re-applies the most recently undone snapshot.
+   *
+   * @returns {boolean} true if a snapshot was restored
+   */
+  redo() {
+    if (!this.enabled) return false;
+    return this._shift(this.redoStack, this.undoStack);
+  }
+
+  canUndo() {
+    return this.undoStack.length !== 0;
+  }
+
+  canRedo() {
+    return this.redoStack.length !== 0;
+  }
+
+  clear() {
+    this.undoStack = [];
+    this.redoStack = [];
+    this.pendingSnapshot = null;
+    this.suspended = false;
+    this.openSession = null;
+  }
+
+  _shift(from, to) {
+    if (from.length === 0) return false;
+    to.push(this._snapshot());
+    // popped entry is exclusively owned now - safe to hand its data to the instances directly
+    this._restore(from.pop());
+    // never coalesce across an undo/redo boundary
+    this.openSession = null;
+    return true;
+  }
+
+  /**
+   * @returns {Array<{instance: import('./fx-instance.js').FxInstance, data: *}>}
+   */
+  _snapshot() {
+    const entries = [];
+    this.model.instances.forEach(instance => {
+      const data = instance.instanceData;
+      if (!data) return;
+      if (instance.type === 'xml') {
+        entries.push({ instance, data: data.cloneNode(true) });
+      } else if (instance.type === 'json') {
+        entries.push({ instance, data: structuredClone(data) });
+      }
+      // other types ('html', 'text') are not snapshotable
+    });
+    return entries;
+  }
+
+  _restore(entries) {
+    entries.forEach(({ instance, data }) => {
+      if (!this.model.instances.includes(instance)) return;
+      // the instanceData setter routes through _setInitialData which would overwrite
+      // originalInstance - keep it pointing at the load-time template so fx-reset
+      // semantics survive undo/redo
+      const original = instance.originalInstance;
+      instance.instanceData = data;
+      instance.originalInstance = original;
+    });
+  }
+}

package/src/actions/abstract-action.js

@@ -325,7 +325,12 @@ export class AbstractAction extends ForeElementMixin {
     }
 
     // Outermost handling
-    if (FxFore.outermostHandler === null) {
+    // NOTE: kept as a local variable, not `this._acquiredOutermost` - action elements are
+    // singletons reused across clicks, so two overlapping execute() calls on the same
+    // element (rapid double-click) would otherwise clobber each other's flag and strand
+    // FxFore.outermostHandler or skip the undo commit in _finalizePerform().
+    const acquiredOutermost = FxFore.outermostHandler === null;
+    if (acquiredOutermost) {
       const ownerForm = this.getOwnerFormSafe();
 
       console.log(
@@ -335,6 +340,7 @@ export class AbstractAction extends ForeElementMixin {
       );
 
       FxFore.outermostHandler = this;
+      this.getModel()?.getEffectiveUndoManager()?.beginCapture();
       this.dispatchEvent(
         new CustomEvent('outermost-action-start', {
           composed: true,
@@ -364,20 +370,20 @@ export class AbstractAction extends ForeElementMixin {
     if (this.iterateExpr) {
       // Same as whileExpr, let it go update UI afterwards
       await this.handleIterateExpr();
-      this._finalizePerform(resolveThisEvent);
+      this._finalizePerform(resolveThisEvent, acquiredOutermost);
       return;
     }
 
     // Check if 'if' condition is true - otherwise exist right away
     if (this.ifExpr && !evaluateXPathToBoolean(this.ifExpr, getInScopeContext(this), this)) {
-      this._finalizePerform(resolveThisEvent);
+      this._finalizePerform(resolveThisEvent, acquiredOutermost);
       return;
     }
 
     if (this.whileExpr) {
       // After loop is done call actionPerformed to update the model and UI
       await this.handleWhileExpr();
-      this._finalizePerform(resolveThisEvent);
+      this._finalizePerform(resolveThisEvent, acquiredOutermost);
       return;
     }
 
@@ -394,7 +400,7 @@ export class AbstractAction extends ForeElementMixin {
     }
 
     await this.performSafe();
-    this._finalizePerform(resolveThisEvent);
+    this._finalizePerform(resolveThisEvent, acquiredOutermost);
   }
 
   async handleWhileExpr() {
@@ -464,34 +470,55 @@ export class AbstractAction extends ForeElementMixin {
     }
   }
 
-  _finalizePerform(resolveThisEvent) {
+  _finalizePerform(resolveThisEvent, acquiredOutermost) {
     this.currentEvent = null;
+    // capture before actionPerformed() - overrides may consume or propagate needsUpdate
+    const changed = this.needsUpdate;
     this.actionPerformed();
-    if (FxFore.outermostHandler === this) {
-      const ownerForm = this.getOwnerFormSafe();
-
-      console.log(
-        `%cfinalizing outermost Action on ${ownerForm?.id || ''}`,
-        'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-        this,
-      );
+    // decide on the acquiredOutermost param (captured locally in execute()), not on the
+    // static: actionPerformed()'s stale-handler check nulls FxFore.outermostHandler when
+    // this action removed itself from the document (e.g. fx-delete inside the repeat item
+    // it deletes) - a local var also survives a second, overlapping execute() call on the
+    // same (singleton, reused) action element clobbering shared instance state
+    if (acquiredOutermost) {
+      const undoManager = this.getModel()?.getEffectiveUndoManager();
+      if (undoManager) {
+        if (changed) {
+          undoManager.commit(this._getCoalesceKey());
+        } else {
+          undoManager.discard();
+        }
+      }
 
-      FxFore.outermostHandler = null;
-      /*
-                        console.info(
-                            `%coutermost Action done`,
-                            'background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-                            this,
-                        );
-                        console.timeEnd('outermostHandler');
-            */
-      this.dispatchEvent(
-        new CustomEvent('outermost-action-end', {
-          composed: true,
-          bubbles: true,
-          cancelable: true,
-        }),
-      );
+      // Defensive re-check: actionPerformed()'s stale-handler recovery (above) can have
+      // already nulled FxFore.outermostHandler and let a *different* action acquire it
+      // before we get here - only clear/dispatch if it's still pointing at us.
+      if (FxFore.outermostHandler === this) {
+        const ownerForm = this.getOwnerFormSafe();
+
+        console.log(
+          `%cfinalizing outermost Action on ${ownerForm?.id || ''}`,
+          'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+          this,
+        );
+
+        FxFore.outermostHandler = null;
+        /*
+                          console.info(
+                              `%coutermost Action done`,
+                              'background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+                              this,
+                          );
+                          console.timeEnd('outermostHandler');
+              */
+        this.dispatchEvent(
+          new CustomEvent('outermost-action-end', {
+            composed: true,
+            bubbles: true,
+            cancelable: true,
+          }),
+        );
+      }
     }
     resolveThisEvent();
   }
@@ -518,6 +545,20 @@ export class AbstractAction extends ForeElementMixin {
 */
   }
 
+  /**
+   * Best-effort identification of the data node this action touched, used by the
+   * UndoManager to merge rapid successive edits of the same node into one undo step.
+   *
+   * Falls back to the raw `ref` string when no node was resolved (e.g. fx-insert),
+   * which may coalesce same-ref edits across different repeat items within the window.
+   */
+  _getCoalesceKey() {
+    const miNode = this.modelItem?.node;
+    if (miNode) return Array.isArray(miNode) ? miNode[0] : miNode;
+    if (this.nodeset) return Array.isArray(this.nodeset) ? this.nodeset[0] : this.nodeset;
+    return this.getAttribute('ref');
+  }
+
   /**
    * calls the update cycle if action signalled that update is needed.
    */

package/src/actions/fx-action.js

@@ -43,6 +43,11 @@ export class FxAction extends AbstractAction {
     } else {
       for (const actionOrVar of children) {
         if (actionOrVar.localName === 'fx-var') {
+          // XForms 2.0: action variables are evaluated in sequence between sibling
+          // actions, once per execution of the action content (per iteration when
+          // `iterate`/`while` re-runs perform()).
+          actionOrVar.refresh();
+          // eslint-disable-next-line no-continue
           continue;
         }
         const action = actionOrVar;

package/src/actions/fx-append.js

@@ -60,7 +60,7 @@ class FxAppend extends AbstractAction {
   async perform() {
     super.perform();
 
-    this._dataFromTemplate();
+    await this._dataFromTemplate();
     /*
         const instData = new XMLSerializer().serializeToString(
             this.getModel()
@@ -87,7 +87,7 @@ class FxAppend extends AbstractAction {
    *
    * @private
    */
-  _dataFromTemplate() {
+  async _dataFromTemplate() {
     const inscope = this.getInScopeContext();
     const parentForm = this.getOwnerForm();
     const repeat = parentForm.querySelector(`#${this.repeat}`);
@@ -121,7 +121,7 @@ class FxAppend extends AbstractAction {
 
     const fore = this.getOwnerForm();
 
-    Fore.dispatch(inst, 'insert', {
+    await Fore.dispatch(inst, 'insert', {
       insertedNodes: data,
       insertedParent: inscope,
       ref: this.ref,

package/src/actions/fx-commit-history.js

@@ -0,0 +1,26 @@
+import { AbstractAction } from './abstract-action.js';
+
+/**
+ * `fx-commit-history`
+ *
+ * Closes the currently open undo-coalescing session (see `UndoManager.commitCoalesced()`),
+ * so the next edit - even to a field that's still focused - starts a new undo step instead
+ * of merging into the current one. Useful for forcing a checkpoint mid-edit, e.g. on Enter
+ * in a textarea, without requiring the user to blur the field.
+ *
+ * Never creates an undo step of its own - it doesn't mutate data, only draws a boundary in
+ * the history that's already there.
+ *
+ * @customElement
+ * @demo demo/undo-redo.html
+ */
+export class FxCommitHistory extends AbstractAction {
+  async perform() {
+    this.getModel()?.getEffectiveUndoManager()?.endCoalescingSession();
+    this.needsUpdate = false;
+  }
+}
+
+if (!customElements.get('fx-commit-history')) {
+  window.customElements.define('fx-commit-history', FxCommitHistory);
+}

package/src/actions/fx-hide.js

@@ -39,7 +39,7 @@ export class FxHide extends AbstractAction {
 
     const dialog = resolveId(this.dialog, this);
     dialog.close();
-    Fore.dispatch(dialog, 'dialog-hidden', {});
+    await Fore.dispatch(dialog, 'dialog-hidden', {});
   }
 }
 

package/src/actions/fx-insert.js

@@ -82,6 +82,7 @@ export class FxInsert extends AbstractAction {
     }
     return cur;
   }
+
   _getInlineTemplateElement() {
     // Prefer a direct child <template>, otherwise any descendant <template> within fx-insert
     const direct = Array.from(this.children).find(c => c?.localName === 'template');
@@ -127,6 +128,7 @@ export class FxInsert extends AbstractAction {
       throw new Error(`fx-insert: ${errorLabel} does not contain valid JSON`);
     }
   }
+
   _isJsonLiteral(value) {
     if (value === null || value === undefined) return false;
     const t = String(value).trim();
@@ -153,6 +155,7 @@ export class FxInsert extends AbstractAction {
       return fore.querySelector(`#${repeatId}`);
     }
   }
+
   _isJsonLensRef(ref) {
     if (!ref) return false;
     const t = String(ref).trim();
@@ -197,7 +200,7 @@ export class FxInsert extends AbstractAction {
       : null;
   }
 
-  _performJsonInsert(inscope, fore) {
+  async _performJsonInsert(inscope, fore) {
     // We need the ARRAY CONTAINER node, not the array children.
     // IMPORTANT: do not rely on xpath-evaluation here because action in-scope context
     // can be a DOM node (trigger/button), not a JSON lens node.
@@ -212,15 +215,15 @@ export class FxInsert extends AbstractAction {
 
     // If ref points to an array item, insert relative to its parent array
     if (
-        !Array.isArray(arrayNode.value) &&
-        arrayNode.parent &&
-        Array.isArray(arrayNode.parent.value)
+      !Array.isArray(arrayNode.value) &&
+      arrayNode.parent &&
+      Array.isArray(arrayNode.parent.value)
     ) {
       const itemNode = arrayNode;
       arrayNode = itemNode.parent;
 
       const base =
-          typeof itemNode.keyOrIndex === 'number' ? itemNode.keyOrIndex : arrayNode.value.length;
+        typeof itemNode.keyOrIndex === 'number' ? itemNode.keyOrIndex : arrayNode.value.length;
 
       if (this.position === 'before') insertIndex = base;
       else insertIndex = base + 1; // after (default)
@@ -360,12 +363,12 @@ export class FxInsert extends AbstractAction {
         : this._clearJsonValues(templateValue);
 
     // Mutate raw JSON via JSONLens
-// Mutate JSON in a way that keeps JSONNode.children in sync
+    // Mutate JSON in a way that keeps JSONNode.children in sync
     const instanceId = XPathUtil.resolveInstance(this, this.ref);
     const model = this.getModel();
     const instance = model.getInstance(instanceId);
 
-// 1) BEST: use the JSONNode API if available (it should update children)
+    // 1) BEST: use the JSONNode API if available (it should update children)
     if (arrayNode && typeof arrayNode.insert === 'function') {
       arrayNode.insert(newValue, insertIndex);
     } else {
@@ -386,7 +389,7 @@ export class FxInsert extends AbstractAction {
       }
     }
 
-// At this point, children MUST match value length
+    // At this point, children MUST match value length
     if (Array.isArray(arrayNode.value) && Array.isArray(arrayNode.children)) {
       if (arrayNode.children.length !== arrayNode.value.length) {
         // One more forced rebuild to be safe
@@ -401,7 +404,7 @@ export class FxInsert extends AbstractAction {
     // Dispatch Fore insert event similarly to XML branch
     const xpath = insertedNode?.getPath ? insertedNode.getPath() : '';
 
-    Fore.dispatch(instance, 'insert', {
+    await Fore.dispatch(instance, 'insert', {
       insertedNodes: insertedNode,
       insertedParent: arrayNode,
       ref: this.ref,
@@ -414,14 +417,14 @@ export class FxInsert extends AbstractAction {
     });
 
     this.dispatchEvent(
-        new CustomEvent('index-changed', {
-          composed: true,
-          bubbles: true,
-          detail: {
-            insertedNodes: insertedNode,
-            index: insertIndex + 1,
-          },
-        }),
+      new CustomEvent('index-changed', {
+        composed: true,
+        bubbles: true,
+        detail: {
+          insertedNodes: insertedNode,
+          index: insertIndex + 1,
+        },
+      }),
     );
 
     // Ensure UI updates
@@ -627,7 +630,7 @@ export class FxInsert extends AbstractAction {
 
       if (this.position && this.position === 'before') {
         insertLocationNode.parentNode.insertBefore(originSequenceClone, insertLocationNode);
-        fore.signalChangeToElement(insertLocationNode.parentNode);
+        fore.signalChangeToElement(insertLocationNode.parentNode.localName);
         fore.signalChangeToElement(originSequenceClone.localName);
       }
 
@@ -635,16 +638,16 @@ export class FxInsert extends AbstractAction {
         index += 1;
         if (this.hasAttribute('context') && this.hasAttribute('ref')) {
           inscope.append(originSequenceClone);
-          fore.signalChangeToElement(insertLocationNode);
+          fore.signalChangeToElement(insertLocationNode.localName);
           fore.signalChangeToElement(originSequenceClone.localName);
         } else if (this.hasAttribute('context')) {
           index = 1;
           insertLocationNode.prepend(originSequenceClone);
-          fore.signalChangeToElement(insertLocationNode);
+          fore.signalChangeToElement(insertLocationNode.localName);
           fore.signalChangeToElement(originSequenceClone.localName);
         } else {
           insertLocationNode.insertAdjacentElement('afterend', originSequenceClone);
-          fore.signalChangeToElement(insertLocationNode);
+          fore.signalChangeToElement(insertLocationNode.localName);
           fore.signalChangeToElement(originSequenceClone.localName);
         }
       }
@@ -662,7 +665,7 @@ export class FxInsert extends AbstractAction {
       }),
     );
 
-    Fore.dispatch(inst, 'insert', {
+    await Fore.dispatch(inst, 'insert', {
       insertedNodes: originSequenceClone,
       insertedParent: insertLocationNode.parentNode,
       ref: this.ref,

package/src/actions/fx-load.js

@@ -27,13 +27,13 @@ class FxLoad extends AbstractAction {
     super();
     this.attachShadow({ mode: 'open' });
     this.url = '';
-    this.replace=false;
+    this.replace = false;
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.attachTo = this.hasAttribute('attach-to') ? this.getAttribute('attach-to') : '_self';
-    this.replace = this.hasAttribute('replace') ? true : false;
+    this.replace = !!this.hasAttribute('replace');
     // Add a 'doneEvent' to block the action chain untill the event fired on the element we're
     // loading something into.
     this.awaitEvent = this.hasAttribute('await') ? this.getAttribute('await') : '';
@@ -89,9 +89,9 @@ class FxLoad extends AbstractAction {
             resolved.removeEventListener(this.awaitEvent, eventListener);
           };
 
-          if(this.replace){
-            this.parentNode.replaceChild(content,resolved);
-          }else{
+          if (this.replace) {
+            this.parentNode.replaceChild(content, resolved);
+          } else {
             resolved.appendChild(content);
           }
           resolved.addEventListener(this.awaitEvent, eventListener);