msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Add more level 4 headings, fixes some typos

Browse Source
pull/2373/head
Luca Bonavita 7 years ago
parent 1dc787493a
commit c88b28e207
3 changed files with 129 additions and 56 deletions
Show Stats Download Patch File Download Diff File

41
site/content/docs/02-template-syntax.md
Unescape View File

@ -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 ```html
<SomeComponent on:whatever={handler}/> <SomeComponent on:whatever={handler}/>
@ -340,7 +340,9 @@ Components can emit events using [createEventDispatcher](#docs/createEventDispat
### Element bindings ### 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}> <input type="range" bind:value={num}>
``` ```
#### Binding related elements
--- ---
Inputs that work together can use `bind:group`. 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)"> <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). 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> </select>
``` ```
#### Media elements bindings
--- ---
Media elements (`<audio>` and `<video>`) have their own set of bindings — four *readonly* ones... 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> ></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 ```html
<div bind:offsetWidth={width} bind:offsetHeight={height}> <div
bind:offsetWidth={width}
bind:offsetHeight={height}
>
<Chart {width} {height}/> <Chart {width} {height}/>
</div> </div>
``` ```
#### Binding a DOM node
--- ---
To get a reference to a DOM node, use `bind:this`. 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 ### 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} {/if}
``` ```
#### Transition parameters
--- ---
Like actions, transitions can have parameters. Like actions, transitions can have parameters.
@ -666,6 +689,8 @@ Like actions, transitions can have parameters.
{/if} {/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. 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: An element with transitions will dispatch the following events in addition to any standard DOM events:
* `introstart` * `introstart`
@ -825,7 +852,7 @@ Named slots allow consumers to target specific areas. They can also have fallbac
<!-- Widget.svelte --> <!-- Widget.svelte -->
<div> <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> <p>Some content between header and footer</p>
</slot name="footer"></slot> </slot name="footer"></slot>
</div> </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={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 * `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed

105
site/content/docs/03-run-time.md
Unescape View File

@ -3,10 +3,12 @@ title: Run time
--- ---
### svelte ### `svelte`
The `svelte` package exposes [lifecycle functions](tutorial/onmount) and the [context API](tutorial/context-api). The `svelte` package exposes [lifecycle functions](tutorial/onmount) and the [context API](tutorial/context-api).
#### `onMount`
* `onMount(callback: () => void)` * `onMount(callback: () => void)`
* `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> </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> </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> </script>
``` ```
* `onDestroy(callback: () => void)` #### `onDestroy`
`onDestroy(callback: () => void)`
--- ---
@ -96,7 +104,9 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
</script> </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> </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> </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> </script>
``` ```
#### `createEventDispatcher`
TODO
### svelte/store
### `svelte/store`
The `svelte/store` module exports functions for creating [stores](tutorial/writable-stores). 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> </button>
``` ```
#### `writable`
* `store = writable(value: any)` * `store = writable(value: any)`
* `store = writable(value: any, (set: (value: any) => void) => () => void)` * `store = writable(value: any, (set: (value: any) => void) => () => void)`
@ -224,7 +243,9 @@ const unsubscribe = count.subscribe(value => {
unsubscribe(); // logs 'no more subscribers' 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) => any)`
* `store = derive(a, callback: (a: any, set: (value: any) => void) => void)` * `store = derive(a, callback: (a: any, set: (value: any) => void) => void)`
* `store = derive([a, ...b], callback: ([a: any, ...b: any[]]) => any)` * `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. 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: 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> <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: 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) [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> </script>
``` ```
### svelte/transition ### `svelte/transition`
TODO TODO
* fade, fly, slide, draw * fade, fly, slide, draw
* crossfade... * crossfade...
### svelte/animation ### `svelte/animation`
TODO TODO
@ -420,18 +445,22 @@ TODO
TODO TODO
### svelte/easing ### `svelte/easing`
* TODO could have nice little interactive widgets showing the different functions, maybe * TODO could have nice little interactive widgets showing the different functions, maybe
### svelte/register ### `svelte/register`
TODO TODO
### Client-side component API ### 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`. 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. Calling this method schedules an update for the next microtask — the DOM is *not* updated synchronously.
```js ```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. Removes a component from the DOM and triggers any `onDestroy` handlers.
#### Component props
* `component.prop` ```js
* `component.prop = value` component.prop
```
```js
component.prop = value
```
--- ---
@ -532,7 +577,9 @@ app.count += 1;
### Server-side component API ### Server-side component API
* `const result = Component.render(...)` ```js
const result = Component.render(...)
```
--- ---

39
site/content/docs/04-compile-time.md
Unescape View File

@ -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. Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you.
### `compile`
### svelte.compile
```js ```js
result: { result: {
@ -22,17 +21,17 @@ result: {
warnings, warnings,
vars, vars,
stats 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 ```js
const svelte = require('svelte/compiler'); const {compile} = require('svelte/compiler');
const result = svelte.compile(source, { const result = compile(source, {
// options // options
}); });
``` ```
@ -92,10 +91,10 @@ const {
warnings, warnings,
vars, vars,
stats 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 * `code` is a JavaScript string
* `map` is a sourcemap with additional `toString()` and `toUrl()` convenience methods * `map` is a sourcemap with additional `toString()` and `toUrl()` convenience methods
* `ast` is an abstract syntax tree representing the structure of your component. * `ast` is an abstract syntax tree representing the structure of your component.
@ -147,19 +146,19 @@ compiled: {
stats: { stats: {
timings: { [label]: number } timings: { [label]: number }
} }
} = svelte.compile(source: string, options?: {...}) } = compile(source: string, options?: {...})
``` ```
--> -->
### svelte.preprocess ### `preprocess`
```js ```js
result: { result: {
code: string, code: string,
dependencies: Array<string> dependencies: Array<string>
} = svelte.preprocess( } = preprocess(
source: string, source: string,
preprocessors: Array<{ preprocessors: Array<{
markup?: (input: { source: string, filename: string }) => Promise<{ 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. > 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 ```js
const svelte = require('svelte/compiler'); const {preprocess} = require('svelte/compiler');
const { code } = svelte.preprocess(source, { const { code } = preprocess(source, {
markup: ({ content, filename }) => { markup: ({ content, filename }) => {
return { return {
code: content.replace(/foo/g, 'bar') 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). 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 ```js
const svelte = require('svelte/compiler'); const {preprocess} = require('svelte/compiler');
const sass = require('node-sass'); const sass = require('node-sass');
const { dirname } = require('path'); const { dirname } = require('path');
const { code, dependencies } = svelte.preprocess(source, { const { code, dependencies } = preprocess(source, {
style: async ({ content, attributes, filename }) => { style: async ({ content, attributes, filename }) => {
// only process <style lang="sass"> // only process <style lang="sass">
if (attributes.lang !== 'sass') return; 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`. 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 ```js
const svelte = require('svelte/compiler'); const {preprocess} = require('svelte/compiler');
const { code } = svelte.preprocess(source, [ const { code } = preprocess(source, [
{ {
markup: () => { markup: () => {
console.log('this runs first'); 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. The current version, as set in package.json.
```js ```js
const svelte = require('svelte/compiler'); const {VERSION} = require('svelte/compiler');
console.log(`running svelte version ${svelte.VERSION}`); console.log(`running svelte version ${VERSION}`);
``` ```

Write Preview
Loading…
Cancel
Save