Search code examples
javascriptgoogle-signinsveltesapper

Call Svelte component's function from global scope

I am creating a Sapper page, where I'd like to use Google Sign-in button. It requires data-onsuccess attribute to specify callback function. From what I was able to discover from Google's platform JS library, it looks for the function in the global/window scope.

Is there a way to access/call Svelte's component function from global webpage scope? It might be of use for interop with external libraries which cannot be loaded through import right into the component.

Example of what I am trying to do:

<script>
  function onSignComponent(user){
    console.log('Signed in');
  }
</script>

<div id="login" class="g-signin2" data-onsuccess="{onSignComponent}" data-theme="dark" />

This work when onSignComponent is in global scope but not when it is in component scope.

Solution

  • The easiest way to do this is just to put the function on window inside the component:

    <script>
  window.onSignIn = user => {
    // ...
  };
</script>

<div id="login" class="g-signin2" data-onsuccess="onSignIn" data-theme="dark" />