Functionality without compromises

fetchEvents.js - Window Scope Fetch Events

Add event listeners to the window object and execute code when a fetch happens.

Available events

Event Name	Description	Event Detail Properties
fetchStart	Right before the fetch is started	event.detail.url, event.detail.init
fetchResponseSuccess	When the response status is in 200-299 range.	event.detail.url, event.detail.init, event.detail.response
fetchResponseError	When the response status is in 400-599 range.	event.detail.url, event.detail.init, event.detail
fetchError	When there was any network error.	event.detail.url, event.detail.init, event.detail.error
fetchComplete	Final event independently if there was an error or response.	event.detail.url, event.detail.init, event.detail.response (if there was a response), event.detail.error (if there was an error)

Example:

Fetch numbers Fetch non existing data

Use it:

Copy <-- Include de javascript in the page -->
<script type="module" src="fetchEvents.js"></script>

Copy //Register listeners in javascript
window.addEventListener("fetchStart", event => {});
window.addEventListener("fetchResponseSuccess", event => {});
window.addEventListener("fetchError", event => {});

httpHiddenMethod.js - Hidden Method Param

Use a hidden method param in your application when an HTTP PUT or DELETE method is not allowed in a host or server (maybe because of security policies not controlled by you).

The HTTP method is converted to POST and a param is used instead.

Example:

Fetch with PUT method.

Use it:

Copy <-- Include the javascript in the page -->
<script type="module" src="httpHiddenMethod.js"></script>

<-- Default param name is _method but you can change it with a meta tag with named hiddenMethodParam -->
<meta name="hiddenMethodParam" content="_httpMethod"/>

hashLocationTracker.js - Module for Hash Location Functions

Call functions when the hash location of the windows is changed.

hashTracker.given("#/init").then(fn);

Example:

Init
Hello

Use it:

Copy /*
Import the module. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Your code has to be a module itself in order to use modules. For inline scripts use: <script type="module"> javascript code </script>
*/
import {hashLocationTracker} from "./hashLocationTracker.js";

/*
Register function to execute for a regexp pattern, start and end line characters are addded automatically to match the whole hash location. When invoked, the function receives the match result to extract groups for parameterized locations.
*/
hashLocationTracker.given("#/index").then(matchResult => {});

//Execute when the page is loaded or after some kind of page initialization.
hashLocationTracker.processCurrent();

fetchUrlRewriter.js - URL fetch rewriter.

Add a base prefix domain/context to relative urls invoked by fetch.

Fetch

Use it:

Copy /*
If you want to configure the prefix in javascript. Import it in an inline script module.
Import the module. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Your code has to be a module itself in order to use modules. For inline scripts use: <script type="module"> javascript code </script>
*/
import {urlRewriter} from "./fetchUrlRewriter.js";

//Javascript
urlRewriter.prefix="https://my.domain.com/hello-application";


Copy <-- If you want to configure in HTML. -->

<-- Define the prefix with a meta tag named fetchUrlPrefix -->
<meta name="fetchUrlPrefix" content="https://my.domain.com/hello-application"/>

<-- Import the module with a script element -->
<script type="module" src="fetchUrlRewriter.js"></script>

tasks.js - Task Class

A class to encapsulate a long running function. You can give some feedback or block some UI components while the task is running. It has a status property and supports event listeners.

Tip: You can bind the status of the task with an element attribute in your favorite framework.

<button :disabled="task.status === Task.Status.RUNNING" type="button"></button>

Task Description

Use it:

Copy /*
Import the module. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Your code has to be a module itself in order to use modules. For inline scripts use: <script type="module"> javascript code </script>
*/
import {Task} from "./tasks.js";

// Create a task with a description and a function that returns a promise (fetch, for example).
const getUserTask=new Task("Get Users", id => fetch("user"+Id+".json")); // Receives a parameter.

// Starts the task, this could be when a button is clicked too.
getUsersTask.start(1); // Parameters are passed to the function in the task.