@webqit/webflo 0.20.17 → 0.20.18

package/package.json

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

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

@@ -322,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
@@ -329,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,
@@ -342,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);
@@ -374,12 +373,12 @@ 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 = {} }) {
         let response = await super.dispatchNavigationEvent({ httpEvent, crossLayerFetch, clientPortB });
-        
+
         // Extract interactive. mode handling
         const handleInteractiveMode = async (resolve) => {
             const liveResponse = await LiveResponse.from(response);
@@ -469,19 +468,29 @@ export class WebfloClient extends WebfloRuntime {
         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();
                 });
             });

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

@@ -100,7 +100,7 @@ export class WebfloSubClient extends WebfloClient {
 		if (response && LiveResponse.hasBackground(response)) {
 			Observer.set(this.navigator, 'redirecting', new Url/*NOT URL*/(location), { diff: true });
 			const backgroundPort = LiveResponse.getBackground(response);
-			backgroundPort.postMessage('keep-alive');
+			backgroundPort.postMessage(true, { wqEventOptions: { type: 'keep-alive' } });
  			backgroundPort.addEventListener('close', (e) => {
 				window.removeEventListener('message', windowMessageHandler);
 				Observer.set(this.navigator, 'redirecting', null);