diff --git a/.gitignore b/.gitignore index 590bd1d88e..1de9283c03 100644 --- a/.gitignore +++ b/.gitignore @@ -15,7 +15,7 @@ node_modules /animate /scratch/ /coverage/ -/coverage.lcov/ +/coverage.lcov /test/sourcemaps/samples/*/output.js /test/sourcemaps/samples/*/output.js.map /test/sourcemaps/samples/*/output.css diff --git a/CHANGELOG.md b/CHANGELOG.md index b58bd9645e..6d576f9124 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,69 @@ # Svelte changelog +## 3.11.0 + +* `$capture_state` and `$inject_state` HMR hooks in dev mode ([#3148](https://github.com/sveltejs/svelte/pull/3148)) +* Allow unclosed tags inside if/each/etc blocks ([#2807](https://github.com/sveltejs/svelte/issues/2807)) +* Invalidate unreferenced store values inside ` + +{#if condition} +
+ fades in and out +
+{/if} +``` + #### `fly` ```sv @@ -667,7 +703,7 @@ Animates the stroke of an SVG element, like a snake in a tube. `in` transitions * `duration` (`number` | `function`, default 800) — milliseconds the transition lasts * `easing` (`function`, default `cubicInOut`) — an [easing function](docs#svelte_easing) -The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will halve that duration and setting it to `2` will double it. +The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it. ```html + +

Hello {name}!

+ +``` + +--- + +Alternatively, use `tag={null}` to indicate that the consumer of the custom element should name it. + +```js +import MyElement from './MyElement.svelte'; + +customElements.define('my-element', MyElement); +``` + +--- + +Once a custom element has been defined, it can be used as a regular DOM element: + +```js +document.body.innerHTML = ` + +

This is some slotted content

+ +`; +``` + +--- + +By default, custom elements are compiled with `accessors: true`, which means that any [props](docs#Attributes_and_props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible). + +To prevent this, add `accessors={false}` to ``. + +```js +const el = document.querySelector('my-element'); + +// get the current value of the 'name' prop +console.log(el.name); + +// set a new value, updating the shadow DOM +el.name = 'everybody'; +``` + +Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of: + +* Styles are *encapsulated*, rather than merely *scoped*. This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier +* Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string +* Custom elements are not generally suitable for server-side rendering, as the shadow DOM is invisible until JavaScript loads +* In Svelte, slotted content renders *lazily*. In the DOM, it renders *eagerly*. In other words, it will always be created even if the component's `` element is inside an `{#if ...}` block. Similarly, including a `` in an `{#each ...}` block will not cause the slotted content to be rendered multiple times +* The `let:` directive has no effect +* Polyfills are required to support older browsers + ### Server-side component API diff --git a/site/content/docs/04-compile-time.md b/site/content/docs/04-compile-time.md index c219bae497..f47fe564af 100644 --- a/site/content/docs/04-compile-time.md +++ b/site/content/docs/04-compile-time.md @@ -186,15 +186,15 @@ result: { } = svelte.preprocess( source: string, preprocessors: Array<{ - markup?: (input: { source: string, filename: string }) => Promise<{ + markup?: (input: { content: string, filename: string }) => Promise<{ code: string, dependencies?: Array }>, - script?: (input: { source: string, attributes: Record, filename: string }) => Promise<{ + script?: (input: { content: string, attributes: Record, filename: string }) => Promise<{ code: string, dependencies?: Array }>, - style?: (input: { source: string, attributes: Record, filename: string }) => Promise<{ + style?: (input: { content: string, attributes: Record, filename: string }) => Promise<{ code: string, dependencies?: Array }> diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte index 5cd279d7a7..cd12eed954 100644 --- a/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte +++ b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte @@ -2,11 +2,11 @@ import Thing from './Thing.svelte'; let things = [ - { id: 1, value: 'a' }, - { id: 2, value: 'b' }, - { id: 3, value: 'c' }, - { id: 4, value: 'd' }, - { id: 5, value: 'e' } + { id: 1, color: '#0d0887' }, + { id: 2, color: '#6a00a8' }, + { id: 3, color: '#b12a90' }, + { id: 4, color: '#e16462' }, + { id: 5, color: '#fca636' } ]; function handleClick() { @@ -22,14 +22,14 @@

Keyed

{#each things as thing (thing.id)} - + {/each}

Unkeyed

{#each things as thing} - + {/each}
\ No newline at end of file diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte index 4e86d32109..28c3c65d05 100644 --- a/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte +++ b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte @@ -1,9 +1,24 @@ -

{valueAtStart} / {value}

\ No newline at end of file +

+ initial + current +

+ + \ No newline at end of file diff --git a/site/content/examples/05-bindings/08-media-elements/App.svelte b/site/content/examples/05-bindings/08-media-elements/App.svelte index 2cf819fca0..fd4f843ca1 100644 --- a/site/content/examples/05-bindings/08-media-elements/App.svelte +++ b/site/content/examples/05-bindings/08-media-elements/App.svelte @@ -109,8 +109,8 @@