@webqit/webflo 0.20.34 → 0.20.36

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.20.34",
+  "version": "0.20.36",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,10 +22,16 @@
     "url": "https://github.com/webqit/webflo/issues"
   },
   "type": "module",
-  "main": "./src/index.js",
+  "main": "./src/webflo-exports/index.js",
+  "exports": {
+    ".": "./src/webflo-exports/index.js",
+    "./*": "./src/webflo-exports/*/index.js",
+    "./*.js": "./src/webflo-exports/*.js"
+  },
   "scripts": {
     "test": "echo \"Nothing to test yet\"",
     "build": "echo \"Nothing to build yet\"",
+    "build:test": "esbuild test/browser/*.src.js --bundle --minify --sourcemap --outdir=test/browser --entry-names=[name].build",
     "preversion": "npm run test",
     "postversion": "git push && git push --tags",
     "version:next": "npm version prerelease --preid=next",
@@ -51,7 +57,7 @@
     "@webqit/util": "^0.8.11",
     "chokidar": "^4.0.3",
     "dotenv": "^16.4.7",
-    "esbuild": "^0.14.38",
+    "esbuild": "^0.14.54",
     "fast-glob": "^3.3.3",
     "idb": "^8.0.3",
     "mime-types": "^2.1.33",

package/src/index.js

@@ -1,9 +1,9 @@
-import * as config from './config-pi/index.js';
-import * as deployment from './deployment-pi/index.js';
-import * as runtime from './runtime-pi/index.js';
-import * as services from './services-pi/index.js';
-import * as starter from './init-pi/index.js';
-import * as build from './build-pi/index.js';
+import * as config from './webflo-config/index.js';
+import * as deployment from './webflo-deployment/index.js';
+import * as runtime from './webflo-runtime/index.js';
+import * as services from './webflo-services/index.js';
+import * as init from './webflo-init/index.js';
+import * as build from './webflo-build/index.js';
 
 export { CLIContext } from './CLIContext.js';
 export {
@@ -11,6 +11,6 @@ export {
     deployment,
     runtime,
     services,
-    starter,
+    init,
     build,
 }

package/src/{build-pi → webflo-build}/index.js

@@ -8,9 +8,9 @@ import { _afterLast, _beforeLast } from '@webqit/util/str/index.js';
 import { _isObject, _isArray } from '@webqit/util/js/index.js';
 import { jsFile } from '@webqit/backpack/src/dotfile/index.js';
 import { URLPatternPlus } from '@webqit/url-plus';
-import { bootstrap as serverBootstrap } from '../runtime-pi/webflo-server/bootstrap.js';
-import { bootstrap as clientBootstrap } from '../runtime-pi/webflo-client/bootstrap.js';
-import { bootstrap as workerBootstrap } from '../runtime-pi/webflo-worker/bootstrap.js';
+import { bootstrap as serverBootstrap } from '../webflo-runtime/webflo-server/bootstrap.js';
+import { bootstrap as clientBootstrap } from '../webflo-runtime/webflo-client/bootstrap.js';
+import { bootstrap as workerBootstrap } from '../webflo-runtime/webflo-worker/bootstrap.js';
 import { UseLiveTransform } from './esbuild-plugin-uselive-transform.js';
 import { CLIContext } from '../CLIContext.js';
 
@@ -83,7 +83,7 @@ function declareRoutes({ $context, $source, bootstrap }) {
 
 function writeImportWebflo($source, which) {
     const importUrl = Url.fileURLToPath(import.meta.url);
-    const importPath = Path.join(Path.dirname(importUrl), `../runtime-pi/webflo-${which}/index.js`);
+    const importPath = Path.join(Path.dirname(importUrl), `../webflo-runtime/webflo-${which}/index.js`);
     $source.imports[importPath] = `{ start }`;
 }
 

package/src/{config-pi → webflo-config}/deployment/Env.js

@@ -1,7 +1,3 @@
-
-/**
- * imports
- */
 import { Dotfile } from '@webqit/backpack';
 
 export default class Env extends Dotfile {

package/src/{config-pi → webflo-config}/deployment/Layout.js

@@ -1,7 +1,3 @@
-
-/**
- * imports
- */
 import { Dotfile } from '@webqit/backpack';
 
 export default class Layout extends Dotfile {

package/src/{config-pi → webflo-config}/deployment/Origins.js

@@ -1,7 +1,3 @@
-
-/**
- * imports
- */
 import Url from 'url';
 import { _before } from '@webqit/util/str/index.js';
 import { _isTypeObject } from '@webqit/util/js/index.js';

package/src/{config-pi → webflo-config}/deployment/Proxy.js

@@ -1,7 +1,3 @@
-
-/**
- * imports
- */
 import { Dotfile } from '@webqit/backpack';
 
 export default class Proxy extends Dotfile {

package/src/{config-pi → webflo-config}/deployment/index.js

@@ -1,15 +1,8 @@
-
-/**
- * i@mports
- */
 import Env from './Env.js';
 import Layout from  './Layout.js';
 import Origins from  './Origins.js';
 import Proxy from  './Proxy.js';
 
-/**
- * @exports
- */
 export {
     Env,
     Layout,

package/src/{config-pi → webflo-config}/index.js

@@ -1,14 +1,7 @@
-
-/**
- * @imports
- */
 import * as deployment from  './deployment/index.js';
 import * as runtime from  './runtime/index.js';
 import * as $static from  './static/index.js';
 
-/**
- * @exports
- */
 export {
     deployment,
     runtime,

package/src/{config-pi → webflo-config}/static/Init.js

@@ -1,7 +1,3 @@
-
-/**
- * imports
- */
 import { Dotfile } from '@webqit/backpack';
 
 export default class Init extends Dotfile {

package/src/{config-pi → webflo-config}/static/Manifest.js

@@ -1,7 +1,3 @@
-
-/**
- * imports
- */
 import Path from 'path';
 import { _all } from '@webqit/util/arr/index.js';
 import { _isNumeric } from '@webqit/util/js/index.js';

package/src/{config-pi → webflo-config}/static/Ssg.js

@@ -1,7 +1,3 @@
-
-/**
- * imports
- */
 import { Dotfile } from '@webqit/backpack';
 
 export default class Ssg extends Dotfile {

package/src/{config-pi → webflo-config}/static/index.js

@@ -1,14 +1,7 @@
-
-/**
- * @imports
- */
 import Init from  './Init.js';
 import Manifest from  './Manifest.js';
 import Ssg from  './Ssg.js';
 
-/**
- * @exports
- */
 export {
     Init,
     Manifest,

package/src/{deployment-pi → webflo-deployment}/index.js

@@ -1,10 +1,3 @@
-
-/**
- * imports
- */
 import * as origins from './origins/index.js';
 
-/**
- * @exports
- */
 export { origins }

package/src/{deployment-pi → webflo-deployment}/origins/index.js

@@ -1,7 +1,3 @@
-
-/**
- * @imports
- */
 import Fs from 'fs';
 import Path from 'path';
 import SimpleGit from 'simple-git';
@@ -11,16 +7,10 @@ import { _beforeLast } from '@webqit/util/str/index.js';
 import { _isObject, _isNumeric } from '@webqit/util/js/index.js';
 import Webhooks from '@octokit/webhooks';
 
-/**
- * @desc
- */
 export const desc = {
     deploy: 'Deploy project from a remote origin.',
 };
 
-/**
- * @deploy
- */
 export async function deploy(origin) {
     const cx = this || {};
     if (!cx.config.deployment?.Origins) {
@@ -149,9 +139,6 @@ export async function deploy(origin) {
 
 }
 
-/**
- * @hook
- */
 export async function webhook(httpEvent, router, next) {
     const cx = this || {};
     if (!cx.config.deployment?.Origins) {

package/src/webflo-exports/ui/index.js

@@ -0,0 +1 @@
+export * from '../../webflo-runtime/webflo-client/webflo-elements.js';

package/src/{init-pi → webflo-init}/index.js

@@ -3,7 +3,7 @@ import Fs2 from 'fs/promises';
 import Path from 'path';
 import { exec } from 'child_process';
 import { _toTitle } from '@webqit/util/str/index.js';
-import { readInitConfig } from '../deployment-pi/util.js';
+import { readInitConfig } from '../webflo-deployment/util.js';
 import { CLIContext } from '../CLIContext.js';
 
 export const desc = {

package/src/webflo-runtime/webflo-client/DeviceViewport.js

@@ -0,0 +1,173 @@
+class DeviceViewport {
+
+    #stack = [];
+    #ownedElements = new Set(); // Stores elements created by this class
+    #elements = {};             // Map of active elements/selectors
+    #timer = null;              // For commit batching
+
+    #specials = {
+        themeColor: { name: 'theme-color', type: 'meta' },
+        appleStatusBarStyle: { name: 'apple-mobile-web-app-status-bar-style', type: 'meta' },
+        colorScheme: { name: 'color-scheme', type: 'meta' },
+        manifest: { name: 'manifest', type: 'link' }
+    };
+
+    constructor() {
+        const initialState = { _isInitial: true };
+
+        // 1. Ingest Viewport
+        const vMeta = document.querySelector('meta[name="viewport"]');
+        if (vMeta) {
+            this.#elements.viewport = vMeta;
+            Object.assign(initialState, this.#parseViewport(vMeta.content));
+        }
+
+        // 2. Ingest Title & Specials
+        initialState.title = document.title;
+        Object.entries(this.#specials).forEach(([jsKey, config]) => {
+            const el = this.#findDom(config);
+            if (el) {
+                this.#elements[jsKey] = el;
+                initialState[jsKey] = config.type === 'link' ? el.getAttribute('href') : el.getAttribute('content');
+            }
+        });
+
+        this.#stack.push(initialState);
+    }
+
+    #findDom({ name, type }) {
+        return type === 'link'
+            ? document.querySelector(`link[rel="${name}"]`)
+            : document.querySelector(`meta[name="${name}"]`);
+    }
+
+    #getOrCreate(jsKey, media = null) {
+        const cacheKey = media ? `${jsKey}-${media}` : jsKey;
+        if (this.#elements[cacheKey]) return this.#elements[cacheKey];
+
+        const config = this.#specials[jsKey] || { name: 'viewport', type: 'meta' };
+        const el = document.createElement(config.type);
+
+        if (config.type === 'link') el.rel = config.name;
+        else el.name = config.name;
+        if (media) el.setAttribute('media', media);
+
+        document.head.appendChild(el);
+        this.#ownedElements.add(el);
+        this.#elements[cacheKey] = el;
+        return el;
+    }
+
+    #scheduleRender() {
+        if (this.#timer) return;
+        this.#timer = requestAnimationFrame(() => {
+            this.#render();
+            this.#timer = null;
+        });
+    }
+
+    #render() {
+        const state = this.peek();
+        const viewportDirectives = [];
+        const activeKeys = new Set(Object.keys(state).filter(k => !k.startsWith('_')));
+
+        // 1. Handle Title
+        if ('title' in state) {
+            document.title = state.title || '';
+            activeKeys.delete('title');
+        }
+
+        // 2. Handle Specials (with Media Query Support)
+        Object.keys(this.#specials).forEach(jsKey => {
+            const val = state[jsKey]; // Can be string or { default, dark, light, "(media)": color }
+            activeKeys.delete(jsKey);
+
+            const seen = new Set();
+
+            if (val && typeof val === 'object' && jsKey === 'themeColor') {
+                // Media Query Logic
+                Object.entries(val).forEach(([query, color]) => {
+                    const mediaStr = query === 'dark' ? '(prefers-color-scheme: dark)' :
+                        query === 'light' ? '(prefers-color-scheme: light)' :
+                            query === 'default' ? '' : query;
+                    seen.add(mediaStr);
+                    this.#setAttr(jsKey, color, mediaStr);
+                });
+            } else {
+                seen.add('');
+                this.#setAttr(jsKey, val);
+            }
+
+            // cleanup
+            Object.keys(this.#elements)
+                .filter(k => k === jsKey || k.startsWith(`${jsKey}-`))
+                .forEach(k => {
+                    const keyId = k === jsKey ? '' : k.slice(jsKey.length + 1);
+                    if (!seen.has(keyId)) {
+                        this.#setAttr(jsKey, null, keyId);
+                    }
+                });
+        });
+
+        // 3. Handle Viewport
+        activeKeys.forEach(key => {
+            const val = state[key];
+            if (val === null) return;
+            const kebab = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+            viewportDirectives.push(val === true ? kebab : `${kebab}=${val}`);
+        });
+
+        const vContent = viewportDirectives.join(', ');
+        const vEl = this.#elements.viewport || (vContent ? this.#getOrCreate('viewport') : null);
+        if (vEl) {
+            vEl.setAttribute('content', vContent);
+            if (!vContent && this.#ownedElements.has(vEl)) {
+                vEl.remove();
+                delete this.#elements.viewport;
+            }
+        }
+    }
+
+    #setAttr(jsKey, val, media = null) {
+        const cacheKey = media ? `${jsKey}-${media}` : jsKey;
+        const config = this.#specials[jsKey];
+
+        if (val !== undefined && val !== null) {
+            const el = this.#getOrCreate(jsKey, media);
+            el.setAttribute(config.type === 'link' ? 'href' : 'content', val);
+        } else {
+            const el = this.#elements[cacheKey];
+            if (el) {
+                if (this.#ownedElements.has(el)) {
+                    el.remove();
+                    delete this.#elements[cacheKey];
+                } else {
+                    el.setAttribute(config.type === 'link' ? 'href' : 'content', '');
+                }
+            }
+        }
+    }
+
+    #parseViewport = (c) => Object.fromEntries(c.split(',').filter(Boolean).map(s => {
+        const [k, v] = s.split('=').map(p => p.trim());
+        return [k.replace(/-([a-z])/g, g => g.toUpperCase()), v || true];
+    }));
+
+    push(id, config) {
+        if (!id) throw new Error("push() requires a unique ID");
+        if (this.#stack.some(e => e.id === id)) return;
+        this.#stack.push({ ...this.peek(), ...config, id, _isInitial: false });
+        this.#scheduleRender();
+    }
+
+    pop(id) {
+        if (!id) throw new Error("pop() requires a target ID");
+        const idx = this.#stack.findIndex(e => e.id === id);
+        if (idx > 0) { // Never pop the initial state at index 0
+            this.#stack.splice(idx, 1);
+            this.#scheduleRender();
+        }
+    }
+
+    peek() { return this.#stack[this.#stack.length - 1]; }
+}

package/src/{runtime-pi → webflo-runtime}/webflo-client/WebfloClient.js

@@ -35,9 +35,6 @@ export class WebfloClient extends AppRuntime {
     #background;
     get background() { return this.#background; }
 
-    #viewport;
-    get viewport() { return this.#viewport; }
-
     get isClientSide() { return true; }
 
     constructor(bootstrap, host) {
@@ -59,68 +56,6 @@ export class WebfloClient extends AppRuntime {
             phase: 0
         };
         this.#background = new StarPort({ handshake: 1, autoClose: false });
-
-        // ---------------------
-        // Dynamic viewport styling
-
-        const oskToken = 'interactive-widget=resizes-content';
-        const hasOsk = (content) => content?.includes(oskToken);
-        const removeOsk = (content) => {
-            if (content?.includes('interactive-widget')) {
-                return content
-                    .split(',')
-                    .filter((s) => !s.includes('interactive-widget'))
-                    .map((s) => s.trim())
-                    .join(', ');
-            }
-            return content;
-        };
-        const addOsk = (content) => {
-            if (content?.includes('interactive-widget')) {
-                return content
-                    .split(',')
-                    .map((s) => s.includes('interactive-widget') ? oskToken : s.trim())
-                    .join(', ');
-            }
-            return content + ', ' + oskToken;
-        };
-
-        const viewportMeta = document.querySelector('meta[name="viewport"]');
-        const viewportMetaInitialContent = viewportMeta?.content;
-        const themeColorMeta = document.querySelector('meta[name="theme-color"]');
-        const renderViewportMetas = (entry) => {
-            viewportMeta?.setAttribute('content', entry.osk ? addOsk(viewportMetaInitialContent) : removeOsk(viewportMetaInitialContent));
-            themeColorMeta?.setAttribute('content', entry.themeColor);
-        };
-
-        const initial = {
-            themeColor: themeColorMeta?.content,
-            osk: hasOsk(viewportMetaInitialContent),
-        };
-        const viewportStack = [initial];
-
-        this.#viewport = {
-            push(entryId, { themeColor = viewportStack[0].themeColor, osk = viewportStack[0].osk }) {
-                if (typeof entryId !== 'string' || !entryId?.trim()) {
-                    throw new Error('entryId cannot be ommited');
-                }
-                if (viewportStack.find((e) => e.entryId === entryId)) return;
-                viewportStack.unshift({ entryId, themeColor, osk });
-                renderViewportMetas(viewportStack[0]);
-            },
-            pop(entryId) {
-                if (typeof entryId !== 'string' || !entryId?.trim()) {
-                    throw new Error('entryId cannot be ommited');
-                }
-                const index = viewportStack.findIndex((e) => e.entryId === entryId);
-                if (index === -1) return;
-                viewportStack.splice(index, 1);
-                renderViewportMetas(viewportStack[0]);
-            },
-            current() {
-                return viewportStack[0];
-            }
-        };
     }
 
     async initialize() {

package/src/{runtime-pi → webflo-runtime}/webflo-client/WebfloRootClientA.js

@@ -3,6 +3,7 @@ import { LiveResponse } from '@webqit/fetch-plus';
 import { HttpEvent111 } from '../webflo-routing/HttpEvent111.js';
 import { ClientSideWorkport } from './ClientSideWorkport.js';
 import { DeviceCapabilities } from './DeviceCapabilities.js';
+import { DeviceViewport } from './DeviceViewport.js';
 import { WebfloClient } from './WebfloClient.js';
 import { WebfloHMR } from './webflo-devmode.js';
 
@@ -12,6 +13,8 @@ export class WebfloRootClientA extends WebfloClient {
 
 	static get DeviceCapabilities() { return DeviceCapabilities; }
 
+	static get DeviceViewport() { return DeviceViewport; }
+
 	static create(bootstrap, host) {
 		return new this(bootstrap, host);
 	}
@@ -19,12 +22,15 @@ export class WebfloRootClientA extends WebfloClient {
 	#network;
 	get network() { return this.#network; }
 
-	#workport;
-	get workport() { return this.#workport; }
+	#viewport;
+	get viewport() { return this.#viewport; }
 
 	#capabilities;
 	get capabilities() { return this.#capabilities; }
 
+	#workport;
+	get workport() { return this.#workport; }
+
 	#hmr;
 
 	get withViewTransitions() {
@@ -67,10 +73,14 @@ export class WebfloRootClientA extends WebfloClient {
 
 	async setupCapabilities() {
 		const instanceController = await super.setupCapabilities();
-		const cleanups = [];
 
-		// Service Worker && Capabilities
+		const cleanups = [];
 		instanceController.signal.addEventListener('abort', () => cleanups.forEach((c) => c()), { once: true });
+
+		// DeviceViewport, DeviceCapabilities, & Service Worker
+
+		this.#viewport = new this.constructor.DeviceViewport();
+
 		this.#capabilities = await this.constructor.DeviceCapabilities.initialize(this, this.config.CLIENT.capabilities);
 		cleanups.push(() => this.#capabilities.close());
 

package/src/{runtime-pi → webflo-runtime}/webflo-client/bootstrap.js

@@ -7,7 +7,7 @@ import {
     readWorkerConfig,
     scanRoots,
     scanRouteHandlers, 
-} from '../../deployment-pi/util.js';
+} from '../../webflo-deployment/util.js';
 
 export async function bootstrap(cx, offset = '') {
     const $init = Fs.existsSync('./init.client.js')