feat: Add functionality to AsyncBlock, PollBlock, LazyBlock and LoadB…

…lock controllers to allow them to retry fetching content a set number of times when network errors occur.

docs/docs/controllers/async_block_controller.mdx

@@ -32,6 +32,7 @@ AJAX load heavy content after the initial page load, while showing a placeholder
 | `endpoint` | String | The URL to fetch content from | - |
 | `errorMessage` (Optional) | String | The error message to display when the remote content fails to load | `This content failed to load` |
 | `selector` (Optional) | String | The CSS selector to use to extract the desired element(s) from the returned HTML response | Empty. The entire HTML response will be loaded |
+| `maxRetries` (Optional) | Number | How many times the controller should retry fetching the content in the event of network errors or bad responses | 1 |
 
 ## Events
 

docs/docs/controllers/lazy_block_controller.mdx

@@ -31,6 +31,7 @@ AJAX load content, only when it comes into view, while showing a placeholder.
 | `endpoint` | String | The URL to fetch content from | - |
 | `errorMessage` (Optional) | String | The error message to display when the remote content fails to load | `This content failed to load` |
 | `selector` (Optional) | String | The CSS selector to use to extract the desired element(s) from the returned HTML response | Empty. The entire HTML response will be loaded |
+| `maxRetries` (Optional) | Number | How many times the controller should retry fetching the content in the event of network errors or bad responses | 1 |
 
 ## Events
 

docs/docs/controllers/load_block_controller.mdx

@@ -32,6 +32,7 @@ AJAX load heavy content after the initial page load, while showing a placeholder
 | `endpoint` | String | The URL to fetch content from | - |
 | `errorMessage` (Optional) | String | The error message to display when the remote content fails to load | `This content failed to load` |
 | `selector` (Optional) | String | The CSS selector to use to extract the desired element(s) from the returned HTML response | Empty. The entire HTML response will be loaded |
+| `maxRetries` (Optional) | Number | How many times the controller should retry fetching the content in the event of network errors or bad responses | 1 |
 
 ## Events
 

docs/docs/controllers/poll_block_controller.mdx

@@ -33,6 +33,7 @@ AJAX load/refresh content periodically, at a configurable interval.
 | `endpoint` | String | The URL to fetch content from | - |
 | `errorMessage` (Optional) | String | The error message to display when the remote content fails to load | `This content failed to load` |
 | `selector` (Optional) | String | The CSS selector to use to extract the desired element(s) from the returned HTML response | Empty. The entire HTML response will be loaded |
+| `maxRetries` (Optional) | Number | How many times the controller should retry fetching the content in the event of network errors or bad responses | 1 |
 
 ## Events
 

src/controllers/ajax/async_block_controller.ts

@@ -1,16 +1,19 @@
 import {LoadBlockController} from "./load_block_controller";
 
 export class AsyncBlockController extends LoadBlockController {
+
   static targets = ["replace"];
-  static values = {endpoint: String, errorMessage: String, selector: String};
+  static values = {
+    endpoint: String,
+    errorMessage: String,
+    selector: String,
+    maxRetries: Number,
+  };
 
   declare readonly replaceTarget: HTMLElement;
   declare readonly hasReplaceTarget: boolean;
   declare readonly endpointValue: string;
 
-  declare readonly hasSelectorValue: boolean;
-  declare readonly selectorValue: string;
-
   declare readonly hasErrorMessageValue: boolean;
   declare readonly errorMessageValue: string;
 

src/controllers/ajax/load_block_controller.ts

@@ -1,9 +1,18 @@
 import {BaseController} from "../../utilities/base_controller";
+import {fetchRetry} from "../../utilities/fetchRetry";
 
 export class LoadBlockController extends BaseController {
 
   static targets = ["replace"];
-  static values = {endpoint: String, errorMessage: String, selector: String};
+  static values = {
+    endpoint: String,
+    errorMessage: String,
+    selector: String,
+    maxRetries: Number,
+  };
+
+  declare maxRetriesValue: number;
+  declare readonly hasMaxRetriesValue: boolean;
 
   declare readonly replaceTarget: HTMLElement;
   declare readonly hasReplaceTarget: boolean;
@@ -19,6 +28,10 @@ export class LoadBlockController extends BaseController {
     return this.hasErrorMessageValue ? this.errorMessageValue : "This content failed to load";
   }
 
+  get _maxRetries(): number {
+    return this.hasMaxRetriesValue ? this.maxRetriesValue : 1;
+  }
+
   connect() {
   }
 
@@ -34,7 +47,7 @@ export class LoadBlockController extends BaseController {
     };
 
     try {
-      let response = await fetch(this.endpointValue);
+      let response = await fetchRetry(this._maxRetries, this.endpointValue);
       if (!response.ok) {
         failure();
       }

src/controllers/ajax/poll_block_controller.ts

@@ -4,7 +4,12 @@ import {useInterval} from "../../mixins/use_interval";
 export class PollBlockController extends LoadBlockController {
 
   static targets = ["replace"];
-  static values = {endpoint: String, errorMessage: String, selector: String, seconds: Number};
+  static values = {
+    endpoint: String,
+    errorMessage: String,
+    selector: String,
+    maxRetries: Number,
+  };
 
   declare readonly hasSecondsValue: boolean;
   declare readonly secondsValue: number;

src/utilities/fetchRetry.ts

@@ -0,0 +1,10 @@
+export async function fetchRetry(n: number, input: RequestInfo, init?: RequestInit): Promise<Response> {
+  try {
+    return await fetch(input, init);
+  } catch (err) {
+    if (n === 1) {
+      throw err;
+    }
+    return await fetchRetry(n - 1, input, init);
+  }
+}