title: Accessing Svelte component properties in a callback?
body: <p>Imagine that you have a lot of properties in a component:</p>
  
  <pre class="lang-js prettyprint-override"><code>let a = 'foo';
  let b = 'bar';
  // ...
  let z = 'baz';
  </code></pre>
  
  <p>You then want to do something like update all of them from an external callback, like in another library (i.e. something that isn't and can't be a Svelte component itself).</p>
  
  <p>A simple use case is just an AJAX method to load in a bunch of data (assume this ajax function works and you can pass it a callback):</p>
  
  <pre class="lang-js prettyprint-override"><code>onMount(async function() {
    ajax('/data', function(data) {
      a = data.a;
      b = data.b;
      // ...
      z = data.z;
    });
  });
  </code></pre>
  
  <p>This works, but it's incredibly boilerplaty. What I'd really like is a way to loop through all the properties so they can be assigned to programmatically, especially without prior knowledge on the outside library/callback's part.</p>
  
  <p>Is there no way to get access to a Svelte component and its properties so you can loop through them and assign them from an outside function?</p>
  
  <p>Vue has a simple solution to this, because you can pass the component around, and still check and assign to its properties:</p>
  
  <pre class="lang-js prettyprint-override"><code>var vm = this;
  ajax('/data', function(data) {
    for (var key in data) {
      if (vm.hasOwnProperty(key)) {
        vm[key] = data[key];
      }
    });
  });
  </code></pre>
  
  <p>I have seen some solutions to this, but they're all outdated - none of them work with Svelte 3.</p>
  
  <p>Apologies if this has been asked before. I've spent days trying to figure this out to avoid all that extra boilerplate and the closest I could find is <a href="https://stackoverflow.com/questions/57571882/access-component-object-in-external-callback">Access Component Object in External Callback?</a> which does not have an answer right now.</p>