feature: import official webview rust binding (#846)

Co-authored-by: Lucas Nogueira <lucas@tauri.studio>

Author: Ngo Iok Ui (Wu Yu Wei)

.changes/tauri-webview.md

@@ -0,0 +1,8 @@
+---
+"tauri": minor
+---
+
+Moving the webview implementation to [webview](https://github.com/webview/webview), with the [official Rust binding](https://github.com/webview/webview_rust).
+This is a breaking change.
+IE support has been dropped, so the `edge` object on `tauri.conf.json > tauri` no longer exists and you need to remove it.
+`webview.handle()` has been replaced with `webview.as_mut()`.

cli/tauri.js/api-src/tauri.ts

@@ -1,6 +1,6 @@
 declare global {
-  interface External {
-    invoke: (command: string) => void
+  interface Window {
+    __TAURI_INVOKE_HANDLER__: (command: string) => void
   }
 }
 
@@ -21,7 +21,7 @@ function uid(): string {
  * @param args
  */
 function invoke(args: any): void {
-  window.external.invoke(typeof args === 'object' ? JSON.stringify(args) : args)
+  window.__TAURI_INVOKE_HANDLER__(args)
 }
 
 function transformCallback(callback?: (response: any) => void, once = false): string {

cli/tauri.js/src/api/info.ts

@@ -192,10 +192,6 @@ async function printAppInfo(tauriDir: string): Promise<void> {
       key: '  CSP',
       value: config.tauri.security ? config.tauri.security.csp : 'unset'
     })
-    printInfo({
-      key: '  Windows',
-      value: config.tauri.edge?.active ? 'Edge' : 'MSHTML'
-    })
     printInfo({
       key: '  distDir',
       value: config.build

cli/tauri.js/src/helpers/tauri-config.ts

@@ -54,9 +54,6 @@ const getTauriConfig = (cfg: Partial<TauriConfig>): TauriConfig => {
         security: {
           csp: "default-src blob: data: filesystem: ws: http: https: 'unsafe-eval' 'unsafe-inline'"
         },
-        edge: {
-          active: true
-        },
         inliner: {
           active: true
         }

cli/tauri.js/src/runner.ts

@@ -117,7 +117,7 @@ class Runner {
             self.__parseHtml(cfg, indexDir, false)
               .then(({ html }) => {
                 const headers: { [key: string]: string } = {}
-                if(proxyRes.headers['content-type']) {
+                if (proxyRes.headers['content-type']) {
                   headers['content-type'] = proxyRes.headers['content-type']
                 } else {
                   const charsetMatch = /charset="(\S+)"/g.exec(bodyStr)
@@ -527,10 +527,6 @@ class Runner {
       tomlFeatures.push(...whitelist.map(toKebabCase))
     }
 
-    if (cfg.tauri.edge.active) {
-      tomlFeatures.push('edge')
-    }
-
     if (cfg.tauri.cli) {
       tomlFeatures.push('cli')
     }

cli/tauri.js/src/template/defaultConfig.ts

@@ -45,9 +45,6 @@ export default {
     security: {
       csp: "default-src blob: data: filesystem: ws: http: https: 'unsafe-eval' 'unsafe-inline'"
     },
-    edge: {
-      active: true
-    },
     inliner: {
       active: true
     }

cli/tauri.js/src/types/config.schema.json

@@ -391,17 +391,6 @@
           "$ref": "#/definitions/CliConfig",
           "description": "app's CLI definition"
         },
-        "edge": {
-          "additionalProperties": false,
-          "defaultProperties": [
-          ],
-          "properties": {
-            "active": {
-              "type": "boolean"
-            }
-          },
-          "type": "object"
-        },
         "embeddedServer": {
           "additionalProperties": false,
           "defaultProperties": [
@@ -496,7 +485,6 @@
       },
       "required": [
         "bundle",
-        "edge",
         "embeddedServer",
         "inliner",
         "security",

cli/tauri.js/src/types/config.ts

@@ -285,9 +285,6 @@ export interface TauriConfig {
     security: {
       csp?: string
     }
-    edge: {
-      active?: boolean
-    }
     inliner: {
       active?: boolean
     }

cli/tauri.js/src/types/config.validator.ts

@@ -401,17 +401,6 @@ export const TauriConfigSchema = {
           "$ref": "#/definitions/CliConfig",
           "description": "app's CLI definition"
         },
-        "edge": {
-          "additionalProperties": false,
-          "defaultProperties": [
-          ],
-          "properties": {
-            "active": {
-              "type": "boolean"
-            }
-          },
-          "type": "object"
-        },
         "embeddedServer": {
           "additionalProperties": false,
           "defaultProperties": [
@@ -506,7 +495,6 @@ export const TauriConfigSchema = {
       },
       "required": [
         "bundle",
-        "edge",
         "embeddedServer",
         "inliner",
         "security",

cli/tauri.js/templates/tauri.js

@@ -6,31 +6,29 @@ if (!String.prototype.startsWith) {
   }
 }
 
-// makes the window.external.invoke API available after window.location.href changes
-switch (navigator.platform) {
-  case "Macintosh":
-  case "MacPPC":
-  case "MacIntel":
-  case "Mac68K":
-    window.external = this
-    invoke = function (x) {
-      webkit.messageHandlers.invoke.postMessage(x);
-    }
-    break;
-  case "Windows":
-  case "WinCE":
-  case "Win32":
-  case "Win64":
-    break;
-  default:
-    window.external = this
-    invoke = function (x) {
-      window.webkit.messageHandlers.external.postMessage(x);
+(function () {
+  function webviewBind (name) {
+    var RPC = window._rpc = (window._rpc || { nextSeq: 1 });
+    window[name] = function () {
+      var seq = RPC.nextSeq++;
+      var promise = new Promise(function (resolve, reject) {
+        RPC[seq] = {
+          resolve: resolve,
+          reject: reject,
+        };
+      });
+      window.external.invoke(JSON.stringify({
+        id: seq,
+        method: name,
+        params: Array.prototype.slice.call(arguments),
+      }));
+      return promise;
     }
-    break;
-}
+  }
+  if (!window.__TAURI_INVOKE_HANDLER__) {
+    webviewBind('__TAURI_INVOKE_HANDLER__')
+  }
 
-(function () {
   function s4() {
     return Math.floor((1 + Math.random()) * 0x10000)
       .toString(16)
@@ -89,9 +87,6 @@ switch (navigator.platform) {
   if (!window.__TAURI__) {
     window.__TAURI__ = {}
   }
-  window.__TAURI__.invoke = function invoke(args) {
-    window.external.invoke(JSON.stringify(args))
-  }
 
   window.__TAURI__.transformCallback = function transformCallback(callback) {
     var once = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false
@@ -109,10 +104,10 @@ switch (navigator.platform) {
   }
 
   window.__TAURI__.promisified = function promisified(args) {
-    var _this = this;
+    var _this = this
 
     return new Promise(function (resolve, reject) {
-      _this.invoke(_objectSpread({
+      window.__TAURI_INVOKE_HANDLER__(_objectSpread({
         callback: _this.transformCallback(resolve),
         error: _this.transformCallback(reject)
       }, args))
@@ -127,19 +122,6 @@ switch (navigator.platform) {
     })
   }
 
-  // init tauri API
-  try {
-    window.__TAURI__.invoke({
-      cmd: 'init'
-    })
-  } catch (e) {
-    window.addEventListener('DOMContentLoaded', function () {
-      window.__TAURI__.invoke({
-        cmd: 'init'
-      })
-    }, true)
-  }
-
   document.addEventListener('error', function (e) {
     var target = e.target
     while (target != null) {
@@ -161,7 +143,7 @@ switch (navigator.platform) {
       while (target != null) {
         if (target.matches ? target.matches('a') : target.msMatchesSelector('a')) {
           if (target.href && target.href.startsWith('http') && target.target === '_blank') {
-            window.__TAURI__.invoke({
+            window.__TAURI_INVOKE_HANDLER__({
               cmd: 'open',
               uri: target.href
             })