@webqit/webflo 0.8.45 → 0.8.49

package/src/modules/client/Worker.js

@@ -5,13 +5,14 @@
 import Router from './Router.js';
 import _isGlobe from 'is-glob';
 import Minimatch from 'minimatch';
+import { Observer } from '@webqit/pseudo-browser/index2.js';
 import _isArray from '@webqit/util/js/isArray.js';
 import _afterLast from '@webqit/util/str/afterLast.js';
 import _after from '@webqit/util/str/after.js';
 import _before from '@webqit/util/str/before.js';
 import _any from '@webqit/util/arr/any.js';
-import StdRequest from './StdRequest.js';
-
+import _copy from '@webqit/util/obj/copy.js';
+import NavigationEvent from './NavigationEvent.js';
 
 /**
  * ---------------------------
@@ -22,8 +23,10 @@ import StdRequest from './StdRequest.js';
 export default function(layout, params) {
 
 	// Copy...
-	layout = {...layout};
-	params = {...params};
+	layout = { ...layout };
+	params = { ...params };
+	const sessionStores = Object.create(null);
+	const localStores = Object.create(null);
 
 	/**
 	 * -------------
@@ -90,44 +93,55 @@ export default function(layout, params) {
 	 * ONFETCH
 	 * -------------
 	 */
-
+	
 	// Listen now...
 	self.addEventListener('fetch', async evt => {
-		var stdRequest = new StdRequest(evt.request);
-		Object.defineProperty(evt, 'request', { get: () => stdRequest });
-		evt.respondWith(handleFetch(evt));
-	});
-
-	// Fetches request
-	const handleFetch = async evt => {
+		// URL schemes that might arrive here but not supported; e.g.: chrome-extension://
+		if (!evt.request.url.startsWith('http')) return;
+		// Fetches request
+		const handleFetch = async evt => {
+
+			if (evt.request.url.startsWith(self.origin) && (evt.request.mode === 'navigate' || evt.request.headers.get('X-Powered-By') === '@webqit/webflo')) {
+				// -----------------
+				// Sync session data to cache to be available to service-worker routers
+				// Sync only takes for requests that actually do send the "$session" cookie
+				const sessionData = Observer.proxy(sessionStores[evt.clientId] || {});
+				const clientNavigationEvent = new NavigationEvent(new NavigationEvent.Request(evt.request), sessionData);
+				// -----------------
+				// The app router
+				const router = new Router(_before(evt.request.url, '?'), layout, { layout });
+				const httpMethodName = evt.request.method.toLowerCase();
+				const _response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], clientNavigationEvent, null, (event, arg) => defaultFetch(evt));
+				if (!(_response instanceof Response)/* _response being a native Response instance is fine */) {
+					return new NavigationEvent.Response(_response);
+				}
+				return _response;
+			}
 
-		const $context = {
-			layout,
+			return defaultFetch(evt);
 		};
-		// The app router
-		const router = new Router(_before(evt.request.url, '?'), layout, $context);
-		const httpMethodName = evt.request.method.toLowerCase();
-		return await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], [evt], null, async function() {
-			if (_any((params.cache_only_url_list || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(evt.request.url, pattern))) {
-				return cache_fetch(evt);
-			}
-			// Now, the following is key:
-			// The browser likes to use "force-cache" for "navigate" requests
-			// when, for example, the back button was used.
-			// Thus the origin server would still not be contacted by the self.fetch() below, leading to inconsistencies in responses.
-			// So, we detect this scenerio and avoid it.
-			if (evt.request.mode === 'navigate' && evt.request.cache === 'force-cache' && evt.request.destination === 'document') {
-				return cache_fetch(evt, true/** cacheRefresh */);
-			}
-			if (_any((params.cache_first_url_list || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(evt.request.url, pattern))) {
-				return cache_fetch(evt, true/** cacheRefresh */);
-			}
-			if (_any((params.network_first_url_list || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(evt.request.url, pattern))) {
-				return network_fetch(evt, true/** cacheFallback */);
-			}
-			return network_fetch(evt);
-		});
+		evt.respondWith(handleFetch(evt));
+	});
 
+	const defaultFetch = function(evt) {
+		if (_any((params.cache_only_url_list || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(evt.request.url, pattern))) {
+			return cache_fetch(evt);
+		}
+		// Now, the following is key:
+		// The browser likes to use "force-cache" for "navigate" requests
+		// when, for example, the back button was used.
+		// Thus the origin server would still not be contacted by the self.fetch() below, leading to inconsistencies in responses.
+		// So, we detect this scenerio and avoid it.
+		if (evt.request.mode === 'navigate' && evt.request.cache === 'force-cache' && evt.request.destination === 'document') {
+			return cache_fetch(evt, true/** cacheRefresh */);
+		}
+		if (_any((params.cache_first_url_list || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(evt.request.url, pattern))) {
+			return cache_fetch(evt, true/** cacheRefresh */);
+		}
+		if (_any((params.network_first_url_list || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(evt.request.url, pattern))) {
+			return network_fetch(evt, true/** cacheFallback */);
+		}
+		return network_fetch(evt);
 	};
 
 	const getCacheName = request => request.headers.get('Accept') === 'application/json'
@@ -168,7 +182,7 @@ export default function(layout, params) {
 	const refreshCache = (request, response) => {
 
 		// Check if we received a valid response
-		if (!response || response.status !== 200 || (response.type !== 'basic' && response.type !== 'cors')) {
+		if ((request._method || request.method) !== 'GET' || !response || response.status !== 200 || (response.type !== 'basic' && response.type !== 'cors')) {
 			return response;
 		}
 
@@ -187,51 +201,53 @@ export default function(layout, params) {
 		return response;
 	};
 
+	const relay = function(evt, messageData) {
+		return self.clients.matchAll().then(clientList => {
+			clientList.forEach(client => {
+				if (client.id === evt.source.id) {
+					return;
+				}
+				client.postMessage(messageData);
+			});
+		});
+	};
+
 	// -----------------------------
 	
 	self.addEventListener('message', evt => {
-		const $context = {
-			layout,
-		};
-		const router = new Router('/', layout, $context);
+
+		// Handle normally
+		const router = new Router('/', layout, { layout });
 		evt.waitUntil(
-			router.route('postmessage', [evt], null, function() {
+			router.route('postmessage', evt, null, function() {
 				return self;
 			})
 		);
+
 	});
 
 	self.addEventListener('push', evt => {
-		const $context = {
-			layout,
-		};
-		const router = new Router('/', layout, $context);
+		const router = new Router('/', layout, { layout });
 		evt.waitUntil(
-			router.route('push', [evt], null, function() {
+			router.route('push', evt, null, function() {
 				return self;
 			})
 		);
 	});
 
 	self.addEventListener('notificationclick', evt => {
-		const $context = {
-			layout,
-		};
-		const router = new Router('/', layout, $context);
+		const router = new Router('/', layout, { layout });
 		evt.waitUntil(
-			router.route('notificationclick', [evt], null, function() {
+			router.route('notificationclick', evt, null, function() {
 				return self;
 			})
 		);
 	});
 
 	self.addEventListener('notificationclose', evt => {
-		const $context = {
-			layout,
-		};
-		const router = new Router('/', layout, $context);
+		const router = new Router('/', layout, { layout });
 		evt.waitUntil(
-			router.route('notificationclose', [evt], null, function() {
+			router.route('notificationclose', evt, null, function() {
 				return self;
 			})
 		);
@@ -245,16 +261,6 @@ export default function(layout, params) {
 const matchClientUrl = (client, url) => '/' + _after(_after(client.url, '//'), '/') === url;
 
 /**
-relay(messageData) {
-	return self.clients.matchAll().then(clientList => {
-		clientList.forEach(client => {
-			if (client.id === evt.source.id) {
-				return;
-			}
-			client.postMessage(messageData);
-		});
-	});
-};
 
 if (notificationData) {
 	var title = params.NOTIFICATION_TITLE || '';

package/src/modules/client/WorkerClient.js

@@ -0,0 +1,102 @@
+
+
+/**
+ * @imports
+ */
+import { Observer } from '@webqit/pseudo-browser/index2.js';
+import { _isFunction } from '@webqit/util/js/index.js';
+
+export default class WorkerClient {
+
+    constructor(file, params = {}) {
+        this.ready = navigator.serviceWorker.ready;
+        // --------
+        // Registration and lifecycle
+        // --------
+        this.registration = new Promise((resolve, reject) => {
+            const register = () => {
+                navigator.serviceWorker.register(file, { scope: params.scope || '/' }).then(async registration => {
+
+                    // Helper that updates instance's state
+                    const state = target => {
+                        // instance2.state can be any of: "installing", "installed", "activating", "activated", "redundant"
+                        const equivState = target.state === 'installed' ? 'waiting' : 
+                            (target.state === 'activating' || target.state === 'activated' ? 'active' : target.state)
+                        Observer.set(this, equivState, target);
+                    }
+
+                    // We're always installing at first for a new service worker.
+                    // An existing service would immediately be active
+                    const worker = registration.active || registration.waiting || registration.installing;
+                    state(worker);
+                    worker.addEventListener('statechange', e => state(e.target));
+                    
+                    // "updatefound" event - a new worker that will control
+                    // this page is installing somewhere
+                    registration.addEventListener('updatefound', () => {
+                        // If updatefound is fired, it means that there's
+                        // a new service worker being installed.
+                        state(registration.installing);
+                        registration.installing.addEventListener('statechange', e => state(e.target));
+                    });
+                    
+                    resolve(registration);
+                }).catch(e => reject(e));
+            };
+            if (params.onWondowLoad) {
+                window.addEventListener('load', register);
+            } else {
+                register();
+            }
+            if (params.startMessages) {
+                navigator.serviceWorker.startMessages();
+            }
+        });
+        // --------
+        // Post messaging
+        // --------
+        this.post = {
+            send: (message, onAvailability = 1) => {
+                if (this.active) {
+                    if (_isFunction(message)) message = message();
+                    this.active.postMessage(message);
+                } else if (onAvailability) {
+                    // Availability Handling
+                    const availabilityHandler = entry => {
+                        if (_isFunction(message)) message = message();
+                        entry.value.postMessage(message);
+                        if (onAvailability !== 2) {
+                            Observer.unobserve(this, 'active', availabilityHandler);
+                        }
+                    };
+                    Observer.observe(this, 'active', availabilityHandler);
+                }
+                return this.post;
+            },
+            receive: (callback, onAvailability = 1) => {
+                navigator.serviceWorker.addEventListener('message', callback);
+                return this.post;
+            },
+        }
+        // --------
+        // Push notifications
+        // --------
+        this.push = {
+            getSubscription: async () => {
+                return (await this.registration).pushManager.getSubscription();
+            },
+            subscribe: async (publicKey, params = {}) => {
+                var subscription = await this.push.getSubscription();
+                return subscription ? subscription : (await this.registration).pushManager.subscribe({
+                    applicationServerKey: urlBase64ToUint8Array(publicKey),
+                    ...params,
+                });
+            },
+            unsubscribe: async () => {
+                var subscription = await this.push.getSubscription();
+                return !subscription ? null : subscription.unsubscribe();
+            },
+        }
+    }
+
+}

package/src/modules/client/WorkerComm.js

@@ -0,0 +1,183 @@
+
+
+/**
+ * @imports
+ */
+
+var _sab;
+export function request(context, data = {}) {
+    var response;
+    const channel = new MessageChannel();
+    channel.port1.onmessage = e => (console.log('-----receiving'), response = e.data);
+    console.log('------waiting 11111', self.crossOriginIsolated);
+    try {
+        _sab = _sab || new ArrayBuffer(4); Atomics;
+        context.postMessage({ _sab, ...data, }, [ channel.port2 ]);
+        Atomics.wait(new Int32Array(_sab), 0, 0, 400);
+        return channel;
+    } catch (e) {
+        console.error('error1', e);
+        var x = new XMLHttpRequest();
+        x.timeout = 400;
+        x.open('get', '/@sleep@/t.js?t=400', false);
+        x.setRequestHeader('cache-control', 'no-cache, no-store, max-age=0');
+        try { x.send() } catch(e) { console.error('error2', e, response) }
+    }
+
+    return response;
+}
+
+export function listen(context, handler) {
+    console.log('::::::::::::::::::', crossOriginIsolated)
+    context.addEventListener('message', e => {
+        if (e.data._sab instanceof SharedArrayBuffer && e.ports.length) {
+            console.log('--------handling', e.data)
+            var response = handler(e.data);
+            if (response !== undefined) {
+                e.ports[0].postMessage(response);
+                console.log('--------sent');
+                Atomics.notify(new Int32Array(e.data._sab), 0, 1);
+                console.log('--------notified');
+            }
+        }
+    });
+}
+
+/**
+ * ------------------
+ * https://www.sitepen.com/blog/the-return-of-sharedarraybuffers-and-atomics
+ * ------------------
+ */
+
+export function sharedArrayBufferToUtf16String(buf) {
+	const array = new Uint16Array(buf);
+	return String.fromCharCode.apply(null, array);
+}
+
+export function utf16StringToSharedArrayBuffer(str) {
+	// 2 bytes for each char
+	const bytes = str.length *2;
+	const buffer = new SharedArrayBuffer(bytes);
+	const arrayBuffer = new Uint16Array(buffer);
+	for (let i = 0, strLen = str.length; i < strLen; i++) {
+		arrayBuffer[i] = str.charCodeAt(i);
+	}
+	return { array: arrayBuffer, buffer: buffer };
+}
+
+export function encodeUf8StringToSharedArrayBuffer(string) {
+	// Calculate the byte size of the UTF-8 string
+	let bytes = string.length;
+	for (let i = string.length -1; i <= 0; i--) {
+		const code = string.charCodeAt(i);
+		if (code > 0x7f && code <= 0x7ff) {
+			bytes++;
+        } else if (code > 0x7ff && code <= 0xffff) {
+			bytes+=2;
+        }
+		if (code >= 0xdc00 && code <= 0xdfff) {
+			i--; // trail surrogate
+		}
+	}
+	const buffer = new SharedArrayBuffer(bytes);
+	const arrayBuffer = new Uint8Array(buffer);
+	const encoded = unescape(encodeURIComponent(string));
+	for (var i = 0; i < encoded.length; i++) {
+		arrayBuffer[i] = encoded[i].charCodeAt(0);
+	}
+	return { array: arrayBuffer, buffer: buffer };
+}
+
+export function decodeUtf8StringFromSharedArrayBuffer(array) {
+	var encodedString = String.fromCharCode.apply(null, array);
+	var decodedString = decodeURIComponent(escape(encodedString));
+	return decodedString;
+}
+
+/**
+ * // main.js
+worker.postMessage(sharedBuffer);
+// worker.js
+constsharedArray = new Int32Array(m.data);
+
+const exampleString = "Hello world, this is an example string!";
+const sharedArrayBuffer = utf16StringToSharedArrayBuffer(exampleString).buffer;
+const backToString = sharedArrayBufferToUtf16String(sharedArrayBuffer);
+ */
+
+// Sync Local Storage
+function sharedStore(store, persistent = false, onAvailability = 1) {
+    const storeData = () => Object.keys(store).reduce((_store, key) => (_store[key] = store[key], _store), {});
+    this.post.send(() => ({ _type: 'WHOLE_STORAGE_SYNC', _persistent: persistent, store: storeData() }), onAvailability);
+    window.addEventListener('beforeunload', e => {
+        this.post.send({ _type: 'WHOLE_STORAGE_SYNC', _persistent: persistent });
+    });
+    // --------
+    Observer.observe(store, changes => {
+        changes.forEach(change => {
+            if (change.type === 'set') {
+                if (!(change.detail || {}).noSync) {
+                    this.post.send({ _type: 'STORAGE_SYNC', _persistent: persistent, ..._copy(change, [ 'type', 'name', 'path', 'value', 'oldValue', 'isUpdate', 'related', ]) });
+                }
+            } else if (change.type === 'deletion') {
+                if (!(change.detail || {}).noSync) {
+                    this.post.send({ _type: 'STORAGE_SYNC', _persistent: persistent, ..._copy(change, [ 'type', 'name', 'path', 'value', 'oldValue', 'isUpdate', 'related', ]) });
+                }
+            }
+        });
+    });
+    // --------
+    this.post.receive(e => {
+        if (e.data && e.data._type === 'STORAGE_SYNC' && e.data._persistent === persistent) {
+            if (e.data.type === 'set') {
+                Observer.set(store, e.data.name, e.data.value, { detail: { noSync: true } });
+            } else if (e.data.type === 'deletion') {
+                Observer.deleteProperty(store, e.data.name, { detail: { noSync: true } });
+            }
+        }
+    }, onAvailability);
+}
+
+self.addEventListener('message', evt => {
+		
+    // SESSION_SYNC
+    var clientId = evt.source.id;
+    if (evt.data && evt.data._type === 'WHOLE_STORAGE_SYNC') {
+        const storage = evt.data._persistent ? localStores : sessionStores;
+        if (evt.data.store) {
+            storage[clientId] = evt.data.store;
+            // --------------------------
+            // Get mutations synced TO client
+            Observer.observe(storage[clientId], changes => {
+                changes.forEach(change => {
+                    if (!(change.detail || {}).noSync) {
+                        self.clients.get(clientId).then(client => {
+                            client.postMessage({ _type: 'STORAGE_SYNC', _persistent: evt.data._persistent, ..._copy(change, [ 'type', 'name', 'path', 'value', 'oldValue', 'isUpdate', 'related', ]), });
+                        });
+                    }
+                });
+            });
+            // --------------------------
+        } else {
+            delete storage[clientId];
+        }
+    } else if (evt.data && evt.data._type === 'STORAGE_SYNC') {
+        // --------------------------
+        // Get mutations synced FROM client
+        const storage = evt.data._persistent ? localStores : sessionStores;
+        if (evt.data.type === 'set') {
+            if (storage[clientId]) Observer.set(storage[clientId], evt.data.name, evt.data.value, { detail: { noSync: true } });
+        } else if (evt.data.type === 'deletion') {
+            if (storage[clientId]) Observer.deleteProperty(storage[clientId], evt.data.name, { detail: { noSync: true } });
+        }
+        // --------------------------
+
+        // --------------------------
+        // Relay to other clients
+        if (evt.data._persistent) {
+            relay(evt, evt.data);
+        }
+        // --------------------------
+        return;
+    }
+});

package/src/modules/client/effects/sounds.js

@@ -0,0 +1,64 @@
+const context = new window.AudioContext();
+
+export function playFile(filepath) {
+  // see https://jakearchibald.com/2016/sounds-fun/
+  // Fetch the file
+  fetch(filepath)
+    // Read it into memory as an arrayBuffer
+    .then(response => response.arrayBuffer())
+    // Turn it from mp3/aac/whatever into raw audio data
+    .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
+    .then(audioBuffer => {
+      // Now we're ready to play!
+      const soundSource = context.createBufferSource();
+      soundSource.buffer = audioBuffer;
+      soundSource.connect(context.destination);
+      soundSource.start();
+    });
+}
+
+export function playSuccess() {
+    const successNoise = context.createOscillator();
+    successNoise.frequency = "600";
+    successNoise.type = "sine";
+    successNoise.frequency.exponentialRampToValueAtTime(800, context.currentTime + 0.05);
+    successNoise.frequency.exponentialRampToValueAtTime(1000, context.currentTime + 0.15);
+
+    successGain = context.createGain();
+    successGain.gain.exponentialRampToValueAtTime(0.01, context.currentTime + 0.3);
+
+    successFilter = context.createBiquadFilter("bandpass");
+    successFilter.Q = 0.01;
+
+    successNoise
+        .connect(successFilter)
+        .connect(successGain)
+        .connect(context.destination);
+    successNoise.start();
+    successNoise.stop(context.currentTime + 0.2);
+}
+
+export function playError() {
+    const errorNoise = context.createOscillator();
+    errorNoise.frequency = "400";
+    errorNoise.type = "sine";
+    errorNoise.frequency.exponentialRampToValueAtTime(200, context.currentTime + 0.05);
+    errorNoise.frequency.exponentialRampToValueAtTime(100, context.currentTime + 0.2);
+
+    errorGain = context.createGain();
+    errorGain.gain.exponentialRampToValueAtTime(0.01, context.currentTime + 0.3);
+
+    errorNoise.connect(errorGain).connect(context.destination);
+    errorNoise.start();
+    errorNoise.stop(context.currentTime + 0.3);
+}
+
+let successButton = document.querySelector("#success");
+successButton.addEventListener("click", function() {
+  playFile('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/success.mp3');
+});
+
+let errorButton = document.querySelector("#error");
+errorButton.addEventListener("click", function() {
+  playFile('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/error.mp3');
+});

package/src/modules/server/NavigationEvent.js

@@ -0,0 +1,38 @@
+
+/**
+ * @imports
+ */
+import { URL } from 'url';
+import { Readable } from "stream";
+import { FormData, File, Blob } from 'formdata-node';
+import { FormDataEncoder } from 'form-data-encoder';
+import { Request, Response, Headers } from 'node-fetch';
+import _NavigationEvent from '../_NavigationEvent.js';
+import _FormData from '../_FormData.js';
+
+/**
+ * Patch MessageStream with formData()
+ */
+const _streamFormDataPatch = MessageStream => class extends MessageStream {
+
+    // formData() polyfill
+    async formData() {
+        return null;
+    }
+
+};
+
+/**
+ * The NavigationEvent class
+ */
+export default _NavigationEvent({
+    URL,
+    Request: _streamFormDataPatch(Request),
+    Response: _streamFormDataPatch(Response),
+    Headers,
+    FormData: _FormData(FormData),
+    File,
+    Blob,
+    ReadableStream: Readable,
+    FormDataEncoder
+});