Update build process & dependencies

Changes are made to streamline the build process and update project dependencies.

Converted the project to use Vite for bundling the JavaScript files. New entry points are defined in the new 'vite.config.js' file. Front-end and back-end code now get their own bundles.

'form.js' now directly imports its dependencies - 'Sortable' and 'tinymce' - instead of relying on global variables. This ensures that the dependencies are version managed and can be updated easily.

The '.gitignore' file is updated to exclude the 'dist/' folder as it contains generated code. The enqueuing scripts in 'functions.php' file are updated to load the new bundled files instead of individual files.

This refactoring enhances the maintainability of the project by using modern development tools.

Author: Antoine Greuzard

.gitignore

@@ -18,7 +18,6 @@
 **/nbproject/Package-*.bash
 build/
 nbbuild/
-dist/
 nbdist/
 .nb-gradle/
 

back-end/post-type/form/form.js

@@ -1,4 +1,7 @@
-/* global Sortable, influactiveFormsTranslations, tinymce */
+import Sortable from 'sortablejs'
+import tinymce from 'tinymce/tinymce'
+
+/* global influactiveFormsTranslations */
 
 function recalculateFieldIndexes() {
   const container = document.getElementById('influactive_form_fields_container')

dist/backEndForm.bundled.js

@@ -49,8 +49,7 @@ function influactive_form_edit( string $hook ): void {
 		return;
 	}
 
-	wp_enqueue_script( 'influactive-form', plugin_dir_url( __FILE__ ) . 'back-end/post-type/form/form.js', array(
-		'influactive-form-sortable',
+	wp_enqueue_script( 'influactive-form', plugin_dir_url( __FILE__ ) . 'dist/backEndForm.bundled.js', array(
 		'wp-tinymce',
 		'influactive-tabs',
 		'influactive-form-layout'
@@ -76,14 +75,13 @@ function influactive_form_edit( string $hook ): void {
 		'Number'               => __( 'Number', 'influactive-forms' ),
 		'Freetext'             => __( 'Free text', 'influactive-forms' ),
 	) );
-	wp_enqueue_script( 'influactive-form-sortable', 'https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js', array(), '1.15.0', true );
 	wp_enqueue_style( 'influactive-form', plugin_dir_url( __FILE__ ) . 'back-end/post-type/form/form.min.css', array(), '1.2.2' );
 
-	wp_enqueue_script( 'influactive-tabs', plugin_dir_url( __FILE__ ) . 'back-end/post-type/tab/tab.js', array(), '1.2.2', true );
+	wp_enqueue_script( 'influactive-tabs', plugin_dir_url( __FILE__ ) . 'dist/backEndTab.bundled.js', array(), '1.2.2', true );
 	wp_enqueue_style( 'influactive-tabs', plugin_dir_url( __FILE__ ) . 'back-end/post-type/tab/tab.min.css', array(), '1.2.2' );
 
 	wp_enqueue_style( 'influactive-form-layout', plugin_dir_url( __FILE__ ) . 'back-end/post-type/layout/layout.min.css', array(), '1.2.2' );
-	wp_enqueue_script( 'influactive-form-layout', plugin_dir_url( __FILE__ ) . 'back-end/post-type/layout/layout.js', array(), '1.2.2', true );
+	wp_enqueue_script( 'influactive-form-layout', plugin_dir_url( __FILE__ ) . 'dist/backEndLayout.bundled.js', array(), '1.2.2', true );
 	wp_localize_script( 'influactive-form-layout', 'influactiveFormsTranslations', array(
 		'delete_layout' => __( 'Delete layout', 'influactive-forms' ),
 	) );
@@ -127,7 +125,7 @@ function influactive_form_shortcode_enqueue(): void {
 		$script_handle = [];
 	}
 
-	wp_enqueue_script( 'influactive-form', plugin_dir_url( __FILE__ ) . 'front-end/form.js', $script_handle, '1.2.2', true );
+	wp_enqueue_script( 'influactive-form', plugin_dir_url( __FILE__ ) . 'dist/frontEnd.bundled.js', $script_handle, '1.2.2', true );
 	wp_enqueue_style( 'influactive-form', plugin_dir_url( __FILE__ ) . 'front-end/form.min.css', [], '1.2.2' );
 
 	wp_localize_script( 'influactive-form', 'ajaxObject', [ 'ajaxurl' => admin_url( 'admin-ajax.php' ) ] );

dist/backEndLayout.bundled.js

@@ -4,7 +4,13 @@
   "description": "A plugin to create custom forms and display them anywhere on your website.",
   "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
+    "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx .",
+    "pre-commit": "npm run lint:fix",
+    "pre-push": "npm run lint:fix"
   },
   "repository": {
     "type": "git",

dist/backEndTab.bundled.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        frontEnd: 'front-end/form.js',
+        backEndForm: 'back-end/post-type/form/form.js',
+        backEndLayout: 'back-end/post-type/layout/layout.js',
+        backEndTab: 'back-end/post-type/tab/tab.js',
+      },
+      output: {
+        entryFileNames: '[name].bundled.js',
+      },
+    },
+  },
+})