form-builder-pro 1.2.4 → 1.2.5

package/dist/index.d.mts

@@ -262,6 +262,7 @@ declare class FormBuilder {
     private unsubscribe;
     private options;
     private lastRenderedSchemaHash;
+    private pendingRenderId;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;
     cloneForm(json: FormSchema): void;

package/dist/index.d.ts

@@ -262,6 +262,7 @@ declare class FormBuilder {
     private unsubscribe;
     private options;
     private lastRenderedSchemaHash;
+    private pendingRenderId;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;
     cloneForm(json: FormSchema): void;

package/dist/index.js

@@ -8621,12 +8621,14 @@ var SectionList = class {
 // src/builder/FormBuilder.ts
 var advancedCssPanelState = /* @__PURE__ */ new Map();
 var FormBuilder = class {
-  // Cache to detect meaningful changes
+  // For requestAnimationFrame debouncing
   constructor(container, options = {}) {
     __publicField(this, "container");
     __publicField(this, "unsubscribe");
     __publicField(this, "options");
     __publicField(this, "lastRenderedSchemaHash", "");
+    // Cache to detect meaningful changes
+    __publicField(this, "pendingRenderId", null);
     __publicField(this, "activeTab", "fields");
     if (!container) {
       throw new Error("Builder container not found. Please ensure the container element exists before initializing FormBuilder.");
@@ -8784,36 +8786,43 @@ var FormBuilder = class {
   }
   setupSubscriptions() {
     let lastPreviewMode = null;
-    this.unsubscribe = formStore.subscribe(() => {
+    const performRender = () => {
+      this.pendingRenderId = null;
       const state = formStore.getState();
       const previewModeChanged = lastPreviewMode !== null && lastPreviewMode !== state.isPreviewMode;
       lastPreviewMode = state.isPreviewMode;
       const schemaHash = JSON.stringify({
         sections: state.schema.sections.map((s) => ({
           id: s.id,
-          title: s.title,
+          // Exclude title - prevents re-renders on section name typing
           fields: s.fields.map((f) => ({
             id: f.id,
             type: f.type,
-            label: f.label,
+            // Exclude label - prevents re-renders on field name typing
             layout: f.layout,
             width: f.width,
             css: f.css
-            // Include css so style changes (textAlign, backgroundColor, etc.) trigger re-render
-            // Exclude frequently changing text (placeholder, etc.) to prevent re-renders on typing
           }))
         })),
         selectedField: state.selectedFieldId,
         isPreviewMode: state.isPreviewMode
-        // Include preview mode in hash
       });
       if (schemaHash !== this.lastRenderedSchemaHash || previewModeChanged) {
         this.lastRenderedSchemaHash = schemaHash;
         this.render();
       }
+    };
+    this.unsubscribe = formStore.subscribe(() => {
+      if (this.pendingRenderId == null) {
+        this.pendingRenderId = requestAnimationFrame(() => performRender.call(this));
+      }
     });
   }
   destroy() {
+    if (this.pendingRenderId != null) {
+      cancelAnimationFrame(this.pendingRenderId);
+      this.pendingRenderId = null;
+    }
     this.unsubscribe();
     this.container.innerHTML = "";
   }