Connect

The SPX initialization process involves invoking a default function, spx(), which returns a curried callback function designed to activate once the DOMContentLoaded event fires. At this juncture, SPX captures a snapshot of the document’s state by saving document.documentElement.outerHTML into its snapshot cache.

This initial snapshot serves as a baseline, reflecting the document’s state at the moment of initialization. This differs in subsequent visits, as snapshots are obtained using XHR over the wire.

Example 1

SPX Connection using default options:

import spx from 'spx';
spx(); // (session) => {}

Example 2

SPX Connection using default options with callback:

import spx from 'spx';
spx()(function(session) {
  // You initialize third party js in this callback
});

Example 3

SPX Connection with fragment[] options and callback:

import spx from 'spx';
spx({
  fragment: [
    'menu',  // #menu is dynamic and will morph
    'main'   // #main is dynamic and will morph
  ]
})(function(session) {
  // You initialize third party js in this callback
  console.log(session);
});

Example 4

SPX Connection with curried callback reference:

import spx from 'spx';
const domReady = spx({
  fragment: [
    'menu',  // #menu is dynamic and will morph
    'main'   // #main is dynamic and will morph
  ]
});
export default domReady(function(session) {
  // You initialize third party js in this callback
  console.log(session);
})