@webview-native-ui/engine 0.0.0-stage → 0.0.1

package/WebViewNativeUIEngine.podspec

@@ -0,0 +1,17 @@
+require 'json'
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+Pod::Spec.new do |s|
+ s.name = 'WebViewNativeUIEngine'
+ s.version = package['version']
+ s.summary = 'Native UI infrastructure for Capacitor and Cordova plugin maintainers.'
+ s.homepage = 'https://github.com/webview-native-ui/engine'
+ s.license = { :type => 'Zlib', :file => 'LICENSE' }
+ s.preserve_paths = 'LICENSE', 'NOTICE'
+ s.author = { 'rdlabo' => 'sakakibara@rdlabo.jp' }
+ s.source = { :git => 'https://github.com/webview-native-ui/engine.git', :tag => "v#{s.version}" }
+ s.resource_bundles = { 'WebViewNativeUIEngine' => ['ios/Sources/WebViewNativeUIEngine/Resources/*.js'] }
+ s.source_files = 'ios/Sources/WebViewNativeUIEngine/**/*.swift'
+ s.ios.deployment_target = '15.0'
+ s.swift_version = '5.9'
+ s.frameworks = 'UIKit', 'WebKit'
+end

package/dist/bridge.d.ts

@@ -0,0 +1,4 @@
+import type { ListenerHandle as PluginListenerHandle } from './types.js';
+export declare const bounded: <T>(promise: Promise<T>) => Promise<T>;
+/** A timed-out registration still owns a native resource if it eventually succeeds. */
+export declare const boundedListener: (registration: Promise<PluginListenerHandle>) => Promise<PluginListenerHandle>;

package/dist/bridge.js

@@ -0,0 +1,15 @@
+// A failed bridge must not leave the source inaccessible indefinitely.
+export const bounded = (promise) => new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error('Native UI bridge timed out')), 5000);
+    promise.then(resolve, reject).finally(() => clearTimeout(timer));
+});
+/** A timed-out registration still owns a native resource if it eventually succeeds. */
+export const boundedListener = async (registration) => {
+    try {
+        return await bounded(registration);
+    }
+    catch (error) {
+        void registration.then((listener) => listener.remove()).catch(() => { });
+        throw error;
+    }
+};

package/dist/geometry.d.ts

@@ -0,0 +1,2 @@
+export declare function projectionAncestors(element: HTMLElement): Generator<HTMLElement>;
+export declare const fitsClip: (element: HTMLElement) => boolean;

package/dist/geometry.js

@@ -0,0 +1,25 @@
+export function* projectionAncestors(element) {
+    let current = element;
+    while (current) {
+        const root = current.getRootNode();
+        current = current.assignedSlot ?? current.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+        if (current)
+            yield current;
+    }
+}
+export const fitsClip = (element) => {
+    const rect = element.getBoundingClientRect();
+    for (const ancestor of projectionAncestors(element)) {
+        const style = getComputedStyle(ancestor);
+        if (style.transform !== 'none' && !new DOMMatrixReadOnly(style.transform).isIdentity)
+            return false;
+        const bounds = ancestor.getBoundingClientRect();
+        const left = bounds.left + ancestor.clientLeft;
+        const top = bounds.top + ancestor.clientTop;
+        if (/^(hidden|clip|scroll|auto)$/.test(style.overflowX) && (rect.left < left - 1 || rect.right > left + ancestor.clientWidth + 1))
+            return false;
+        if (/^(hidden|clip|scroll|auto)$/.test(style.overflowY) && (rect.top < top - 1 || rect.bottom > top + ancestor.clientHeight + 1))
+            return false;
+    }
+    return true;
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from './types.js';
+export * from './geometry.js';
+export * from './scroll-placement.js';
+export { createWebProjectionScope, type WebProjectionScope } from './web-projection-scope.js';
+export * from './web-projection.js';
+export * from './scroll-bindings.js';
+export type { ProjectionEvents, ProjectionDestination } from './projection-events.js';
+export { getOverlayCoordinator, usesOverlayBackdrop, type OverlayChange, type OverlayOptions } from './overlays.js';
+export { getUnprojectedVisibility } from './visibility.js';
+export { bindProjectionPlacement, type ProjectionPlacementBinding } from './projection-placement.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+export * from './types.js';
+export * from './geometry.js';
+export * from './scroll-placement.js';
+export { createWebProjectionScope } from './web-projection-scope.js';
+export * from './web-projection.js';
+export * from './scroll-bindings.js';
+export { getOverlayCoordinator, usesOverlayBackdrop } from './overlays.js';
+export { getUnprojectedVisibility } from './visibility.js';
+export { bindProjectionPlacement } from './projection-placement.js';

package/dist/ionic.d.ts

@@ -0,0 +1,16 @@
+import { type OverlayDefinition, type OverlayOptions } from './overlays.js';
+export type { OverlayOptions as IonicOverlayOptions } from './overlays.js';
+/** Call once at app startup. Repeated default calls share the existing configuration and monitor. */
+export declare const enableSupportIonicOverlays: (options?: OverlayOptions, doc?: Document | undefined) => {
+    readonly active: ReadonlySet<HTMLElement>;
+    subscribe(listener: (change: import("./overlays.js").OverlayChange) => void): () => void;
+    setNative(element: HTMLElement, value: boolean): void;
+    isExcluded(element: HTMLElement): boolean;
+    isNative(element: HTMLElement): boolean;
+    readonly stack: HTMLElement[];
+    isCovered(target: HTMLElement): boolean;
+    enable(defaults: readonly OverlayDefinition[], config?: OverlayOptions): void;
+} | undefined;
+/** The background surface shares the same order used for registered DOM projections. */
+export declare const ionicModalStack: (doc: Document) => HTMLElement[];
+export declare const coveredIonicSurface: (overlay: HTMLElement) => HTMLElement | undefined;

package/dist/ionic.js

@@ -0,0 +1,31 @@
+import { getOverlayCoordinator } from './overlays.js';
+const defaults = [
+    ...['Modal', 'Popover', 'Alert', 'ActionSheet', 'Loading', 'Picker', 'Toast'].map((name) => ({
+        selector: `ion-${name.replace(/[A-Z]/g, (letter, index) => (index ? '-' : '') + letter.toLowerCase())}`,
+        events: {
+            willPresent: `ion${name}WillPresent`,
+            didPresent: `ion${name}DidPresent`,
+            willDismiss: `ion${name}WillDismiss`,
+            didDismiss: `ion${name}DidDismiss`,
+        },
+    })),
+    { selector: 'ion-modal', events: { change: 'ionBreakpointDidChange' } },
+    {
+        selector: 'ion-menu',
+        events: { willPresent: 'ionWillOpen', didPresent: 'ionDidOpen', willDismiss: 'ionWillClose', didDismiss: 'ionDidClose' },
+    },
+];
+/** Call once at app startup. Repeated default calls share the existing configuration and monitor. */
+export const enableSupportIonicOverlays = (options, doc = globalThis.document) => {
+    if (!doc)
+        return;
+    const coordinator = getOverlayCoordinator(doc);
+    coordinator.enable(defaults, options);
+    return coordinator;
+};
+/** The background surface shares the same order used for registered DOM projections. */
+export const ionicModalStack = (doc) => getOverlayCoordinator(doc).stack.filter((element) => element.matches('ion-modal'));
+export const coveredIonicSurface = (overlay) => {
+    const stack = ionicModalStack(overlay.ownerDocument);
+    return overlay.matches('ion-modal') ? stack[stack.indexOf(overlay) - 1] : stack[stack.length - 1];
+};

package/dist/native-bootstrap.d.ts

@@ -0,0 +1,8 @@
+import { type NativeSessionConfiguration } from './native-session.js';
+/** Cordova plugins forward their existing notifications through NativeUIProjection.receive. */
+export declare const notify: (id: string, name: string, data: unknown) => void | undefined;
+export declare const receive: (id: string, key: string | null, value: any, error?: string) => void;
+export declare const show: (id: string) => void;
+export declare const hide: (id: string) => boolean;
+export declare const stop: (id: string) => Promise<void>;
+export declare const start: (config: NativeSessionConfiguration) => Promise<void>;

package/dist/native-bootstrap.js

@@ -0,0 +1,138 @@
+import { startNativeSession } from './native-session.js';
+const sessions = new Map();
+const pending = new Map();
+const interactions = new Map();
+const documentID = Array.from(crypto.getRandomValues(new Uint32Array(4)), (part) => part.toString(16)).join('-');
+const notifications = new Map();
+/** Cordova plugins forward their existing notifications through NativeUIProjection.receive. */
+export const notify = (id, name, data) => notifications.get(id)?.get(name)?.(data);
+let sequence = 0;
+const send = (id, request) => new Promise((resolve, reject) => {
+    const key = `${id}:${documentID}:${++sequence}`;
+    const timer = setTimeout(() => {
+        pending.delete(key);
+        reject(new Error('Native UI session timed out'));
+    }, 5000);
+    pending.set(key, { resolve, reject, timer });
+    const message = JSON.stringify({ key, request });
+    const host = globalThis;
+    const channel = host.webkit?.messageHandlers?.[id] ?? host[id] ?? host.nativeUIEngine;
+    if (!channel) {
+        clearTimeout(timer);
+        pending.delete(key);
+        reject(new Error('Native UI session unavailable'));
+        return;
+    }
+    try {
+        channel.postMessage(message);
+    }
+    catch (error) {
+        clearTimeout(timer);
+        pending.delete(key);
+        reject(error);
+    }
+});
+export const receive = (id, key, value, error) => {
+    if (key === null) {
+        interactions.get(id)?.(value);
+        return;
+    }
+    const item = pending.get(key);
+    if (!item || !key.startsWith(`${id}:`))
+        return;
+    pending.delete(key);
+    clearTimeout(item.timer);
+    if (error)
+        item.reject(new Error(error));
+    else
+        item.resolve(value);
+};
+export const show = (id) => {
+    sessions.get(id)?.show();
+};
+export const hide = (id) => {
+    sessions.get(id)?.hide();
+    return true;
+};
+export const stop = async (id) => {
+    const session = sessions.get(id);
+    sessions.delete(id);
+    notifications.delete(id);
+    interactions.delete(id);
+    for (const [key, item] of pending) {
+        if (!key.startsWith(`${id}:`))
+            continue;
+        pending.delete(key);
+        clearTimeout(item.timer);
+        item.reject(new Error('Native UI session closed'));
+    }
+    await session?.destroy();
+};
+export const start = async (config) => {
+    if (sessions.has(config.id))
+        return;
+    // Reserve before asynchronous initialization, including duplicate Native init callbacks.
+    let actual;
+    let cancelled = false;
+    let pendingDestination;
+    const reservation = {
+        show: () => {
+            pendingDestination = 'native';
+            actual?.show();
+        },
+        hide: () => {
+            pendingDestination = 'none';
+            actual?.hide();
+        },
+        destroy: async () => {
+            cancelled = true;
+            await actual?.destroy();
+        },
+    };
+    sessions.set(config.id, reservation);
+    try {
+        if (document.readyState === 'loading')
+            await new Promise((resolve) => document.addEventListener('DOMContentLoaded', () => resolve(), { once: true }));
+        if (cancelled)
+            return;
+        const listeners = new Map();
+        if (config.runtime === 'cordova')
+            notifications.set(config.id, listeners);
+        actual = await startNativeSession(config, {
+            send: (request) => send(config.id, request),
+            listen: async (listener) => {
+                interactions.set(config.id, listener);
+                return {
+                    remove: () => {
+                        if (interactions.get(config.id) === listener)
+                            interactions.delete(config.id);
+                    },
+                };
+            },
+        }, config.runtime === 'cordova'
+            ? {
+                addListener: async (name, listener) => {
+                    listeners.set(name, listener);
+                    return {
+                        remove: () => {
+                            listeners.delete(name);
+                        },
+                    };
+                },
+            }
+            : undefined);
+        if (pendingDestination === 'none')
+            actual.hide();
+        else if (pendingDestination === 'native')
+            actual.show();
+        if (cancelled)
+            await actual.destroy();
+    }
+    catch (error) {
+        if (sessions.get(config.id) === reservation) {
+            sessions.delete(config.id);
+            notifications.delete(config.id);
+        }
+        throw error;
+    }
+};

package/dist/native-session.d.ts

@@ -0,0 +1,48 @@
+import { type ProjectionDestination } from './projection-events.js';
+import type { ScrollPlacement, ListenerHandle, WebProjectionRequest } from './types.js';
+/** Serialized by the native library. One registration owns one fixed fallback container. */
+export interface NativeSessionConfiguration {
+    id: string;
+    plugin: string;
+    runtime?: 'capacitor' | 'cordova';
+    projectionSelector: string;
+    /** Recovery while native is requested. Explicit web/none destinations take precedence. */
+    failedFallback?: 'web' | 'native';
+    captureMode?: 'composited' | 'view';
+    /** Native registration accepts a final placement in its reveal request. */
+    placementHandoff?: boolean;
+    receiveListeners?: {
+        update?: string[];
+        projection?: Partial<Record<ProjectionDestination, string[]>>;
+        match?: Record<string, string | number | boolean>;
+    };
+}
+export interface NativeSessionBridge {
+    send(request: WebProjectionRequest | {
+        action: 'resume';
+        token?: string;
+    } | {
+        action: 'visibility';
+        visible: boolean;
+    } | {
+        action: 'track';
+        viewportWidth: number;
+        scroll?: ScrollPlacement;
+    } | {
+        action: 'connect';
+    } | {
+        action: 'destination';
+        destination: ProjectionDestination;
+    }): Promise<any>;
+    listen(listener: (event: {
+        active: boolean;
+    }) => void): Promise<ListenerHandle>;
+}
+/** Native startup calls this; application code does not initialize or wrap the plugin. */
+export declare const startNativeSession: (config: NativeSessionConfiguration, nativeBridge: NativeSessionBridge, plugin?: {
+    addListener(name: string, listener: (event: unknown) => void): Promise<ListenerHandle>;
+}) => Promise<{
+    destroy: () => Promise<void>;
+    show: () => void;
+    hide: () => void;
+}>;