diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000000..eb49e78156 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.svelte linguist-language=HTML diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b38edb318..9419304783 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## 3.1.0 + +* Allow store subscribe functions to return an object with an `unsubscribe` method, providing native RxJS support ([#2549](https://github.com/sveltejs/svelte/issues/2549)) + ## 3.0.1 * Prevent text input cursor jumping in Safari ([#2506](https://github.com/sveltejs/svelte/issues/2506)) diff --git a/LICENSE b/LICENSE index 939579e8bd..b63fe48148 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright (c) 2016 [these people](https://github.com/sveltejs/svelte/graphs/contributors) +Copyright (c) 2016-19 [these people](https://github.com/sveltejs/svelte/graphs/contributors) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: diff --git a/README.md b/README.md index 605eee8fa8..96190a8c66 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ The source code for https://svelte.dev, including all the documentation, lives i ```bash cd site -npm install +npm install && npm run update npm run dev ``` diff --git a/package.json b/package.json index b1b5a5c3b4..85836aaa14 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.0.1", + "version": "3.1.0", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", diff --git a/site/README.md b/site/README.md index 223830b3fa..c438bda5ca 100644 --- a/site/README.md +++ b/site/README.md @@ -17,16 +17,20 @@ By default, the REPL will fetch the most recent version of Svelte from https://u ## REPL GitHub integration -In order for the REPL's GitHub integration to work properly when running locally, you will need to create a GitHub OAuth app. Set its authorization callback URL to `http://localhost:3000/auth/callback`, and in this project, create `site/.env` containing: - -``` -GITHUB_CLIENT_ID=[your app's client id] -GITHUB_CLIENT_SECRET=[your app's client secret] -BASEURL=http://localhost:3000 -``` +In order for the REPL's GitHub integration to work properly when running locally, you will need to: +- [create a GitHub OAuth app](https://github.com/settings/developers): + - set `Authorization callback URL` to `http://localhost:3000/auth/callback`; + - set `Application name` as you like, and `Homepage URL` as `http://localhost:3000/`; + - create the app and take note of `Client ID` and `Client Secret` +- in this repo, create `site/.env` containing: + ``` + GITHUB_CLIENT_ID=[your app's Client ID] + GITHUB_CLIENT_SECRET=[your app's Client Secret] + BASEURL=http://localhost:3000 + ``` ## Translating the API docs Anchors are automatically generated using headings in the documentation and by default (for the english language) they are latinised to make sure the URL is always conforming to RFC3986. -If we need to translate the API documentation to a language using unicode chars, we can setup this app to export the correct anchors by setting up `SLUG_PRESERVE_UNICODE` to `true` and `SLUG_LANG` to the ISO 639-1 two-letter language code of your choice in `config.js`. +If we need to translate the API documentation to a language using unicode chars, we can setup this app to export the correct anchors by setting up `SLUG_PRESERVE_UNICODE` to `true` in `config.js`. diff --git a/site/config.js b/site/config.js index 25dfce0c22..097bd173a8 100644 --- a/site/config.js +++ b/site/config.js @@ -1,3 +1,2 @@ export const SLUG_PRESERVE_UNICODE = false; export const SLUG_SEPARATOR = '_'; -export const SLUG_LANG = 'en'; diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 952272c6e1..d573823402 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -366,7 +366,13 @@ Components can emit events using [createEventDispatcher](docs#createEventDispatc ``` +--- + +As with DOM events, if the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it. +```html + +``` ### Element bindings @@ -983,7 +989,7 @@ Named slots can also expose values. The `let:` directive goes on the element wit {/each} - + ``` diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 843ac05e4c..5c012ebfa9 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -176,8 +176,39 @@ Retrieves the context that belongs to the closest parent component with the spec #### `createEventDispatcher` -TODO +```js +dispatch: ((name: string, detail?: any) => void) = createEventDispatcher(); +``` + +--- + +Creates an event dispatcher that can be used to dispatch [component events](docs#Component_events). Event dispatchers are functions that can take two arguments: `name` and `detail`. + +Component events created with `createEventDispatcher` create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) and are not cancellable with `event.preventDefault()`. The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data. +```html + + + +``` + +--- + +Events dispatched from child components can be listened to in their parent. Any data provided when the event was dispatched is available on the `detail` property of the event object. + +```html + + + +``` ### `svelte/store` @@ -475,13 +506,51 @@ TODO * fade, fly, slide, scale, draw * crossfade... -### `svelte/animation` +### `svelte/animate` -TODO +The `svelte/animate` module exports one function for use with svelte [animations](docs#Animations). + +#### `flip` + +```sv +animate:flip={params} +``` + +The `flip` function calculates the start and end position of an element and animates between them, translating the `x` and `y` values. `flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/). + +`flip` accepts the following parameters: + +* `delay` (`number`, default 0) — milliseconds before starting +* `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below +* `easing` (`function`, default [`cubicOut`](docs#cubicOut)) — an [easing function](docs#svelte_easing) + + +`duration` can be be provided as either: + +- a `number`, in milliseconds. +- a function, `distance: number => duration: number`, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element. + +--- + +You can see a full example on the [animations tutorial](tutorial/animate) + + +```html + + +{#each list as n (n)} +
+ {n} +
+{/each} +``` -* TODO this doesn't even exist yet -TODO ### `svelte/easing` @@ -573,10 +642,14 @@ component.$on(event, callback) Causes the `callback` function to be called whenever the component dispatches an `event`. +A function is returned that will remove the event listener when called. + ```js -app.$on('selected', event => { +const off = app.$on('selected', event => { console.log(event.detail.selection); }); + +off(); ``` #### `$destroy` diff --git a/site/content/tutorial/05-events/03-event-modifiers/text.md b/site/content/tutorial/05-events/03-event-modifiers/text.md index 05a2d8c5fb..73386dd096 100644 --- a/site/content/tutorial/05-events/03-event-modifiers/text.md +++ b/site/content/tutorial/05-events/03-event-modifiers/text.md @@ -18,10 +18,10 @@ DOM event handlers can have *modifiers* that alter their behaviour. For example, The full list of modifiers: -* `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for e.g. client-side form handling +* `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example. * `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element * `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so) * `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture)) * `once` — remove the handler after the first time it runs -You can chain modifiers together, e.g. `on:click|once|capture={...}`. \ No newline at end of file +You can chain modifiers together, e.g. `on:click|once|capture={...}`. diff --git a/site/content/tutorial/06-bindings/09-media-elements/text.md b/site/content/tutorial/06-bindings/09-media-elements/text.md index 32e7fa17b8..506eb25a4a 100644 --- a/site/content/tutorial/06-bindings/09-media-elements/text.md +++ b/site/content/tutorial/06-bindings/09-media-elements/text.md @@ -8,8 +8,8 @@ On line 116, add `currentTime={time}`, `duration` and `paused` bindings: ```html