vpjax

    0.8.2 • Public • Published

    Vanilla JS + pushState = vPjax

    You can save your visitors from reloading resources every time they switch pages. In addition, since the whole process is asynchronous, it will provide a great experience by providing a faster transition.

    Get Started

    NPM

    npm install vpjax

    CDN

    https://unpkg.com/vpjax

    How to Use?

    So, it's very easy. You just need to instantiate a class where you mark the trigger selector and container element selector. You can also perform external actions by adding a listener for events that occur while running. According to the X-VPJAX header that comes with the request in the server output, you can trim the parts that you do not want to be sent again.

    // When instantiating the class we send a flag to the constructor method pointing to the trigger and the container.
    const vanillaPjax = new vPjax('a:not([target="_blank"])', '#wrap').init()
    // Or we can send more flag as an object. As follows...
    const vanillaPjax = new vPjax({
      selector: 'a:not([target="_blank"])', // element selector to be based on if clicked
      wrap: '#wrap', // container selector to base on query result
      formSelector: 'form[data-vpjax]', // form selector to be used as a basis for form submission operations
      cacheExpire: 500, // cache time in ms
      timeOut: 2000 // timeout in ms
    }).init()
    
    // And with form submit support.
    const vanillaPjax = new vPjax('a:not([target="_blank"])', '#wrap').form('[data-vpjax]').init()
    
    // You can also use it as below to reload the page.
    vanillaPjax.reload(); // current
    // or
    vanillaPjax.reload("https://site-address.com"); // another

    For events;

    document.addEventListener("vPjax:start", (e) => {
      // NProgress.start(); // If you are using a progress-bar library, you can use it as in the example.
    })
    
    document.addEventListener("vPjax:finish", (e) => {
      // NProgress.done(); // If you are using a progress-bar library, you can use it as in the example.
    });
    
    // Other events
    document.addEventListener("vPjax:click", (e) => {
      // Actions to be taken when a click is received for the new page.
    })
    
    document.addEventListener("vPjax:submit", (e) => {
      // Actions to take when form submission is triggered.
    })
    
    document.addEventListener("vPjax:beforeSend", (e) => {
      // Actions to be taken just before the asynchronous request starts.
    })
    
    document.addEventListener("vPjax:timeout", (e) => {
      // Actions to take when timeout occurs.
    })
    
    document.addEventListener("vPjax:success", (e) => {
      // Actions to be taken when the server response is successfully received.
    })
    
    document.addEventListener("vPjax:beforeExtract", (e) => {
      // Actions to be taken before DOM update starts.
    })
    
    document.addEventListener("vPjax:error", (e) => {
      // Actions to take when an error occurs.
    })
    
    document.addEventListener("vPjax:popstate", (e) => {
      // Actions to be taken when going backwards or forwards.
    })

    You can perform server-side request control on the server as in the example below.

      
      if (isset($_SERVER['HTTP_X_VPJAX']) !== false) {
        // For new page loads with vPJAX.
      } else {
        // The part you will use for the first load.
      }
      

    Inspired by: jquery-pjax [https://github.com/defunkt/jquery-pjax]

    Install

    npm i vpjax

    DownloadsWeekly Downloads

    14

    Version

    0.8.2

    License

    MIT

    Unpacked Size

    39 kB

    Total Files

    11

    Last publish

    Collaborators

    • halillusion