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

page-lifecycle

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

page-lifecycle - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

CHANGELOG.md

4

dist/lifecycle.es5.js

@@ -15,4 +15,4 @@ /*!

*/
/*! lifecycle.es5.js v0.1.0 */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.lifecycle=t()}(this,function(){"use strict";var e=void 0;try{new EventTarget,e=!1}catch(t){e=!1}var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),i=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},s=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},r=function(){function e(){t(this,e),this._registry={}}return n(e,[{key:"addEventListener",value:function(e,t){this._getRegistry(e).push(t)}},{key:"removeEventListener",value:function(e,t){var n=this._getRegistry(e),i=n.indexOf(t);i>-1&&n.splice(i,1)}},{key:"dispatchEvent",value:function(e){return e.target=this,Object.freeze(e),this._getRegistry(e.type).forEach(function(t){return t(e)}),!0}},{key:"_getRegistry",value:function(e){return this._registry[e]=this._registry[e]||[]}}]),e}(),a=e?EventTarget:r,o=e?Event:function e(n){t(this,e),this.type=n},u=function(e){function n(e,i){t(this,n);var r=s(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return r.newState=i.newState,r.oldState=i.oldState,r.originalEvent=i.originalEvent,r}return i(n,o),n}(),c="active",h="passive",f="hidden",d="frozen",l="terminated",v=["focus","blur","visibilitychange","freeze","resume","pageshow","onpageshow"in self?"pagehide":"unload"],p=function(e){return e.preventDefault(),e.returnValue="Are you sure?"},g=[[c,h,f,l],[c,h,f,d],[f,h,c],[d,f],[d,c],[d,h]].map(function(e){return e.reduce(function(e,t,n){return e[t]=n,e},{})}),y=function(){return document.visibilityState===f?f:document.hasFocus()?c:h};return new(function(e){function r(){t(this,r);var e=s(this,(r.__proto__||Object.getPrototypeOf(r)).call(this)),n=y();return e._state=n,e._unsavedChanges=[],e._handleEvents=e._handleEvents.bind(e),v.forEach(function(t){return self.addEventListener(t,e._handleEvents,!0)}),e}return i(r,a),n(r,[{key:"addUnsavedChanges",value:function(e){!this._unsavedChanges.indexOf(e)>-1&&(0===this._unsavedChanges.length&&self.addEventListener("beforeunload",p),this._unsavedChanges.push(e))}},{key:"removeUnsavedChanges",value:function(e){var t=this._unsavedChanges.indexOf(e);t>-1&&(this._unsavedChanges.splice(t,1),0===this._unsavedChanges.length&&removeEventListener("beforeunload",p))}},{key:"_dispatchChangesIfNeeded",value:function(e,t){if(t!==this._state)for(var n=function(e,t){for(var n,i=0;n=g[i];++i){var s=n[e],r=n[t];if(s>=0&&r>=0&&r>s)return Object.keys(n).slice(s,r+1)}return[]}(this._state,t),i=0;i<n.length-1;++i){var s=n[i],r=n[i+1];this._state=r,this.dispatchEvent(new u("statechange",{oldState:s,newState:r,originalEvent:e}))}}},{key:"_handleEvents",value:function(e){switch(e.type){case"pageshow":case"resume":this._dispatchChangesIfNeeded(e,y());break;case"focus":this._dispatchChangesIfNeeded(e,c);break;case"blur":this._state===c&&this._dispatchChangesIfNeeded(e,y());break;case"pagehide":case"unload":this._dispatchChangesIfNeeded(e,e.persisted?d:l);break;case"visibilitychange":this._state!==d&&this._state!==l&&this._dispatchChangesIfNeeded(e,y());break;case"freeze":this._dispatchChangesIfNeeded(e,d)}}},{key:"state",get:function(){return this._state}},{key:"pageWasDiscarded",get:function(){return document.wasDiscarded||!1}}]),r}())});
/*! lifecycle.es5.js v0.1.1 */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.lifecycle=t()}(this,function(){"use strict";var e=void 0;try{new EventTarget,e=!1}catch(t){e=!1}var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),r=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},s=function(){function e(){n(this,e),this._registry={}}return i(e,[{key:"addEventListener",value:function(e,t){this._getRegistry(e).push(t)}},{key:"removeEventListener",value:function(e,t){var n=this._getRegistry(e),i=n.indexOf(t);i>-1&&n.splice(i,1)}},{key:"dispatchEvent",value:function(e){return e.target=this,Object.freeze(e),this._getRegistry(e.type).forEach(function(t){return t(e)}),!0}},{key:"_getRegistry",value:function(e){return this._registry[e]=this._registry[e]||[]}}]),e}(),o=e?EventTarget:s,u=e?Event:function e(t){n(this,e),this.type=t},f=function(e){function t(e,i){n(this,t);var r=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.newState=i.newState,r.oldState=i.oldState,r.originalEvent=i.originalEvent,r}return r(t,u),t}(),c="active",h="passive",d="hidden",l="frozen",p="terminated",v="object"===("undefined"==typeof safari?"undefined":t(safari))&&safari.pushNotification,y=["focus","blur","visibilitychange","freeze","resume","pageshow","onpageshow"in self?"pagehide":"unload"],g=function(e){return e.preventDefault(),e.returnValue="Are you sure?"},_=[[c,h,d,p],[c,h,d,l],[d,h,c],[l,d],[l,c],[l,h]].map(function(e){return e.reduce(function(e,t,n){return e[t]=n,e},{})}),b=function(){return document.visibilityState===d?d:document.hasFocus()?c:h};return new(function(e){function t(){n(this,t);var e=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this)),i=b();return e._state=i,e._unsavedChanges=[],e._handleEvents=e._handleEvents.bind(e),y.forEach(function(t){return addEventListener(t,e._handleEvents,!0)}),v&&addEventListener("beforeunload",function(t){e._safariBeforeUnloadTimeout=setTimeout(function(){t.defaultPrevented||t.returnValue.length>0||e._dispatchChangesIfNeeded(t,d)},0)}),e}return r(t,o),i(t,[{key:"addUnsavedChanges",value:function(e){!this._unsavedChanges.indexOf(e)>-1&&(0===this._unsavedChanges.length&&addEventListener("beforeunload",g),this._unsavedChanges.push(e))}},{key:"removeUnsavedChanges",value:function(e){var t=this._unsavedChanges.indexOf(e);t>-1&&(this._unsavedChanges.splice(t,1),0===this._unsavedChanges.length&&removeEventListener("beforeunload",g))}},{key:"_dispatchChangesIfNeeded",value:function(e,t){if(t!==this._state)for(var n=function(e,t){for(var n,i=0;n=_[i];++i){var r=n[e],a=n[t];if(r>=0&&a>=0&&a>r)return Object.keys(n).slice(r,a+1)}return[]}(this._state,t),i=0;i<n.length-1;++i){var r=n[i],a=n[i+1];this._state=a,this.dispatchEvent(new f("statechange",{oldState:r,newState:a,originalEvent:e}))}}},{key:"_handleEvents",value:function(e){switch(v&&clearTimeout(this._safariBeforeUnloadTimeout),e.type){case"pageshow":case"resume":this._dispatchChangesIfNeeded(e,b());break;case"focus":this._dispatchChangesIfNeeded(e,c);break;case"blur":this._state===c&&this._dispatchChangesIfNeeded(e,b());break;case"pagehide":case"unload":this._dispatchChangesIfNeeded(e,e.persisted?l:p);break;case"visibilitychange":this._state!==l&&this._state!==p&&this._dispatchChangesIfNeeded(e,b());break;case"freeze":this._dispatchChangesIfNeeded(e,l)}}},{key:"state",get:function(){return this._state}},{key:"pageWasDiscarded",get:function(){return document.wasDiscarded||!1}}]),t}())});
//# sourceMappingURL=lifecycle.es5.js.map

7

package.json
{
"name": "page-lifecycle",
"version": "0.1.0",
"version": "0.1.1",
"description": "A JavaScript library to observe Page Lifecycle API states: https://github.com/WICG/page-lifecycle",

@@ -9,3 +9,3 @@ "license": "Apache-2.0",

"scripts": {
"test": "eslint *.js src/**/*",
"test": "eslint *.js src/**/* test/*.mjs",
"build": "rollup -c"

@@ -62,3 +62,4 @@ },

"assert": false,
"sinon": false
"sinon": false,
"safari": false
},

@@ -65,0 +66,0 @@ "parserOptions": {

201

README.md

@@ -1,4 +0,201 @@

# Lifecycle.js
# PageLifecycle.js
A JavaScript library to observe [Page Lifecycle API](https://github.com/WICG/page-lifecycle) states.
- [Overview](#overview)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [Properties](#properties)
- [Methods](#methods)
- [Events](#events)
- [Browser Support](#browser-support)
## Overview
PageLifecycle.js is a tiny JavaScript library (<1K gzipped) that allows developers to easily observe [Page Lifecycle API](https://developers.google.com/web/updates/2018/07/page-lifecycle-api) state changes and implement [Page Lifecycle best practices](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#developer-recommendations-for-each-state) consistently across all browsers.
**▶️ View demo: [page-lifecycle.glitch.me](https://page-lifecycle.glitch.me/) 👀**
## Installation
You can install this library from npm by running:
```sh
npm install --save-dev page-lifecycle
```
## Usage
Releases of this library include three minified, production-ready versions:
**1. ES5: [`dist/lifecycle.es5.js`](/dist/lifecycle.es5.js)** (UMD) ⭐
Use this version for maximum compatibility with legacy browsers (that can't run ES2015+ code).
As a UMD bundle, it can be required in CommonJS or AMD environments, or it can be loaded with a script tag as the browser global `lifecycle`.
```html
<script defer src="/path/to/lifecycle.es5.js"></script>
<script defer>
lifecycle.addEventListener('statechange', function(event) {
console.log(event.oldState, event.newState);
});
</script>
```
**2. ES2015: [`dist/lifecycle.mjs`](/dist/lifecycle.mjs)** (ESM) 🔥
Use this version if you only support ES module-capable browsers or if you're using `<script type="module">` and the `nomodule` fallback [to conditionally target modern browsers](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/).
```html
<script type="module">
import lifecycle from '/path/to/page-lifecycle.mjs';
lifecycle.addEventListener('statechange', function(event) {
console.log(event.oldState, event.newState);
});
</script>
```
**3. ES2015 (native): [`dist/lifecycle.native.mjs`](/dist/lifecycle.native.mjs)** (ESM w/o `EventTarget` and `Event` shims) ⚠️
Use this version if you're only targeting browsers that [support extending `EventTarget` and `Event` constructors](https://www.chromestatus.com/features/5721972856061952).
*Note: this version is the smallest but will only work in some browsers. The implementation instructions are the same as the ES2015 version above.*
## API
The PageLifecycle.js library exports a `lifecycle` object, which is a singleton instance of the [`Lifecycle`](/src/Lifecycle.mjs) class. The `Lifecycle` class has the following properties, methods, and events:
### Properties
<table>
<tr valign="top">
<th align="left">Name</th>
<th align="left">Type</th>
<th align="left">Description</th>
</tr>
<tr valign="top">
<td><code>state</code></td>
<td><code>string</code></td>
<td>
Returns the current Page Lifecycle state.
</td>
</tr>
<tr valign="top">
<td><code>pageWasDiscarded</code></td>
<td><code>boolean</code></td>
<td>
Returns the value of <code>document.wasDiscarded</code> (or <code>false</code> if not present).
</td>
</tr>
</table>
### Methods
<table>
<tr valign="top">
<th align="left">Name</th>
<th align="left">Description</th>
</tr>
<tr valign="top">
<td><code>addEventListener</code></td>
<td>
<p><strong>Parameters:</strong></p>
<ul>
<li><em>type</em>: <code>string</code></li>
<li><em>listener</em>: <code>function(Event)</code></li>
</ul>
<p>Adds a callback function to be invoked whenever the passed event type is detected. <em>(Note: at the moment only the "statechange" event type is supported.)</em></p>
</td>
</tr>
<tr valign="top">
<td><code>removeEventListener</code></td>
<td>
<p><strong>Parameters:</strong></p>
<ul>
<li><em>type</em>: <code>string</code></li>
<li><em>listener</em>: <code>function(Event)</code></li>
</ul>
<p>Removes a function from the current list of listeners for the passed event type. <em>(Note: at the moment only the "statechange" event type is supported.)</em></p>
</td>
</tr>
<tr valign="top">
<td><code>addUnsavedChanges</code></td>
<td>
<p><strong>Parameters:</strong></p>
<ul>
<li><em>id</em>: <code>Object|Symbol</code></li>
</ul>
<p>Adds an item to an internal pending-changes stack. Calling this method adds a generic <code>beforeunload</code> listener to the window (if one isn't already added).</p>
<p>The argument passed should be unique to this state, as it can only be removed by passing the same argument to <code>removeUnsavedChanges()</code>.
</p>
</td>
</tr>
<tr valign="top">
<td><code>removeEventListener</code></td>
<td>
<p><strong>Parameters:</strong></p>
<ul>
<li><em>id</em>: <code>Object|Symbol</code></li>
</ul>
<p>Removes an item matching the passed argument from an internal pending-changes stack. If the stack is empty, the generic <code>beforeunload</code> listener is removed from the window.</p>
</td>
</tr>
</table>
### Events
<table>
<tr valign="top">
<th align="left">Name</th>
<th align="left">Description</th>
</tr>
<tr valign="top">
<td><code>statechange</code></td>
<td>
<p><strong>Properties:</strong></p>
<ul>
<li><em>newState</em>: <code>string</code> The current lifecycle state the page just transitioned to.</li>
<li><em>oldState</em>: <code>string</code> The previous lifecycle state the page just transitioned from.</li>
<li><em>originalEvent</em>: <code>Event</code> the DOM event that triggered the state change.</li>
</ul>
<p>The <code>statechange</code> event is fired whenever the page's lifecycle state changes.</p>
</td>
</tr>
</table>
## Browser Support
<table>
<tr>
<td align="center">
<img src="https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/chrome/chrome_48x48.png" alt="Chrome"><br>
✔
</td>
<td align="center">
<img src="https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/firefox/firefox_48x48.png" alt="Firefox"><br>
✔
</td>
<td align="center">
<img src="https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/safari/safari_48x48.png" alt="Safari"><br>
✔
</td>
<td align="center">
<img src="https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/edge/edge_48x48.png" alt="Edge"><br>
✔
</td>
<td align="center">
<img src="https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" alt="Internet Explorer"><br>
9+
</td>
<td align="center">
<img src="https://raw.githubusercontent.com/alrra/browser-logos/39.2.2/src/opera/opera_48x48.png" alt="Opera"><br>
✔
</td>
</tr>
</table>
PageLifecycle.js has been tested and known to work in the above browsers.
demo/index.html
demo/main.js
demo/page-2.html
demo/style.css
dist/lifecycle.es5.js.map

Sorry, the diff of this file is not supported yet

dist/lifecycle.mjs

Sorry, the diff of this file is not supported yet

dist/lifecycle.mjs.map

Sorry, the diff of this file is not supported yet

dist/lifecycle.native.mjs

Sorry, the diff of this file is not supported yet

dist/lifecycle.native.mjs.map

Sorry, the diff of this file is not supported yet

src/Lifecycle.mjs

Sorry, the diff of this file is not supported yet

test/Lifecycle-test.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc