@pelagiccreatures/sargasso
Advanced tools
@pelagiccreatures/sargasso - npm Package Compare versions
Comparing version 0.8.5 to 0.8.6
15
index.js
@@ -27,2 +27,7 @@ /* | ||
| import { | ||
| theDOMWatcher, theScrollWatcher, theResizeWatcher, theOrientationWatcher, theWorkerWatcher | ||
| } | ||
| from './lib/Services.js' | ||
| const utils = { | ||
@@ -34,4 +39,12 @@ registerSargassoClass: registerSargassoClass, | ||
| const services = { | ||
| theDOMWatcher: theDOMWatcher, | ||
| theScrollWatcher: theScrollWatcher, | ||
| theResizeWatcher: theResizeWatcher, | ||
| theOrientationWatcher: theOrientationWatcher, | ||
| theWorkerWatcher: theWorkerWatcher | ||
| } | ||
| export { | ||
| Sargasso, utils, loadPageHandler | ||
| Sargasso, utils, loadPageHandler, services | ||
| } |
@@ -50,4 +50,4 @@ /** | ||
| hijaxLinks () { | ||
| const links = this.element.getElementsByTagName('a') | ||
| hijaxLinks (fragment) { | ||
| const links = fragment ? fragment.getElementsByTagName('a') : this.element.getElementsByTagName('a') | ||
| for (let i = 0; i < links.length; i++) { | ||
@@ -149,2 +149,3 @@ const link = links[i] | ||
| } | ||
| this.hijaxLinks(replace) | ||
| } | ||
@@ -151,0 +152,0 @@ this.queueFrame(frame) |
| { | ||
| "name": "@pelagiccreatures/sargasso", | ||
| "version": "0.8.5", | ||
| "version": "0.8.6", | ||
| "description": "Simple, Fast, Reactive, Supervised Javascript controllers for custom html elements.", | ||
@@ -20,3 +20,3 @@ "keywords": [ | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "test": "npx mocha-chrome http://localhost:8000/tests/index.html", | ||
| "build": "rollup -c rollup.config.js", | ||
@@ -37,2 +37,3 @@ "build-example": "rollup -c rollup.config.app.js", | ||
| "babel-preset-env": "^1.7.0", | ||
| "chai": "^4.2.0", | ||
| "core-js": "^3.6.4", | ||
@@ -45,2 +46,7 @@ "eslint": "^6.8.0", | ||
| "eslint-plugin-standard": "^4.0.1", | ||
| "mocha": "^7.0.1", | ||
| "mocha-chrome": "^2.2.0", | ||
| "rollup-plugin-terser": "^5.2.0", | ||
| "setimmediate": "^1.0.5", | ||
| "sinon": "^8.1.1", | ||
| "webpack": "^4.41.5", | ||
@@ -47,0 +53,0 @@ "webpack-cli": "^3.3.10" |
@@ -7,6 +7,23 @@ # @PelagicCreatures/Sargasso | ||
| Sargasso Makes HTML elements aware of events such as Document (DOM) insertions and deletions, HIJAX Page load, Scrolling, Resizing, Orientation and messages Managed Web Workers allowing them to efficiently implement any behavior they need to perform. | ||
| Sargasso Makes HTML elements aware of events such as Document (DOM) insertions and deletions, HIJAX Page load, Scrolling, Resizing, Orientation and messages Managed Web Workers and elements allowing them to efficiently implement any behavior they need to perform. | ||
| This is a very lightweight, pure ES6 framework (with only few dependencies) which aims to use the most advanced stable features of modern browsers to maximum effect leaving the historical cruft, kludges and code barnacles infesting older web frameworks behind. The result is lean, highly performant and clean library that simplifies the complex technologies behind modern progressive web apps and web sites. | ||
| One of the core features of this framework is to implement an asynchronous page loading scheme which supports deep linking and lightning fast page loads where only dynamic content areas are merged between page loads leaving css, js, web workers and wrapper elements intact. Sargasso controller instances are automatically created as needed when their element appears in the DOM and destroyed when their element is removed so everything is cleanly destroyed and all the trash is collected. Performance is further enhanced with shared event listening services which are fully debounced during large updates. Services are also provided to schedule content changes using the browser's **animation frame** event loop and managed **web workers** for simplified offloading of computation heavy tasks to a dedicated thread resulting in highly performant pages. | ||
| This is a very lightweight (27kb), pure ES6 framework (with only few dependencies) which aims to use the most advanced stable features of modern browsers to maximum effect leaving the historical cruft, kludges and code barnacles infesting older web frameworks behind. The result is lean, highly performant and clean library that simplifies the complex technologies behind modern progressive web apps and web sites. | ||
| Other Sargasso modules that build on this framework: | ||
| * [@pelagiccreatures/flyingfish: Lazy Loading Images](https://github.com/PelagicCreatures/flyingfish) | ||
| * [@pelagiccreatures/tropicbird: Material Design Element Controllers](https://github.com/PelagicCreatures/tropicbird) | ||
| * [@pelagiccreatures/molamola: Forms & Form Validation](https://github.com/PelagicCreatures/molamola) | ||
| ### Status | ||
| I am currently building out a fairly large web app based on this framework and I will be adding the more generalizable functionality to the @pelagiccreatures org as I go. | ||
| This will all be in production on a pretty large web site later this spring but the code is already pretty solid and is usable today. I'm still working on the unit testing but have over 80% coverage at the moment. | ||
| If you are curious, have questions, want to help or have any feedback feel free to contact me by opening an issue. | ||
| I am being rather strict about trying to keep this technologically forward looking so as to not burden this framework with lots of obsolete junk and polyfills so while it will not work on *every* browser, it should work on any *reasonably* modern one. If you run into any problems let me know. I am actively working on this so you are likely to get my attention pretty quickly. | ||
| ``` | ||
@@ -18,6 +35,7 @@ @author Michael Rhodes (except where noted) | ||
| Progressive Web Apps and modern websites need a HIJAX scheme. One of the core features of this framework is to implement an asynchronous page loading scheme which supports deep linking and lightning fast page loads where only dynamic content areas are merged between page loads leaving css, js, web workers and wrapper elements intact. Sargasso controller instances are automatically created as needed when their element appears in the DOM and destroyed when their element is removed so everything is cleanly destroyed and all the trash is collected. | ||
| ### Why? | ||
| Performance is further enhanced with shared event listening services which are fully debounced during large updates. Services are also provided to schedule content changes using the browser's **animation frame** event loop and managed **web workers** for offloading computation heavy tasks to a dedicated thread resulting in highly performant pages. | ||
| Progressive Web Apps and modern websites need a HIJAX scheme to load pages that is integrated with and can manage element behavior. The big name frameworks out there at the moment are not a very good fit for the work I am doing so I decided to roll my own to investigate the current state of browser capabilities. | ||
| ```npm install @pelagiccreatures/sargasso --save``` | ||
@@ -27,3 +45,3 @@ | ||
| The @PelagicCreatures/sargasso package exports: | ||
| The @pelagiccreatures/sargasso package exports: | ||
@@ -36,3 +54,3 @@ * Sargasso - the sargasso super class | ||
| ```javascript | ||
| import {Sargasso, utils} from '@PelagicCreatures/sargasso' | ||
| import {Sargasso, utils} from '@pelagiccreatures/sargasso' | ||
| let options = {} | ||
@@ -64,3 +82,2 @@ utils.bootSargasso(options) | ||
| ```javascript | ||
| Learn more or give us feedback | ||
| import commonjs from '@rollup/plugin-commonjs' | ||
@@ -135,3 +152,3 @@ import nodeResolve from '@rollup/plugin-node-resolve' | ||
| ```javascript | ||
| import {Sargasso, utils, loadPageHandler} from '@PelagicCreatures/sargasso' | ||
| import {Sargasso, utils, loadPageHandler} from '@pelagiccreatures/sargasso' | ||
| let options = { | ||
@@ -347,1 +364,17 @@ hijax: { onError: (level, message) => { alert('Something went wrong. ' + message) } } | ||
| ``` | ||
| ### Tests | ||
| The hijax scheme does not work for file://xxx URIs so start a simple server on localhost: | ||
| ``` | ||
| python example/localhost.py | ||
| ``` | ||
| Then run the tests: | ||
| ``` | ||
| npm test | ||
| -or- | ||
| point your browser to http://localhost:8000/tests/index.html to see it all in action | ||
| ``` |
| import commonjs from '@rollup/plugin-commonjs' | ||
| import nodeResolve from '@rollup/plugin-node-resolve' | ||
| import json from '@rollup/plugin-json' | ||
| import { | ||
| terser | ||
| } | ||
| from 'rollup-plugin-terser' | ||
@@ -17,4 +21,9 @@ export default { | ||
| nodeResolve(), | ||
| commonjs() | ||
| commonjs(), | ||
| terser({ | ||
| output: { | ||
| comments: false | ||
| } | ||
| }) | ||
| ] | ||
| } |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by13.79%
33
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by9.68%
374
Worsened metrics
- Total package byte prevSize
- decreased by-13.01%
468268
- Dev dependency count
- increased by35.29%
23
- Lines of code
- decreased by-30.8%
4529
No dependency changes