Svelte: Allow `anchor` to be passed in initial component instantiation

[amwmedia]

Hi, just started using svelte and I'm really liking it so far!

What do you think about allowing the initial config object to contain an anchor attribute so the component could be bootstrapped at a particular place in the dom?

In practice it would look something like this:

const target = document.querySelector('main');
const anchor = target.getElementById('somechild');
const app = new App({
    target,
    anchor,
    data: { name: 'yo yo' }
});

I have this working in my fork, the change is incredibly small.

Thanks!

[Rich-Harris]

Yeah, I don't see any good reason not to do this. Would you be up for making a PR (ideally with a test)?

[amwmedia]

will do! thanks for the quick response. I'll get the PR ready 👍

[amwmedia]

PR in the hole! I couldn't think of a better way to unit test this with the existing test framework because it's code that runs at instantiation time (not build time). I updated the expectations, but let me know if I'm missing something else.

[Rich-Harris]

Thank you! Released as 1.32

[ekhaled]

Sorry if I am being a bit thick, but, what's the difference between target and anchor?

The docs are a bit lacking and I can't figure out what anchor does as opposed to target

[amwmedia]

when you specify target, svelte appends the svelte component markup to the end of the target. anchor can be used to pass a child of target as a place where the svelte component markup should be added (instead of to the end).

I hope that was clear 😄

[ekhaled]

Thanks for the clarification 😄

I was under the impression it innerHTML-ed the target instead of appending to it.

Even then, can't we just have a more specific selector in target to achieve the same result? For example document.querySelector('main #somechild')

[amwmedia]

do that would make your svelte component markup a child of #somechild instead of a sibling to it.

[ekhaled]

Ah, I see.
Thanks for clearing that up. Much appreciated 😀