Add ability to reflect prop changes back to attributes

[patricknelson]

Describe the problem

Currently it's not possible to reflect prop changes in the custom element attributes.

Describe the proposed solution

Due limitations caused by the fact that svelte-retag isn't able to hook into Svelte compiler options (at least not for now), the developer must first manually enable accessors in their component like so:

<svelte:options accessors />

svelte-retag would then add a new props option (if not already present, see #13) and include a reflect option, e.g.

svelteRetag({
  component: HelloWorld,
  tagname: 'hello-world',
  props: {
    greetPerson: { reflect: true },
  }
});

Once configured, modifications to greetPerson from within the component would be reflected in the greetperson custom element attribute.

Implementation Details

• The attribute MutationObserver should be aware of reflected changes to prevent infinite loops.

• See if possible to automate setting of accessors option if already hooking into compiler process

• To watch for updates, one would have to utilize the after_updates array available on the component instance, e.g.

  tag.componentInstance.$$.after_update.push(() => {
  	tag.setAttribute('greetperson', tag.componentInstance.greetPerson);
  });

Alternatives considered

None.

Importance

nice to have