Svelte: Documentation suggestion: clearly state how scope works in Svelte HTML files

[aickin]

Congrats on your launch! I'm excited by the idea and trying to wrap my brain around the concepts.

Take it or leave it, but one thing that was quite confusing to me while reading the docs was how variables are scoped and this is managed, and I think it could be made clearer. A few questions, for example:

• Are top-level variables in the <script> chunks addressable in html?
• What about named exports from the <script> chunk?
• The <script> default export exposes data, helpers, and methods to the html at the top level. It also exposes computed, but as values, not methods. Are any other parts of the default export exposed, and if so, how?
• It seems that methods are called with a this pointer. Does this always refer to the component, or does it sometimes refer to the DOM node, as would normally happen in event handlers? Do any other methods get this pointers (helpers or function values in data)?
• What happens in case of name collisions in data, helpers, methods, and computed?

I know this may seem pedantic, but questions like these are genuinely what I was thinking about as I read the doc and the TodoMVC code. The magic that connects the script section to the HTML template is the most confusing part to me by far, at least at this early point.

Thanks again for your hard work!

[Rich-Harris]

This is all excellent feedback, thanks. Will work more on the docs when I can, but briefly:

• Properties of data and computed can be used in mustache tags and as arguments to event handlers. The same goes for helpers, which is really just an extension of data (but I've found a lot of people get weirded out by having functions in an object called 'data')
• methods are added to the component's prototype – i.e. if you have a foo method than you will be able to do component.foo(...) in your app. You can also call methods (built-in or custom) inside event handlers in your template – in an on:somevent='foo(bar)' directive, foo(...) must be a method, bar must be a property of data or computed
• Inside a method, this is always the component
• In the event handler itself, this is the node – so <input on:input='log(this.value)'> means 'call the log method with the value of the the <input>'. Demo: https://svelte.technology/repl/?gist=b709873e61bbf7fed5d84ab0ca14ea86
• Name collisions will cause a compile time error – the compiler is strict, it won't let you make that sort of mistake

Hope this sheds some light!

[Conduitry]

Scope is a bit simpler in v3, and I think adequately covered in the documentation. Closing.