Document DOM manipulation/access in onstate

[kaisermann]

Related to: sveltejs/svelte#1522 (comment)

My first attempt:

...
<script>
  export default {
    onstate({ changed, current, previous }) {
      /**
       * This fires on every state change, before the render.
       * The first time it runs, `previous` is undefined.
       *
       * Since this happens before the actual render, any manual
       * DOM access/manipulation should be done in the 'onupdate' lifecycle.
       */
      if (changed.time) {
        console.log(`time changed: ${previous && previous.time} -> ${current.time}`);
      }
    },

    oncreate() {
      /** This fires when the component has been rendered to the DOM */
      console.log('in oncreate');

      this.interval = setInterval(() => {
        this.set({ time: new Date() });
      }, 1000);
    },

    onupdate({ changed, current, previous }) {
      /**
       * This fires after 'oncreate', and after every state
       * change once the DOM is synchronised with the data
       */
      console.log(`The DOM has been updated`);
    },

    ondestroy() {
      /** This fires when the component is removed from the DOM */
      console.log('in ondestroy');

      clearInterval(this.interval);
    }
  }
  ...
</script>

cc @jacwright

[jacwright]

This looks correct and works for me in the REPL. I'm not sure what the issue is. Could you elaborate?

[kaisermann]

Oh my bad, it's an attempt to document what was said at sveltejs/svelte#1522. Maybe I should've made a PR instead...