@zayesh/stay
Advanced tools
Stay is a small but effective library for the creation of dynamic xhr-driven web applications.
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.
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
import Stay from "@zayesh/stay";
var stay = new Stay({
// Logs to console by default
stderr: "myDomElement",
// Default is "/json"
infix: "/urlPatternForAsyncRequests",
// Default is 60000ms, 0 means no timeout
timeoutPost: 0,
// Default is 5000ms
timeoutGet: 0,
// Default is true
autoUpdate: false
});
stay.addEventListener("navigate", function() {
alert("Page navigation has started.");
});
stay.addEventListener("receive", function(event) {
/* If autoUpdate is set to false, the programmer can
* decide when to update the page content.
* The response is the parsed JSON string from the server.
*/
stay.update(event.response);
});
stay.addEventListener("load", function() {
alert("The requested page has been loaded.");
});
Every page needs to be available as a condensed json resource for Stay to work. This includes dynamically generated pages and error pages. The json version of each resource should only be served additionally to a traditional system to support users who block JavaScript.
KEeping your URIs well structured is very important. Take a look at some best practices for URI design if you haven't already. These guidelines are a good starting point.
Stay is rather tolerant when it comes to different variations of URIs. Take a look at the following example to see what's going on behind the scenes:
<a href="/fish/salmon">Salmon</a>
This link will internally be converted to:
"http[s]://www.your-domain.com[:port]/json/fish/salmon"
The modified URI won't be seen by the user and the infix can freely be 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. 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.
Stay detects external resources and doesn't touch them.
Resources like images or executable files are problematic because they can't be identified as such by their URI alone. 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, the file will open as expected.
Maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.
Copyright (c) 2015 Raoul van Rüschen
Licensed under the Apache 2.0 license.
FAQs
Stay is a small but effective library for the creation of dynamic xhr-driven web applications.
The npm package @zayesh/stay receives a total of 0 weekly downloads. As such, @zayesh/stay popularity was classified as not popular.
We found that @zayesh/stay demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.