@webqit/webflo 0.20.28 → 0.20.29

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.20.28",
+  "version": "0.20.29",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@octokit/webhooks": "^7.15.1",
     "@webqit/backpack": "^0.1.12",
-    "@webqit/fetch-plus": "^0.1.21",
+    "@webqit/fetch-plus": "^0.1.23",
     "@webqit/keyval": "^0.2.17",
     "@webqit/observer": "^3.8.14",
     "@webqit/oohtml-ssr": "^2.2.2",

package/src/runtime-pi/AppRuntime.js

@@ -155,7 +155,7 @@ export class AppRuntime {
         if (!this.isClientSide
             && response instanceof LiveResponse) {
             // Must convert to Response on the server-side before returning
-            const outgoingResponse = response.toResponse({ port: httpEvent.client });
+            const outgoingResponse = response.toResponse({ port: httpEvent.client, signal: httpEvent.signal });
             return outgoingResponse;
         }
 
@@ -168,11 +168,11 @@ export class AppRuntime {
             && response.headers.get('Location')) return;
 
         const status = await httpEvent.thread.consume('status', true);
-        if (!status.length) return;
+        if (!status) return;
 
         httpEvent.waitUntil(httpEvent.client.readyStateChange('open').then(async () => {
-            await new Promise((r) => setTimeout(r, 100));
-            httpEvent.client.postMessage(status, { type: 'alert' });
+            await new Promise((r) => setTimeout(r, 500));
+            httpEvent.client.postMessage(status, { type: 'status' });
             await new Promise((r) => setTimeout(r, 100));
         }));
     }

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

@@ -1,6 +1,8 @@
 import { _before, _toTitle } from '@webqit/util/str/index.js';
-import { LiveResponse, RequestPlus } from '@webqit/fetch-plus';
+import { Observer } from '@webqit/observer';
+import { URLPlus } from '@webqit/url-plus';
 import { StarPort } from '@webqit/port-plus';
+import { LiveResponse, RequestPlus } from '@webqit/fetch-plus';
 import { HttpThread111 } from '../webflo-routing/HttpThread111.js';
 import { HttpCookies101 } from '../webflo-routing/HttpCookies101.js';
 import { HttpCookies110 } from '../webflo-routing/HttpCookies110.js';
@@ -11,8 +13,6 @@ import { WebfloRouter111 } from '../webflo-routing/WebfloRouter111.js';
 import { KeyvalsFactory110 } from '../webflo-routing/KeyvalsFactory110.js';
 import { ClientRequestPort100 } from '../webflo-messaging/ClientRequestPort100.js';
 import { AppRuntime } from '../AppRuntime.js';
-import { Observer } from '@webqit/observer';
-import { URLPlus } from '@webqit/url-plus';
 import { _meta } from '../../util.js';
 
 export class WebfloClient extends AppRuntime {
@@ -69,29 +69,52 @@ export class WebfloClient extends AppRuntime {
 
         // ----------
         // Bind prompt handlers
-        const promptsHandler = (e) => {
+        const dialogHandler = (e) => {
             window.queueMicrotask(() => {
                 if (e.defaultPrevented) return;
+
                 if (e.type === 'confirm') {
-                    if (e.data?.message) {
-                        e.respondWith(confirm(e.data.message));
-                    }
+                    const dialogElement = document.createElement('wq-confirm');
+                    dialogElement.toggleAttribute('wq-default', true);
+
+                    dialogElement.render(e.data);
+                    document.body.append(dialogElement);
+                    dialogElement.showPopover();
+
+                    dialogElement.addEventListener('response', (r) => {
+                        e.respondWith(r.data);
+                        setTimeout(() => dialogElement.remove(), 300);
+                    }, { once: true });
                 } else if (e.type === 'prompt') {
-                    if (e.data?.message) {
-                        e.respondWith(prompt(e.data.message));
-                    }
-                } else if (e.type === 'alert') {
-                    for (const item of [].concat(e.data)) {
-                        if (item?.message) {
-                            alert(item.message);
-                        }
-                    }
+                    const dialogElement = document.createElement('wq-prompt');
+                    dialogElement.toggleAttribute('wq-default', true);
+
+                    dialogElement.render(e.data);
+                    document.body.append(dialogElement);
+                    dialogElement.showPopover();
+
+                    dialogElement.addEventListener('response', (r) => {
+                        e.respondWith(r.data);
+                        setTimeout(() => dialogElement.remove(), 300);
+                    }, { once: true });
+                } else if (e.type === 'status') {
+                    const dialogElement = document.createElement('wq-toast');
+                    dialogElement.toggleAttribute('wq-default', true);
+
+                    dialogElement.render(e.data);
+                    document.body.append(dialogElement);
+                    dialogElement.showPopover();
+
+                    dialogElement.addEventListener('toggle', (t) => {
+                        if (t.newState !== 'closed') return;
+                        dialogElement.remove();
+                    }, { once: true });
                 }
             });
         };
-        this.background.addEventListener('confirm', promptsHandler, { signal: instanceController.signal });
-        this.background.addEventListener('prompt', promptsHandler, { signal: instanceController.signal });
-        this.background.addEventListener('alert', promptsHandler, { signal: instanceController.signal });
+        this.background.addEventListener('confirm', dialogHandler, { signal: instanceController.signal });
+        this.background.addEventListener('prompt', dialogHandler, { signal: instanceController.signal });
+        this.background.addEventListener('status', dialogHandler, { signal: instanceController.signal });
 
         // ----------
         // Call default-init
@@ -305,7 +328,7 @@ export class WebfloClient extends AppRuntime {
         if (typeof cookieStore === 'undefined') {
             const entries = document.cookie.split(';').map((c) => c.split('=').map((s) => s.trim()));
             const store = this.#keyvals.create({ type: 'inmemory', path: ['cookies', scopeObj.tenantID], origins });
-            entries.forEach(([key, value]) => store.set(key, { value }));
+            entries.forEach(([key, value]) => store.set({ key, value }));
             const initial = Object.fromEntries(entries);
             scopeObj.cookies = HttpCookies101.create({
                 context: { handlersRegistry: this.#keyvals.getHandlers('cookies', true) },
@@ -440,7 +463,7 @@ export class WebfloClient extends AppRuntime {
         let response = await super.dispatchNavigationEvent({ httpEvent, crossLayerFetch, clientPortB });
 
         // Extract interactive. mode handling
-        const handleInteractiveMode = () => {
+        const handleInteractiveMode = (returnImmediate = false) => {
             return new Promise(async (resolve) => {
                 // Must come as first thing
                 const backgroundPort = LiveResponse.getPort(response);
@@ -450,13 +473,18 @@ export class WebfloClient extends AppRuntime {
                     ? response
                     : LiveResponse.from(response);
 
-                liveResponse.addEventListener('replace', (e) => {
+                await liveResponse.readyStateChange('live');
+                // IMPORTANT: ensures we're listening to subsequent changes.
+
+                liveResponse.addEventListener('replace', () => {
                     if (liveResponse.headers.get('Location')) {
                         this.processRedirect(liveResponse);
                     } else {
                         resolve(liveResponse);
                     }
                 }, { signal: httpEvent.signal });
+
+                if (returnImmediate) resolve(liveResponse);
             });
         };
 
@@ -495,7 +523,7 @@ export class WebfloClient extends AppRuntime {
 
             // Obtain and connect clientPortB as first thing
             if (LiveResponse.hasPort(response)) {
-                response = await handleInteractiveMode();
+                response = await handleInteractiveMode(true);
             }
         }
 

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

@@ -100,9 +100,9 @@ export class WebfloRootClientA extends WebfloClient {
 			scopeObj.response.headers.set(name, metaElement.content?.trim() || '');
 		}
 
-		if (scopeObj.response.port) {
-			this.background.addPort(scopeObj.response.port);
-		}
+		// Must come as first thing
+		const backgroundPort = LiveResponse.getPort(scopeObj.response);
+		if (backgroundPort) this.background.addPort(backgroundPort);
 
 		if (scopeObj.response.body || scopeObj.response.port) {
 			const httpEvent = HttpEvent111.create({ request: this.createRequest(this.location.href) }, true);

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

@@ -1,15 +1,10 @@
 import { Observer } from '@webqit/observer';
 import { LiveResponse } from '@webqit/fetch-plus';
 import { WebfloClient } from './WebfloClient.js';
-import { defineElement } from './webflo-embedded.js';
 import { _meta } from '../../util.js';
 
 export class WebfloSubClient extends WebfloClient {
 
-	static defineElement() {
-		defineElement(this);
-	}
-
 	static create(superRuntime, host) {
 		return new this(superRuntime, host);
 	}
@@ -67,7 +62,7 @@ export class WebfloSubClient extends WebfloClient {
 		const locationCallback = (newHref) => {
 			this.host.reflectLocation(newHref);
 		};
-		
+
 		return super.controlClassic/*IMPORTANT*/(locationCallback);
 	}
 
@@ -99,33 +94,35 @@ export class WebfloSubClient extends WebfloClient {
 
 	async 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}`);
-		
-		const backgroundPort = response instanceof LiveResponse 
+
+		const backgroundPort = response instanceof LiveResponse
 			? response.port
 			: LiveResponse.getPort(response);
+
 		if (backgroundPort) {
 			Observer.set(this.navigator, 'redirecting', new URL(location), { diff: true });
-			
- 			backgroundPort.readyStateChange('close').then((e) => {
-				window.removeEventListener('message', windowMessageHandler);
-
+			backgroundPort.readyStateChange('close').then(() => {
 				Observer.set(this.navigator, 'redirecting', null);
-				popup.postMessage('timeout:5');
-
-				setTimeout(() => {
-					popup.close();
-				}, 5000);
 			});
-			
+
 			const windowMessageHandler = (e) => {
-				if (e.source === popup && e.data === 'close') {
-					backgroundPort.close();
+				if (e.source === popup) {
+					window.removeEventListener('message', windowMessageHandler);
+					if (e.data === 'canclose') {
+						popup.postMessage('timeout:5');
+						setTimeout(() => {
+							popup.close();
+						}, 5000);
+					}
+					if (e.data === 'closed') {
+						backgroundPort.close();
+					}
 				}
 			};
 

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

@@ -1,11 +1,15 @@
 import { WebfloRootClientA } from './WebfloRootClientA.js';
 import { WebfloRootClientB } from './WebfloRootClientB.js';
-import { WebfloSubClient } from './WebfloSubClient.js';
+import { defineElement } from './webflo-embedded.js';
+import { defineElements } from './webflo-elements.js';
 
 export async function start(bootstrap) {
     const WebfloRootClient = window.navigation ? WebfloRootClientB : WebfloRootClientA;
     const instance = WebfloRootClient.create(bootstrap, document);
     await instance.initialize();
-    WebfloSubClient.defineElement();
+
+    defineElement();
+    defineElements();
+    
     return instance;
 }