Single Page XHR enhancement for SSR powered web applications. SPX is a lightening fast, lightweight (8kb gzip) push~state solution that (pre)-fetches HTML over the wire and uses the response to perform targeted fragment replacements. The module maintains an in-memory snapshot cache of fetched pages which prevents subsequent requests from occurring, and instantaneous navigation in a controlled a persisted manner.

Documentation

Documentation lives on spx.js.org

Features

• Simple and painless drop-in integration.
• Pre-fetching capabilities using hover, intersection or proximity observers.
• Snapshot caching engine and per-page state control.
• Powerful pub/sub event driven lifecycle triggers.
• Provides a client side DOM hydration approach.
• Supports multiple replace, append and prepend fragment targets.
• Gracefully handles script and style asset evaluation.
• Attribute driven programmatic control.

Installation

PNPM

pnpm add spx

YARN

yarn add spx

NPM

npm install spx --save

CDN

https://unpkg.com/spx

Usage

SPX is distributed as an ESM module and designed for usage in browser. You need to establish a connection to invoke the module.

import spx from 'spx';

spx.connect({
  targets: [
    'header',
    'main'
  ]
})(function (session) {

  // Callback is invoked on DOMContentLoaded.
  console.log(session)

});

An SPX connection will initialize an SPX session. In the above example we are targeting the <header> and <main> nodes. In your web application, ensure both elements exist for each page, for example:

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <h1>Hello World!</h1>
</main>

Take a look at the documentation to learn how to refine and configure SPX.

Special Thanks

Special Thanks / Спасибі to Alexey for the SPX npm registry name.

License

Licensed under MIT