diff --git a/11.-API.md b/11.-API.md new file mode 100644 index 0000000..9e54870 --- /dev/null +++ b/11.-API.md @@ -0,0 +1,128 @@ +# API + +The Tauri API is a set of opt-in tools that you can enable in order to do things like read and write from the filesystem and pass messages back and forth between the WebView and Rust. There are two parts to it, the Rust API and the JS API. The former is consumed in your `src-tauri/src/main.rs` file, and the latter is available at either the `window.tauri` object or just `tauri` - depending on your integration technique. + +## Installation +If you want to use the API, you will need to first enable the parts of the API that you want to use by "whitelisting" them: + +### Whitelist +Edit +``` +"tauri": { + "whitelist": { // all whitelist values are default:false + "all": false, // use this flag to enable all API features + "answer": false, // enable rust to direct the UI + "event": false, // enable listening to messages from webview + "execute": false, // enable binary execution + "listFiles": false, // get a list of files in a directory + "open": false, // open link in the user's default browser + "readBinaryFile": false, // read binary file from local filesystem + "readTextFile": false, // read text file from local filesystem + "setTitle": false, // set the webview window title + "writeFile": false // write file to local filesystem + } +} +``` + +Then you will have to choose how to integrate it into your UI. There are two suggested methods: +- Use the webpack plugin (tighter integration, more complicated) +- Inject the official helper (easier) + +### Webpack Plugin +Webpack will take care of everything for you, so after you have this done right, you can use `window.tauri` wherever you need to. +#### Installation +```bash +yarn add @tauri-apps/tauri-webpack +``` + +#### Integration +In your webpack config, add the following: +```js +chainWebpack (chain) { + require('@tauri-apps/tauri-webpack').chain(chain, { + tauriLazyLoading: !ctx.dev + }) +} +``` + +### Official Helper +Somewhat easier is to add tauri to the dev dependencies of your project: +``` +yarn add --dev tauri +``` +and then import the Tauri api in the file where you want to consume the Tauri API (or in some other rigging location): +```js +import tauri from 'tauri/api' +``` + + +## Example API integration + +Here is an example from Quasar, which you can find in the [examples here](https://github.com/tauri-apps/tauri/tree/dev/examples/vue/quasar-app): + +Some js file: +```js +import { uid } from 'quasar' +import tauri from 'tauri/api' + +export default { + name: 'HelloWorld', + data () { + return { + msg: 'waiting for rust' + } + }, + mounted () { + tauri.listen('reply', res => { + this.msg = res.payload.msg + }) + }, + methods: { + // set up an event listener + eventToRust () { + tauri.emit('hello', uid()) + } + } +} +``` + +`src-tauri/src/main.rs` +```rust +mod cmd; + +#[macro_use] +extern crate serde_derive; +extern crate serde_json; + +fn main() { + tauri::AppBuilder::new() + .setup(|_webview| { + let handle = _webview.handle(); + tauri::event::listen(String::from("hello"), move |msg| { + #[derive(Serialize)] + pub struct Reply { + pub msg: String, + pub rep: String, + } + + let reply = Reply { + msg: format!("{}", msg).to_string(), + rep: "something else".to_string(), + }; + + tauri::event::emit( + &handle, + String::from("reply"), + serde_json::to_string(&reply).unwrap(), + ); + + println!("Message from emit:hello => {}", msg); + }); + }) + .build() + .run(); +} +``` + +# Next Step: +[CLI]()