@webqit/webflo 0.20.16 → 0.20.18

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.20.16",
+  "version": "0.20.18",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/runtime-pi/WebfloRuntime.js

@@ -15,13 +15,13 @@ export class WebfloRuntime {
 
     static get Router() { return WebfloRouter; }
 
-	static get HttpEvent() { return HttpEvent; }
+    static get HttpEvent() { return HttpEvent; }
 
-	static get HttpThread() { return HttpThread; }
+    static get HttpThread() { return HttpThread; }
 
-	static get HttpSession() { return HttpSession; }
+    static get HttpSession() { return HttpSession; }
 
-	static get HttpUser() { return HttpUser; }
+    static get HttpUser() { return HttpUser; }
 
     static create(bootstrap) { return new this(bootstrap); }
 
@@ -109,7 +109,7 @@ export class WebfloRuntime {
 
         // Dispatch event
         const router = new this.constructor.Router(this, httpEvent.url.pathname);
-        await router.route(['SETUP'], httpEvent.extend());
+        await router.route(['SETUP'], httpEvent.spawn());
 
         // Do proper routing for respone
         const response = await new Promise(async (resolve) => {
@@ -141,8 +141,8 @@ export class WebfloRuntime {
                     : responseShim.from.value(response);
             }
 
-            // Any "carry" data?
-            await this.handleCarries(httpEvent, response);
+            // Any "status" in thread?
+            await this.handleThreadStatus(httpEvent, response);
 
             // Resolve now...
             if (autoLiveResponse) {
@@ -192,8 +192,11 @@ export class WebfloRuntime {
 
             // On ROOT event complete:
             // Close httpEvent.client
-            httpEvent.lifeCycleComplete(true).then(() => {
+            httpEvent.lifeCycleComplete(true).then(async () => {
                 httpEvent.client.close();
+                if (!httpEvent.thread.extended) {
+                    await httpEvent.thread.clear();
+                }
             });
         }
 
@@ -205,16 +208,17 @@ export class WebfloRuntime {
         return response;
     }
 
-    async handleCarries(httpEvent, response) {
+    async handleThreadStatus(httpEvent, response) {
         if (!response.headers.get('Location')) {
-            const status = await httpEvent.thread.consume('status');
-            //await httpEvent.thread.clear();
-            if (!status) return;
+            const status = await httpEvent.thread.consume('status', true);
+            if (!status.length) return;
             // Fire redirect message?
             httpEvent.waitUntil(new Promise((resolve) => {
                 httpEvent.client.wqLifecycle.open.then(async () => {
-                    httpEvent.client.postMessage(status, { wqEventOptions: { type: 'alert' } });
-                    resolve();
+                    setTimeout(() => {
+                        httpEvent.client.postMessage(status, { wqEventOptions: { type: 'alert' } });
+                        resolve();
+                    }, 500); // half a sec
                 }, { once: true });
             }));
         }

package/src/runtime-pi/webflo-client/WebfloClient.js

@@ -58,20 +58,24 @@ export class WebfloClient extends WebfloRuntime {
         const instanceController = await super.initialize();
         // Bind prompt handlers
         const promptsHandler = (e) => {
-            const message = e.data?.message
-                ? e.data.message
-                : e.data;
-            const execPromp = () => {
+            window.queueMicrotask(() => {
                 if (e.defaultPrevented) return;
                 if (e.type === 'confirm') {
-                    e.wqRespondWith(confirm(message));
+                    if (e.data?.message) {
+                        e.wqRespondWith(confirm(e.data.message));
+                    }
                 } else if (e.type === 'prompt') {
-                    e.wqRespondWith(prompt(message));
+                    if (e.data?.message) {
+                        e.wqRespondWith(prompt(e.data.message));
+                    }
                 } else if (e.type === 'alert') {
-                    alert(message);
+                    for (const item of [].concat(e.data)) {
+                        if (item?.message) {
+                            alert(item.message);
+                        }
+                    }
                 }
-            };
-            window.queueMicrotask(execPromp);
+            });
         };
         this.background.addEventListener('confirm', promptsHandler, { signal: instanceController.signal });
         this.background.addEventListener('prompt', promptsHandler, { signal: instanceController.signal });
@@ -318,6 +322,7 @@ export class WebfloClient extends WebfloRuntime {
                 method: null
             });
         };
+
         // Ping existing background processes
         // !IMPORTANT: Posting to the group when empty will keep the event until next addition
         // and we don't want that
@@ -325,6 +330,9 @@ export class WebfloClient extends WebfloRuntime {
             const url = { ...Url.copy(scopeObj.url), method: scopeObj.request.method };
             this.#background.postMessage(url, { wqEventOptions: { type: 'navigate' } });
         }
+
+        console.log('_______,', scopeObj.detail.navigationType);
+
         // Dispatch for response
         scopeObj.response = await this.dispatchNavigationEvent({
             httpEvent: scopeObj.httpEvent,
@@ -338,20 +346,15 @@ export class WebfloClient extends WebfloRuntime {
             clientPortB: wqMessageChannel.port2,
             originalRequestInit: scopeObj.init
         });
+
         // Decode response
         scopeObj.finalUrl = scopeObj.response.url || scopeObj.request.url;
         if (scopeObj.response.redirected || scopeObj.detail.navigationType === 'rdr' || scopeObj.detail.isHoisted) {
             const stateData = { ...(this.currentEntry()?.getState() || {}), redirected: true, };
             await this.updateCurrentEntry({ state: stateData }, scopeObj.finalUrl);
         }
+        
         // Transition UI
-        Observer.set(this.transition.from, Url.copy(this.location));
-        Observer.set(this.transition.to, 'href', scopeObj.finalUrl);
-        Observer.set(this.transition, 'rel', this.transition.from.pathname === this.transition.to.pathname ? 'unchanged' : (
-            `${this.transition.from.pathname}/`.startsWith(`${this.transition.to.pathname}/`) ? 'parent' : (
-                `${this.transition.to.pathname}/`.startsWith(`${this.transition.from.pathname}/`) ? 'child' : 'unrelated'
-            )
-        ));
         await this.transitionUI(async () => {
             // Set post-request states
             Observer.set(this.location, 'href', scopeObj.finalUrl);
@@ -370,26 +373,45 @@ export class WebfloClient extends WebfloRuntime {
                 !(['GET'].includes(scopeObj.request.method) || scopeObj.response.redirected || scopeObj.detail.navigationType === 'rdr')
             );
             await this.applyPostRenderState(scopeObj.httpEvent);
-        });
+        }, scopeObj.finalUrl, scopeObj.detail);
     }
 
     async dispatchNavigationEvent({ httpEvent, crossLayerFetch, clientPortB, originalRequestInit, processObj = {} }) {
-        const response = await super.dispatchNavigationEvent({ httpEvent, crossLayerFetch, clientPortB });
-        // Obtain and connect clientPortB as first thing
-        const backgroundPort = LiveResponse.getBackground(response);
-        if (backgroundPort) {
-            this.background.addPort(backgroundPort);
-        }
+        let response = await super.dispatchNavigationEvent({ httpEvent, crossLayerFetch, clientPortB });
+
+        // Extract interactive. mode handling
+        const handleInteractiveMode = async (resolve) => {
+            const liveResponse = await LiveResponse.from(response);
+            this.background.addPort(liveResponse.background);
+            liveResponse.addEventListener('replace', () => {
+                if (liveResponse.headers.get('Location')) {
+                    this.processRedirect(liveResponse);
+                } else {
+                    resolve?.(liveResponse);
+                }
+            }, { signal: httpEvent.signal });
+            return liveResponse;
+        };
+
         // Await a response with an "Accepted" or redirect status
         const statusCode = responseShim.prototype.status.get.call(response);
-        if (statusCode === 202 || (response.headers.get('Location') && this.processRedirect(response))) {
+        if (statusCode === 202 && LiveResponse.hasBackground(response)) {
+            return new Promise(handleInteractiveMode);
+        }
+
+        // Handle redirects
+        if (response.headers.get('Location')) {
+            // Never resolves...
             return new Promise(async (resolve) => {
-                if (LiveResponse.hasBackground(response)) {
-                    const liveResponse = await LiveResponse.from(response);
-                    liveResponse.addEventListener('replace', () => resolve(liveResponse), { once: true, signal: httpEvent.signal });
-                } // Never resolves otherwise
+                const redirectHandlingMode = this.processRedirect(response);
+                // ...except processRedirect() says keep-alive
+                if (redirectHandlingMode === 3/* keep-alive */
+                    && LiveResponse.hasBackground(response)) {
+                    await handleInteractiveMode(resolve);
+                }
             });
         }
+
         // Handle "retry" directives
         if (response.headers.has('Retry-After')) {
             if (!processObj.recurseController) {
@@ -400,13 +422,21 @@ export class WebfloClient extends WebfloRuntime {
             // Ensure a previous recursion hasn't aborted the process
             if (!processObj.recurseController.signal.aborted) {
                 await new Promise((res) => setTimeout(res, parseInt(response.headers.get('Retry-After')) * 1000));
-                const eventClone = httpEvent.cloneWith({ request: this.createRequest(httpEvent.url, originalRequestInit) });
+                const eventClone = httpEvent.clone({ request: this.createRequest(httpEvent.url, originalRequestInit) });
                 return await this.dispatchNavigationEvent({ httpEvent: eventClone, crossLayerFetch, clientPortB, originalRequestInit, processObj });
             }
-        } else if (processObj.recurseController) {
-            // Abort the signal. This is the end of the loop
-            processObj.recurseController.abort();
+        } else {
+            if (processObj.recurseController) {
+                // Abort the signal. This is the end of the loop
+                processObj.recurseController.abort();
+            }
+
+            // Obtain and connect clientPortB as first thing
+            if (LiveResponse.hasBackground(response)) {
+                response = await handleInteractiveMode();
+            }
         }
+
         return response;
     }
 
@@ -419,39 +449,48 @@ export class WebfloClient extends WebfloRuntime {
             responseMeta.set('status', xActualRedirectCode); // @NOTE 1
             statusCode = xActualRedirectCode;
         }
+
         // Trigger redirect
         if ([302, 301].includes(statusCode)) {
             const location = new URL(response.headers.get('Location'), this.location.origin);
             if (this.isSpaRoute(location)) {
                 this.navigate(location, {}, { navigationType: 'rdr' });
-            } else {
-                this.redirect(location, LiveResponse.getBackground(response));
+                return 1;
             }
-            return true;
+            return this.redirect(location, response);
         }
+
+        return 0; // No actual redirect
     }
 
-    redirect(location, responseBackground) {
-        if (responseBackground) {
-            // Redundant as this is a window reload anyways
-            responseBackground.close();
-        }
+    redirect(location) {
         window.location = location;
+        return 2; // Window reload
     }
 
-    async transitionUI(updateCallback) {
-        if (document.startViewTransition && this.withViewTransitions) {
+    async transitionUI(updateCallback, finalUrl, detail) {
+        // Set initial states
+        Observer.set(this.transition.from, Url.copy(this.location));
+        Observer.set(this.transition.to, 'href', finalUrl);
+        const viewTransitionRel = this.transition.from.pathname === this.transition.to.pathname ? 'same' : (
+            `${this.transition.from.pathname}/`.startsWith(`${this.transition.to.pathname}/`) ? 'out' : (
+                `${this.transition.to.pathname}/`.startsWith(`${this.transition.from.pathname}/`) ? 'in' : 'other'
+            )
+        );
+        Observer.set(this.transition, 'rel', viewTransitionRel);
+        // Trigger transition
+        if (document.startViewTransition && this.withViewTransitions && !detail.hasUAVisualTransition) {
             const synthesizeWhile = window.webqit?.realdom?.synthesizeWhile || ((callback) => callback());
             return new Promise(async (resolve) => {
                 await synthesizeWhile(async () => {
-                    Observer.set(this.transition, 'phase', 1);
-                    const viewTransition = document.startViewTransition(updateCallback);
+                    Observer.set(this.transition, 'phase', 'old');
+                    const viewTransition = document.startViewTransition({ update: updateCallback, styles: ['navigation', viewTransitionRel] });
                     try { await viewTransition.updateCallbackDone; } catch (e) { console.log(e); }
-                    Observer.set(this.transition, 'phase', 2);
+                    Observer.set(this.transition, 'phase', 'new');
                     try { await viewTransition.ready; } catch (e) { console.log(e); }
-                    Observer.set(this.transition, 'phase', 3);
+                    Observer.set(this.transition, 'phase', 'start');
                     try { await viewTransition.finished; } catch (e) { console.log(e); }
-                    Observer.set(this.transition, 'phase', 0);
+                    Observer.set(this.transition, 'phase', 'end');
                     resolve();
                 });
             });
@@ -482,8 +521,9 @@ export class WebfloClient extends WebfloRuntime {
                     transition: this.transition,
                 }, { diff: true, merge });
                 $response.addEventListener('replace', (e) => {
-                    if ($response.headers.get('Location') && this.processRedirect($response)) return;
-                    this.host[bindingsConfig.bindings].data = $response.body;
+                    if (!$response.headers.get('Location')) {
+                        this.host[bindingsConfig.bindings].data = $response.body;
+                    }
                 });
             }
             if (modulesContextAttrs) {

package/src/runtime-pi/webflo-client/WebfloRootClient2.js

@@ -24,12 +24,16 @@ export class WebfloRootClient2 extends WebfloRootClient1 {
 			if (!e.canIntercept 
 				|| e.downloadRequest !== null 
 				|| !this.isSpaRoute(e.destination.url)
-				|| e.navigationType === 'reload') return;
+				|| ['reload'].includes(e.navigationType)) return;
 			if (e.hashChange) {
 				Observer.set(this.location, 'href', e.destination.url);
 				return;
 			}
-			const { navigationType, destination, signal, formData, info, userInitiated } = e;
+			if (e.navigationType === 'replace') {
+				e.intercept({});
+				return;
+			}
+			const { navigationType, destination, signal, formData, info, userInitiated, hasUAVisualTransition } = e;
 			if (formData && navigationOrigins[1]?.hasAttribute('webflo-no-intercept')) return;
 			if (formData && (navigationOrigins[0] || {}).name) { formData.set(navigationOrigins[0].name, navigationOrigins[0].value); }
 			// Navigation details
@@ -39,6 +43,7 @@ export class WebfloRootClient2 extends WebfloRootClient1 {
 				destination,
 				source: this.currentEntry(),
 				userInitiated,
+				hasUAVisualTransition,
 				info
 			};
 			navigationOrigins = [];
@@ -50,18 +55,11 @@ export class WebfloRootClient2 extends WebfloRootClient1 {
 				body: formData,
 				//signal TODO: auto-aborts on a redirect response which thus fails to parse
 			};
-			this.updateCurrentEntry({
-				state: {
-					...(this.currentEntry().getState() || {}),
-					scrollPosition: [window.scrollX, window.scrollY],
-				}
-			});
 			const runtime = this;
 			e.intercept({
 				scroll: 'after-transition',
 				focusReset: 'after-transition',
 				async handler() {
-					if (navigationType === 'replace') return;
 					await runtime.navigate(url, init, detail);
 				},
 			});

package/src/runtime-pi/webflo-client/WebfloSubClient.js

@@ -90,16 +90,18 @@ export class WebfloSubClient extends WebfloClient {
 		(this.host.querySelector('[autofocus]') || this.host).focus();
 	}
 
-	redirect(location, responseBackground = null) {
+	redirect(location, response = null) {
 		location = typeof location === 'string' ? new URL(location, this.location.origin) : location;
 		const width = Math.min(800, window.innerWidth);
 		const height = Math.min(600, window.innerHeight);
 		const left = (window.outerWidth - width) / 2;
 		const top = (window.outerHeight - height) / 2;
 		const popup = window.open(location, '_blank', `popup=true,width=${width},height=${height},left=${left},top=${top}`);
-		if (responseBackground) {
+		if (response && LiveResponse.hasBackground(response)) {
 			Observer.set(this.navigator, 'redirecting', new Url/*NOT URL*/(location), { diff: true });
-			responseBackground.addEventListener('close', (e) => {
+			const backgroundPort = LiveResponse.getBackground(response);
+			backgroundPort.postMessage(true, { wqEventOptions: { type: 'keep-alive' } });
+ 			backgroundPort.addEventListener('close', (e) => {
 				window.removeEventListener('message', windowMessageHandler);
 				Observer.set(this.navigator, 'redirecting', null);
 				popup.postMessage('timeout:5');
@@ -109,10 +111,12 @@ export class WebfloSubClient extends WebfloClient {
 			}, { once: true });
 			const windowMessageHandler = (e) => {
 				if (e.source === popup && e.data === 'close') {
-					responseBackground.close();
+					backgroundPort.close();
 				}
 			};
 			window.addEventListener('message', windowMessageHandler);
 		}
+		
+		return 3; // keep-alive
 	}
 }

package/src/runtime-pi/webflo-fetch/LiveResponse.js

@@ -50,7 +50,8 @@ export class LiveResponse extends EventTarget {
             throw new Error('Argument must be a Response instance.');
         }
 
-        const body = await responseShim.prototype.parse.value.call(response);
+        let body = null;
+        try { body = await responseShim.prototype.parse.value.call(response); } catch(e) {}
 
         // Instance
         const instance = new this(body, {

package/src/runtime-pi/webflo-fetch/index.js

@@ -87,11 +87,6 @@ export const request = {
         }
     },
     prototype: {
-        carries: {
-            get: function () {
-                return _wq(this, 'meta').get('carries') || [];
-            }
-        },
         parse: { value: async function () { return await parseHttpMessage(this); } },
         clone: {
             value: function (init = {}) {
@@ -149,7 +144,6 @@ export const response = {
                         : this.status);
             }
         },
-        carry: { get: function () { return _wq(this, 'meta').get('carry'); } },
         parse: { value: async function () { return await parseHttpMessage(this); } },
         clone: {
             value: function (init = {}) {

package/src/runtime-pi/webflo-routing/HttpEvent.js

@@ -132,7 +132,7 @@ export class HttpEvent {
         }
         //-----
         const urlRewrite = new URL(url, this.request.url);
-        const newThread = this.thread.extend(urlRewrite.searchParams.get('_thread'));
+        const newThread = this.thread.spawn(urlRewrite.searchParams.get('_thread'));
         urlRewrite.searchParams.set('_thread', newThread.threadID);
         await newThread.append('back', this.request.url.replace(urlRewrite.origin, ''));
         for (const [key, value] of Object.entries(data)) {
@@ -146,9 +146,8 @@ export class HttpEvent {
         return this.constructor.create(this.#parentEvent, { ...this.#init, ...init });
     }
 
-    extend(init = {}) {
-        const instance = this.constructor.create(this/*Main difference from clone*/, { ...this.#init, ...(init || {}) });
-        return instance;
+    spawn(init = {}) {
+        return this.constructor.create(this/*Main difference from clone*/, { ...this.#init, ...(init || {}) });
     }
 
     abort() {

package/src/runtime-pi/webflo-routing/HttpState.js

@@ -140,7 +140,7 @@ export class HttpState {
                         return new Promise(() => { });
                     }
                     const urlRewrite = new URL(handler.url, this.#request.url);
-                    const newThread = this.#thread.extend(urlRewrite.searchParams.get('_thread'));
+                    const newThread = this.#thread.spawn(urlRewrite.searchParams.get('_thread')/* show */);
                     urlRewrite.searchParams.set('_thread', newThread.threadID);
                     await newThread.append('back', this.#request.url.replace(urlRewrite.origin, ''));
                     if (handler.with) {

package/src/runtime-pi/webflo-routing/HttpThread.js

@@ -10,6 +10,7 @@ export class HttpThread {
     #store;
     #threadID;
     #realm;
+    #extended = false;
 
     get threadID() { return this.#threadID; }
 
@@ -19,7 +20,7 @@ export class HttpThread {
         this.#realm = realm;
     }
 
-    extend(_threadID = null) {
+    spawn(_threadID = null) {
         return this.constructor.create({
             store: this.#store,
             threadID: _threadID,
@@ -78,4 +79,8 @@ export class HttpThread {
         await this.#store.delete(this.#threadID);
         return this;
     }
+
+    get extended() { return this.#extended; }
+
+    extend(set = true) { this.#extended = !!set; }
 }

package/src/runtime-pi/webflo-routing/WebfloRouter.js

@@ -132,7 +132,7 @@ export class WebfloRouter {
 
                         // Set context parameters
                         nextTick.method = request.method;
-                        nextTick.event = await thisTick.event.extend({ request });
+                        nextTick.event = await thisTick.event.spawn({ request });
                         nextTick.source = thisTick.destination.join('/');
                         nextTick.destination = url.pathname.split('/').map((a) => a.trim()).filter((a) => a);
                         nextTick.trail = !urlStr_isRelative ? [] : thisTick.trail.reduce((_commonRoot, _seg, i) => _commonRoot.length === i && _seg === nextTick.destination[i] ? _commonRoot.concat(_seg) : _commonRoot, []);
@@ -141,7 +141,7 @@ export class WebfloRouter {
                         if (isFetch) {
                             throw new Error('fetch() cannot be called without arguments!');
                         }
-                        nextTick.event = thisTick.event.extend();
+                        nextTick.event = thisTick.event.spawn();
                     }
                     const result = await next(nextTick);
                     if (asResponse) {