Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@zayesh/stay

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zayesh/stay

Stay is a small but effective library for the creation of dynamic xhr-driven web applications.

  • 0.1.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Stay

Build status Windows build status GitHub version npm version Dependencies

Stay is a small but effective module for the creation of dynamic xhr-driven web applications. It expects the server to be able to send the page content as a JSON string in which the key names correspond with the IDs of the target DOM containers.

Installation

Download the minified library and include it in your project:

<script src="/js/stay.min.js"></script>

You can also install this module with npm.

$ npm install @zayesh/stay

Usage

The client part

import Stay from "@zayesh/stay";

var stay = new Stay({

	// Logs to console by default
	stderr: "myDomElement",

	// Default is "/json"
	infix: "/asyncRequests",

	// Default is 60000ms, 0 means no timeout
	timeoutPost: 0,

	// Default is 5000ms
	timeoutGet: 0,

	// Default is true
	autoUpdate: false

});

stay.addEventListener("navigate", function() {

	console.log("Page navigation has started.");

});

stay.addEventListener("receive", function(event) {

	/* If autoUpdate is disabled, the programmer has to decide 
	 * when to update the page content. The update() method MUST 
	 * be called at some point to unlock the system!
	 */

	stay.update(event.response);

});

stay.addEventListener("load", function() {

	console.log("The requested page has been loaded.");

});

The server part

Every GET and POST endpoint needs to be available as a condensed JSON resource. This includes dynamically generated pages and error pages. Serving a JSON version of each resource should be seen as an additional feature and nothing more.

Stay is rather tolerant when it comes to different URI patterns, but a well-structured URI configuration is the foundation of a good web application. Take a look at some recommendations for good URI design if you haven't already! These guidelines are a good starting point.

The following example shows what's going on behind the scenes of Stay:

<a href="/foo/bar">Hyperlink</a>

This link will internally be converted to:

"http[s]://www.your-domain.com[:port]/json/foo/bar"

The modified URI won't be seen by the user and the infix can be freely chosen by you. If we assume that the original URI points to a simple HTML page which looks like this:

<html>
	<head>
		<meta charset="utf-8">
		<title>Foo</title>
	</head>
	<body>
		<div id="main">Bar!</div>
	</body>
</html>

then the JSON equivalent must look like this:

{
    "meta": {
        "title": "Foo"
    },
    "main": "Bar!"
}

Stay will replace the current children of #main with the received content which is a simple text node in this case, but could be any HTML content. The current page's title will also be adjusted and the browser history will be managed for you to support the back and forward browser controls. Although the above example HTML is minimal, it highlights the main aspects of asynchronous web applications:

  • More efficient bandwidth usage
  • Better loading performance
  • More control over the navigation process
  • Consolidation of a main page structure
  • Still highly customisable!

Linked Media and External Resources

Stay detects external resources and doesn't touch them. The user will experience a synchronous navigation. Hyperlinks to internal resources like images or executable files are problematic because they can't be identified as such by their URI alone. You may, however, define an arbitrary number of regular expressions to exclude specific URIs.

stay.exclusions.push(/\/nonJSON\//);

When linking a resource that can't be represented in JSON format, you should consider moving it on a dedicated file server. Since Stay ignores external resources by default, the file would just open as expected.

Documentation

API

Contributing

Maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

License

Copyright (c) 2015 Raoul van Rüschen
Licensed under the Apache 2.0 license.

Keywords

FAQs

Package last updated on 02 Nov 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc