webview / webview_deno Goto Github PK

View Code? Open in Web Editor NEW

1.4K 24.0 72.0 984 KB

🌐 Deno bindings for webview, a tiny library for creating web-based desktop GUIs

Home Page: https://deno.land/x/webview

License: MIT License

TypeScript 87.00% Batchfile 13.00%

deno webview gui deno-webview deno-plugins deno-plugin deno-bindings deno-module hacktoberfest typescript

webview_deno's Introduction

webview_deno

deno bindings for webview

Webview is a tiny cross-platform library to make web-based GUIs for desktop applications.

⚠️ This project is still in development. Expect breaking changes.

Installation

Webview is published to jsr.io and deno.land. The recommended way to use it is to use JSR:

deno add @webview/webview

or without the CLI:

import { Webview } from "jsr:@webview/webview";

Example

import { Webview } from "@webview/webview";

const html = `
  <html>
  <body>
    <h1>Hello from deno v${Deno.version.deno}</h1>
  </body>
  </html>
`;

const webview = new Webview();

webview.navigate(`data:text/html,${encodeURIComponent(html)}`);
webview.run();

You can run this example directly from the web:

deno run -Ar --unstable https://deno.land/x/webview/examples/local.ts

or in your development environment:

deno run -Ar --unstable examples/local.ts

you can find other examples in the examples/ directory.

Documentation

You can find the official documentation here.

Development

Prerequisites

Linux

webkit2gtk (to install using apt: sudo apt-get install libwebkit2gtk-4.0-dev)

Building

Make sure to init the webview submodule with:

$ git submodule update --init --recursive

Building on Windows requires admin privileges.

$ deno task build

Running

To run webview_deno without automatically downloading the binaries from releases you will need to use the environment variable PLUGIN_URL and set it to the path where the built binaries are located. This is usually file://./target/release.

$ deno task build
$ PLUGIN_URL=./build/
$ deno run --unstable -A examples/local.ts

$ deno task run examples/local.ts

or if you have the webview library already built and didn't make any changes to it, you can skip the building step with:

$ deno task run:fast examples/local.ts

Environment variables

PLUGIN_URL - Set a custom library URL. Defaults to the latest release assets on Github. Setting this also disables cache for plug.

Dependencies

plug
webview

Other

Contribution

Pull request, issues and feedback are very welcome. Code style is formatted with deno task fmt, linted with deno task lint and commit messages are done following Conventional Commits spec.

Licence

webview_deno's People

Contributors

Stargazers

Watchers

webview_deno's Issues

Rendering performance issues vs Chrome/Safari

For the past week I've been porting my Electron app to Deno w/ deno_webview.

My app is for building trading strategies and uses heavy charting using D3.js/Canvas. Zooming/panning performance is critical here.

I'm observing deno_webview have worse performance in that area. Here's a video demonstrating the same app running in deno_webview on the left, v.s. Chrome and Safari on the right.

https://drive.google.com/file/d/1HxPPFh4sPXhOwvBg07KglzZYJN8u1p3l/view?usp=sharing

Chrome/Safari are noticably smoother. Additonally, the rendered lines in chrome/safari are sharper. It may be hard to see in the video but the rendering is a little blurred in deno_webview (this is the lesser issue, performance is more important)

Unfortunately, this is a show-stopper for me as it would make no sense to continue porting if I can't get on-par rendering performance.

Do you know why this is happening? Deno_webview internals are a bit over my head.

Thank you

Building locally - File not found

I'm having trouble running examples using locally built deno_webview

I built using deno run -A scripts/build.ts

echo $DENO_WEBVIEW_PLUGIN_BASE

file:///Users/user/Documents/code/deno_webview/target/release

deno run -A scripts/dev.ts examples/multiple.ts

Is deno_webview supposed to be generated in target/release?

Core dump on window close.

I'm trying to make a wrapper for webview_deno that (for now) abstracts the annoyances of getting stuff to run and myself have ran into a problem.

The following command works:
deno run --unstable -A --reload https://raw.githubusercontent.com/jcc10/Simple-Deno-Webview/master/demo.ts
It starts a oak hello world server, opens a webview, when the webview closes, it exits deno.

The following core dumps:
deno run --unstable -A --reload https://raw.githubusercontent.com/jcc10/Simple-Deno-Webview/master/failing_demo.ts
It starts a oak hello world server, opens a webview, when the webview closes it trys to open a new webview (which is when it core dumps) then when the second one closes, it exits deno.

I'm honestly not sure what I'm doing wrong here.

Segmentation Fault

Tried it out, the example code causes a segmentation fault shortly after starting, without opening the tab. Editing the code to not run the view makes it open a tab in preparation, then stop and seg fault.

deno Unexpected exit

deno : 1.0.4
command:

deno run -A -r --unstable --allow-read webview.ts

code:

import { WebView } from "https://deno.land/x/webview/mod.ts";

const html = (n: number) =>
  `
  <html>
  <body>
    <h1>${n}</h1>
  </body>
  </html>
`;

const webview1 = new WebView({
  title: "Multiple deno_webview example",
  url: `data:text/html,${encodeURIComponent(html(1))}`,
  width: 400,
  height: 200,
  resizable: true,
  debug: true,
  frameless: false,
});

const webview2 = new WebView({
  title: "Multiple deno_webview example",
  url: `data:text/html,${encodeURIComponent(html(2))}`,
  width: 400,
  height: 200,
  resizable: true,
  debug: true,
  frameless: false,
});

await Promise.all([webview1.run(), webview2.run()]);

log:

Download https://deno.land/x/[email protected]/md5.ts
Download https://deno.land/[email protected]/path/_constants.ts
Download https://deno.land/[email protected]/path/_util.ts
Download https://deno.land/[email protected]/path/_globrex.ts
Download https://deno.land/[email protected]/fmt/colors.ts
Download https://deno.land/[email protected]/testing/diff.ts
...
Compile file:///Users/wangyu/Desktop/workspace/deno-demo/webview.ts
INFO load deno plugin "deno_webview" from local "/Users/wangyu/Desktop/workspace/deno-demo/.deno_plugins/deno_webview_691b9df6ac6b996c9adc4b88a87bd40f.dylib"
[1]    3941 bus error  deno run -A -r --unstable --allow-read webview.ts

deno Unexpected exit

Can't run an oak server simultaneously with webview

I'm having a strange issue where calling webview.run() prevents my oak server from working.

import { Application } from 'https://deno.land/x/oak/mod.ts';
import { WebView } from 'https://deno.land/x/webview/mod.ts';
import router from './routes.ts';

const app = new Application();
app.use(router.routes());
app.use(router.allowedMethods());

const webview = new WebView(...);
webview.run();  //THIS LINE

await app.listen({ port: 8080 });

I'm using Postman to test the API on port 8080 on a simple /api/test endpoint that returns a string.

With webview.run(), the API hangs and eventually times out.
Commenting out webview.run() and suddenly the API works.

I also tried calling webview.run() in oak's "listen" event handler.
I also tried await Promise.all([webview.run(), app.listen(...)])

Not sure what one has to do with the other. Am I missing something very basic here?

Making the webview transparent

Is it possible to make the webview window transparent instead of white ? (setting this with CSS doesn't work)

Or maybe these are OS limitations ?

downloading plugin "deno_webview" from "https://github.com/eliassjogreen/deno_webview/releases/download/0.1.2/libdeno_webview.so" failed.

I'm trying to run Hello World example I see in README.md, I get this error instead:

Consider using Pagic to build the website?

Pagic is a static site generator powered by Deno + React

Here are some demos:

If it is possible to use pagic to build the website, I would like to create the pull-request

Cannot render local images

Local images are not rendered - neither using absolute or relative paths

<img src="butter.png" alt="some issue" width="900" height="700">

Or am I doing something wrong?

failing to run demo code

Hello @eliassjogreen,

I recently started tooling around with deno and also tried your webview module. Sadly I did not get it to work on either windows nor ubuntu.

I just ran the demo code:

import { WebView } from "https://deno.land/x/webview/mod.ts";

const webview1 = new WebView({
    title: "Multiple deno_webview example",
    url: `data:text/html,
    <html>
    <body>
      <h1>1</h1>
    </body>
    </html>
    `,
    width: 800,
    height: 600,
    resizable: true,
    debug: true,
    frameless: false,
});

const webview2 = new WebView({
    title: "Multiple deno_webview example",
    url: `data:text/html,
    <html>
    <body>
      <h1>2</h1>
    </body>
    </html>
    `,
    width: 800,
    height: 600,
    resizable: true,
    debug: true,
    frameless: false,
});

await Promise.all([webview1.run(), webview2.run()]);

Here is my error-log:

lukas@Yobuntu:/media/sdaten_ext4/code/scanSort$ deno run -A gui.ts
Compile file:///media/sdaten_ext4/code/scanSort/gui.ts
Download https://deno.land/x/webview/mod.ts
Download https://deno.land/x/webview/plugin.ts
Download https://deno.land/x/[email protected]/mod.ts
Download https://deno.land/std/fs/exists.ts
Download https://deno.land/std/log/mod.ts
Download https://deno.land/std/path/mod.ts
Download https://deno.land/x/[email protected]/mod.ts
Download https://deno.land/std/log/logger.ts
Download https://deno.land/std/log/handlers.ts
Download https://deno.land/std/testing/asserts.ts
Download https://deno.land/std/log/levels.ts
Download https://deno.land/std/log/levels.ts
Download https://deno.land/std/fmt/colors.ts
Download https://deno.land/std/testing/diff.ts
Download https://deno.land/std/path/win32.ts
Download https://deno.land/std/path/posix.ts
Download https://deno.land/std/path/common.ts
Download https://deno.land/std/path/separator.ts
Download https://deno.land/std/path/interface.ts
Download https://deno.land/std/path/glob.ts
Download https://deno.land/std/path/_constants.ts
Download https://deno.land/std/path/_util.ts
Download https://deno.land/std/path/_globrex.ts
Download https://deno.land/x/[email protected]/hash.ts
Download https://deno.land/x/[email protected]/sha1.ts
Download https://deno.land/x/[email protected]/md5.ts
error: TS2694 [ERROR]: Namespace 'Deno' has no exported member 'OperatingSystem'.
const PLUGIN_SUFFIX_MAP: { [os in Deno.OperatingSystem]: string } = {
                                       ~~~~~~~~~~~~~~~
    at https://deno.land/x/[email protected]/mod.ts:9:40

TS7053 [ERROR]: Element implicitly has an 'any' type because expression of type '"darwin" | "linux" | "windows"' can't be used to index type '{ mac?: string | undefined; linux?: string | undefined; win?: string | undefined; }'.
  Property 'darwin' does not exist on type '{ mac?: string | undefined; linux?: string | undefined; win?: string | undefined; }'.
  const remoteUrl = urls[os];
                    ~~~~~~~~
    at https://deno.land/x/[email protected]/mod.ts:35:21

TS2339 [ERROR]: Property 'openPlugin' does not exist on type 'typeof Deno'.
  return Deno.openPlugin(localPath);
              ~~~~~~~~~~
    at https://deno.land/x/[email protected]/mod.ts:58:15

TS2349 [ERROR]: This expression is not callable.
  Type '{ get(key: string): string | undefined; set(key: string, value: string): void; toObject(): { [index: string]: string; }; }' has no call signatures.
const DEV = Deno.env("DEV");
                 ~~~
    at https://deno.land/x/webview/plugin.ts:3:18

TS2349 [ERROR]: This expression is not callable.
  Type '{ get(key: string): string | undefined; set(key: string, value: string): void; toObject(): { [index: string]: string; }; }' has no call signatures.
const MSHTML = Deno.env("MSHTML");
                    ~~~
    at https://deno.land/x/webview/plugin.ts:5:21

TS2694 [ERROR]: Namespace 'Deno' has no exported member 'PluginOp'.
  op: Deno.PluginOp,
           ~~~~~~~~
    at https://deno.land/x/webview/plugin.ts:25:12

TS2694 [ERROR]: Namespace 'Deno' has no exported member 'PluginOp'.
  op: Deno.PluginOp,
           ~~~~~~~~
    at https://deno.land/x/webview/plugin.ts:38:12

TS7006 [ERROR]: Parameter 'raw' implicitly has an 'any' type.
    op.setAsyncHandler((raw) => {
                        ~~~
    at https://deno.land/x/webview/plugin.ts:42:25

Found 8 errors.
lukas@Yobuntu:/media/sdaten_ext4/code/scanSort$

Hope there is a solution. Thanks already!
Kind regards
@lukas-runge

Add async event callback during Webview creation

In 0.5.4 version, we can use for await to query webview events to trigger logic in Deno script as following:

for await (const event of webview.iter()) {
  webview.setTitle(event);
}

How about async callback function for Webview creation?

const webview = new Webview(
    {
        url: `data:text/html,${encodeURIComponent(html)}`,
        callback: async (event) => {
              // this refer Webview
        }
    },
);

Unable to run deno webview in deno version 1.0.0 on Linux

I receive the following compile time errors when trying to run deno webview with deno 1.0.0 on Linux:

error: TS2694 [ERROR]: Namespace 'Deno' has no exported member 'OperatingSystem'.
const PLUGIN_SUFFIX_MAP: { [os in Deno.OperatingSystem]: string } = {
                                       ~~~~~~~~~~~~~~~
    at https://deno.land/x/[email protected]/mod.ts:9:40

TS7053 [ERROR]: Element implicitly has an 'any' type because expression of type '"darwin" | "linux" | "windows"' can't be used to index type '{ mac?: string | undefined; linux?: string | undefined; win?: string | undefined; }'.
  Property 'darwin' does not exist on type '{ mac?: string | undefined; linux?: string | undefined; win?: string | undefined; }'.
  const remoteUrl = urls[os];
                    ~~~~~~~~
    at https://deno.land/x/[email protected]/mod.ts:35:21

TS2339 [ERROR]: Property 'openPlugin' does not exist on type 'typeof Deno'.
  return Deno.openPlugin(localPath);
              ~~~~~~~~~~
    at https://deno.land/x/[email protected]/mod.ts:58:15

TS2349 [ERROR]: This expression is not callable.
  Type '{ get(key: string): string | undefined; set(key: string, value: string): void; toObject(): { [index: string]: string; }; }' has no call signatures.
const DEV = Deno.env("DEV");
                 ~~~
    at https://deno.land/x/webview/plugin.ts:3:18

TS2349 [ERROR]: This expression is not callable.
  Type '{ get(key: string): string | undefined; set(key: string, value: string): void; toObject(): { [index: string]: string; }; }' has no call signatures.
const MSHTML = Deno.env("MSHTML");
                    ~~~
    at https://deno.land/x/webview/plugin.ts:5:21

TS2694 [ERROR]: Namespace 'Deno' has no exported member 'PluginOp'.
  op: Deno.PluginOp,
           ~~~~~~~~
    at https://deno.land/x/webview/plugin.ts:25:12

TS2694 [ERROR]: Namespace 'Deno' has no exported member 'PluginOp'.
  op: Deno.PluginOp,
           ~~~~~~~~
    at https://deno.land/x/webview/plugin.ts:38:12

TS7006 [ERROR]: Parameter 'raw' implicitly has an 'any' type.
    op.setAsyncHandler((raw) => {
                        ~~~
    at https://deno.land/x/webview/plugin.ts:42:25

Found 8 errors.

Calling Deno function from WebView. How?

I have found this really cool example online on how to run a WebView with Deno.

Is it possible to call a function insided your Deno App from an HTML button element placed inside the html template?

Take a look:

// Importing the webview library
import { WebView } from "https://deno.land/x/webview/mod.ts";
// Creating an HTML page
let html = `
  <html>
    <body>
        <h1>Hello from deno v${Deno.version.deno}</h1>
        <button type="button" onclick="test()">RUN TEST FUNCTION</button>
    </body>
  </html>
`;

function test() {

  console.log('You really can do that!');

}

// Creating and configuring the webview
const webview = new WebView({
  title: "Deno Webview Example",
  url: "data:text/html," + html,
  // url: 'https://www.google.com',
  width: 768,
  height: 1024,
  resizable: true,
  debug: true,
  frameless: false
});
// Running the webview
webview.run();

To run this code you need to:

deno run -A --unstable webview.ts

Outdate /[email protected]. Please update Dependencies.

Currently, I cannot use webview because the dependencies are outdated. Please update.

Many of them show an outdated std library during the error

The library below is causing this error.
https://deno.land/x/[email protected]/deps.ts

Communication between Webview and Deno is impossible

I had using via XMLhttpRequest, dosent work, via webview.eval, dont send result operation only true or false

I work with Done v1.6.3, Webview v0.5.5, on Windows 10

fatal runtime error

[email protected]
deno: 1.6.2
platform: Windows10
I can run deno run -Ar --unstable https://deno.land/x/webview/examples/local.ts successfully on Mac,
but failed on Windows 10

Download https://deno.land/x/webview/examples/local.ts
Warning Implicitly using latest version (0.5.5) for https://deno.land/x/webview/examples/local.ts
Download https://deno.land/x/[email protected]/examples/local.ts
Download https://deno.land/x/[email protected]/mod.ts
Download https://deno.land/x/[email protected]/webview.ts
Download https://deno.land/x/[email protected]/plugin.ts
Download https://deno.land/x/[email protected]/deps.ts
Download https://deno.land/x/[email protected]/mod.ts
Download https://deno.land/[email protected]/async/mod.ts
Download https://deno.land/x/[email protected]/plug.ts
Download https://deno.land/[email protected]/async/delay.ts
Download https://deno.land/[email protected]/async/mux_async_iterator.ts
Download https://deno.land/[email protected]/async/deferred.ts
Download https://deno.land/[email protected]/async/pool.ts
Download https://deno.land/x/[email protected]/deps.ts
Download https://deno.land/[email protected]/path/mod.ts
Download https://deno.land/x/[email protected]/mod.ts
Download https://deno.land/[email protected]/fs/mod.ts
Download https://deno.land/[email protected]/hash/mod.ts
Download https://deno.land/x/[email protected]/cache.ts
Download https://deno.land/[email protected]/hash/_wasm/hash.ts
Download https://deno.land/[email protected]/hash/hasher.ts
Download https://deno.land/[email protected]/path/_interface.ts
Download https://deno.land/[email protected]/path/posix.ts
Download https://deno.land/[email protected]/path/win32.ts
Download https://deno.land/[email protected]/path/common.ts
Download https://deno.land/[email protected]/path/separator.ts
Download https://deno.land/[email protected]/path/glob.ts
Download https://deno.land/[email protected]/_util/os.ts
Download https://deno.land/[email protected]/fs/exists.ts
Download https://deno.land/[email protected]/fs/expand_glob.ts
Download https://deno.land/[email protected]/fs/walk.ts
Download https://deno.land/[email protected]/fs/move.ts
Download https://deno.land/[email protected]/fs/ensure_dir.ts
Download https://deno.land/[email protected]/fs/ensure_file.ts
Download https://deno.land/[email protected]/fs/ensure_symlink.ts
Download https://deno.land/[email protected]/fs/copy.ts
Download https://deno.land/[email protected]/fs/empty_dir.ts
Download https://deno.land/[email protected]/fs/eol.ts
Download https://deno.land/[email protected]/fs/ensure_link.ts
Download https://deno.land/x/[email protected]/file.ts
Download https://deno.land/x/[email protected]/helpers.ts
Download https://deno.land/x/[email protected]/deps.ts
Download https://deno.land/x/[email protected]/directories.ts
Download https://deno.land/[email protected]/_util/assert.ts
Download https://deno.land/[email protected]/path/_constants.ts
Download https://deno.land/[email protected]/path/_util.ts
Download https://deno.land/[email protected]/fs/_util.ts
Download https://deno.land/[email protected]/encoding/hex.ts
Download https://deno.land/[email protected]/encoding/base64.ts
Download https://deno.land/[email protected]/hash/_wasm/wasm.js
Download https://deno.land/x/[email protected]/file_fetcher.ts
Check https://deno.land/x/webview/examples/local.ts
fatal runtime error: Rust cannot catch foreign exceptions

Fatal runtime error when using deno 1.2.0

OS: macOS Catalina 10.15.5
deno version: 1.2.0
v8 version: 8.5.216
webview version: 0.4.2

Code:

import { WebView } from 'https://deno.land/x/[email protected]/mod.ts';

const html = `<html>yo</html>`;

const webview = new WebView({
  title: 'yo',
  url: 'data:text/html,' + html,
  width: 800,
  height: 600,
  resizable: true,
  debug: true,
  frameless: false,
});

webview.run();

Output:

% RUST_BACKTRACE=full deno run -A --unstable example.js 
Check file:///****/example.js
INFO downloading deno plugin "deno_webview" from "https://github.com/eliassjogreen/deno_webview/releases/download/0.4.2/libdeno_webview.dylib"
INFO load deno plugin "deno_webview" from local "/****/.deno_plugins/deno_webview_3d132d00f9ce9013dc21a9d6fac4877c.dylib"
thread '<unnamed>' panicked at 'called `Result::unwrap()` on an `Err` value: Error("expected value", line: 1, column: 1)', src/lib.rs:69:36
stack backtrace:
   0:        0x106f723bf - <std::sys_common::backtrace::_print::DisplayBacktrace as core::fmt::Display>::fmt::hdfed66b3e2e8ce60
   1:        0x106f8cd2e - core::fmt::write::h9de7b13cfaa80b03
   2:        0x106f710b7 - std::io::Write::write_fmt::h9197012b9d65a9a3
   3:        0x106f73d1a - std::panicking::default_hook::{{closure}}::h7b209cdc44c5777f
   4:        0x106f73a5c - std::panicking::default_hook::hf135bc502e6f77db
   5:        0x106f74288 - std::panicking::rust_panic_with_hook::h7967810bc33e523b
   6:        0x106f73e52 - rust_begin_unwind
   7:        0x106f9337f - core::panicking::panic_fmt::h9eea9e4965bd189c
   8:        0x106f93285 - core::result::unwrap_failed::h21e25fa0dcab039e
   9:        0x106e0b3e1 - deno_webview::op_webview_new::h9cc65cdd90605ba3
  10:        0x10311b4eb - <deno::ops::plugin::PluginInterface as deno_core::plugin_api::Interface>::register_op::{{closure}}::h0417aafddb2c6ab7
  11:        0x103af1363 - deno_core::core_isolate::CoreIsolateState::dispatch_op::h024f1e51ff678c99
  12:        0x103b00ca9 - deno_core::bindings::send::h97de4c00f705658d
  13:        0x103afdd06 - <extern "C" fn(A0) .> R as rusty_v8::support::CFnFrom<F>>::mapping::c_fn::h3b3afeb4a9ed2aba
  14:        0x103b8d65f - _ZN2v88internal25FunctionCallbackArguments4CallENS0_15CallHandlerInfoE
  15:        0x103b8cb91 - _ZN2v88internal12_GLOBAL__N_119HandleApiCallHelperILb0EEENS0_11MaybeHandleINS0_6ObjectEEEPNS0_7IsolateENS0_6HandleINS0_10HeapObjectEEESA_NS8_INS0_20FunctionTemplateInfoEEENS8_IS4_EENS0_16BuiltinArgumentsE
  16:        0x103b8c212 - _ZN2v88internalL26Builtin_Impl_HandleApiCallENS0_16BuiltinArgumentsEPNS0_7IsolateE
fatal runtime error: failed to initiate panic, error 5
zsh: abort      RUST_BACKTRACE=full deno run -A --unstable

TS2339 [ERROR]: Property 'openPlugin' does not exist on type 'typeof Deno'.

deno --version
deno 1.0.2
v8 8.4.300
typescript 3.9.2

WebView.run() block deno

After calling WebView.run() we can no longer call any other function.
example:

...
webview1.run()
console.log ("Never print if the window is open");

Example of .step()

How do you use the step function?

Provide example of building a binary with deno

Sorry, maybe I'm missing something, but I came here expecting to find a hello world example where "Hello World" is written in a deno ts script, and after running some sort of build sequence I get a standalone binary. However, all I see are what look to me like deno scripts. Unless I am failing to understand what this repo does, please provide an example to generate a hello-world binary on the major platforms.

Use cache in production

I think the cache should be used in the production environment, but I found that the code uses the cache only in the development environment. I don't know if this is a small mistake or... any special reason to do that?

https://github.com/eliassjogreen/deno_webview/blob/4dfd47c05fc952c0d4e45f77f368b58eb4643a4a/plugin.ts#L11

Old webview version in Windows 10 2004

What is the correct user agent with Windows 10 2004? For some reason Deno webview uses some old Chromium, even though Windows 10 has newer version (aka Webview2) already installed. Isn't this package using the webview2 provided with the Windows 10 2004 when you have Chrome based Edge installed?

I get this using Deno webview:

Mozilla/5.0 (Windows NT 10.0; Win64; x64; WebView/3.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19041

Show example.ts code

import { WebView } from "https://deno.land/x/webview/mod.ts";

const view1 = new WebView({
    title: "Foo",
    url: `data:text/html, <html><script>document.write(navigator.userAgent);</script>`,
    width: 400,
});
await Promise.all([view1.run()]);

For instance I have stable Edge and it's user agent is:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36 Edg/83.0.478.54

Which I would expect deno webview to report also, but for some reason it's not using that latest webview on my machine.

Why this matters? It matters because the whole idea with Microsoft's Webview2 is that you don't need extra browsers running, it saves a lot of memory, because it uses the same Edge browser user already has installed. This support should be built in the parent C bindings repo: https://github.com/webview/webview, but if this repo does not use those bindings it won't work of course.

Window blank on mac

The window is blank on mac when running the example code

deno run -A -r --unstable https://deno.land/x/webview/examples/multiple.ts

Deno v1.0.0

Some way to detect changes in URL

I have been trying to build an OAuth app, and in one of the steps, a URL controlled by me must be accessed by the user, and i find the need to create a local http server a bit overkill for just one request. Without a local server however, I cannot get the webview to execute javascript needed to return the access key. This issue could be bypassed by checking the URL on deno's side every time the webview changes URL, and leaves me with the suggestion in the title.

Should this be a feature?

"webview_deno.dll" failed.

  downloading plugin "webview_deno" from "https://github.com/webview/webview_deno/releases/download/0.4.2/webview_deno.dll" failed.

how can i fix this?

Basic example not working

I'm on OSX 10.14.6, deno 1.0.0

I copied the code from README, and when I run it I get this:

deno run -A main.ts
Compile file:///Users/konsumer/Desktop/denodemo/main.ts
error: TS2339 [ERROR]: Property 'openPlugin' does not exist on type 'typeof Deno'.
  return Deno.openPlugin(localPath);
              ~~~~~~~~~~
    at https://deno.land/x/plugin_prepare/mod.ts:64:15

Enable window.close() for webview scripts.

It would be nice to enable window.close for scripts inside the webview. (window.close() is disabled for windows not opened by a script, which debatable this one is.)

Even if it's disabled by default, it would be nice to have the option to enable it.

Audio in Webview

This is perhaps beyond the purview of the project, but I was hoping that someone here might be able to get me on the right track.

I've been trying to use Deno to run a webview program on Linux and it uses an audio element. I keep getting an error in the console about no WebVTT encoder present on the system. Googling only leads to answer for Android and iOS as that's really where most people it appears think of Webview and not so much on the desktop.

Anybody know of an encoder that webview would be able to recognize to clear the error or another way to clear out there error?

Loading third party libs (Angular, Vue, etc)

Is it possible to load third party libs like Angular or Vue in the webview?
If so, is there an example floating around somewhere?

Example code not working - Segmentation fault (core dumped)

Deno version: 1.0.0-rc1
OS: Ubuntu 18.04

How to reproduct:
Run this code in terminal:

deno run -A -r --unstable https://deno.land/x/webview/examples/multiple.ts

Output:

INFO downloading deno plugin "deno_webview" from "https://github.com/eliassjogreen/deno_webview/releases/download/0.4.1/libdeno_webview.so"
INFO load deno plugin "deno_webview" from local "/media/USERNAME/Gits/Learning/Deno/.deno_plugins/deno_webview_946da9c58c3e41db8c4204caeac0c747.so"
Segmentation fault (core dumped)

apple silicon support?

Hi, I want to test this library with Mac Mini(m1), but it doesn't work.

deno run -Ar --unstable https://deno.land/x/webview/examples/local.ts
...
...
Download https://deno.land/[email protected]/hash/_wasm/wasm.js
Download https://deno.land/[email protected]/encoding/base64.ts
Download https://deno.land/[email protected]/path/_util.ts
Download https://deno.land/[email protected]/path/_constants.ts
Download https://deno.land/x/[email protected]/file_fetcher.ts
Check https://deno.land/x/webview/examples/local.ts
error: Uncaught (in promise) Error: Could not open library: dlopen(/Users/paosder-mini/Library/Caches/deno/plug/https/github.com/4b121ee5a08490d714e3f7d99bf1bcce7bafae851df6e895a068bf3e7d1866ae.dylib, 5): no suitable image found.  Did find:
	/Users/paosder-mini/Library/Caches/deno/plug/https/github.com/4b121ee5a08490d714e3f7d99bf1bcce7bafae851df6e895a068bf3e7d1866ae.dylib: mach-o, but wrong architecture
	/Users/paosder-mini/Library/Caches/deno/plug/https/github.com/4b121ee5a08490d714e3f7d99bf1bcce7bafae851df6e895a068bf3e7d1866ae.dylib: stat() failed with errno=35
    at processResponse (deno:core/core.js:223:11)
    at Object.jsonOpSync (deno:core/core.js:246:12)
    at Object.openPlugin (deno:cli/rt/40_plugins.js:7:17)
    at Module.prepare (https://deno.land/x/[email protected]/plug.ts:82:15)
    at async load (https://deno.land/x/[email protected]/plugin.ts:75:9)
    at async https://deno.land/x/[email protected]/mod.ts:5:1

It seems doesn't support ARM(m1) yet, however Deno support m1 latest release v1.6 using latest rust to build with.
How do I solve this problem or is there any plan of supporting arm architecture?

Thank you :)

Error 126 - Uncaught Error: The specified module could not be found. (Error 126)

When I execute the command "deno run -A -r --unstable https://deno.land/x/webview/examples/local.ts" I get the error "Uncaught Error: The specified module could not be found. (Error 126)"

Use webview/webview_rust instead of boscop/web-view

This module will switch to webview/webview_rust as soon as possible due to many of boscop/web-view problems. This will also make sure to use webview/webview code instead of boscop's fork.

How to get a file path with webview?

My use case is the following, I wanna open a prompt to select a file (perhaps a input[file] ?) and select a file from my system, and I need to get the absolute path for that selected file. Is there any API Webview provides for doing something like that?

Clarification about how two-way deno binding works and API proposal

Hi there,

Thanks a lot for the great work on this project. I was excited to see that #12 was completed. Yet I don't quite get how it's suppose to work. Looking at the example on the Webview side seems like we are invoking an external method, but on the Deno side looks like we are just getting an event. Also I could not find an example on how to call a Webview function from Deno. Could anyone shed some light on how this works?.

Assuming this is an event based API, not sure it's, but assuming it's . I think there is a standard, well known, Web API that could fit beautifully. How about making the Webview class implement the EventTarget interface (one-way events) or the EventSource interface (two-way events)?. Instead of having a single callback or loop to route all the events, we could add/remove event listeners for standard events and/or custom events. We could even go all out one day and try to implement the entire Window API 😄. This would make every web programmer out there feel just at home when working with this implementation of Webview and the docs would basically write itself.

I don't know if what I'm proposing is possible. I would have no idea where to even begin. So apologies if I'm been naive here. All I'm saying is, it would be beautiful if this Webview implementation behaved like a browser Window sharing as much API as possible.
Thanks again for the time and the great work.

Can't run an example

Sorry, I'm new to deno and couldn't run an example to try it.

deno --version
deno 1.0.0-rc3
v8 8.4.300
typescript 3.8.3

If I run deno -A https://deno.land/x/webview/examples/multiple.ts, it fails with:

error: Found argument '-A' which wasn't expected, or isn't valid in this context

USAGE:
    deno [OPTIONS] [SUBCOMMAND]

For more information try --help

If I run deno run -A https://deno.land/x/webview/examples/multiple.ts, if fails with:

Compile https://deno.land/x/webview/examples/multiple.ts
error: TS2694 [ERROR]: Namespace 'Deno' has no exported member 'OperatingSystem'.
const PLUGIN_SUFFIX_MAP: { [os in Deno.OperatingSystem]: string } = {
                                       ~~~~~~~~~~~~~~~
    at https://deno.land/x/[email protected]/mod.ts:9:40

TS7053 [ERROR]: Element implicitly has an 'any' type because expression of type '"darwin" | "linux" | "windows"' can't be used to index type '{ mac?: string | undefined; linux?: string | undefined; win?: string | undefined; }'.
  Property 'darwin' does not exist on type '{ mac?: string | undefined; linux?: string | undefined; win?: string | undefined; }'.
  const remoteUrl = urls[os];
                    ~~~~~~~~
    at https://deno.land/x/[email protected]/mod.ts:35:21

TS2339 [ERROR]: Property 'openPlugin' does not exist on type 'typeof Deno'.
  return Deno.openPlugin(localPath);
              ~~~~~~~~~~
    at https://deno.land/x/[email protected]/mod.ts:58:15

TS2349 [ERROR]: This expression is not callable.
  Type '{ get(key: string): string | undefined; set(key: string, value: string): void; toObject(): { [index: string]: string; }; }' has no call signatures.
const DEV = Deno.env("DEV");
                 ~~~
    at https://deno.land/x/webview/plugin.ts:3:18

TS2349 [ERROR]: This expression is not callable.
  Type '{ get(key: string): string | undefined; set(key: string, value: string): void; toObject(): { [index: string]: string; }; }' has no call signatures.
const MSHTML = Deno.env("MSHTML");
                    ~~~
    at https://deno.land/x/webview/plugin.ts:5:21

TS2694 [ERROR]: Namespace 'Deno' has no exported member 'PluginOp'.
  op: Deno.PluginOp,
           ~~~~~~~~
    at https://deno.land/x/webview/plugin.ts:25:12

TS2694 [ERROR]: Namespace 'Deno' has no exported member 'PluginOp'.
  op: Deno.PluginOp,
           ~~~~~~~~
    at https://deno.land/x/webview/plugin.ts:38:12

TS7006 [ERROR]: Parameter 'raw' implicitly has an 'any' type.
    op.setAsyncHandler((raw) => {
                        ~~~
    at https://deno.land/x/webview/plugin.ts:42:25

Found 8 errors.

a debug tool needed

like electron,a debug tool needed.

Argument of type 'string | URL' is not assignable to parameter of type 'string'

I've installed recent deno and have copied multiple.ts example from /examples in the current webview_deno master

When I run deno run --unstable multiple.ts I'm getting these errors:

error: TS2345 [ERROR]: Argument of type 'string | URL' is not assignable to parameter of type 'string'.
  Type 'URL' is not assignable to type 'string'.
  return new URL(url).pathname
                 ~~~
    at https://deno.land/[email protected]/path/win32.ts:911:18

TS2345 [ERROR]: Argument of type 'string | URL' is not assignable to parameter of type 'string'.
  Type 'URL' is not assignable to type 'string'.
  return new URL(url).pathname;
                 ~~~
    at https://deno.land/[email protected]/path/posix.ts:433:18

Found 2 errors.

Here's what I've found: https://dev.to/srnv/deno-1-2-0-url-argument-type-solutions-37m0

segfault & Failed to load module "appmenu-gtk-module"

On Pop!OS 20.04 (very similar to Ubuntu 20.04) I get this error when I try to run the example code:

deno run -A -r --unstable https://deno.land/x/webview/examples/multiple.ts

Download https://deno.land/x/webview/examples/multiple.ts
Download https://deno.land/x/webview/mod.ts
Download https://deno.land/x/webview/plugin.ts
Download https://deno.land/x/webview/deps.ts
Download https://deno.land/x/plugin_prepare/mod.ts
Download https://deno.land/[email protected]/async/mod.ts
Download https://deno.land/x/plugin_prepare/deps.ts
Download https://deno.land/[email protected]/async/deferred.ts
Download https://deno.land/[email protected]/async/delay.ts
Download https://deno.land/[email protected]/async/mux_async_iterator.ts
Download https://deno.land/[email protected]/fs/exists.ts
Download https://deno.land/[email protected]/log/mod.ts
Download https://deno.land/[email protected]/path/mod.ts
Download https://deno.land/x/[email protected]/mod.ts
Download https://deno.land/x/[email protected]/hash.ts
Download https://deno.land/[email protected]/path/win32.ts
Download https://deno.land/[email protected]/path/posix.ts
Download https://deno.land/[email protected]/path/common.ts
Download https://deno.land/[email protected]/path/separator.ts
Download https://deno.land/[email protected]/path/interface.ts
Download https://deno.land/[email protected]/path/glob.ts
Download https://deno.land/[email protected]/log/logger.ts
Download https://deno.land/[email protected]/log/handlers.ts
Download https://deno.land/[email protected]/testing/asserts.ts
Download https://deno.land/[email protected]/log/levels.ts
Download https://deno.land/x/[email protected]/sha1.ts
Download https://deno.land/x/[email protected]/md5.ts
Download https://deno.land/[email protected]/path/_constants.ts
Download https://deno.land/[email protected]/path/_util.ts
Download https://deno.land/[email protected]/path/_globrex.ts
Download https://deno.land/[email protected]/fmt/colors.ts
Download https://deno.land/[email protected]/testing/diff.ts
Compile https://deno.land/x/webview/examples/multiple.ts
INFO load deno plugin "deno_webview" from local "/home/konsumer/Documents/otherdev/deno-webview-example/.deno_plugins/deno_webview_946da9c58c3e41db8c4204caeac0c747.so"
Gtk-Message: 12:34:49.980: Failed to load module "appmenu-gtk-module"
Gtk-Message: 12:34:50.063: Failed to load module "appmenu-gtk-module"
[1]    149246 segmentation fault (core dumped)  deno run -A -r --unstable https://deno.land/x/webview/examples/multiple.ts

I have libwebkit2gtk-4.0-dev installed.

I installed appmenu-gtk3-module (I already had appmenu-gtk2-module installed) and still got a segfault, but it was a even less clear:

INFO load deno plugin "deno_webview" from local "/home/konsumer/Documents/otherdev/deno-webview-example/.deno_plugins/deno_webview_946da9c58c3e41db8c4204caeac0c747.so"
[1]    150092 segmentation fault (core dumped)  deno run -A -r --unstable https://deno.land/x/webview/examples/multiple.ts

between tests, I did rm -rf .deno_plugins

Simple scripts won't run.

In the examples, only loading from a remote resouce worked.

await new WebView({
  title: "Remote deno_webview example",
  url: `https://deno.land/`,
  width: 800,
  height: 600,
  resizable: true,
  debug: true,
  frameless: false,
}).run();

When I try to do this -

await new WebView({
  title: "Local deno_webview example",
  url: `data:text/html,
    <html>
    <body>
      <h1>Hello from deno</h1>
    </body>
    </html>
    `,
  width: 800,
  height: 600,
  resizable: true,
  debug: true,
  frameless: false,
}).run();

The content within the webview is empty.

Here is a screenshot, notice body is empty -

Deno does not throw any permissions isues. I tried a data URL with encoded string as well, no luck.

Going to try a local file, but don't think that will work either. Any advice would be appreciated.

img tag can't work on local image

local resources need permission operation

Link CSS/JS and Support Different Pages?

Is it possible, or on the roamap to support linking stylesheets, javascripts and supporting links to different pages? eg:

const html = `
  <html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <script src="javascripts.js"></scripts>
  </head>
  <body>
    <a href="/users">Users</a> // <-- Will use a 'new' html block
  </body>
  </html>
`;

error run webview final bundle!

I get a your simple example!
Screenshot with error: https://user-images.githubusercontent.com/75129392/101868634-1e6b2f80-3bc1-11eb-9fff-13a98b78be5a.jpg

Compiling webview-sys with edge on ci

Currently it throws a fat linker error but it should be solvable.

Communication between 2 webviews

What is the best way to communicate between 2 or more webviews? (ex, click button in one, changes color in another)

Two-way deno bindings

Calling functions in the webview from deno
Calling deno from webview

To call deno externals from the webview an invoke handler function will be needed. I tried to implement it in src/lib.rs:111 but to no avail. We will also need to implement a way of calling deno callbacks from rust. To do this we will most likely use a polling solution like signal or fs events.

_{Help from some rust wizard would be pretty nice :)}

how load local path page?

eg:
const webview3 = new WebView({
title: "Multiple deno_webview example",
url: './src/view/index.html',
width: 400,
height: 200,
resizable: true,
debug: true,
frameless: false,
});

Unable to load local webserver webpages

I'm trying to load webpages from local, but it doesn't load.
Is there any alternative way to achieve it?

import { WebView } from "https://deno.land/x/webview/mod.ts";


await new WebView({
  title: "Remote deno_webview example",
  url: `http://127.0.0.1:8080/index.html`,
  width: 800,
  height: 600,
  resizable: true,
  debug: true,
  frameless: false,
}).run();