JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 29
  • Score
    100M100P100Q70675F
  • 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

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.

Initializ 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:
const loadingIndicator = document.querySelector('#indicator')

pill('#content', {
  onLoading() {
    // Show loading indicator
    loadingIndicator.style.display = 'initial'
  },
  onReady() {
    // Hide loading indicator
    loadingIndicator.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 loadingIndicator = 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:Options) -> void

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

Options.onLoading()

(page:Page) -> void

Handle loading start.

Options.onReady()

(page:Page) -> void

Handle loading finish.

Options.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

Options.shouldServe()

(url) -> boolean

Determine wither URL could be served by Pill. If returns false than link will be served by browser.

Options.shouldReload()

(page) => boolean

Determine wether previuosly loaded page should be loaded from server.

License

MIT © Rumkin