[Update] Added RenderStatick and script cleanup

Added the RenderStatick script
removed unnecessary comments from formatNumbers
removed unnecessary space from formcheck.

Author: JorchCortez

Dist/Functional/FormCheck.js

@@ -101,7 +101,6 @@ class FormCheck {
         }
 
         this.form.reset();
-
         this.submitButton.textContent = `${this.defaultSubmitText}`;
     }
 }

Dist/Functional/FormatNumbers.js

@@ -1,14 +1,3 @@
-/*
- * Number formating using Intl.NumberFormat.
- * Requirements: 
- * Element with custom attribute fn-formatnumber="true"
- * A Style in the same element to format choosing between "Currency", "decimal", "percent", "unit"
- * In case of the element being "Currency" or "Unit" the sent "fn-formatnumber-currency" or "fn-formatnumber-unit" option
- * Optional: set locales for the formatting
- * list of units can be found here for now: https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier
- * currency uses regular notation for them.
- */
-
 'use strict'
 
 let FormatNo = (element, locales, number, options) => {

Dist/WebflowOnly/RenderStatic.js

@@ -0,0 +1,81 @@
+'use strict'
+
+class RenderStatic {
+    constructor() {
+        this.cloneables = [];
+        this.container = null;
+        this.gap = 0;
+        this.observer = null;
+        this.init();
+    }
+
+    init() {
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(() => {
+                this.initializeRenderStatic();
+                this.observeContainer();
+            }, 250);
+        });
+    }
+
+    insertChildAtIndex(parent, child, index = 0) {
+        if (!child) return;
+        let childClone = child.cloneNode(true);
+        if (parent) {
+            parent.insertBefore(childClone, parent.children[index]);
+        }
+    }
+
+    initializeRenderStatic() {
+        this.container = this.container || document.querySelector("[wt-renderstatic-element='container']");
+        this.cloneables = this.cloneables.length === 0 ? document.querySelectorAll("[wt-renderstatic-element='cloneable']") : this.cloneables;
+
+        if (!this.container || this.cloneables.length === 0) return;
+
+        this.gap = this.gap !== 0 ? this.gap : +this.container.getAttribute("wt-renderstatic-gap") || 0;
+
+        // Stop observing to prevent the observer from reacting to clone removals
+        if (this.observer) this.observer.disconnect();
+
+        let childrenArray = Array.from(this.container.children);
+
+        childrenArray.forEach(child => {
+            if (child.hasAttribute("wt-renderstatic-element")) child.remove();
+        });
+
+        let insertIndex = this.gap;
+        const totalChildren = childrenArray.length;
+        const totalInsertions = Math.round(totalChildren / this.gap);
+        let cloneIndex = 0;
+
+        for (let i = 0; i <= totalChildren + totalInsertions; i++) {
+            if (i === insertIndex) {
+                this.insertChildAtIndex(this.container, this.cloneables[cloneIndex], insertIndex);
+                cloneIndex = (cloneIndex < this.cloneables.length - 1) ? cloneIndex + 1 : 0;
+                insertIndex = i + this.gap + 1;
+            }
+        }
+
+        // Re-observe the container
+        this.observeContainer();
+    }
+
+    observeContainer() {
+        if (!this.container) return;
+
+        this.observer = new MutationObserver((mutations) => {
+            let hasNonCloneChanges = mutations.some(mutation => {
+                return Array.from(mutation.addedNodes).some(node => !node.hasAttribute("wt-renderstatic-element")) ||
+                    Array.from(mutation.removedNodes).some(node => !node.hasAttribute("wt-renderstatic-element"));
+            });
+
+            if (hasNonCloneChanges) {
+                this.initializeRenderStatic();
+            }
+        });
+
+        this.observer.observe(this.container, { childList: true });
+    }
+}
+
+new RenderStatic();