Convert FormBuilder.js to module

django_forms_workflows/static/django_forms_workflows/js/form-builder.js

@@ -5,7 +5,7 @@
  * without code.
  */
 
-class FormBuilder {
+export class FormBuilder {
     constructor(config) {
         this.config = config;
         this.fields = [];

django_forms_workflows/templates/admin/django_forms_workflows/form_builder.html

@@ -1072,9 +1072,9 @@ <h1>{form_name}</h1>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
     <!-- Form Builder JavaScript -->
-    <script src="{% static 'django_forms_workflows/js/form-builder.js' %}"></script>
-
-    <script>
+    <script type="module">
+        import { FormBuilder } from "{% static 'django_forms_workflows/js/form-builder.js' %}";
+
         // Initialize form builder with data
         const formBuilderData = {
             formId: {% if form_definition %}{{ form_definition.id }}{% else %}null{% endif %},

tests_js/form-builder/addFieldAtPosition.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { loadFormBuilderClass } from './helpers/loadFormBuilderClass.js';
+import { FormBuilder } from '../../django_forms_workflows/static/django_forms_workflows/js/form-builder.js';
 
 // Build an instance without running the constructor to avoid calling init() ->
 // setupFieldPalette()/setupCanvas()/setupEventListeners()
@@ -19,7 +19,6 @@ function createInstance(FormBuilder) {
 
 describe('FormBuilder#addFieldAtPosition', () => {
   it('inserts correctly on an empty canvas, when SortableJS reports an out-of-range drop position', () => {
-    const FormBuilder = loadFormBuilderClass();
     const instance = createInstance(FormBuilder);
 
     // Empty canvas: SortableJS's reported evt.newIndex can be 1 here (it
@@ -32,7 +31,6 @@ describe('FormBuilder#addFieldAtPosition', () => {
   });
 
   it('inserts at the requested position when it is already in range', () => {
-    const FormBuilder = loadFormBuilderClass();
     const instance = createInstance(FormBuilder);
     instance.fields = [{ field_name: 'existing' }];
 

tests_js/form-builder/initializePropertyFormTabs.test.js

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { loadFormBuilderClass } from './helpers/loadFormBuilderClass.js';
+import { FormBuilder } from '../../django_forms_workflows/static/django_forms_workflows/js/form-builder.js';
 
 function createInstance(FormBuilder) {
   const instance = Object.create(FormBuilder.prototype);
@@ -18,7 +18,6 @@ describe('FormBuilder#initializePropertyFormTabs', () => {
   });
 
   it('wires the conditional-logic toggle to show/hide its section', () => {
-    const FormBuilder = loadFormBuilderClass();
     const instance = createInstance(FormBuilder);
     const field = { conditional_rules: null, validation_rules: [], field_dependencies: [] };
 
@@ -37,7 +36,6 @@ describe('FormBuilder#initializePropertyFormTabs', () => {
   });
 
   it("initializes all three tabs' lists with the field's current data", () => {
-    const FormBuilder = loadFormBuilderClass();
     const instance = createInstance(FormBuilder);
     const field = {
       conditional_rules: { conditions: [{ field: 'x', operator: 'equals', value: '1' }] },
@@ -53,7 +51,6 @@ describe('FormBuilder#initializePropertyFormTabs', () => {
   });
 
   it('defaults to empty lists when the field has no rules/dependencies yet', () => {
-    const FormBuilder = loadFormBuilderClass();
     const instance = createInstance(FormBuilder);
     const field = {};
 

tests_js/form-builder/setupCanvas.test.js

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { loadFormBuilderClass } from './helpers/loadFormBuilderClass.js';
+import { FormBuilder } from '../../django_forms_workflows/static/django_forms_workflows/js/form-builder.js';
 
 // setupCanvas() calls Sortable.create(...) before registering its own drop
 // listener; stub it out rather than pulling in the real SortableJS
@@ -24,7 +24,6 @@ describe('FormBuilder#setupCanvas — drop handler', () => {
   });
 
   it('does not call addFieldAtPosition a second time on drop (Sortable\'s onAdd already handles insertion)', () => {
-    const FormBuilder = loadFormBuilderClass();
     const instance = createInstance(FormBuilder);
     instance.draggingFieldType = 'text';
 
@@ -35,7 +34,6 @@ describe('FormBuilder#setupCanvas — drop handler', () => {
   });
 
   it('still cleans up the drag placeholder and dragging class on drop', () => {
-    const FormBuilder = loadFormBuilderClass();
     const instance = createInstance(FormBuilder);
     instance.draggingFieldType = 'text';
     canvas.classList.add('dragging');