Add more level 4 headings, fixes some typos

site/content/docs/02-template-syntax.md

@@ -330,7 +330,7 @@ If the `on:` directive is used without a value, the component will *forward* the
 
 ---
 
-Components can emit events using [createEventDispatcher](#docs/createEventDispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
+Components can emit events using [createEventDispatcher](docs#createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
 
 ```html
 <SomeComponent on:whatever={handler}/>
@@ -340,7 +340,9 @@ Components can emit events using [createEventDispatcher](#docs/createEventDispat
 
 ### Element bindings
 
-* `bind:property={value}`
+* `bind:property={variable}`
+* `bind:group={variable}`
+* `bind:this={dom_node}`
 
 ---
 
@@ -374,6 +376,8 @@ Numeric input values are coerced; even though `input.value` is a string as far a
 <input type="range" bind:value={num}>
 ```
 
+#### Binding related elements
+
 ---
 
 Inputs that work together can use `bind:group`.
@@ -396,6 +400,8 @@ Inputs that work together can use `bind:group`.
 <input type="checkbox" bind:group={fillings} value="Guac (extra)">
 ```
 
+#### Binding `<select>` value
+
 ---
 
 A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).
@@ -434,6 +440,8 @@ When the value of an `<option>` matches its text content, the attribute can be o
 </select>
 ```
 
+#### Media elements bindings
+
 ---
 
 Media elements (`<audio>` and `<video>`) have their own set of bindings — four *readonly* ones...
@@ -462,16 +470,28 @@ Media elements (`<audio>` and `<video>`) have their own set of bindings — four
 ></video>
 ```
 
+#### Block-level elements bindings
+
 ---
 
-Block-level elements have readonly `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings, measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/).
+Block-level elements have 4 readonly bindings, measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):
+
+* `clientWidth`
+* `clientHeight`
+* `offsetWidth`
+* `offsetHeight`
 
 ```html
-<div bind:offsetWidth={width} bind:offsetHeight={height}>
+<div
+	bind:offsetWidth={width}
+	bind:offsetHeight={height}
+>
 	<Chart {width} {height}/>
 </div>
 ```
 
+#### Binding a DOM node
+
 ---
 
 To get a reference to a DOM node, use `bind:this`.
@@ -494,7 +514,8 @@ To get a reference to a DOM node, use `bind:this`.
 
 ### Component bindings
 
-* `bind:property={value}`
+* `bind:property={variable}`
+* `bind:this={component_instance}`
 
 ---
 
@@ -652,6 +673,8 @@ The `in:` and `out:` directives are not bidirectional. An in transition will con
 {/if}
 ```
 
+#### Transition parameters
+
 ---
 
 Like actions, transitions can have parameters.
@@ -666,6 +689,8 @@ Like actions, transitions can have parameters.
 {/if}
 ```
 
+#### Custom transition functions
+
 ---
 
 Transitions can use custom functions. If the returned object has a `css` function, Svelte will create a CSS animation that plays on the element.
@@ -741,6 +766,8 @@ If a transition returns a function instead of a transition object, the function
 
 ---
 
+#### Transitions events
+
 An element with transitions will dispatch the following events in addition to any standard DOM events:
 
 * `introstart`
@@ -825,7 +852,7 @@ Named slots allow consumers to target specific areas. They can also have fallbac
 
 <!-- Widget.svelte -->
 <div>
-	<slot name"header">No header was provided</slot>
+	<slot name="header">No header was provided</slot>
 	<p>Some content between header and footer</p>
 	</slot name="footer"></slot>
 </div>
@@ -988,7 +1015,7 @@ This element makes it possible to insert elements into `document.head`. During s
 
 ---
 
-The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the next section. The possible options are:
+The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](docs#compile). The possible options are:
 
 * `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
 * `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed

site/content/docs/03-run-time.md

@@ -3,10 +3,12 @@ title: Run time
 ---
 
 
-### svelte
+### `svelte`
 
 The `svelte` package exposes [lifecycle functions](tutorial/onmount) and the [context API](tutorial/context-api).
 
+#### `onMount`
+
 * `onMount(callback: () => void)`
 * `onMount(callback: () => () => void)`
 
@@ -44,7 +46,9 @@ If a function is returned from `onMount`, it will be called when the component i
 </script>
 ```
 
-* `beforeUpdate(callback: () => void)`
+#### `beforeUpdate`
+
+`beforeUpdate(callback: () => void)`
 
 ---
 
@@ -62,7 +66,9 @@ Schedules a callback to run immediately before the component is updated after an
 </script>
 ```
 
-* `afterUpdate(callback: () => void)`
+#### `afterUpdate`
+
+`afterUpdate(callback: () => void)`
 
 ---
 
@@ -78,7 +84,9 @@ Schedules a callback to run immediately after the component has been updated.
 </script>
 ```
 
-* `onDestroy(callback: () => void)`
+#### `onDestroy`
+
+`onDestroy(callback: () => void)`
 
 ---
 
@@ -96,7 +104,9 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
 </script>
 ```
 
-* `promise: Promise = tick()`
+#### `tick`
+
+`promise: Promise = tick()`
 
 ---
 
@@ -114,7 +124,9 @@ Returns a promise that resolves once any pending state changes have been applied
 </script>
 ```
 
-* `setContext(key: any, context: any)`
+#### `setContext`
+
+`setContext(key: any, context: any)`
 
 ---
 
@@ -130,7 +142,9 @@ Like lifecycle functions, this must be called during component initialisation.
 </script>
 ```
 
-* `context: any = getContext(key: any)`
+#### `getContext`
+
+`context: any = getContext(key: any)`
 
 ---
 
@@ -144,9 +158,12 @@ Retrieves the context that belongs to the closest parent component with the spec
 </script>
 ```
 
+#### `createEventDispatcher`
 
+TODO
 
-### svelte/store
+
+### `svelte/store`
 
 The `svelte/store` module exports functions for creating [stores](tutorial/writable-stores).
 
@@ -182,6 +199,8 @@ Stores have special significance inside Svelte components. Their values can be r
 </button>
 ```
 
+#### `writable`
+
 * `store = writable(value: any)`
 * `store = writable(value: any, (set: (value: any) => void) => () => void)`
 
@@ -224,7 +243,9 @@ const unsubscribe = count.subscribe(value => {
 unsubscribe(); // logs 'no more subscribers'
 ```
 
-* `store = readable(value: any, (set: (value: any) => void) => () => void)`
+#### `readable`
+
+`store = readable(value: any, (set: (value: any) => void) => () => void)`
 
 ---
 
@@ -244,6 +265,8 @@ const time = readable(new Date(), set => {
 });
 ```
 
+#### `derive`
+
 * `store = derive(a, callback: (a: any) => any)`
 * `store = derive(a, callback: (a: any, set: (value: any) => void) => void)`
 * `store = derive([a, ...b], callback: ([a: any, ...b: any[]]) => any)`
@@ -287,7 +310,9 @@ const delayed = derive([a, b], ([$a, $b], set) => {
 });
 ```
 
-* `value: any = get(store)`
+#### `get`
+
+`value: any = get(store)`
 
 ---
 
@@ -302,13 +327,13 @@ const value = get(store);
 ```
 
 
-### svelte/motion
+### `svelte/motion`
 
 The `svelte/motion` module exports two functions, `tweened` and `spring`, for creating writable stores whose values change over time after `set` and `update`, rather than immediately.
 
-#### tweened
+#### `tweened`
 
-* `store = tweened(value: any, options)`
+`store = tweened(value: any, options)`
 
 Tweened stores update their values over a fixed duration. The following options are available:
 
@@ -378,9 +403,9 @@ The `interpolator` option allows you to tween between *any* arbitrary values. It
 <h1 style="color: {$color}">{$color}</h1>
 ```
 
-#### spring
+#### `spring`
 
-* `store = spring(value: any, options)`
+`store = spring(value: any, options)`
 
 A `spring` store gradually changes to its target value based on its `stiffness` and `damping` parameters. Whereas `tweened` stores change their values over a fixed duration, `spring` stores change over a duration that is determined by their existing velocity, allowing for more natural-seeming motion in many situations. The following options are available:
 
@@ -390,7 +415,7 @@ A `spring` store gradually changes to its target value based on its `stiffness`
 
 ---
 
-As with `tweened` stores, `set` and `update` return a Promise that resolves if the spring settles. The `store.stiffness` and `store.damping` properties can be changed while the spring is in motion, and will take immediate effect.
+As with [`tweened`](#tweened) stores, `set` and `update` return a Promise that resolves if the spring settles. The `store.stiffness` and `store.damping` properties can be changed while the spring is in motion, and will take immediate effect.
 
 [See a full example on the spring tutorial.](tutorial/spring)
 
@@ -405,14 +430,14 @@ As with `tweened` stores, `set` and `update` return a Promise that resolves if t
 </script>
 ```
 
-### svelte/transition
+### `svelte/transition`
 
 TODO
 
 * fade, fly, slide, draw
 * crossfade...
 
-### svelte/animation
+### `svelte/animation`
 
 TODO
 
@@ -420,18 +445,22 @@ TODO
 
 TODO
 
-### svelte/easing
+### `svelte/easing`
 
 * TODO could have nice little interactive widgets showing the different functions, maybe
 
-### svelte/register
+### `svelte/register`
 
 TODO
 
 
 ### Client-side component API
 
-* `const component = new Component(options)`
+#### Creating a component
+
+```js
+const component = new Component(options)
+```
 
 ---
 
@@ -465,7 +494,7 @@ Existing children of `target` are left where they are.
 
 ---
 
-The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the `hydratable: true` option.
+The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](docs#compile).
 
 Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.
 
@@ -480,7 +509,11 @@ const app = new App({
 });
 ```
 
-* `component.$set(props)`
+#### `$set`
+
+```js
+component.$set(props)
+```
 
 ---
 
@@ -489,10 +522,14 @@ Programmatically sets props on an instance. `component.$set({ x: 1 })` is equiva
 Calling this method schedules an update for the next microtask — the DOM is *not* updated synchronously.
 
 ```js
-app.$set({ answer: 42 });
+component.$set({ answer: 42 });
 ```
 
-* `component.$on(event, callback)`
+#### `$on`
+
+```js
+component.$on(event, callback)
+```
 
 ---
 
@@ -504,14 +541,22 @@ app.$on('selected', event => {
 });
 ```
 
+#### `$destroy`
 
-* `component.$destroy()`
+```js
+component.$destroy()
+```
 
 Removes a component from the DOM and triggers any `onDestroy` handlers.
 
+#### Component props
 
-* `component.prop`
-* `component.prop = value`
+```js
+component.prop
+```
+```js
+component.prop = value
+```
 
 ---
 
@@ -532,7 +577,9 @@ app.count += 1;
 
 ### Server-side component API
 
-* `const result = Component.render(...)`
+```js
+const result = Component.render(...)
+```
 
 ---
 

site/content/docs/04-compile-time.md

@@ -11,8 +11,7 @@ Typically, you won't interact with the Svelte compiler directly, but will instea
 Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you.
 
 
-
-### svelte.compile
+### `compile`
 
 ```js
 result: {
@@ -22,17 +21,17 @@ result: {
 	warnings,
 	vars,
 	stats
-} = svelte.compile(source: string, options?: {...})
+} = compile(source: string, options?: {...})
 ```
 
 ---
 
-This is where the magic happens. `svelte.compile` takes your component source code, and turns it into a JavaScript module that exports a class.
+This is where the magic happens. `compile` takes your component source code, and turns it into a JavaScript module that exports a class.
 
 ```js
-const svelte = require('svelte/compiler');
+const {compile} = require('svelte/compiler');
 
-const result = svelte.compile(source, {
+const result = compile(source, {
 	// options
 });
 ```
@@ -92,10 +91,10 @@ const {
 	warnings,
 	vars,
 	stats
-} = svelte.compile(source);
+} = compile(source);
 ```
 
-* `js` and `css` are obejcts with the following properties:
+* `js` and `css` are objects with the following properties:
 	* `code` is a JavaScript string
 	* `map` is a sourcemap with additional `toString()` and `toUrl()` convenience methods
 * `ast` is an abstract syntax tree representing the structure of your component.
@@ -147,19 +146,19 @@ compiled: {
 	stats: {
 		timings: { [label]: number }
 	}
-} = svelte.compile(source: string, options?: {...})
+} = compile(source: string, options?: {...})
 ```
 
 -->
 
 
-### svelte.preprocess
+### `preprocess`
 
 ```js
 result: {
 	code: string,
 	dependencies: Array<string>
-} = svelte.preprocess(
+} = preprocess(
 	source: string,
 	preprocessors: Array<{
 		markup?: (input: { source: string, filename: string }) => Promise<{
@@ -194,9 +193,9 @@ The `markup` function receives the entire component source text, along with the
 > Preprocessor functions may additionally return a `map` object alongside `code` and `dependencies`, where `map` is a sourcemap representing the transformation. In current versions of Svelte it will be ignored, but future versions of Svelte may take account of preprocessor sourcemaps.
 
 ```js
-const svelte = require('svelte/compiler');
+const {preprocess} = require('svelte/compiler');
 
-const { code } = svelte.preprocess(source, {
+const { code } = preprocess(source, {
 	markup: ({ content, filename }) => {
 		return {
 			code: content.replace(/foo/g, 'bar')
@@ -214,11 +213,11 @@ The `script` and `style` functions receive the contents of `<script>` and `<styl
 If a `dependencies` array is returned, it will be included in the result object. This is used by packages like [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) to watch additional files for changes, in the case where your `<style>` tag has an `@import` (for example).
 
 ```js
-const svelte = require('svelte/compiler');
+const {preprocess} = require('svelte/compiler');
 const sass = require('node-sass');
 const { dirname } = require('path');
 
-const { code, dependencies } = svelte.preprocess(source, {
+const { code, dependencies } = preprocess(source, {
 	style: async ({ content, attributes, filename }) => {
 		// only process <style lang="sass">
 		if (attributes.lang !== 'sass') return;
@@ -249,9 +248,9 @@ const { code, dependencies } = svelte.preprocess(source, {
 Multiple preprocessors can be used together. The output of the first becomes the input to the second. `markup` functions run first, then `script` and `style`.
 
 ```js
-const svelte = require('svelte/compiler');
+const {preprocess} = require('svelte/compiler');
 
-const { code } = svelte.preprocess(source, [
+const { code } = preprocess(source, [
 	{
 		markup: () => {
 			console.log('this runs first');
@@ -280,13 +279,13 @@ const { code } = svelte.preprocess(source, [
 ```
 
 
-### svelte.VERSION
+### `VERSION`
 
 ---
 
 The current version, as set in package.json.
 
 ```js
-const svelte = require('svelte/compiler');
-console.log(`running svelte version ${svelte.VERSION}`);
+const {VERSION} = require('svelte/compiler');
+console.log(`running svelte version ${VERSION}`);
 ```