Refactor SC+BackgroundSync

assets/package.json

@@ -1,18 +1,23 @@
 {
-    "name": "@pwa/connection-status",
-    "description": "PWA for Symfony",
+    "name": "@spomky-labs/pwa-bundle",
+    "description": "Stimulus Controllers for the PWA Bundle",
     "license": "MIT",
     "version": "1.0.0",
-    "main": "dist/controller.js",
-    "types": "dist/controller.d.ts",
     "symfony": {
         "controllers": {
             "connection-status": {
-                "main": "dist/controller.js",
+                "main": "src/connection-status_controller.js",
                 "name": "pwa/connection-status",
                 "webpackMode": "eager",
                 "fetch": "eager",
                 "enabled": true
+            },
+            "backgroundsync-form": {
+                "main": "src/backgroundsync-form_controller.js",
+                "name": "pwa/backgroundsync-form",
+                "webpackMode": "eager",
+                "fetch": "eager",
+                "enabled": true
             }
         },
         "importmap": {

assets/src/backgroundsync-form_controller.js

@@ -0,0 +1,43 @@
+'use strict';
+
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static values = {
+        params: { type: Array, default: {
+            mode: 'cors',
+            cache: 'no-cache',
+            credentials: 'same-origin',
+            redirect: 'follow',
+            referrerPolicy: 'no-referrer'
+        }},
+        headers: { type: Array, default: [] },
+        redirection: { type: String, default: null },
+    };
+
+    async onSubmit(event) {
+        event.preventDefault();
+        const form = event.currentTarget;
+        if (!form instanceof HTMLFormElement || !form.checkValidity()) {
+            return;
+        }
+        const url = form.action;
+        const encType = form.encType ?? 'application/x-www-form-urlencoded';
+        const method = form.method ?? 'POST';
+        const params = this.paramsValue;
+        params.headers = this.headersValue;
+        params.headers['Content-Type'] = encType;
+
+        try {
+            params.body = new FormData(form);
+            await fetch(url, params);
+        } catch (error) {
+            // No need to do anything here
+        } finally {
+            if (this.redirectionValue) {
+                window.location.href = this.redirectionValue;
+            }
+        }
+    }
+}

assets/src/controller.ts → assets/src/connection-status_controller.js

@@ -2,46 +2,38 @@
 
 import { Controller } from '@hotwired/stimulus';
 
-enum Status {
-    OFFLINE = 'OFFLINE',
-    ONLINE = 'ONLINE',
-}
+/* stimulusFetch: 'lazy' */
 export default class extends Controller {
     static targets = ['message', 'attribute'];
     static values = {
         onlineMessage: { type: String, default: 'You are online.' },
         offlineMessage: { type: String, default: 'You are offline.' },
     };
 
-    declare readonly onlineMessageValue: string;
-    declare readonly offlineMessageValue: string;
-    declare readonly attributeTargets: HTMLElement[];
-    declare readonly messageTargets: HTMLElement[];
-
     connect() {
         this.dispatchEvent('connect', {});
         if (navigator.onLine) {
             this.statusChanged({
-                status: Status.ONLINE,
+                status: 'ONLINE',
                 message: this.onlineMessageValue,
             });
         } else {
             this.statusChanged({
-                status: Status.OFFLINE,
+                status: 'OFFLINE',
                 message: this.offlineMessageValue,
             });
         }
 
-        window.addEventListener('offline', () => {
+        window.addEventListener('online', () => {
             this.statusChanged({
-                status: Status.OFFLINE,
-                message: this.offlineMessageValue,
+                status: 'ONLINE',
+                message: this.onlineMessageValue,
             });
         });
-        window.addEventListener('online', () => {
+        window.addEventListener('offline', () => {
             this.statusChanged({
-                status: Status.ONLINE,
-                message: this.onlineMessageValue,
+                status: 'OFFLINE',
+                message: this.offlineMessageValue,
             });
         });
     }