pill

v1.4.6

Published

2 years ago

Dynamic content loading for static sites.

Downloads

0High
0Medium
0Low

rumkin

static site dynamic loading

Pill adds dynamic content loading to static sites and makes content loading smooth for users. It's pretty small only 1.45 KiB minified and gzipped. It fits perfectly for static sites with WebComponents.

🐥 Tiny: 1.45 KiB gzipped.
🥤 Easy-to-use: single function call.
🎮 Handful: hooks and callbacks could modify the default behavior.

Pill development started with the tweet by Andrey Sitnik @ai.

How pill works. It:

Intercepts navigation attempts: links clicks and history navigation.
Loads requested url using fetch.
Grabs content from received HTML.
Replaces current page content.

Initialize in one line:

pill('#content') // Yep, that's it.

Install

Include script from unpkg.com:
```
<script src="https://unpkg.com/pill@1/dist/pill.min.js"></script>
```
⚠️ Remember about security! Add subresource integrity (SRI) checksum from checksum.txt.
Install via npm:
```
npm i pill
```

Usage

Inject pill's <script> into page.
Create content root element and give it id.
Create loading indicator element.
Initialize pill:

// Get loading indicator element
const indicator = document.querySelector('#indicator')
// Assign Pill to specified selector
pill('#content', {
  onLoading() {
    // Show loading indicator
    indicator.style.display = 'initial'
  },
  onReady() {
    // Hide loading indicator
    indicator.style.display = 'none'
  }
})

Complete example

<html>
  <head>
    <title>Home</title>
    <script src="https://unpkg.com/pill@1/dist/pill.min.js"></script>
    <style>
      /* global styles */
      #indicator {
        position: fixed;
        top: 0;
        right: 0;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="indicator">Loading...</div>
    <div id="content">
      <style>/* page styles */</style>

      <!-- page content here -->
    </div>
    <script>
      const indicator = document.querySelector('#indicator')

      pill('#content', {
        onLoading() {
          // Show loading indicator
          indicator.style.display = 'initial'
        },
        onReady() {
          // Hide loading indicator
          indicator.style.display = 'none'
        }
      })
    </script>
  </body>
</html>

Each document of the site should surround #content element with the same HTML. All page-related content should be located inside #content. It could be styles, scripts, etc.

Corner Cases

No script inside of the content element

Script elements placed inside of your content element wouldn't be evaluated after loading. You should place all scripts out of your content element (in the head or body) and run JS manually. This behavior prevents your site from memory licks and race conditions caused by inner scripts different lifetime. And then you can react on page change with onReady hook to change your app behavior.

Example:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="content"></div>
    <!-- common scripts -->
    <script src="/scripts/pill.js"></script>
    <script src="/scripts/app.js"></script>
    <script>
      pill('#content', {
          onMounting(page, url, element) {
            // Init page, for example bind event listeners, start timers, etc.
            App.initPage(url, element)
          },
          onUnmounting(page, url, element) {
            // Uninitialise page, for example remove event listeners, stop timers, etc.
            App.destroyPage(url, element)
          },
       })
       App.initPage(new URL(window.location), document.querySelector('#content'))
    </script>
</html>

API

`pill()`

(selector:string, options:PillOptions) -> void

Initialize pill. Start listening for navigation attempts and history state changes. Puts loaded content into selector element.

Events

You can handle Pill's events by binding handlers on document element:

document.addEventListener('pill:loading', (e) => {
  e.detail.page; // Current page
})

`pill:error` Event

{
  detail: {
    url: URL
    element: HTMLElement
    error: Error
  }
}

Is emitted when the new page loading has been started. This event wouldn't be emitted if page is cached.

Could be replaced with PillOptions.onLoading() hook.

`pill:loading` Event

{
  detail: {
    url: URL
    element: HTMLElement
  }
}

Is emitted when the new page loading has been started. This event wouldn't be emitted if page is cached.

Could be replaced with PillOptions.onLoading() hook.

`pill:mounting` Event

{
  detail: {
    page: Page
    url: URL
    element: HTMLElement
  }
}

Is emitted when new page content is about to be added into the DOM.

Could be replaced with PillOptions.onMounting() hook.

`pill:ready` Event

{
  detail: {
    page: Page
    url: URL
    element: HTMLElement
  }
}

Is emitted when the requested page is mounted into DOM and no futher work would be done.

Could be replaced with PillOptions.onReady() hook.

`pill:unmounting` Event

{
  detail: {
    page: Page
    url: URL
    element: HTMLElement
  }
}

Is emitted when new page content is about to be removed from the DOM.

Could be replaced with PillOptions.onMounting() hook.

Hooks

`PillOptions.onError()`

(error) -> void

Handle page loading exception. By default is console.error.

`PillOptions.onLoading()`

(page:Page) -> void

Handle loading start.

Could be replaced with pill:loading Event listener.

`PillOptions.onMounting()`

(page:Page, url:URL, element:HTMLElement) -> void

Fires everytime new content is about to be loaded to the DOM.

Could be replaced with pill:mounting Event listener.

`PillOptions.onReady()`

(page:Page) -> void

Handle loading finish.

Could be replaced with pill:ready Event listener.

`PillOptions.onUnmounting()`

(page:Page, url:URL, element:HTMLElement) -> void

Fires everytime content is about to be removed from the DOM.

Could be replaced with pill:unmounting Event listener.

Other options

`PillOptions.fromError()`

(error:Error) -> {title, content}

Use it to display notification when something went wrong. If an error was thrown while handling request. You still able to render content using method fromError

`PillOptions.getKeyFromUrl()`

(url:URL) -> String

Get cache key from URL. It's useful when URL contains query params which are unknown to server and could not affect response. By default any new pathname and search string combination will cause new request.

`PillOptions.shouldReload()`

(page:Page) -> Boolean

Determine wether previously loaded page should be loaded from server.

`PillOptions.shouldServe()`

(url:URL, target:HTMLElement) -> Boolean

Developer-defined logic to determine whether the URL could be served by Pill. If you return false then the link will be served by browser.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of Contents

Install

Usage

Complete example

Corner Cases

No script inside of the content element

API

pill()

Events

pill:error Event

pill:loading Event

pill:mounting Event

pill:ready Event

pill:unmounting Event

Hooks

PillOptions.onError()

PillOptions.onLoading()

PillOptions.onMounting()

PillOptions.onReady()

PillOptions.onUnmounting()