@pelagiccreatures/sargasso - npm Package Compare versions

Comparing version 0.5.13 to 0.5.14

example/test.js

@@ -9,25 +9,37 @@ class myClass extends sargasso.Sargasso {
 		const frame = () => {
-			this.element.innerHTML = '<p>Hello There Viewport! Starting offloaded task in web worker so things are still responsive here.'
+			this.element.innerHTML = '<p>Hello There Viewport! Now starting an offloaded task in web worker so things are still responsive here while I think.'
 			this.element.style.color = 'red'
 			this.addClass('animated')
 			this.addClass('tada')
-			this.offLoadTask()
 		}
 		this.queueFrame(frame)
+		this.offLoadTask()
 	}
 
 	offLoadTask () {
-		const code = `onmessage = function(e) {
-	console.log('starting web worker work')
-	for(let i = 0; i < e.data; i++){
-		// do something lots of times
-	}
-	postMessage('done counting to ' + e.data)
-}`
-		const worker = this.startWorker('myworkId', code)
+		// define a pointless function
+		const mySlowFunction = function (e) {
+			const baseNumber = e.data
+			let result = 0
+			for (var i = Math.pow(baseNumber, 7); i >= 0; i--) {
+				result += Math.atan(i) * Math.tan(i)
+			};
+			postMessage('Done doing pointless math: ' + result)
+		}
+
+		const txtFunction = 'onmessage = ' + mySlowFunction.toString()
+
+		// create the worker. managed by sargasso
+		const worker = this.startWorker('myworkId', txtFunction)
+
+		// listen to the worker
 		worker.onmessage = (e) => {
-			this.element.innerHTML = e.data
-			this.stopWorker('myworkId')
+			const frame = () => {
+				this.element.innerHTML = e.data
+			}
+			this.queueFrame(frame)
 		}
-		worker.postMessage(10000000)
+
+		// make the worker work
+		worker.postMessage(12)
 	}
@@ -34,0 +46,0 @@ }

lib/Sargasso.js

@@ -30,3 +30,3 @@ /**
 
-	Then a mySubclass object will be attached to the element
+	Then an instance of mySubclass will be attached to the element
 	when it appears in the DOM:
@@ -74,2 +74,4 @@
 
+		// subscribe to desired event services
+
 		if (this.options.watchDOM) {
@@ -91,4 +93,7 @@ theDOMWatcher.subscribe(this)
 
-		// if e.details.sargassoEvent is one of our usual events then just call the event method
-		// otherwise just hand it to this.elementEvent and let the subclass deal with it
+		/*
+			listen for 'sargasso' events
+			Call the method named in e.detail.sargassoEvent or call this.elementEvent
+		*/
+
 		this.elementListener = (e) => {
@@ -129,2 +134,6 @@ if (e.detail && e.detail.sargassoEvent && eventNames.indexOf(e.detail.sargassoEvent) !== -1) {
 
+	/*
+		manage the animation frame queue for this element
+	*/
+
 	flushQueue () {
@@ -138,2 +147,25 @@ if (this.pendingAnimationFrame) {
 
+	processQueue () {
+		this.pendingAnimationFrame = undefined
+		var toProcess = this.frameQueue.slice(0)
+		this.frameQueue = []
+		for (var i = 0; i < toProcess.length; i++) {
+			toProcess[i]()
+		}
+	}
+
+	/*
+		queueFrame - schedule a task in the requestAnimation frame event loop
+
+		Call this to queue functions that mutate the DOM (make changes to html)
+
+		EG:
+		let frame = () => {
+			this.element.addClass('big')
+		}
+		this.queueFrame(frame)
+
+		The frame will then be executed in the next requested animation frame
+	*/
+
 	queueFrame (frame) {
@@ -148,11 +180,3 @@ this.frameQueue.push(frame.bind(this))
 
-	processQueue () {
-		this.pendingAnimationFrame = undefined
-		var toProcess = this.frameQueue.slice(0)
-		this.frameQueue = []
-		for (var i = 0; i < toProcess.length; i++) {
-			toProcess[i]()
-		}
-	}
-
+	// override this if you have any listeners to clean up that you started in your subclass
 	sleep () {
@@ -178,2 +202,4 @@ if (this.options.watchDOM) {
 
+	// called when this.element is removed from the DOM
+	// you normally don't need to call this
 	destroy () {
@@ -201,3 +227,4 @@ if (tracing) trace(this, 'destroy')
 
-	// these handlers are called by the watchers - prolly should leave these alone
+	// these handlers are called by the event services - prolly should
+	// leave these alone
 
@@ -232,3 +259,17 @@ watchDOM () {
 
-	// you can call these from a subclass such as an 'enlarge to full screen' button
+	inViewport () {
+		if (theScrollWatcher.inViewPort(this.element)) {
+			if (!this.isInViewport) {
+				this.enterViewport()
+				this.isInViewport = true
+			}
+		} else {
+			if (this.isInViewport) {
+				this.exitViewport()
+				this.isInViewport = false
+			}
+		}
+	};
+
+	// you can call this from a subclass controller such as an 'enlarge to full screen' button
 	// otherwise if watchOrientation is set it will do this when phone is in lanscape
@@ -246,3 +287,6 @@ // it would be nice to acually use the experimental requestFullScreen thing but
 
-	// Override these methods in your subclass to take action on these events
+	/*
+		Event Handlers:
+		Override these methods in your subclass to take action on these events
+	*/
 
@@ -279,3 +323,3 @@ // something changed on the page
 
-	// utilities
+	// element utilities
 
@@ -302,26 +346,50 @@ hasClass (cssClass) {
 
-	inViewport () {
-		if (theScrollWatcher.inViewPort(this.element)) {
-			if (!this.isInViewport) {
-				this.enterViewport()
-				this.isInViewport = true
-			}
-		} else {
-			if (this.isInViewport) {
-				this.exitViewport()
-				this.isInViewport = false
-			}
+	/*
+		Worker management
+
+		Offload compute heavy tasks to a new thread and listen for result
+
+		You pass it a url of a web worker js file or create an inine web worker
+		from string of raw code such as:
+
+		let mycode = `onmessage = function (e) {
+			const baseNumber = e.data
+			let result = 0
+			for (var i = Math.pow(baseNumber, 7); i >= 0; i--) {
+				result += Math.atan(i) * Math.tan(i)
+			};
+			postMessage('Done doing pointless math: ' + result)
+		}`
+
+		let worker = this.startWorker('thing',mycode)
+
+		worker.onmessage = (e) => {
+			console.log(e.data) // we got the result
 		}
-	};
 
-	startWorker (id, code) {
-		const blob = new Blob([code], {
-			type: 'text/javascript'
-		})
-		const blobURL = URL.createObjectURL(blob)
+		worker.postMessage(12) // start computing
+	*/
+
+	startWorker (id, codeOrURL) {
+		let blobURL = codeOrURL
+
+		let revoke = false
+		if (!codeOrURL.match(/^(http|\/)/i)) {
+			const blob = new Blob([codeOrURL], {
+				type: 'text/javascript'
+			})
+			blobURL = URL.createObjectURL(blob)
+			revoke = true
+		}
+
 		this.workers[id] = new Worker(blobURL)
-		URL.revokeObjectURL(blobURL)
+
+		if (revoke) {
+			URL.revokeObjectURL(blobURL)
+		}
+
 		return this.workers[id]
 	}
 
+	// stop a worker
 	stopWorker (id) {
@@ -334,2 +402,3 @@ if (this.workers[id]) {
 
+	// cleanup all workers
 	stopAllWorkers () {
@@ -336,0 +405,0 @@ for (const worker in this.workers) {

package.json

 {
-  "name": "@pelagiccreatures/sargasso",
-  "version": "0.5.13",
-  "description": "Simple, Fast, Reactive, supervised Javascript controllers for html elements.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx webpack"
-  },
-  "author": "Michael Rhodes",
-  "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/preset-env": "^7.7.7",
-    "babel-loader": "^8.0.6",
-    "eslint": "^6.8.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
-  },
-  "dependencies": {
-    "js-cookie": "^2.2.1",
-    "lodash": "^4.17.15"
-  },
-  "directories": {
-    "example": "example",
-    "lib": "lib"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/PelagicCreatures/Sargasso.git"
-  },
-  "bugs": {
-    "url": "https://github.com/PelagicCreatures/Sargasso/issues"
-  },
-  "homepage": "https://github.com/PelagicCreatures/Sargasso#readme"
+	"name": "@pelagiccreatures/sargasso",
+	"version": "0.5.14",
+	"description": "Simple, Fast, Reactive, supervised Javascript controllers for html elements.",
+	"keywords": [
+		"javascript",
+		"es6",
+		"responsive",
+		"web worker",
+		"framework",
+		"lazy load",
+		"pwa",
+		"web app",
+		"hijax"
+	],
+	"main": "index.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"build": "npx webpack"
+	},
+	"author": "Michael Rhodes",
+	"license": "MIT",
+	"devDependencies": {
+		"@babel/core": "^7.7.7",
+		"@babel/preset-env": "^7.7.7",
+		"babel-loader": "^8.0.6",
+		"eslint": "^6.8.0",
+		"eslint-config-standard": "^14.1.0",
+		"eslint-plugin-import": "^2.19.1",
+		"eslint-plugin-node": "^10.0.0",
+		"eslint-plugin-promise": "^4.2.1",
+		"eslint-plugin-standard": "^4.0.1",
+		"webpack": "^4.41.5",
+		"webpack-cli": "^3.3.10"
+	},
+	"dependencies": {
+		"js-cookie": "^2.2.1",
+		"lodash": "^4.17.15"
+	},
+	"directories": {
+		"example": "example",
+		"lib": "lib"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/PelagicCreatures/Sargasso.git"
+	},
+	"bugs": {
+		"url": "https://github.com/PelagicCreatures/Sargasso/issues"
+	},
+	"homepage": "https://github.com/PelagicCreatures/Sargasso#readme"
 }

README.md

 # @PelagicCreatures/Sargasso
 
-### Simple, Fast, Supervised Javascript controllers for html elements.
+### Simple, Fast, Supervised Javascript Controllers for HTML Elements.
 
 [Demo Site](https://blog.myanti.social)
 
-This framework is very lightweight, pure ES6 with only few dependencies
+This is a very lightweight, pure ES6 (with only few dependencies) framework which aims to use the most advanced stable features of modern browsers to maximum effect leaving as much historical cruft in the past as possible. The result is lean, highly performant and clean code that simplifies the complex requirements of modern progressive web apps and web sites.
 
@@ -15,14 +15,12 @@ ```
 
-Sometimes HTML elements need a nervous system - with Sargasso classes many things are possible – Lazy Loading, size appropriate images and content, parallax scrolling effects, form validators, API endpoint controllers to name a few.
+HTML elements sometimes need a nervous system to see and respond to what's going on around them - Sargasso element controllers are fully aware of their environment making many things are possible – lazy loading, screen size appropriate images and content, parallax scrolling effects, form validators, API endpoint controllers to name a few.
 
-This framework implements an asynchronous HIJAX page loading scheme which supports deep linking and lightning fast page loads where only content areas are updated between pages leaving css, js and wrapper elements intact. Sargasso objects are created and destroyed as needed when they appear or are removed from the DOM.
+HIJAX made easy - this framework implements an asynchronous page loading scheme which supports deep linking and lightning fast page loads where only dynamic content areas are merged between pages leaving css, js, web workers and wrapper elements intact. Sargasso controller instances are created as needed when their element appears in the DOM and destroyed when their element is removed.
 
-Performance is optimized with shared event listeners which are fully debounced during large updates and services are provided to schedule content changes using the browser's animation frame event loop resulting in smooth page updates.
+Performance is optimized with shared event listeners which are fully debounced during large updates. Services are provided to schedule content changes using the browser's animation frame event loop and computation heavy tasks can be easily offloaded to managed web workers resulting in highly performant pages.
 
-This framework aims to use the advanced features of modern browsers to maximum effect leaving as much historical cruft in the past as possible. The result is lean and fast.
-
 ```npm install @pelagiccreatures/sargasso```
 
 Bootstrap Sargasso (ES6):
----------------------------------
+-------------------------
 ```
@@ -34,2 +32,6 @@ // import lib
 
+// bootSargasso is the function to call to start the framework
+// Sargasso is the superclass of all sargasso controllers
+// registerSargassoClass is a function to tell sargasso about your classes
+
 // set options
@@ -45,3 +47,3 @@ let options = {
 
-// define a custom class and register the classname
+// define a custom class and register the classname so it can be supervised
 class MyClass extends Sargasso {}
@@ -54,3 +56,3 @@ registerSargassoClass('MyClass',MyClass)
 ---------------------------------
-The bundle exposes sargasso as a global so you can call the framework
+The bundle exposes `sargasso` as a global so you can call the framework
 * sargasso.Sargasso
@@ -79,3 +81,3 @@ * sargasso.registerSargassoClass
 
-You can also use this cdn:
+You can also use this cdn if you want:
 ```
@@ -99,3 +101,3 @@ <script src="https://cdn.jsdelivr.net/npm/@pelagiccreatures/sargasso/dist/sargasso.js"></script>
 ### HIJAX
-Is the function you should call to load a new page. Once loaded, new pages are merged with the current page only replacing elements marked with `data-hijax="true"`. Sargasso automatically captures `<a href="..">` tags and calls the LoadPageHandler instead of letting the browser load pages. `LoadPageHandler(href)`
+bootSargasso returns the function `LoadPageHandler(href)` that you should call to load a new page programatically. Once loaded, new pages are merged with the current page only replacing elements marked with `data-hijax="true"`. Sargasso automatically captures `<a href="..">` tags and calls the LoadPageHandler instead of letting the browser load pages.
 
@@ -217,4 +219,42 @@ EG. instead of `location.href= '/home'`, use `LoadPageHandler('/home')`
 
+### Using managed Web Workers
+
+Offload compute heavy tasks to a new thread and listen for result
+
+Pass in a url of a web worker js file or create an inline web worker
+from string of raw code.
+
+```
+class MySubClass extends Sargasso {
+	...
+
+	someMethod() {
+		// define some code to run in the worker
+
+		let mycode = `onmessage = function (e) {
+			const baseNumber = e.data
+			let result = 0
+			for (var i = Math.pow(baseNumber, 7); i >= 0; i--) {
+				result += Math.atan(i) * Math.tan(i)
+			};
+			postMessage('Done doing pointless math: ' + result)
+		}`
+
+		// create worker
+		let worker = this.startWorker('workerbee', mycode)
+
+		// listen for result
+		worker.onmessage = (e) => {
+			console.log(e.data) // "Done doing pointless math: 50934038.24768489"
+		}
+
+		// start computing
+		worker.postMessage(12)
+	}
+}
+```
+
+
 ### Viewing the Test Page in the example directory
-To use Hijax you have to serve the files (window.popstate can't deal with file://) so run this in the project/example directory
+To use Hijax you have to serve the files (window.popstate can't deal with file://) so run this in the project directory
 ```
@@ -221,0 +261,0 @@ python -m SimpleHTTPServer 8000

webpack.config.js

@@ -1,2 +0,2 @@
-const path = require('path');
+const path = require('path')
 
@@ -21,6 +21,6 @@ module.exports = {
 			query: {
-				presets: ['@babel/preset-env'],
-			},
-		}],
-	},
-};
+				presets: ['@babel/preset-env']
+			}
+		}]
+	}
+}

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

186504

increased by2.63%

Lines of code

2124

increased by3.11%

Number of lines in readme file

258

increased by18.35%

No dependency changes