((res) =>
49 | setTimeout(() => {
50 | this.worker.postMessage("unload");
51 | this.worker.terminate();
52 | this.#closed = true;
53 | res();
54 | }, 25)
55 | );
56 | }
57 | }
58 |
59 | // The Server
60 |
61 | const html = `
62 |
63 |
64 | Hello Deno!
65 |
68 |
69 |
70 | `;
71 |
72 | const server = serve((req) => {
73 | const pathname = new URL(req.url).pathname;
74 |
75 | if (pathname === "/beep") {
76 | return new Response("boop");
77 | } else if (!pathname || pathname === "/" || pathname === "/index.html") {
78 | return new Response(html, {
79 | headers: { "Content-Type": "text/html" },
80 | });
81 | } else {
82 | return new Response("Not Found", { status: 404 });
83 | }
84 | }, { port: 8000 });
85 |
86 | console.log("[Main] Listening on http://localhost:8000");
87 |
88 | // The Windows
89 |
90 | // Our cleanup function to help Deno exit when the Windows are closed
91 |
92 | let cleaning = false;
93 | async function cleanup() {
94 | if (cleaning) return;
95 | cleaning = true;
96 |
97 | await Promise.all(
98 | [windowLocal, windowDeno].map((window) => window.terminate()),
99 | );
100 |
101 | Deno.exit();
102 | }
103 |
104 | console.log("[Main] Spawning Windows");
105 |
106 | const windowLocal = new Window("./window-localhost.ts", cleanup);
107 | const windowDeno = new Window("./window-denoland.ts", cleanup);
108 |
109 | // Window 2
110 |
111 | console.log("[Main] Done! Running Server");
112 |
113 | await server;
114 |
--------------------------------------------------------------------------------
/examples/multi-window/window-denoland.ts:
--------------------------------------------------------------------------------
1 | import { Webview } from "../../mod.ts";
2 |
3 | const webview = new Webview();
4 |
5 | postMessage("open");
6 |
7 | webview.navigate("https://deno.land/");
8 |
9 | webview.bind("close", () => {
10 | postMessage("close");
11 | self.close();
12 | });
13 |
14 | addEventListener(
15 | "onmessage",
16 | (evt) =>
17 | (evt as MessageEvent).data === "unload" ? webview.terminate() : void 0,
18 | );
19 |
20 | webview.run();
21 |
--------------------------------------------------------------------------------
/examples/multi-window/window-localhost.ts:
--------------------------------------------------------------------------------
1 | import { Webview } from "../../mod.ts";
2 |
3 | const webview = new Webview();
4 |
5 | postMessage("open");
6 |
7 | webview.navigate("http://localhost:8000");
8 |
9 | webview.bind("close", () => {
10 | postMessage("close");
11 | self.close();
12 | });
13 |
14 | addEventListener(
15 | "onmessage",
16 | (evt) =>
17 | (evt as MessageEvent).data === "unload" ? webview.terminate() : void 0,
18 | );
19 |
20 | webview.run();
21 |
--------------------------------------------------------------------------------
/examples/multiple.ts:
--------------------------------------------------------------------------------
1 | import { Webview } from "../mod.ts";
2 |
3 | const webview1 = new Webview();
4 | webview1.navigate("https://deno.land/");
5 |
6 | const webview2 = new Webview();
7 | webview2.navigate("https://google.com/");
8 |
9 | // NOTE: Due to design limitations, you can only have one webview
10 | // instance **at a time**
11 | const p1 = webview1.run();
12 | const p2 = webview2.run();
13 |
14 | await Promise.all([p1, p2]);
15 |
--------------------------------------------------------------------------------
/examples/remote.ts:
--------------------------------------------------------------------------------
1 | import { Webview } from "../mod.ts";
2 |
3 | const webview = new Webview();
4 | webview.navigate("https://deno.land/");
5 | webview.run();
6 |
--------------------------------------------------------------------------------
/examples/run.ts:
--------------------------------------------------------------------------------
1 | import { Webview } from "../mod.ts";
2 |
3 | const webview = new Webview();
4 | webview.run();
5 |
--------------------------------------------------------------------------------
/examples/server.ts:
--------------------------------------------------------------------------------
1 | import { serve } from "https://deno.land/std@0.157.0/http/server.ts";
2 | import { Webview } from "../mod.ts";
3 |
4 | const controller = new AbortController();
5 | const server = serve(() =>
6 | new Response("Hello World
", {
7 | headers: new Headers({
8 | "content-type": "text/html",
9 | }),
10 | }), { port: 8080, signal: controller.signal });
11 |
12 | const webview = new Webview();
13 |
14 | webview.navigate(`http://localhost:8080`);
15 |
16 | webview.run();
17 | controller.abort();
18 | await server;
19 |
--------------------------------------------------------------------------------
/examples/ssr/main.ts:
--------------------------------------------------------------------------------
1 | import { dirname, join } from "https://deno.land/std@0.157.0/path/mod.ts";
2 | import { Webview } from "../../mod.ts";
3 |
4 | const worker = new Worker(
5 | join(dirname(import.meta.url), "worker.tsx"),
6 | { type: "module" },
7 | );
8 |
9 | const webview = new Webview();
10 | webview.navigate("http://localhost:8000/");
11 |
12 | console.log("[runner] worker started");
13 | webview.run();
14 | worker.terminate();
15 |
--------------------------------------------------------------------------------
/examples/ssr/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "deno.ns", "deno.unstable"],
4 | "jsxFactory": "h"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/examples/ssr/worker.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx h */
2 | ///
3 | ///
4 | ///
5 | ///
6 |
7 | import { serve } from "https://deno.land/std@0.157.0/http/server.ts";
8 | // deno-lint-ignore verbatim-module-syntax
9 | import { h, ssr, tw } from "https://crux.land/nanossr@0.0.1";
10 |
11 | const Hello = (props: { name: string }) => (
12 |
13 |
14 | Hello {props.name}!
15 |
16 |
17 | );
18 |
19 | const server = serve((req) => {
20 | console.log(req);
21 | const url = new URL(req.url);
22 | const name = url.searchParams.get("name") ?? "world";
23 | return ssr(() => );
24 | }, { port: 8000 });
25 |
26 | console.log("[runner] Listening on http://localhost:8000");
27 | await server;
28 |
--------------------------------------------------------------------------------
/examples/user_agent.ts:
--------------------------------------------------------------------------------
1 | import { Webview } from "../mod.ts";
2 |
3 | const html = `
4 |
5 |
6 |
7 |
8 |
9 | `;
10 |
11 | const webview = new Webview();
12 |
13 | webview.navigate(`data:text/html,${encodeURIComponent(html)}`);
14 | webview.run();
15 |
--------------------------------------------------------------------------------
/images/webview_deno.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webview/webview_deno/656b7b042493b35c3ae6ef67b8cb566b582dccaa/images/webview_deno.png
--------------------------------------------------------------------------------
/mod.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Webview is a tiny cross-platform library to make web-based GUIs for desktop
3 | * applications.
4 | *
5 | * @example
6 | * ```
7 | * import { Webview } from "@webview/webview";
8 | *
9 | * const html = `
10 | *
11 | *
12 | * Hello from deno v${Deno.version.deno}
13 | *
14 | *
15 | * `;
16 | *
17 | * const webview = new Webview();
18 | *
19 | * webview.navigate(`data:text/html,${encodeURIComponent(html)}`);
20 | * webview.run();
21 | * ```
22 | *
23 | * @module
24 | */
25 |
26 | export * from "./src/webview.ts";
27 | export { preload, unload } from "./src/ffi.ts";
28 |
--------------------------------------------------------------------------------
/script/build.bat:
--------------------------------------------------------------------------------
1 | @echo off
2 | echo Looking for vswhere.exe...
3 | set "vswhere=%ProgramFiles(x86)%\Microsoft Visual Studio\Installer\vswhere.exe"
4 | if not exist "%vswhere%" set "vswhere=%ProgramFiles%\Microsoft Visual Studio\Installer\vswhere.exe"
5 | if not exist "%vswhere%" (
6 | echo ERROR: Failed to find vswhere.exe
7 | exit /b 1
8 | )
9 | echo Found %vswhere%
10 |
11 | echo Looking for VC...
12 | for /f "usebackq tokens=*" %%i in (`"%vswhere%" -latest -products * -requires Microsoft.VisualStudio.Component.VC.Tools.x86.x64 -property installationPath`) do (
13 | set vc_dir=%%i
14 | )
15 | if not exist "%vc_dir%\Common7\Tools\vsdevcmd.bat" (
16 | echo ERROR: Failed to find VC tools x86/x64
17 | exit /b 1
18 | )
19 | echo Found %vc_dir%
20 |
21 | call "%vc_dir%\Common7\Tools\vsdevcmd.bat" -arch=x64 -host_arch=x64
22 | cd %~dp0..\webview
23 |
24 | cmake -G "Ninja Multi-Config" -B build -S . ^
25 | -DWEBVIEW_BUILD_DOCS=OFF ^
26 | -DWEBVIEW_USE_CLANG_TIDY=OFF ^
27 | -DWEBVIEW_USE_CLANG_FORMAT=OFF
28 |
29 | cmake --build build --config Release
30 |
--------------------------------------------------------------------------------
/script/build.ts:
--------------------------------------------------------------------------------
1 | import { $ } from "jsr:@david/dax@0.42.0";
2 |
3 | async function findClangFormat() {
4 | let WEBVIEW_CLANG_FORMAT_EXE = Deno.env.get("WEBVIEW_CLANG_FORMAT_EXE");
5 | if (WEBVIEW_CLANG_FORMAT_EXE) {
6 | return WEBVIEW_CLANG_FORMAT_EXE;
7 | }
8 |
9 | WEBVIEW_CLANG_FORMAT_EXE = await $.which("clang-format");
10 | if (WEBVIEW_CLANG_FORMAT_EXE) {
11 | return WEBVIEW_CLANG_FORMAT_EXE;
12 | }
13 |
14 | if (await $.commandExists("brew")) {
15 | const llvm = await $`brew --prefix llvm`.text();
16 | return `${llvm}/bin/clang-format"`;
17 | }
18 |
19 | $.logError(
20 | "error",
21 | "clang-format not found. Please install clang-format using brew or set the WEBVIEW_CLANG_FORMAT_EXE environment variable.",
22 | );
23 | Deno.exit(1);
24 | }
25 |
26 | $.setPrintCommand(true);
27 |
28 | await $.path("./build").ensureDir();
29 | switch (Deno.build.os) {
30 | case "windows": {
31 | await $`script/build.bat`;
32 | await $`cp webview/build/core/Release/webview.dll build/webview.dll`;
33 | break;
34 | }
35 | case "linux": {
36 | $.cd("webview");
37 | await $`export PATH=/usr/lib/llvm14/bin/:/usr/lib/llvm-14/bin/:/usr/lib64/llvm15/bin/:$PATH`;
38 | await $`cmake -G Ninja -B build -S . \
39 | -D CMAKE_BUILD_TYPE=Release \
40 | -D WEBVIEW_WEBKITGTK_API=6.0 \
41 | -DWEBVIEW_ENABLE_CHECKS=false \
42 | -DCMAKE_TOOLCHAIN_FILE=cmake/toolchains/host-llvm.cmake \
43 | -DWEBVIEW_USE_CLANG_TIDY=OFF \
44 | -DWEBVIEW_BUILD_DOCS=OFF \
45 | -DWEBVIEW_USE_CLANG_FORMAT=OFF`;
46 | await $`cmake --build build`;
47 | await $`cp build/core/libwebview.so ../build/libwebview.${Deno.build.arch}.so`;
48 | await $`strip ../build/libwebview.${Deno.build.arch}.so`;
49 | break;
50 | }
51 | case "darwin": {
52 | $.cd("webview");
53 | await $`cmake -G "Ninja Multi-Config" -B build -S . \
54 | -DCMAKE_BUILD_TYPE=Release \
55 | -DWEBVIEW_BUILD_TESTS=OFF \
56 | -DWEBVIEW_BUILD_EXAMPLES=OFF \
57 | -DWEBVIEW_USE_CLANG_TOOLS=OFF \
58 | -DWEBVIEW_ENABLE_CHECKS=OFF \
59 | -DWEBVIEW_USE_CLANG_TIDY=OFF \
60 | -DWEBVIEW_BUILD_DOCS=OFF \
61 | -DWEBVIEW_USE_CLANG_FORMAT=OFF \
62 | -DWEBVIEW_CLANG_FORMAT_EXE=${await findClangFormat()}`;
63 | await $`cmake --build build --config Release`;
64 | await $`cp build/core/Release/libwebview.dylib ../build/libwebview.${Deno.build.arch}.dylib`;
65 | await $`strip -x -S ../build/libwebview.${Deno.build.arch}.dylib`;
66 | break;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/ffi.ts:
--------------------------------------------------------------------------------
1 | import manifest from "../deno.json" with { type: "json" };
2 |
3 | import { dlopen, download } from "@denosaurs/plug";
4 | import type { Webview } from "./webview.ts";
5 |
6 | const version = manifest.version;
7 | const cache = Deno.env.get("PLUGIN_URL") === undefined ? "use" : "reloadAll";
8 | const url = Deno.env.get("PLUGIN_URL") ??
9 | `https://github.com/webview/webview_deno/releases/download/${version}/`;
10 |
11 | const encoder = new TextEncoder();
12 |
13 | /**
14 | * Encodes a string to a null terminated string
15 | *
16 | * @param value The intput string
17 | * @returns A null terminated `Uint8Array` of the input string
18 | */
19 | export function encodeCString(value: string) {
20 | return encoder.encode(value + "\0");
21 | }
22 |
23 | /**
24 | * Checks for the existence of `./WebView2Loader.dll` for running on Windows.
25 | *
26 | * @returns true if it exists, false if it doesn't
27 | */
28 | async function checkForWebView2Loader(): Promise {
29 | return await Deno.stat("./WebView2Loader.dll").then(
30 | () => true,
31 | (e) => e instanceof Deno.errors.NotFound ? false : true,
32 | );
33 | }
34 |
35 | // make sure we don't preload twice
36 | let preloaded = false;
37 |
38 | /**
39 | * All active webview instances. This is internally used for automatically
40 | * destroying all instances once {@link unload} is called.
41 | */
42 | export const instances: Webview[] = [];
43 |
44 | /**
45 | * Loads the `./WebView2Loader.dll` for running on Windows. Removes old version
46 | * if it already existed, and only runs once. Should be run on the main thread
47 | * so that the `unload` gets hooked in properly, otherwise make sure `unload`
48 | * gets called during the `window.onunload` event (after all windows are
49 | * closed).
50 | *
51 | * Does not need to be run on non-windows platforms, but that is subject to change.
52 | */
53 | export async function preload() {
54 | if (preloaded) return;
55 |
56 | if (Deno.build.os === "windows") {
57 | if (await checkForWebView2Loader()) {
58 | await Deno.remove("./WebView2Loader.dll");
59 | }
60 |
61 | const webview2loader = await download({
62 | url: `${url}/WebView2Loader.dll`,
63 | cache,
64 | });
65 | await Deno.copyFile(webview2loader, "./WebView2Loader.dll");
66 |
67 | self.addEventListener("unload", unload);
68 | }
69 |
70 | preloaded = true;
71 | }
72 |
73 | /**
74 | * Unload the library and destroy all webview instances. Should only be run
75 | * once all windows are closed. If `preload` was called in the main thread,
76 | * this will automatically be called during the `window.onunload` event;
77 | * otherwise, you may have to call this manually.
78 | */
79 | export function unload() {
80 | for (const instance of instances) {
81 | instance.destroy();
82 | }
83 | lib.close();
84 | if (Deno.build.os === "windows") {
85 | Deno.removeSync("./WebView2Loader.dll");
86 | }
87 | }
88 |
89 | // Automatically run the preload if we're on windows and on the main thread.
90 | if (Deno.build.os === "windows") {
91 | if (!await checkForWebView2Loader()) {
92 | if (self === globalThis) {
93 | await preload();
94 | } else {
95 | throw new Error(
96 | "WebView2Loader.dll does not exist! Make sure to run preload() from the main thread.",
97 | );
98 | }
99 | }
100 | }
101 |
102 | export const lib = await dlopen(
103 | {
104 | name: "webview",
105 | url,
106 | cache,
107 | suffixes: {
108 | linux: `.${Deno.build.arch}`,
109 | darwin: `.${Deno.build.arch}`,
110 | },
111 | },
112 | {
113 | "webview_create": {
114 | parameters: ["i32", "pointer"],
115 | result: "pointer",
116 | },
117 | "webview_destroy": {
118 | parameters: ["pointer"],
119 | result: "void",
120 | },
121 | "webview_run": {
122 | parameters: ["pointer"],
123 | result: "void",
124 | },
125 | "webview_terminate": {
126 | parameters: ["pointer"],
127 | result: "void",
128 | },
129 | // "webview_dispatch": {
130 | // parameters: ["pointer", { function: { parameters: ["pointer", "pointer"], result: "void" } }, "pointer"],
131 | // result: "void",
132 | // },
133 | "webview_get_window": {
134 | parameters: ["pointer"],
135 | result: "pointer",
136 | },
137 | "webview_set_title": {
138 | parameters: ["pointer", "buffer"],
139 | result: "void",
140 | },
141 | "webview_set_size": {
142 | parameters: ["pointer", "i32", "i32", "i32"],
143 | result: "void",
144 | },
145 | "webview_navigate": {
146 | parameters: ["pointer", "buffer"],
147 | result: "void",
148 | },
149 | "webview_set_html": {
150 | parameters: ["pointer", "pointer"],
151 | result: "void",
152 | },
153 | "webview_init": {
154 | parameters: ["pointer", "buffer"],
155 | result: "void",
156 | },
157 | "webview_eval": {
158 | parameters: ["pointer", "buffer"],
159 | result: "void",
160 | },
161 | "webview_bind": {
162 | parameters: ["pointer", "buffer", "function", "pointer"],
163 | result: "void",
164 | },
165 | "webview_unbind": {
166 | parameters: ["pointer", "buffer"],
167 | result: "void",
168 | },
169 | "webview_return": {
170 | parameters: ["pointer", "buffer", "i32", "buffer"],
171 | result: "void",
172 | },
173 | } as const,
174 | );
175 |
--------------------------------------------------------------------------------
/src/webview.ts:
--------------------------------------------------------------------------------
1 | import { encodeCString, instances, lib } from "./ffi.ts";
2 |
3 | /** Window size hints */
4 | export type SizeHint = typeof SizeHint[keyof typeof SizeHint];
5 |
6 | /** Window size hints */
7 | export const SizeHint = {
8 | /** Width and height are default size */
9 | NONE: 0,
10 | /** Width and height are minimum bounds */
11 | MIN: 1,
12 | /** Width and height are maximum bounds */
13 | MAX: 2,
14 | /** Window size can not be changed by a user */
15 | FIXED: 3,
16 | } as const;
17 |
18 | /** Window size */
19 | export interface Size {
20 | /** The width of the window */
21 | width: number;
22 | /** The height of the window */
23 | height: number;
24 | /** The window size hint */
25 | hint: SizeHint;
26 | }
27 |
28 | /**
29 | * An instance of a webview window.
30 | *
31 | * ## Examples
32 | *
33 | * ### Local
34 | *
35 | * ```ts
36 | * import { Webview } from "../mod.ts";
37 | *
38 | * const html = `
39 | *
40 | *
41 | * Hello from deno v${Deno.version.deno}
42 | *
43 | *
44 | * `;
45 | *
46 | * const webview = new Webview();
47 | *
48 | * webview.navigate(`data:text/html,${encodeURIComponent(html)}`);
49 | * webview.run();
50 | * ```
51 | *
52 | * ### Remote
53 | *
54 | * ```ts
55 | * import { Webview } from "../mod.ts";
56 | *
57 | * const webview = new Webview();
58 | * webview.navigate("https://deno.land/");
59 | * webview.run();
60 | * ```
61 | */
62 | export class Webview {
63 | #handle: Deno.PointerValue = null;
64 | #callbacks: Map<
65 | string,
66 | Deno.UnsafeCallback<{
67 | parameters: readonly "pointer"[];
68 | result: "void";
69 | }>
70 | > = new Map();
71 |
72 | /** **UNSAFE**: Highly unsafe API, beware!
73 | *
74 | * An unsafe pointer to the webview
75 | */
76 | get unsafeHandle(): Deno.PointerValue {
77 | return this.#handle;
78 | }
79 |
80 | /** **UNSAFE**: Highly unsafe API, beware!
81 | *
82 | * An unsafe pointer to the webviews platform specific native window handle.
83 | * When using GTK backend the pointer is `GtkWindow` pointer, when using Cocoa
84 | * backend the pointer is `NSWindow` pointer, when using Win32 backend the
85 | * pointer is `HWND` pointer.
86 | */
87 | get unsafeWindowHandle(): Deno.PointerValue {
88 | return lib.symbols.webview_get_window(this.#handle);
89 | }
90 |
91 | /**
92 | * Sets the native window size
93 | *
94 | * ## Example
95 | *
96 | * ```ts
97 | * import { Webview, SizeHint } from "../mod.ts";
98 | *
99 | * const webview = new Webview();
100 | * webview.navigate("https://deno.land/");
101 | *
102 | * // Change from the default size to a small fixed window
103 | * webview.size = {
104 | * width: 200,
105 | * height: 200,
106 | * hint: SizeHint.FIXED
107 | * };
108 | *
109 | * webview.run();
110 | * ```
111 | */
112 | set size(
113 | { width, height, hint }: Size,
114 | ) {
115 | lib.symbols.webview_set_size(this.#handle, width, height, hint);
116 | }
117 |
118 | /**
119 | * Sets the native window title
120 | *
121 | * ## Example
122 | *
123 | * ```ts
124 | * import { Webview } from "../mod.ts";
125 | *
126 | * const webview = new Webview();
127 | * webview.navigate("https://deno.land/");
128 | *
129 | * // Set the window title to "Hello world!"
130 | * webview.title = "Hello world!";
131 | *
132 | * webview.run();
133 | * ```
134 | */
135 | set title(title: string) {
136 | lib.symbols.webview_set_title(this.#handle, encodeCString(title));
137 | }
138 |
139 | /** **UNSAFE**: Highly unsafe API, beware!
140 | *
141 | * Creates a new webview instance from a webview handle.
142 | *
143 | * @param handle A previously created webview instances handle
144 | */
145 | constructor(handle: Deno.PointerValue);
146 | /**
147 | * Creates a new webview instance.
148 | *
149 | * ## Example
150 | *
151 | * ```ts
152 | * import { Webview, SizeHint } from "../mod.ts";
153 | *
154 | * // Create a new webview and change from the default size to a small fixed window
155 | * const webview = new Webview(true, {
156 | * width: 200,
157 | * height: 200,
158 | * hint: SizeHint.FIXED
159 | * });
160 | *
161 | * webview.navigate("https://deno.land/");
162 | * webview.run();
163 | * ```
164 | *
165 | * @param debug Defaults to false, when true developer tools are enabled
166 | * for supported platforms
167 | * @param size The window size, default to 1024x768 with no size hint. Set
168 | * this to undefined if you do not want to automatically resize the window.
169 | * This may cause issues for MacOS where the window is invisible until
170 | * resized.
171 | * @param window **UNSAFE**: Highly unsafe API, beware! An unsafe pointer to
172 | * the platforms specific native window handle. If null or undefined a new
173 | * window is created. If it's non-null - then child WebView is embedded into
174 | * the given parent window. Otherwise a new window is created. Depending on
175 | * the platform, a `GtkWindow`, `NSWindow` or `HWND` pointer can be passed
176 | * here.
177 | */
178 | constructor(
179 | debug?: boolean,
180 | size?: Size,
181 | window?: Deno.PointerValue | null,
182 | );
183 | constructor(
184 | debugOrHandle: boolean | Deno.PointerValue = false,
185 | size: Size | undefined = { width: 1024, height: 768, hint: SizeHint.NONE },
186 | window: Deno.PointerValue | null = null,
187 | ) {
188 | this.#handle =
189 | typeof debugOrHandle === "bigint" || typeof debugOrHandle === "number"
190 | ? debugOrHandle
191 | : lib.symbols.webview_create(
192 | Number(debugOrHandle),
193 | window,
194 | );
195 |
196 | if (size !== undefined) {
197 | this.size = size;
198 | }
199 |
200 | // Push this instance to the global instances list to automatically destroy
201 | instances.push(this);
202 | }
203 |
204 | /**
205 | * Destroys the webview and closes the window along with freeing all internal
206 | * resources.
207 | */
208 | destroy() {
209 | for (const callback of Object.keys(this.#callbacks)) {
210 | this.unbind(callback);
211 | }
212 | lib.symbols.webview_terminate(this.#handle);
213 | lib.symbols.webview_destroy(this.#handle);
214 | this.#handle = null;
215 | }
216 |
217 | /**
218 | * Navigates webview to the given URL. URL may be a data URI, i.e.
219 | * `"data:text/html,..."`. It is often ok not to url-encodeCString it
220 | * properly, webview will re-encodeCString it for you.
221 | */
222 | navigate(url: URL | string) {
223 | lib.symbols.webview_navigate(
224 | this.#handle,
225 | encodeCString(url instanceof URL ? url.toString() : url),
226 | );
227 | }
228 |
229 | /**
230 | * Runs the main event loop until it's terminated. After this function exits
231 | * the webview is automatically destroyed.
232 | */
233 | run(): void {
234 | lib.symbols.webview_run(this.#handle);
235 | this.destroy();
236 | }
237 |
238 | /**
239 | * Binds a callback so that it will appear in the webview with the given name
240 | * as a global async JavaScript function. Callback receives a seq and req value.
241 | * The seq parameter is an identifier for using {@link Webview.return} to
242 | * return a value while the req parameter is a string of an JSON array representing
243 | * the arguments passed from the JavaScript function call.
244 | *
245 | * @param name The name of the bound function
246 | * @param callback A callback which takes two strings as parameters: `seq`
247 | * and `req` and the passed {@link arg} pointer
248 | * @param arg A pointer which is going to be passed to the callback once called
249 | */
250 | bindRaw(
251 | name: string,
252 | callback: (
253 | seq: string,
254 | req: string,
255 | arg: Deno.PointerValue | null,
256 | ) => void,
257 | arg: Deno.PointerValue | null = null,
258 | ) {
259 | const callbackResource = new Deno.UnsafeCallback(
260 | {
261 | parameters: ["pointer", "pointer", "pointer"],
262 | result: "void",
263 | },
264 | (
265 | seqPtr: Deno.PointerValue,
266 | reqPtr: Deno.PointerValue,
267 | arg: Deno.PointerValue | null,
268 | ) => {
269 | const seq = seqPtr
270 | ? new Deno.UnsafePointerView(seqPtr).getCString()
271 | : "";
272 | const req = reqPtr
273 | ? new Deno.UnsafePointerView(reqPtr).getCString()
274 | : "";
275 | callback(seq, req, arg);
276 | },
277 | );
278 | this.#callbacks.set(name, callbackResource);
279 | lib.symbols.webview_bind(
280 | this.#handle,
281 | encodeCString(name),
282 | callbackResource.pointer,
283 | arg,
284 | );
285 | }
286 |
287 | /**
288 | * Binds a callback so that it will appear in the webview with the given name
289 | * as a global async JavaScript function. Callback arguments are automatically
290 | * converted from json to as closely as possible match the arguments in the
291 | * webview context and the callback automatically converts and returns the
292 | * return value to the webview.
293 | *
294 | * @param name The name of the bound function
295 | * @param callback A callback which is passed the arguments as called from the
296 | * webview JavaScript environment and optionally returns a value to the
297 | * webview JavaScript caller
298 | *
299 | * ## Example
300 | * ```ts
301 | * import { Webview } from "../mod.ts";
302 | *
303 | * const html = `
304 | *
305 | *
306 | * Hello from deno v${Deno.version.deno}
307 | *
310 | *
311 | *
312 | * `;
313 | *
314 | * const webview = new Webview();
315 | *
316 | * webview.navigate(`data:text/html,${encodeURIComponent(html)}`);
317 | *
318 | * let counter = 0;
319 | * // Create and bind `press` to the webview javascript instance.
320 | * // This functions in addition to logging its parameters also returns
321 | * // a value from deno land to webview land.
322 | * webview.bind("press", (a, b, c) => {
323 | * console.log(a, b, c);
324 | *
325 | * return { times: counter++ };
326 | * });
327 | *
328 | * // Bind the `log` function in the webview to the parent instances `console.log`
329 | * webview.bind("log", (...args) => console.log(...args));
330 | *
331 | * webview.run();
332 | * ```
333 | */
334 | bind(
335 | name: string,
336 | // deno-lint-ignore no-explicit-any
337 | callback: (...args: any) => any,
338 | ) {
339 | this.bindRaw(name, (seq, req) => {
340 | const args = JSON.parse(req);
341 | let result;
342 | let success: boolean;
343 | try {
344 | result = callback(...args);
345 | success = true;
346 | } catch (err) {
347 | result = err;
348 | success = false;
349 | }
350 | if (result instanceof Promise) {
351 | result.then((result) =>
352 | this.return(seq, success ? 0 : 1, JSON.stringify(result))
353 | );
354 | } else {
355 | this.return(seq, success ? 0 : 1, JSON.stringify(result));
356 | }
357 | });
358 | }
359 |
360 | /**
361 | * Unbinds a previously bound function freeing its resource and removing it
362 | * from the webview JavaScript context.
363 | *
364 | * @param name The name of the bound function
365 | */
366 | unbind(name: string) {
367 | lib.symbols.webview_unbind(this.#handle, encodeCString(name));
368 | this.#callbacks.get(name)?.close();
369 | this.#callbacks.delete(name);
370 | }
371 |
372 | /**
373 | * Returns a value to the webview JavaScript environment.
374 | *
375 | * @param seq The request pointer as provided by the {@link Webview.bindRaw}
376 | * callback
377 | * @param status If status is zero the result is expected to be a valid JSON
378 | * result value otherwise the result is an error JSON object
379 | * @param result The stringified JSON response
380 | */
381 | return(seq: string, status: number, result: string) {
382 | lib.symbols.webview_return(
383 | this.#handle,
384 | encodeCString(seq),
385 | status,
386 | encodeCString(result),
387 | );
388 | }
389 |
390 | /**
391 | * Evaluates arbitrary JavaScript code. Evaluation happens asynchronously,
392 | * also the result of the expression is ignored. Use
393 | * {@link Webview.bind bindings} if you want to receive notifications about
394 | * the results of the evaluation.
395 | */
396 | eval(source: string) {
397 | lib.symbols.webview_eval(this.#handle, encodeCString(source));
398 | }
399 |
400 | /**
401 | * Injects JavaScript code at the initialization of the new page. Every time
402 | * the webview will open a the new page - this initialization code will be
403 | * executed. It is guaranteed that code is executed before window.onload.
404 | */
405 | init(source: string) {
406 | lib.symbols.webview_init(this.#handle, encodeCString(source));
407 | }
408 | }
409 |
--------------------------------------------------------------------------------
/test_import_map.json:
--------------------------------------------------------------------------------
1 | {
2 | "imports": {
3 | "@webview/webview": "./mod.ts",
4 | "@denosaurs/plug": "jsr:@denosaurs/plug@^1.0"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------