@pelagiccreatures/sargasso - npm Package Compare versions

Comparing version 0.5.17 to 0.5.18

example/test-worker.js

 onmessage = function (e) {
-	const baseNumber = e.data
+	const baseNumber = e.data.power
 	let result = 0
@@ -7,3 +7,6 @@ for (var i = Math.pow(baseNumber, 7); i >= 0; i--) {
 	};
-	postMessage('Done doing pointless math: ' + result)
+	postMessage({
+		uid: e.data.uid,
+		result: 'Done doing pointless math: ' + result
+	})
 }

example/test.js

@@ -19,15 +19,2 @@ class myClass extends sargasso.Sargasso {
 	offLoadTask () {
-		// 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)
-		}
-
-		// stringify it
-		const txtFunction = 'onmessage = ' + mySlowFunction.toString()
-
 		// create the worker. managed by sargasso
@@ -37,3 +24,5 @@ this.workerStart('myworkId', '/example/test-worker.js')
 		// make the worker do work
-		this.workerPost('myworkId', 12)
+		this.workerPostMessage('myworkId', {
+			power: 12
+		})
 	}
@@ -44,3 +33,3 @@
 			const frame = () => {
-				this.element.innerHTML = e.data
+				this.element.innerHTML = e.data.result
 			}
@@ -47,0 +36,0 @@ this.queueFrame(frame)

lib/LazyBackground.js

@@ -43,7 +43,13 @@ /*
 
+			/*
+				the worker function to load the image
+
+				this web worker could be used by many instances.
+				e.data.uid is the id on the instance that is involking the worker
+				so we pass it back in the postMessage so whe know who is whom
+			*/
 			const offload = `onmessage = async (e) => {
-			  const imageURL = e.data
-			  const response = await fetch(imageURL)
+			  const response = await fetch(e.data.url)
 			  const blob = await response.blob()
-			  self.postMessage(blob)
+			  self.postMessage({ uid: e.data.uid, blob: blob })
 			}`
@@ -60,16 +66,22 @@
 
-			this.workerPost('loader', imgUrl)
+			// hand the url to the worker for loading
+			this.workerPostMessage('loader', {
+				url: imgUrl
+			})
 		}
 	}
 
+	// we got a message back from a worker
 	workerOnMessage (id, e) {
+		// if it's from loader then handle it
 		if (id === 'loader') {
-			this.blobURL = URL.createObjectURL(e.data)
-			const frame = () => {
-				this.element.style.backgroundImage = 'url(' + this.blobURL + ')'
-				this.sleep() // We're done. That was easy.
+			if (e.data.uid === this.uid) {
+				this.blobURL = URL.createObjectURL(e.data.blob)
+				const frame = () => {
+					this.element.style.backgroundImage = 'url(' + this.blobURL + ')'
+					this.sleep() // We're done. That was easy.
+				}
+				this.queueFrame(frame)
 			}
-			this.queueFrame(frame)
 		}
-
 		super.workerOnMessage(id, e)
@@ -76,0 +88,0 @@ }

lib/Sargasso.js

@@ -15,3 +15,3 @@ /**
 import {
-	theDOMWatcher, theScrollWatcher, theResizeWatcher, theOrientationWatcher
+	theDOMWatcher, theScrollWatcher, theResizeWatcher, theOrientationWatcher, theWorkerWatcher
 }
@@ -355,43 +355,35 @@ from './Services'
 
-		this.workerPost('pointless-math', 16)
+		this.workerPostMessage('pointless-math', 16)
 	*/
 
 	workerStart (id, codeOrURL) {
-		let blobURL = codeOrURL
+		this.workers[id] = theWorkerWatcher.registerWorker(id, codeOrURL)
+		theWorkerWatcher.subscribe(this, id)
+		return this.workers[id]
+	}
 
-		let revoke = false
-		if (!codeOrURL.match(/^(http|\/)/i)) {
-			const blob = new Blob([codeOrURL], {
-				type: 'text/javascript'
-			})
-			blobURL = URL.createObjectURL(blob)
-			revoke = true
+	workerPostMessage (id, message) {
+		if (!message.uid) {
+			message.uid = this.uid
 		}
-
-		this.workers[id] = new Worker(blobURL)
-
-		if (revoke) {
-			URL.revokeObjectURL(blobURL)
+		if (this.workers[id]) {
+			this.workers[id].postMessage(message)
 		}
+	}
 
-		this.workers[id].onmessage = (e) => {
+	workerMessage (id, e) {
+		if (e.data.uid === this.uid) {
 			this.workerOnMessage(id, e)
 		}
-
-		return this.workers[id]
 	}
 
-	workerPost (id, message) {
-		if (this.workers[id]) {
-			this.workers[id].postMessage(message)
-		}
+	// subclass should overide this to listen to workers
+	workerOnMessage (e) {
+
 	}
 
-	// subclass can overide this to listen to workers
-	workerOnMessage (id, e) {}
-
 	// stop a worker
 	stopWorker (id) {
 		if (this.workers[id]) {
-			this.workers[id].terminate()
+			theWorkerWatcher.unSubscribe(this, id)
 			delete this.workers[id]
@@ -398,0 +390,0 @@ }

lib/Services.js

@@ -59,6 +59,6 @@ /*
 
-	notifyObservers (event) {
+	notifyObservers (event, params) {
 		for (let i = 0; i < this.observers.length; i++) {
 			if (this.observers[i][event]) {
-				this.observers[i][event]()
+				this.observers[i][event].apply(this.observers[i], params || [])
 			}
@@ -262,5 +262,85 @@ }
 
+// keep track of who is using web workers and
+// cleanup dangling worker when no subscribers remain
+class WorkerWatcher extends ObserverSubscriptionManager {
+	constructor (options) {
+		super(options)
+		this.workers = {}
+	}
+
+	registerWorker (id, codeOrURL) {
+		if (!this.workers[id]) {
+			// create a worker for the id if worker id is unknown
+
+			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] = {
+				worker: new Worker(blobURL),
+				observers: []
+			}
+
+			if (revoke) {
+				URL.revokeObjectURL(blobURL)
+			}
+
+			this.workers[id].worker.onmessage = (e) => {
+				this.workerMessage(id, e)
+			}
+		}
+
+		return this.workers[id].worker
+	}
+
+	subscribe (observer, id) {
+		if (!this.workers[id]) {
+			throw (new Error('worker ' + id + ' does not exist'))
+		}
+		const workerObservers = this.workers[id].observers
+		workerObservers.push(observer)
+		super.subscribe(observer)
+	}
+
+	unSubscribe (observer, id) {
+		if (!this.workers[id]) {
+			throw (new Error('worker ' + id + ' does not exist'))
+		}
+
+		const workerObservers = this.workers[id].observers
+		if (workerObservers.indexOf(observer) !== -1) {
+			workerObservers.splice(workerObservers.indexOf(observer), 1)
+		}
+
+		if (!workerObservers.length) {
+			this.workers[id].worker.terminate()
+			delete this.workers[id]
+		}
+
+		super.unSubscribe(observer)
+	}
+
+	workerMessage (id, e) {
+		this.notifyObservers('workerMessage', [id, e])
+	}
+
+	wakeup () {
+		super.wakeup()
+	}
+
+	sleep () {
+		super.sleep()
+	}
+}
+
 // build subscription services
 
-let theDOMWatcher, theScrollWatcher, theResizeWatcher, theOrientationWatcher
+let theDOMWatcher, theScrollWatcher, theResizeWatcher, theOrientationWatcher, theWorkerWatcher
 
@@ -272,6 +352,7 @@ const startServices = (options) => {
 	theOrientationWatcher = new OrientationWatcher(options)
+	theWorkerWatcher = new WorkerWatcher(options)
 }
 
 export {
-	startServices, theDOMWatcher, theScrollWatcher, theResizeWatcher, theOrientationWatcher
+	startServices, theDOMWatcher, theScrollWatcher, theResizeWatcher, theOrientationWatcher, theWorkerWatcher
 }

package.json

 {
 	"name": "@pelagiccreatures/sargasso",
-	"version": "0.5.17",
+	"version": "0.5.18",
 	"description": "Simple, Fast, Reactive, supervised Javascript controllers for html elements.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -7,4 +7,6 @@ # @PelagicCreatures/Sargasso
 
-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 code that simplifies the complex requirements of modern progressive web apps and web sites.
+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.
 
+Events such as Document (DOM) insertions and deletions, HIJAX Page load, Scrolling, Resizing, Orientation and messages from fully Managed Web Workers are passed to Sargasso controllers allowing them to efficiently implement any behavior they need to perform.
+
 ```
@@ -16,8 +18,9 @@ @author Michael Rhodes (except where noted)
 
-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  possible – HIJAX, lazy loading, screen size appropriate images and content, parallax scrolling effects, form validators, API endpoint controllers to name a few.
+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 code that simplifies the complex technologies behind modern progressive web apps and web sites.
 
 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 managed 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. 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.
+Performance is optimized using shared event listening services 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.
 
+
 ```npm install @pelagiccreatures/sargasso```
@@ -222,2 +225,8 @@
 
+The worker code does the work when it receives an onmessage event
+
+e.data contains the params for our worker
+
+A web worker could be used by many sargasso instances so e.data.uid is reserved for the id on the instance that is invoking and the worker and should always hand uid back in the postMessage events it sends back to the sargasso object.
+
 ```
@@ -230,6 +239,8 @@ class MySubClass extends Sargasso {
 
-		// define some code to run in the worker
+		/*
+			myWorker can be inline code or the url of a worker script to download
+		*/
 
-		let mycode = `onmessage = function (e) {
-			const baseNumber = e.data
+		let myWorker = `onmessage = function (e) {
+			const baseNumber = e.data.power
 			let result = 0
@@ -239,13 +250,14 @@ for (var i = Math.pow(baseNumber, 7); i >= 0; i--) {
 			};
-			postMessage('Done doing pointless math: ' + result)
+			postMessage({ uid: e.data.uid, result: 'Done doing pointless math: ' + result })
 		}`
 
 		// create the worker to be managed by sargasso and give it an id
-		this.workerStart('myworkId', mycode)
+		this.workerStart('myworkId', myWorker)
 
-		// make the worker do work
-		this.workerPost('myworkId', 12)
+
+		let data = { power: 12 }
+		this.workerPostMessage('myworkId', data) // send message to the worker
 	}
 
-	// listen for worker events
+	// listen for worker result
 	workerOnMessage (id, e) {
@@ -252,0 +264,0 @@ if (id === 'myworkId') {

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

522976

increased by1.25%

Lines of code

2244

increased by3.51%

Number of lines in readme file

278

increased by4.51%

No dependency changes