tauri-remote-ui 0.22.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 - DraviaVemal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# Tauri Remote UI
+
+**Tauri Remote UI** is a plugin that allows you to expose your Tauri application's UI to any web browser, enabling seamless remote interaction and end-to-end testing. The plugin bridges your native app and commercial browsers, letting you use standard web automation tools for testing and debugging—without modifying your app's core logic.
+
+## Features
+
+- **Remote UI Exposure:** Interact with your Tauri app from any browser.
+- **Seamless E2E Testing:** Use existing web automation/testing tools.
+- **Automatic Transport Switching:** IPC for WebView, WebSocket for browsers—handled transparently.
+- **Customizable Security:** Control and secure remote access as needed.
+- **Zero App Changes:** No additional changes required to your app after plugin setup.
+- **Future Compatibility:** When [CEF-RS](https://github.com/cef-rs/cef) becomes available, the same E2E tests (e.g., written with Playwright or similar tools that use the Chromium debug port) will work seamlessly in debug mode, ensuring long-term support for modern testing workflows.
+
+## Operation Flow
+
+- **WebView:** Uses IPC for communication between frontend and backend.
+- **Commercial Browser:** Uses WebSocket (WS) for remote frontend-backend communication.
+- **Automatic Switching:** The Rust backend plugin and npm frontend wrapper handle transport selection automatically.
+- **Security:** The exposure of the web app can be secured and customized by the end user.
+
+## Usage
+
+1. **Install the Rust plugin** in your Tauri project.
+2. **Install the NPM plugin** in your frontend.
+3. **Access the UI remotely** via the provided web interface when activated.
+
+## Development
+
+- Build Rust: `cargo build`
+- Build JS: `pnpm build` (from the root)
+- Example app: See `examples/tauri-app/`
+
+## License
+
+MIT

package/api/app/index.cjs

@@ -0,0 +1,206 @@
+'use strict';
+
+var index = require('../core/index.cjs');
+var image = require('@tauri-apps/api/image');
+
+/**
+ * Application metadata and related APIs.
+ *
+ * @module
+ */
+/**
+ * Gets the application version.
+ * @example
+ * ```typescript
+ * import { getVersion } from '@tauri-apps/api/app';
+ * const appVersion = await getVersion();
+ * ```
+ *
+ * @since 1.0.0
+ */
+async function getVersion() {
+    return index.invoke('plugin:app|version');
+}
+/**
+ * Gets the application name.
+ * @example
+ * ```typescript
+ * import { getName } from '@tauri-apps/api/app';
+ * const appName = await getName();
+ * ```
+ *
+ * @since 1.0.0
+ */
+async function getName() {
+    return index.invoke('plugin:app|name');
+}
+/**
+ * Gets the Tauri framework version used by this application.
+ *
+ * @example
+ * ```typescript
+ * import { getTauriVersion } from '@tauri-apps/api/app';
+ * const tauriVersion = await getTauriVersion();
+ * ```
+ *
+ * @since 1.0.0
+ */
+async function getTauriVersion() {
+    return index.invoke('plugin:app|tauri_version');
+}
+/**
+ * Gets the application identifier.
+ * @example
+ * ```typescript
+ * import { getIdentifier } from '@tauri-apps/api/app';
+ * const identifier = await getIdentifier();
+ * ```
+ *
+ * @returns The application identifier as configured in `tauri.conf.json`.
+ *
+ * @since 2.4.0
+ */
+async function getIdentifier() {
+    return index.invoke('plugin:app|identifier');
+}
+/**
+ * Shows the application on macOS. This function does not automatically
+ * focus any specific app window.
+ *
+ * @example
+ * ```typescript
+ * import { show } from '@tauri-apps/api/app';
+ * await show();
+ * ```
+ *
+ * @since 1.2.0
+ */
+async function show() {
+    return index.invoke('plugin:app|app_show');
+}
+/**
+ * Hides the application on macOS.
+ *
+ * @example
+ * ```typescript
+ * import { hide } from '@tauri-apps/api/app';
+ * await hide();
+ * ```
+ *
+ * @since 1.2.0
+ */
+async function hide() {
+    return index.invoke('plugin:app|app_hide');
+}
+/**
+ * Fetches the data store identifiers on macOS and iOS.
+ *
+ * See https://developer.apple.com/documentation/webkit/wkwebsitedatastore for more information.
+ *
+ * @example
+ * ```typescript
+ * import { fetchDataStoreIdentifiers } from '@tauri-apps/api/app';
+ * const ids = await fetchDataStoreIdentifiers();
+ * ```
+ *
+ * @since 2.4.0
+ */
+async function fetchDataStoreIdentifiers() {
+    return index.invoke('plugin:app|fetch_data_store_identifiers');
+}
+/**
+ * Removes the data store with the given identifier.
+ *
+ * Note that any webview using this data store should be closed before running this API.
+ *
+ * See https://developer.apple.com/documentation/webkit/wkwebsitedatastore for more information.
+ *
+ * @example
+ * ```typescript
+ * import { fetchDataStoreIdentifiers, removeDataStore } from '@tauri-apps/api/app';
+ * for (const id of (await fetchDataStoreIdentifiers())) {
+ *   await removeDataStore(id);
+ * }
+ * ```
+ *
+ * @since 2.4.0
+ */
+async function removeDataStore(uuid) {
+    return index.invoke('plugin:app|remove_data_store', { uuid });
+}
+/**
+ * Gets the default window icon.
+ *
+ * @example
+ * ```typescript
+ * import { defaultWindowIcon } from '@tauri-apps/api/app';
+ * const icon = await defaultWindowIcon();
+ * ```
+ *
+ * @since 2.0.0
+ */
+async function defaultWindowIcon() {
+    return index.invoke('plugin:app|default_window_icon').then((rid) => rid ? new image.Image(rid) : null);
+}
+/**
+ * Sets the application's theme. Pass in `null` or `undefined` to follow
+ * the system theme.
+ *
+ * @example
+ * ```typescript
+ * import { setTheme } from '@tauri-apps/api/app';
+ * await setTheme('dark');
+ * ```
+ *
+ * #### Platform-specific
+ *
+ * - **iOS / Android:** Unsupported.
+ *
+ * @since 2.0.0
+ */
+async function setTheme(theme) {
+    return index.invoke('plugin:app|set_app_theme', { theme });
+}
+/**
+ * Sets the dock visibility for the application on macOS.
+ *
+ * @param visible - Whether the dock should be visible or not.
+ *
+ * @example
+ * ```typescript
+ * import { setDockVisibility } from '@tauri-apps/api/app';
+ * await setDockVisibility(false);
+ * ```
+ *
+ * @since 2.5.0
+ */
+async function setDockVisibility(visible) {
+    return index.invoke('plugin:app|set_dock_visibility', { visible });
+}
+/**
+ * Gets the application bundle type.
+ *
+ * @example
+ * ```typescript
+ * import { getBundleType } from '@tauri-apps/api/app';
+ * const type = await getBundleType();
+ * ```
+ *
+ * @since 2.5.0
+ */
+async function getBundleType() {
+    return index.invoke('plugin:app|bundle_type');
+}
+
+exports.defaultWindowIcon = defaultWindowIcon;
+exports.fetchDataStoreIdentifiers = fetchDataStoreIdentifiers;
+exports.getBundleType = getBundleType;
+exports.getIdentifier = getIdentifier;
+exports.getName = getName;
+exports.getTauriVersion = getTauriVersion;
+exports.getVersion = getVersion;
+exports.hide = hide;
+exports.removeDataStore = removeDataStore;
+exports.setDockVisibility = setDockVisibility;
+exports.setTheme = setTheme;
+exports.show = show;

package/api/app/index.d.ts

@@ -0,0 +1,168 @@
+import { BundleType, DataStoreIdentifier } from "@tauri-apps/api/app";
+import { Image } from "@tauri-apps/api/image";
+import { Theme } from "@tauri-apps/api/window";
+/**
+ * Application metadata and related APIs.
+ *
+ * @module
+ */
+/**
+ * Gets the application version.
+ * @example
+ * ```typescript
+ * import { getVersion } from '@tauri-apps/api/app';
+ * const appVersion = await getVersion();
+ * ```
+ *
+ * @since 1.0.0
+ */
+declare function getVersion(): Promise<string>;
+/**
+ * Gets the application name.
+ * @example
+ * ```typescript
+ * import { getName } from '@tauri-apps/api/app';
+ * const appName = await getName();
+ * ```
+ *
+ * @since 1.0.0
+ */
+declare function getName(): Promise<string>;
+/**
+ * Gets the Tauri framework version used by this application.
+ *
+ * @example
+ * ```typescript
+ * import { getTauriVersion } from '@tauri-apps/api/app';
+ * const tauriVersion = await getTauriVersion();
+ * ```
+ *
+ * @since 1.0.0
+ */
+declare function getTauriVersion(): Promise<string>;
+/**
+ * Gets the application identifier.
+ * @example
+ * ```typescript
+ * import { getIdentifier } from '@tauri-apps/api/app';
+ * const identifier = await getIdentifier();
+ * ```
+ *
+ * @returns The application identifier as configured in `tauri.conf.json`.
+ *
+ * @since 2.4.0
+ */
+declare function getIdentifier(): Promise<string>;
+/**
+ * Shows the application on macOS. This function does not automatically
+ * focus any specific app window.
+ *
+ * @example
+ * ```typescript
+ * import { show } from '@tauri-apps/api/app';
+ * await show();
+ * ```
+ *
+ * @since 1.2.0
+ */
+declare function show(): Promise<void>;
+/**
+ * Hides the application on macOS.
+ *
+ * @example
+ * ```typescript
+ * import { hide } from '@tauri-apps/api/app';
+ * await hide();
+ * ```
+ *
+ * @since 1.2.0
+ */
+declare function hide(): Promise<void>;
+/**
+ * Fetches the data store identifiers on macOS and iOS.
+ *
+ * See https://developer.apple.com/documentation/webkit/wkwebsitedatastore for more information.
+ *
+ * @example
+ * ```typescript
+ * import { fetchDataStoreIdentifiers } from '@tauri-apps/api/app';
+ * const ids = await fetchDataStoreIdentifiers();
+ * ```
+ *
+ * @since 2.4.0
+ */
+declare function fetchDataStoreIdentifiers(): Promise<DataStoreIdentifier[]>;
+/**
+ * Removes the data store with the given identifier.
+ *
+ * Note that any webview using this data store should be closed before running this API.
+ *
+ * See https://developer.apple.com/documentation/webkit/wkwebsitedatastore for more information.
+ *
+ * @example
+ * ```typescript
+ * import { fetchDataStoreIdentifiers, removeDataStore } from '@tauri-apps/api/app';
+ * for (const id of (await fetchDataStoreIdentifiers())) {
+ *   await removeDataStore(id);
+ * }
+ * ```
+ *
+ * @since 2.4.0
+ */
+declare function removeDataStore(uuid: DataStoreIdentifier): Promise<void>;
+/**
+ * Gets the default window icon.
+ *
+ * @example
+ * ```typescript
+ * import { defaultWindowIcon } from '@tauri-apps/api/app';
+ * const icon = await defaultWindowIcon();
+ * ```
+ *
+ * @since 2.0.0
+ */
+declare function defaultWindowIcon(): Promise<Image | null>;
+/**
+ * Sets the application's theme. Pass in `null` or `undefined` to follow
+ * the system theme.
+ *
+ * @example
+ * ```typescript
+ * import { setTheme } from '@tauri-apps/api/app';
+ * await setTheme('dark');
+ * ```
+ *
+ * #### Platform-specific
+ *
+ * - **iOS / Android:** Unsupported.
+ *
+ * @since 2.0.0
+ */
+declare function setTheme(theme?: Theme | null): Promise<void>;
+/**
+ * Sets the dock visibility for the application on macOS.
+ *
+ * @param visible - Whether the dock should be visible or not.
+ *
+ * @example
+ * ```typescript
+ * import { setDockVisibility } from '@tauri-apps/api/app';
+ * await setDockVisibility(false);
+ * ```
+ *
+ * @since 2.5.0
+ */
+declare function setDockVisibility(visible: boolean): Promise<void>;
+/**
+ * Gets the application bundle type.
+ *
+ * @example
+ * ```typescript
+ * import { getBundleType } from '@tauri-apps/api/app';
+ * const type = await getBundleType();
+ * ```
+ *
+ * @since 2.5.0
+ */
+declare function getBundleType(): Promise<BundleType>;
+export { getName, getVersion, getTauriVersion, getIdentifier, show, hide, defaultWindowIcon, setTheme, fetchDataStoreIdentifiers, removeDataStore, setDockVisibility, getBundleType };

package/api/app/index.js

@@ -0,0 +1,193 @@
+import { invoke } from '../core/index.js';
+import { Image } from '@tauri-apps/api/image';
+
+/**
+ * Application metadata and related APIs.
+ *
+ * @module
+ */
+/**
+ * Gets the application version.
+ * @example
+ * ```typescript
+ * import { getVersion } from '@tauri-apps/api/app';
+ * const appVersion = await getVersion();
+ * ```
+ *
+ * @since 1.0.0
+ */
+async function getVersion() {
+    return invoke('plugin:app|version');
+}
+/**
+ * Gets the application name.
+ * @example
+ * ```typescript
+ * import { getName } from '@tauri-apps/api/app';
+ * const appName = await getName();
+ * ```
+ *
+ * @since 1.0.0
+ */
+async function getName() {
+    return invoke('plugin:app|name');
+}
+/**
+ * Gets the Tauri framework version used by this application.
+ *
+ * @example
+ * ```typescript
+ * import { getTauriVersion } from '@tauri-apps/api/app';
+ * const tauriVersion = await getTauriVersion();
+ * ```
+ *
+ * @since 1.0.0
+ */
+async function getTauriVersion() {
+    return invoke('plugin:app|tauri_version');
+}
+/**
+ * Gets the application identifier.
+ * @example
+ * ```typescript
+ * import { getIdentifier } from '@tauri-apps/api/app';
+ * const identifier = await getIdentifier();
+ * ```
+ *
+ * @returns The application identifier as configured in `tauri.conf.json`.
+ *
+ * @since 2.4.0
+ */
+async function getIdentifier() {
+    return invoke('plugin:app|identifier');
+}
+/**
+ * Shows the application on macOS. This function does not automatically
+ * focus any specific app window.
+ *
+ * @example
+ * ```typescript
+ * import { show } from '@tauri-apps/api/app';
+ * await show();
+ * ```
+ *
+ * @since 1.2.0
+ */
+async function show() {
+    return invoke('plugin:app|app_show');
+}
+/**
+ * Hides the application on macOS.
+ *
+ * @example
+ * ```typescript
+ * import { hide } from '@tauri-apps/api/app';
+ * await hide();
+ * ```
+ *
+ * @since 1.2.0
+ */
+async function hide() {
+    return invoke('plugin:app|app_hide');
+}
+/**
+ * Fetches the data store identifiers on macOS and iOS.
+ *
+ * See https://developer.apple.com/documentation/webkit/wkwebsitedatastore for more information.
+ *
+ * @example
+ * ```typescript
+ * import { fetchDataStoreIdentifiers } from '@tauri-apps/api/app';
+ * const ids = await fetchDataStoreIdentifiers();
+ * ```
+ *
+ * @since 2.4.0
+ */
+async function fetchDataStoreIdentifiers() {
+    return invoke('plugin:app|fetch_data_store_identifiers');
+}
+/**
+ * Removes the data store with the given identifier.
+ *
+ * Note that any webview using this data store should be closed before running this API.
+ *
+ * See https://developer.apple.com/documentation/webkit/wkwebsitedatastore for more information.
+ *
+ * @example
+ * ```typescript
+ * import { fetchDataStoreIdentifiers, removeDataStore } from '@tauri-apps/api/app';
+ * for (const id of (await fetchDataStoreIdentifiers())) {
+ *   await removeDataStore(id);
+ * }
+ * ```
+ *
+ * @since 2.4.0
+ */
+async function removeDataStore(uuid) {
+    return invoke('plugin:app|remove_data_store', { uuid });
+}
+/**
+ * Gets the default window icon.
+ *
+ * @example
+ * ```typescript
+ * import { defaultWindowIcon } from '@tauri-apps/api/app';
+ * const icon = await defaultWindowIcon();
+ * ```
+ *
+ * @since 2.0.0
+ */
+async function defaultWindowIcon() {
+    return invoke('plugin:app|default_window_icon').then((rid) => rid ? new Image(rid) : null);
+}
+/**
+ * Sets the application's theme. Pass in `null` or `undefined` to follow
+ * the system theme.
+ *
+ * @example
+ * ```typescript
+ * import { setTheme } from '@tauri-apps/api/app';
+ * await setTheme('dark');
+ * ```
+ *
+ * #### Platform-specific
+ *
+ * - **iOS / Android:** Unsupported.
+ *
+ * @since 2.0.0
+ */
+async function setTheme(theme) {
+    return invoke('plugin:app|set_app_theme', { theme });
+}
+/**
+ * Sets the dock visibility for the application on macOS.
+ *
+ * @param visible - Whether the dock should be visible or not.
+ *
+ * @example
+ * ```typescript
+ * import { setDockVisibility } from '@tauri-apps/api/app';
+ * await setDockVisibility(false);
+ * ```
+ *
+ * @since 2.5.0
+ */
+async function setDockVisibility(visible) {
+    return invoke('plugin:app|set_dock_visibility', { visible });
+}
+/**
+ * Gets the application bundle type.
+ *
+ * @example
+ * ```typescript
+ * import { getBundleType } from '@tauri-apps/api/app';
+ * const type = await getBundleType();
+ * ```
+ *
+ * @since 2.5.0
+ */
+async function getBundleType() {
+    return invoke('plugin:app|bundle_type');
+}
+
+export { defaultWindowIcon, fetchDataStoreIdentifiers, getBundleType, getIdentifier, getName, getTauriVersion, getVersion, hide, removeDataStore, setDockVisibility, setTheme, show };

package/api/core/index.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+var core = require('@tauri-apps/api/core');
+var socket = require('../../socket.cjs');
+
+/**
+ * Core API module for Tauri Remote UI
+ *
+ * This module handles sending messages to the Tauri application via WebSocket
+ */
+/**
+ * Invoke a command on the Tauri application
+ * Falls back to WebSocket if Tauri IPC is not available
+ *
+ * @param cmd - The command name to invoke
+ * @param args - Arguments to pass to the command
+ * @param options - Options for the command
+ */
+let msg_id = 0;
+async function invoke(cmd, args, options) {
+    socket.initWebSocket();
+    // Tauri IPC
+    try {
+        if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
+            window.__TAURI__ && window.__TAURI__.invoke) {
+            return await core.invoke(cmd, args, options);
+        }
+        else {
+            throw new Error("Failed to Find Tauri handle");
+        }
+    }
+    catch (e) {
+        // If WebSocket is connecting, wait for it
+        if (socket.wsReady) {
+            await socket.wsReady;
+        }
+        if (socket.ws && socket.ws.readyState === WebSocket.OPEN) {
+            return new Promise((resolve, reject) => {
+                const msg = {
+                    id: ++msg_id,
+                    cmd, args, options
+                };
+                let clear = setTimeout(() => {
+                    delete socket.filterCollection[msg_id];
+                    reject(`Invoke Timeout. cmd : ${cmd}`);
+                }, 30000);
+                socket.filterCollection[msg_id] = ({ status, payload }) => {
+                    clearTimeout(clear);
+                    if (status = "success") {
+                        resolve(payload);
+                    }
+                    else {
+                        reject(payload);
+                    }
+                };
+                socket.ws.send(JSON.stringify(msg));
+            });
+        }
+        else {
+            throw new Error('No WebSocket or Tauri IPC available to invoke');
+        }
+    }
+}
+
+exports.invoke = invoke;

package/api/core/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Core API module for Tauri Remote UI
+ *
+ * This module handles sending messages to the Tauri application via WebSocket
+ */
+import { InvokeArgs, InvokeOptions } from '@tauri-apps/api/core';
+export declare function invoke<T>(cmd: string, args?: InvokeArgs, options?: InvokeOptions): Promise<T>;

package/api/core/index.js

@@ -0,0 +1,63 @@
+import { invoke as invoke$1 } from '@tauri-apps/api/core';
+import { initWebSocket, wsReady, ws, filterCollection } from '../../socket.js';
+
+/**
+ * Core API module for Tauri Remote UI
+ *
+ * This module handles sending messages to the Tauri application via WebSocket
+ */
+/**
+ * Invoke a command on the Tauri application
+ * Falls back to WebSocket if Tauri IPC is not available
+ *
+ * @param cmd - The command name to invoke
+ * @param args - Arguments to pass to the command
+ * @param options - Options for the command
+ */
+let msg_id = 0;
+async function invoke(cmd, args, options) {
+    initWebSocket();
+    // Tauri IPC
+    try {
+        if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
+            window.__TAURI__ && window.__TAURI__.invoke) {
+            return await invoke$1(cmd, args, options);
+        }
+        else {
+            throw new Error("Failed to Find Tauri handle");
+        }
+    }
+    catch (e) {
+        // If WebSocket is connecting, wait for it
+        if (wsReady) {
+            await wsReady;
+        }
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            return new Promise((resolve, reject) => {
+                const msg = {
+                    id: ++msg_id,
+                    cmd, args, options
+                };
+                let clear = setTimeout(() => {
+                    delete filterCollection[msg_id];
+                    reject(`Invoke Timeout. cmd : ${cmd}`);
+                }, 30000);
+                filterCollection[msg_id] = ({ status, payload }) => {
+                    clearTimeout(clear);
+                    if (status = "success") {
+                        resolve(payload);
+                    }
+                    else {
+                        reject(payload);
+                    }
+                };
+                ws.send(JSON.stringify(msg));
+            });
+        }
+        else {
+            throw new Error('No WebSocket or Tauri IPC available to invoke');
+        }
+    }
+}
+
+export { invoke };

package/api/event/index.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+var event = require('@tauri-apps/api/event');
+var socket = require('../../socket.cjs');
+
+/**
+ * Event API module for Tauri Remote UI
+ *
+ * This module handles listening to events from the Tauri application via WebSocket
+ */
+/**
+ * Listen to events from the Tauri application
+ * Falls back to WebSocket if Tauri Event API is not available
+ *
+ * @param event - The event name to listen for
+ * @param handler - Callback to handle the event
+ * @param options - Options for the event listener
+ */
+async function listen(event$1, handler, options) {
+    socket.initWebSocket();
+    try {
+        if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
+            window.__TAURI__ && window.__TAURI__.invoke) {
+            return await event.listen(event$1, handler, options);
+        }
+        else {
+            throw new Error("Failed to Find Tauri handle");
+        }
+    }
+    catch (e) {
+        // If WebSocket is connecting, wait for it
+        if (socket.wsReady) {
+            await socket.wsReady;
+        }
+        if (socket.ws && socket.ws.readyState === WebSocket.OPEN) {
+            // Handle WebSocket messages for events
+            const messageHandler = (wsEvent) => {
+                try {
+                    const data = JSON.parse(wsEvent.data);
+                    if (data.event === event$1) {
+                        handler(data);
+                    }
+                }
+                catch (err) {
+                    console.error('Error handling WebSocket event', err);
+                }
+            };
+            socket.ws.addEventListener('message', messageHandler);
+            // Return an unlisten function
+            return () => {
+                socket.ws === null || socket.ws === void 0 ? void 0 : socket.ws.removeEventListener('message', messageHandler);
+            };
+        }
+        else {
+            throw new Error('No WebSocket or Tauri IPC available to invoke');
+        }
+    }
+}
+
+exports.listen = listen;

package/api/event/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Event API module for Tauri Remote UI
+ *
+ * This module handles listening to events from the Tauri application via WebSocket
+ */
+import { EventCallback, EventName, Options, UnlistenFn } from '@tauri-apps/api/event';
+/**
+ * Listen to events from the Tauri application
+ * Falls back to WebSocket if Tauri Event API is not available
+ *
+ * @param event - The event name to listen for
+ * @param handler - Callback to handle the event
+ * @param options - Options for the event listener
+ */
+export declare function listen<T>(event: EventName, handler: EventCallback<T>, options?: Options): Promise<UnlistenFn>;

package/api/event/index.js

@@ -0,0 +1,58 @@
+import { listen as listen$1 } from '@tauri-apps/api/event';
+import { initWebSocket, wsReady, ws } from '../../socket.js';
+
+/**
+ * Event API module for Tauri Remote UI
+ *
+ * This module handles listening to events from the Tauri application via WebSocket
+ */
+/**
+ * Listen to events from the Tauri application
+ * Falls back to WebSocket if Tauri Event API is not available
+ *
+ * @param event - The event name to listen for
+ * @param handler - Callback to handle the event
+ * @param options - Options for the event listener
+ */
+async function listen(event, handler, options) {
+    initWebSocket();
+    try {
+        if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
+            window.__TAURI__ && window.__TAURI__.invoke) {
+            return await listen$1(event, handler, options);
+        }
+        else {
+            throw new Error("Failed to Find Tauri handle");
+        }
+    }
+    catch (e) {
+        // If WebSocket is connecting, wait for it
+        if (wsReady) {
+            await wsReady;
+        }
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            // Handle WebSocket messages for events
+            const messageHandler = (wsEvent) => {
+                try {
+                    const data = JSON.parse(wsEvent.data);
+                    if (data.event === event) {
+                        handler(data);
+                    }
+                }
+                catch (err) {
+                    console.error('Error handling WebSocket event', err);
+                }
+            };
+            ws.addEventListener('message', messageHandler);
+            // Return an unlisten function
+            return () => {
+                ws === null || ws === void 0 ? void 0 : ws.removeEventListener('message', messageHandler);
+            };
+        }
+        else {
+            throw new Error('No WebSocket or Tauri IPC available to invoke');
+        }
+    }
+}
+
+export { listen };

package/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var index = require('./api/app/index.cjs');
+var index$1 = require('./api/core/index.cjs');
+var index$2 = require('./api/event/index.cjs');
+
+
+
+exports.app = index;
+exports.core = index$1;
+exports.event = index$2;

package/index.d.ts

@@ -0,0 +1,3 @@
+export * as app from './api/app';
+export * as core from './api/core';
+export * as event from './api/event';

package/index.js

@@ -0,0 +1,6 @@
+import * as index from './api/app/index.js';
+export { index as app };
+import * as index$1 from './api/core/index.js';
+export { index$1 as core };
+import * as index$2 from './api/event/index.js';
+export { index$2 as event };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "tauri-remote-ui",
+  "license": "MIT",
+  "version": "0.22.0",
+  "author": "DraviaVemal",
+  "description": "A Tauri plugin that exposes the application's UI to a web browser, allowing full interaction while the native app continues running. This enables end-to-end UI testing using existing web-based testing tools without requiring modifications to the app itself.",
+  "type": "module",
+  "types": "./index.d.ts",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./api/app": {
+      "types": "./api/app/index.d.ts",
+      "import": "./api/app/index.js",
+      "require": "./api/app/index.cjs"
+    },
+    "./api/core": {
+      "types": "./api/core/index.d.ts",
+      "import": "./api/core/index.js",
+      "require": "./api/core/index.cjs"
+    },
+    "./api/event": {
+      "types": "./api/event/index.d.ts",
+      "import": "./api/event/index.js",
+      "require": "./api/event/index.cjs"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "api/app/*": [
+        "./api/app/*.d.ts"
+      ],
+      "api/core/*": [
+        "./api/core/*.d.ts"
+      ],
+      "api/event/*": [
+        "./api/event/*.d.ts"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@tauri-apps/api": ">=2.0.0"
+  }
+}

package/socket.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+/**
+ * Tauri Remote UI - API
+ *
+ * This TypeScript file serves as the main entry point for the tauri-remote-ui package.
+ * It provides WebSocket initialization and shared WebSocket state for communicating
+ * with a Tauri application.
+ */
+exports.ws = null;
+exports.wsReady = null;
+const filterCollection = {};
+/**
+ * Get the WebSocket URL based on the current window location
+ */
+function getWsUrl() {
+    const loc = window.location;
+    const proto = loc.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${proto}//${loc.host}/remote_ui_ws`;
+    return wsUrl;
+}
+/**
+ * Initialize the WebSocket connection
+ * This should be called once at the start of your application
+ */
+function initWebSocket() {
+    try {
+        // If we're in a Tauri app, don't use WebSocket
+        if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
+            window.__TAURI__ && window.__TAURI__.invoke) {
+            return;
+        }
+        else {
+            throw new Error("Moving to WS backup for Tauri Backend");
+        }
+    }
+    catch {
+        if (exports.ws)
+            return;
+        console.info("Remote RPC Attempting...");
+        const wsUrl = getWsUrl();
+        try {
+            exports.ws = new WebSocket(wsUrl);
+            exports.wsReady = new Promise((resolve, reject) => {
+                exports.ws.onopen = () => {
+                    console.info("Remote Connected.");
+                    resolve();
+                };
+                exports.ws.onclose = () => {
+                    exports.ws = null;
+                    exports.wsReady = null;
+                    console.info("Remote Dis-Connected.");
+                };
+                exports.ws.onerror = (e) => {
+                    reject(e);
+                };
+                exports.ws.onmessage = ({ data }) => {
+                    let json_data = JSON.parse(data);
+                    json_data.id && filterCollection[json_data.id] && filterCollection[json_data.id](JSON.parse(json_data.payload));
+                };
+            });
+        }
+        catch (e) {
+            setTimeout(() => {
+                initWebSocket();
+            }, 5000);
+        }
+    }
+}
+
+exports.filterCollection = filterCollection;
+exports.initWebSocket = initWebSocket;

package/socket.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Tauri Remote UI - API
+ *
+ * This TypeScript file serves as the main entry point for the tauri-remote-ui package.
+ * It provides WebSocket initialization and shared WebSocket state for communicating
+ * with a Tauri application.
+ */
+export declare let ws: WebSocket | null;
+export declare let wsReady: Promise<void> | null;
+export declare const filterCollection: {
+    [msg_id: string]: (response: any) => any;
+};
+/**
+ * Initialize the WebSocket connection
+ * This should be called once at the start of your application
+ */
+export declare function initWebSocket(): void;

package/socket.js

@@ -0,0 +1,69 @@
+/**
+ * Tauri Remote UI - API
+ *
+ * This TypeScript file serves as the main entry point for the tauri-remote-ui package.
+ * It provides WebSocket initialization and shared WebSocket state for communicating
+ * with a Tauri application.
+ */
+let ws = null;
+let wsReady = null;
+const filterCollection = {};
+/**
+ * Get the WebSocket URL based on the current window location
+ */
+function getWsUrl() {
+    const loc = window.location;
+    const proto = loc.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${proto}//${loc.host}/remote_ui_ws`;
+    return wsUrl;
+}
+/**
+ * Initialize the WebSocket connection
+ * This should be called once at the start of your application
+ */
+function initWebSocket() {
+    try {
+        // If we're in a Tauri app, don't use WebSocket
+        if ((window.__TAURI_INTERNALS__ && window.__TAURI_INTERNALS__.invoke) ||
+            window.__TAURI__ && window.__TAURI__.invoke) {
+            return;
+        }
+        else {
+            throw new Error("Moving to WS backup for Tauri Backend");
+        }
+    }
+    catch {
+        if (ws)
+            return;
+        console.info("Remote RPC Attempting...");
+        const wsUrl = getWsUrl();
+        try {
+            ws = new WebSocket(wsUrl);
+            wsReady = new Promise((resolve, reject) => {
+                ws.onopen = () => {
+                    console.info("Remote Connected.");
+                    resolve();
+                };
+                ws.onclose = () => {
+                    ws = null;
+                    wsReady = null;
+                    console.info("Remote Dis-Connected.");
+                };
+                ws.onerror = (e) => {
+                    reject(e);
+                };
+                ws.onmessage = ({ data }) => {
+                    let json_data = JSON.parse(data);
+                    json_data.id && filterCollection[json_data.id] && filterCollection[json_data.id](JSON.parse(json_data.payload));
+                };
+            });
+        }
+        catch (e) {
+            setTimeout(() => {
+                initWebSocket();
+            }, 5000);
+        }
+    }
+}
+
+export { filterCollection, initWebSocket, ws, wsReady };