Svelte Example

Using Nativify with Svelte.

App.svelte

<script>
  import WebBridge from './lib/web-bridge.js';
  import { onMount, onDestroy } from 'svelte';

  const bridge = new WebBridge({ debug: true });
  let logs = 'Ready...';
  let watcher = null;

  function log(msg) {
    logs = JSON.stringify(msg, null, 2) + '\n' + logs;
  }

  async function login() {
    try {
      const res = await bridge.login('user_svelte', 'token');
      log(res);
    } catch (e) { log(e.message); }
  }

  async function getLocation() {
    const loc = await bridge.getLocation();
    log(loc);
  }

  async function toggleWatch() {
    if (watcher) {
      watcher.stop();
      watcher = null;
      log('Stopped');
    } else {
      const res = await bridge.watchLocation(l => log(l));
      watcher = res; // object with stop()
      log('Started');
    }
  }

  async function takePhoto() {
    const res = await bridge.takePhoto();
    log('Photo captured!');
  }

  onDestroy(() => {
    if (watcher) watcher.stop();
  });
</script>

<main>
  <h1>Svelte Bridge</h1>
  
  <div class="controls">
    <button on:click={login}>Login</button>
    <button on:click={getLocation}>Get Location</button>
    <button on:click={toggleWatch}>
      {watcher ? 'Stop Watch' : 'Start Watch'}
    </button>
    <button on:click={takePhoto}>Take Photo</button>
    <button on:click={() => bridge.showToast('Hi Svelte')} >Toast</button>
  </div>

  <pre>{logs}</pre>
</main>