refactor(tauri): inject script with webview init API (#1186)

Author: lucasfernog

.changes/refactor-tauri-entry.md

@@ -0,0 +1,7 @@
+---
+"tauri": minor
+---
+
+The Tauri script is now injected with the webview `init` API, so it is available after page changes.
+It will no longer be injected on `${distDir}/index.tauri.html`, but we will add a `${distDir}/__tauri.js` file to read it at app compile time.
+You should add that to your `.gitignore` file.

cli/core/Cargo.lock

@@ -25,7 +25,6 @@ tiny_http = "0.8"
 attohttpc = "0.16"
 url = "2.2"
 http = "0.2"
-handlebars = "3.5"
 notify = "4.0"
 shared_child = "0.3"
 toml_edit = "0.2"

cli/core/Cargo.toml

@@ -8,7 +8,7 @@ use crate::helpers::{
   config::get as get_config,
   execute_with_output,
   manifest::rewrite_manifest,
-  TauriHtml,
+  TauriHtml, TauriScript,
 };
 use std::env::{set_current_dir, set_var};
 use std::fs::read_to_string;
@@ -97,15 +97,23 @@ impl Build {
     let config_guard = config.lock().unwrap();
     let config_ = config_guard.as_ref().unwrap();
 
+    // index.tauri.html
     let index_html_path = PathBuf::from(&config_.build.dist_dir).join("index.html");
     let tauri_html = TauriHtml::new(&config_.build.dist_dir, read_to_string(index_html_path)?)
       .inliner_enabled(config_.tauri.inliner.active && !config_.tauri.embedded_server.active)
-      .global_tauri(config_.build.with_global_tauri)
-      .generate()?;
+      .get()?;
     let tauri_index_html_path = PathBuf::from(&config_.build.dist_dir).join("index.tauri.html");
     let mut tauri_index_html_file = File::create(tauri_index_html_path)?;
     tauri_index_html_file.write_all(tauri_html.as_bytes())?;
 
+    // __tauri.js
+    let tauri_script = TauriScript::new()
+      .global_tauri(config_.build.with_global_tauri)
+      .get();
+    let tauri_script_path = PathBuf::from(&config_.build.dist_dir).join("__tauri.js");
+    let mut tauri_script_file = File::create(tauri_script_path)?;
+    tauri_script_file.write_all(tauri_script.as_bytes())?;
+
     let settings = settings_builder.build()?;
 
     if let Some(before_build) = &config_.build.before_build_command {

cli/core/src/build.rs

@@ -2,7 +2,7 @@ use crate::helpers::{
   app_paths::{app_dir, tauri_dir},
   config::{get as get_config, reload as reload_config, ConfigHandle},
   manifest::rewrite_manifest,
-  Logger, TauriHtml,
+  Logger, TauriHtml, TauriScript,
 };
 
 use attohttpc::{Method, RequestBuilder};
@@ -14,6 +14,9 @@ use url::Url;
 
 use std::env::set_var;
 use std::ffi::OsStr;
+use std::fs::File;
+use std::io::Write;
+use std::path::PathBuf;
 use std::process::{exit, Command};
 use std::sync::mpsc::{channel, Receiver};
 use std::sync::{Arc, Mutex};
@@ -138,6 +141,18 @@ impl Dev {
 
     rewrite_manifest(config.clone())?;
 
+    // __tauri.js
+    {
+      let config_guard = config.lock().unwrap();
+      let config_ = config_guard.as_ref().unwrap();
+      let tauri_script = TauriScript::new()
+        .global_tauri(config_.build.with_global_tauri)
+        .get();
+      let tauri_script_path = PathBuf::from(&config_.build.dist_dir).join("__tauri.js");
+      let mut tauri_script_file = File::create(tauri_script_path)?;
+      tauri_script_file.write_all(tauri_script.as_bytes())?;
+    }
+
     let (child_wait_tx, child_wait_rx) = channel();
     let child_wait_rx = Arc::new(Mutex::new(child_wait_rx));
 
@@ -250,9 +265,7 @@ fn proxy_dev_server(config: ConfigHandle, dev_path: &Url, dev_port: u16) -> crat
       let config_guard = config.lock().unwrap();
       let config = config_guard.as_ref().unwrap();
       let response = request_builder.send()?.text()?;
-      let tauri_html = TauriHtml::new(&config.build.dist_dir, response)
-        .global_tauri(config.build.with_global_tauri)
-        .generate()?;
+      let tauri_html = TauriHtml::new(&config.build.dist_dir, response).get()?;
       request.respond(Response::from_data(tauri_html))?;
     } else {
       let response = request_builder.send()?.bytes()?;

cli/core/src/dev.rs

@@ -2,10 +2,10 @@ pub mod app_paths;
 pub mod config;
 mod logger;
 pub mod manifest;
-mod tauri_html;
+mod tauri_entry;
 
 pub use logger::Logger;
-pub use tauri_html::TauriHtml;
+pub use tauri_entry::{TauriHtml, TauriScript};
 
 use std::io::{BufRead, BufReader};
 use std::process::{Command, Stdio};

cli/core/src/helpers/mod.rs

@@ -0,0 +1,68 @@
+use kuchiki::traits::*;
+use tauri_inliner::inline_html_string;
+
+use std::path::PathBuf;
+
+pub struct TauriHtml {
+  original: String,
+  html_dir: PathBuf,
+  inliner_enabled: bool,
+}
+
+impl TauriHtml {
+  pub fn new(html_dir: impl Into<PathBuf>, html: String) -> Self {
+    Self {
+      original: html,
+      html_dir: html_dir.into(),
+      inliner_enabled: false,
+    }
+  }
+
+  pub fn inliner_enabled(mut self, enabled: bool) -> Self {
+    self.inliner_enabled = enabled;
+    self
+  }
+
+  pub fn get(self) -> crate::Result<String> {
+    let html = if self.inliner_enabled {
+      inline_html_string(&self.original, self.html_dir, Default::default())?
+    } else {
+      self.original
+    };
+
+    let new_html = kuchiki::parse_html().one(html).to_string();
+
+    Ok(new_html)
+  }
+}
+
+#[derive(Default)]
+pub struct TauriScript {
+  global_tauri: bool,
+}
+
+impl TauriScript {
+  pub fn new() -> Self {
+    Default::default()
+  }
+
+  pub fn global_tauri(mut self, global_tauri: bool) -> Self {
+    self.global_tauri = global_tauri;
+    self
+  }
+
+  pub fn get(self) -> String {
+    let mut scripts = Vec::new();
+    scripts.push(include_str!("../templates/tauri.js"));
+    scripts.push(include_str!("../templates/mutation-observer.js"));
+
+    if self.global_tauri {
+      scripts.insert(
+        0,
+        include_str!(concat!(env!("OUT_DIR"), "/tauri.bundle.umd.js")),
+      );
+    }
+
+    scripts.join("\n\n")
+  }
+}

cli/core/src/helpers/tauri_entry.rs

@@ -1,4 +1,4 @@
-(function () {
+function __tauri_mutation_observer (target) {
   function loadAsset(path, type) {
     if (path) {
       window.__TAURI__.loadAsset(path, type)
@@ -23,14 +23,25 @@
     })
   })
 
-  {{#if (eq target "body")}}
-    var target = document.documentElement
-  {{ else }}
-    var target = document.head
-  {{/if}}
-
   observer.observe(target, {
     childList: true,
     subtree: true
   })
-})()
+}
+
+__tauri_mutation_observer(document.documentElement)
+if (
+  document.readyState === 'complete' ||
+  document.readyState === 'interactive'
+) {
+  __tauri_mutation_observer(document.head)
+} else {
+  window.addEventListener(
+    'DOMContentLoaded',
+    function () {
+      __tauri_mutation_observer(document.head)
+    },
+    true
+  )
+}
+

cli/core/src/helpers/tauri_html.rs

@@ -116,15 +116,29 @@ if (!String.prototype.startsWith) {
         delete window[callback]
       }, true)
 
-      window.__TAURI_INVOKE_HANDLER__(
-        _objectSpread(
-          {
-            callback: callback,
-            error: error
-          },
-          args
+      if (window.__TAURI_INVOKE_HANDLER__) {
+        window.__TAURI_INVOKE_HANDLER__(
+          _objectSpread(
+            {
+              callback: callback,
+              error: error
+            },
+            args
+          )
         )
-      )
+      } else {
+        window.addEventListener('DOMContentLoaded', function () {
+          window.__TAURI_INVOKE_HANDLER__(
+            _objectSpread(
+              {
+                callback: callback,
+                error: error
+              },
+              args
+            )
+          )
+        })
+      }
     })
   }
 

cli/core/src/templates/mutation-observer.js

@@ -1 +1,2 @@
-dist/index.tauri.html
+dist/index.tauri.html
+dist/__tauri.js

cli/core/src/templates/tauri.js

@@ -1,2 +1,3 @@
 src-tauri
 dist/index.tauri.html
+dist/__tauri.js