JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 20
  • Score
    100M100P100Q47918F
  • License MIT

Pill dynamic content loading for static sites.

Package Exports

  • pill

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Pill logo

badge: npm version badge: size 1.1 KiB badge: deps 0

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

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

How pill works. It:

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

Initialize in one line:

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

Table of Contents

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

  1. Inject pill's <script> into page.
  2. Create content root element and give it id.
  3. Create loading indicator element.
  4. 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.

API

pill()

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

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

Hooks

PillOptions.onError()

(error) -> void

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

PillOptions.onLoading()

(page:Page) -> void

Handle loading start.

PillOptions.onMounting()

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

#### `PillOptions.onReady()`

(page:Page) -> void

Handle loading finish.

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

Determine wether previously loaded page should be loaded from server.

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

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

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.

License

MIT © Rumkin