fiamma

v0.1.0

Published

a year ago

⚡ A tiny, fast router to make your static website feel like a SPA

Downloads

0High
0Medium
0Low

orestbida

fiamma router

fiamma 🔥

A fork of flamethrower, with some tweaks!

Size

Note

This library is meant to be used on statically generated websites only. It does not work in React/Wordpress.

Installation & Usage

Install via npm:

npm i fiamma

Add a script tag in the headsection:

<html>
    <head>
        <script type="module">
            import { Router } from "dist/fiamma.esm.js";

            Router();
        </script>
    </head>
    ...
</html>

Events

Available events:

fiamma-fetch page fetch started
fiamma-end page fetch ended

Example:

window.addEventListener('fiamma-fetch', ()=> {
    // page fetch started
});

window.addEventListener('fiamma-end', ()=> {
    // page fetch ended
});

Prefetch links

You can prefetch links via EnablePrefetchHover or EnablePrefetchVisible.

import { Router, EnablePrefetchVisible } from "dist/fiamma.esm.js";

EnablePrefetchVisible();
Router();

`fiamma-` attributes

`fiamma-reload`

By default script tags in the head section are executed once. Specify this attribute to re-execute them after each page load event.

<head>
    <!-- ... -->

    <script fiamma-reload>
        console.log("hello world")
    </script>
</head>

`fiamma-persist`

Dynamically injected tags in the head section can persist across multiple page loads.

E.g. load the analytics script after consent:

const script = document.createElement('script');
script.src="path-to-analytics.js";
script.setAttribute('fiamma-persist', '');
document.head.appendChild(script);

`fiamma-preserve`

By default the body element is replaced with the new fetched body. You can however preserve any html element in the body section across multiple pages. The element(s) must:

exist in the new page
have a unique id

E.g.: given the following 2 pages, then everything inside the div with id="shared-div" will be carried over to the other page.

<!--- index.html -->
<html>
    <head></head>
    <body>
        <div fiamma-preserve id="shared-div"></div>
    </body>
</html>

<!--- about.html -->
<html>
    <head></head>
    <body>
        <div fiamma-preserve id="shared-div"></div>
    </body>
</html>

You can also dynamically inject markup inside shared-div.

`fiamma-off`

Anchor tags (a) with this attribute are skipped by fiamma and will cause a full page reload when visited.

E.g.: disable fiamma when visiting a :subdomain

<a href="https://subdomain.mydomain.com" fiamma-off>Subdomain</a>

Progress bar

Add stylesheet

#fiamma-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    transform: scaleX(0);
    background-color: #f3754a;
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: left;
    z-index: 2147483647;
}

Import EnableProgressBar function:

import { Router, EnableProgressBar } from 'fiamma.esm.js';

EnableProgressBar();
Router();

License

Distributed under the MIT License. See LICENSE for more information.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme