(#1) - WebPack bundling of JS and CSS (#1)

This work was done with Claude.

Added bundling of CSS & JS with WebPack. This also means minimization.

---------

Co-authored-by: Martin Slachta <martin.slachta@outlook.com>
Reviewed-on: #1

assets/js/RsvApi.js

@@ -2,6 +2,6 @@
  * Utilities for calling the API
  */
 
-function get_rest_url(resource) {
+export function get_rest_url(resource) {
     return ReservairServiceAPI.restUrl + '/' + resource;
 }

assets/js/datasource/RsvDataSource.js

@@ -1,4 +1,4 @@
-const RsvDataSource = {
+export const RsvDataSource = {
   create_rsv_resource(base_url, { nonce } = {}) {
     function request(url, method, body) {
       const headers = { 'Content-Type': 'application/json' };

assets/js/datasource/RsvFormDefinitionResource.js

@@ -1,2 +1,4 @@
-const RsvFormDefinitionResource = () =>
+import { RsvDataSource } from './RsvDataSource.js';
+
+export const RsvFormDefinitionResource = () =>
     RsvDataSource.create_rsv_resource(ReservairServiceAPI.restUrl + '/form-definition');

assets/js/datasource/RsvReservationClient.js

@@ -1,4 +1,4 @@
-const RsvReservationClient = {
+export const RsvReservationClient = {
     accept(reservation_id) {
         return this._post(reservation_id, 'accept');
     },

assets/js/datasource/RsvReservationResource.js

@@ -1,2 +1,4 @@
-const RsvReservationResource = () =>
+import { RsvDataSource } from './RsvDataSource.js';
+
+export const RsvReservationResource = () =>
     RsvDataSource.create_rsv_resource(ReservairServiceAPI.restUrl + '/reservation');

assets/js/datasource/RsvTimetableCapacityResource.js

@@ -1,2 +1,4 @@
-const RsvTimetableCapacityResource = (id) =>
+import { RsvDataSource } from './RsvDataSource.js';
+
+export const RsvTimetableCapacityResource = (id) =>
     RsvDataSource.create_rsv_resource(ReservairServiceAPI.restUrl + `/timetable/${id}/capacity`);

assets/js/datasource/RsvTimetableReservationResource.js

@@ -1,2 +1,4 @@
-const RsvTimetableReservationResource = (id) =>
+import { RsvDataSource } from './RsvDataSource.js';
+
+export const RsvTimetableReservationResource = (id) =>
     RsvDataSource.create_rsv_resource(ReservairServiceAPI.restUrl + `/timetable/${id}/reservation`);

assets/js/datasource/RsvTimetableResource.js

@@ -1,2 +1,4 @@
-const RsvTimetableResource = () =>
+import { RsvDataSource } from './RsvDataSource.js';
+
+export const RsvTimetableResource = () =>
     RsvDataSource.create_rsv_resource(ReservairServiceAPI.restUrl + '/timetable');

assets/js/elements/RsvCalendar.js

@@ -1,4 +1,4 @@
-const RsvCalendarPicker = (() => {
+export const RsvCalendarPicker = (() => {
 
   function get_first_day_of_month(date) {
     const day = new Date(date.getFullYear(), date.getMonth(), 1).getDay();

assets/js/elements/RsvDatagrid.js

@@ -2,7 +2,7 @@
  * RSV Dynamic datagrid
  * Allows fetching with JS instead of page reload.
  */
-window.RsvDataGrid = window.RsvDataGrid || {
+const RsvDataGrid = {
   create_header(self, columns, has_actions) {
     let thead = document.createElement('thead');
 
@@ -419,4 +419,6 @@ window.RsvDataGrid = window.RsvDataGrid || {
 
     return state;
   }
-}
+};
+
+export { RsvDataGrid };

assets/js/elements/RsvReservationSelector.js

@@ -1,3 +1,5 @@
+import { RsvCalendarPicker } from './RsvCalendar.js';
+
 class RsvReservationSelector extends HTMLElement {
   static get observedAttributes() {
     return ['timetable-id', 'name', 'price-per-block'];

assets/js/elements/RsvTimeline.js

@@ -1,3 +1,5 @@
+import { RsvTimetableService } from '../services/RsvTimetableService.js';
+
 class RsvTimeline extends HTMLElement {
   static get observedAttributes() {
     return ['timetable-id', 'date'];

assets/js/forms/RsvAdminForm.js

@@ -1,3 +1,6 @@
+import { RsvFormEncoder } from './RsvFormEncoder.js';
+import { show_notice } from '../../../src/components/admin.js';
+
 /*
  * RsvAdminForm — shared submit handler for wp-admin forms.
  *
@@ -13,7 +16,7 @@
  *     refresh:   () => my_datagrid.refresh(),
  *   });
  */
-const RsvAdminForm = {
+export const RsvAdminForm = {
   // Attach a submit listener that sends the form as JSON.
   bind(form, options = {}) {
     if (!form) return;

assets/js/forms/RsvFormEncoder.js

@@ -1,4 +1,4 @@
-const RsvFormEncoder = {
+export const RsvFormEncoder = {
   // Serialize form element into a plain JS object supporting arrays.
   // - Nested keys supported with dot notation: 'meta.email'
   // - Array notation supported with trailing [] (e.g. 'times[]') or multiple inputs with same name

assets/js/forms/RsvFormSender.js

@@ -1,4 +1,4 @@
-const RsvFormSender = {
+export const RsvFormSender = {
   get_form_url(form_id) {
     return ReservairServiceAPI.restUrl + '/form/' + form_id;
   },

assets/js/forms/RsvInlineFormBuilder.js

@@ -1,4 +1,4 @@
-const RsvInlineFormBuilder = {
+export const RsvInlineFormBuilder = {
   match_p(name, value) {
     return (form) => String(form[name]) === String(value);
   },

assets/js/services/RsvTimetableService.js

@@ -1,4 +1,6 @@
-const RsvTimetableService = {
+import { get_rest_url } from '../RsvApi.js';
+
+export const RsvTimetableService = {
   get_all() {
     return fetch(get_rest_url('timetable'), { method: 'GET' })
       .then(r => {