Docs mentioning SFC do not demonstrate an SFC

[mikemaccana]

Current documentation

From https://svelte.technology/guide#understanding-svelte-components

A component is a reusable self-contained block of code that encapsulates markup, styles and behaviours that belong together.
Like Ractive and Vue, Svelte promotes the concept of single-file components: a component is just an .html file. Here's a simple example:

<h1>Hello {name}!</h1>

As only HTML is used in the .html file, this is either not a demonstration of, or a poor demonstration of the concept of including JS, HTML and CSS in a single file.

Additionally, since the file is called .html there is nothing to suggest there should be more inside the file than what is shown, ie, HTML.

Furthermore the component has data that is given to it later, on instatiation.

Suggestion

In the example below, I have avoided the use of obtuse language, tightened the copy and avoided the term 'SFC' as it does not serve a purpose - Svelte components are explained to be in a single file, we do not need a new acronym for this

Understanding Svelte components

Svelte applications are made from one or more components. In Svelte, like other frameworks, a component is a reusable self-contained block of code with HTML, CSS and JS in a single file.

<h1>Hello {name}!</h1>

<script>
	export default {
		data: function(){
			return {
				name: Joe
			}
		}
	}
</script>

<style>
    h1 {
        color: red;
    }
</style>

[PaulMaly]

@mikemaccana Actually, no one section is mandatory. Not only "hello world" component can be developed without any additional behavior or scoped styles:

https://svelte.technology/repl?version=2.9.5&gist=71f7b936db3d3cbe2fe6577d7f461395

So, perhaps, in docs just described how simple Svelte-component is.

[mikemaccana]

@PaulMaly indeed not all the sections are mandatory - we could certainly have an even more minimal example per your REPL link.

The question is how well does it illustrate the concept of a single file component? The purpose of documentation is to explain things to users, not to be ultra optimised.

[mikemaccana]

Moved to sveltejs/v2.svelte.dev#333 as requested.