diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 7c4d361e51..2c5df84c6d 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -267,21 +267,21 @@ 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)` -* `store = derive([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void) => void)` +* `store = derived(a, callback: (a: any) => any)` +* `store = derived(a, callback: (a: any, set: (value: any) => void) => void)` +* `store = derived([a, ...b], callback: ([a: any, ...b: any[]]) => any)` +* `store = derived([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void) => void)` --- Derives a store from one or more other stores. Whenever those dependencies change, the callback runs. -In the simplest version, `derive` takes a single store, and the callback returns a derived value. +In the simplest version, `derived` takes a single store, and the callback returns a derived value. ```js -import { derive } from 'svelte/store'; +import { derived } from 'svelte/store'; -const doubled = derive(a, $a => $a * 2); +const doubled = derived(a, $a => $a * 2); ``` --- @@ -289,9 +289,9 @@ const doubled = derive(a, $a => $a * 2); The callback can set a value asynchronously by accepting a second argument, `set`, and calling it when appropriate. ```js -import { derive } from 'svelte/store'; +import { derived } from 'svelte/store'; -const delayed = derive(a, ($a, set) => { +const delayed = derived(a, ($a, set) => { setTimeout(() => set($a), 1000); }); ``` @@ -301,11 +301,11 @@ const delayed = derive(a, ($a, set) => { In both cases, an array of arguments can be passed as the first argument instead of a single store. ```js -import { derive } from 'svelte/store'; +import { derived } from 'svelte/store'; -const summed = derive([a, b], ([$a, $b]) => $a + $b); +const summed = derived([a, b], ([$a, $b]) => $a + $b); -const delayed = derive([a, b], ([$a, $b], set) => { +const delayed = derived([a, b], ([$a, $b], set) => { setTimeout(() => set($a + $b), 1000); }); ``` @@ -434,7 +434,7 @@ As with [`tweened`](#tweened) stores, `set` and `update` return a Promise that r TODO -* fade, fly, slide, draw +* fade, fly, slide, scale, draw * crossfade... ### `svelte/animation` diff --git a/site/content/examples/07-stores/03-derived-stores/stores.js b/site/content/examples/07-stores/03-derived-stores/stores.js index 5052cab54d..1da6d4195b 100644 --- a/site/content/examples/07-stores/03-derived-stores/stores.js +++ b/site/content/examples/07-stores/03-derived-stores/stores.js @@ -1,4 +1,4 @@ -import { readable, derive } from 'svelte/store'; +import { readable, derived } from 'svelte/store'; export const time = readable(new Date(), function start(set) { const interval = setInterval(() => { @@ -12,7 +12,7 @@ export const time = readable(new Date(), function start(set) { const start = new Date(); -export const elapsed = derive( +export const elapsed = derived( time, $time => Math.round(($time - start) / 1000) ); \ No newline at end of file diff --git a/site/content/tutorial/08-stores/04-derived-stores/app-a/stores.js b/site/content/tutorial/08-stores/04-derived-stores/app-a/stores.js index d7d8d7b914..f5e7eb28a5 100644 --- a/site/content/tutorial/08-stores/04-derived-stores/app-a/stores.js +++ b/site/content/tutorial/08-stores/04-derived-stores/app-a/stores.js @@ -1,4 +1,4 @@ -import { readable, derive } from 'svelte/store'; +import { readable, derived } from 'svelte/store'; export const time = readable(new Date(), function start(set) { const interval = setInterval(() => { @@ -12,7 +12,7 @@ export const time = readable(new Date(), function start(set) { const start = new Date(); -export const elapsed = derive( +export const elapsed = derived( time, $time => {} ); \ No newline at end of file diff --git a/site/content/tutorial/08-stores/04-derived-stores/app-b/stores.js b/site/content/tutorial/08-stores/04-derived-stores/app-b/stores.js index 5052cab54d..1da6d4195b 100644 --- a/site/content/tutorial/08-stores/04-derived-stores/app-b/stores.js +++ b/site/content/tutorial/08-stores/04-derived-stores/app-b/stores.js @@ -1,4 +1,4 @@ -import { readable, derive } from 'svelte/store'; +import { readable, derived } from 'svelte/store'; export const time = readable(new Date(), function start(set) { const interval = setInterval(() => { @@ -12,7 +12,7 @@ export const time = readable(new Date(), function start(set) { const start = new Date(); -export const elapsed = derive( +export const elapsed = derived( time, $time => Math.round(($time - start) / 1000) ); \ No newline at end of file diff --git a/site/content/tutorial/08-stores/04-derived-stores/text.md b/site/content/tutorial/08-stores/04-derived-stores/text.md index 9ee25b916c..82127944b5 100644 --- a/site/content/tutorial/08-stores/04-derived-stores/text.md +++ b/site/content/tutorial/08-stores/04-derived-stores/text.md @@ -2,10 +2,10 @@ title: Derived stores --- -You can create a store whose value is based on the value of one or more *other* stores with `derive`. Building on our previous example, we can create a store that derives the time the page has been open: +You can create a store whose value is based on the value of one or more *other* stores with `derived`. Building on our previous example, we can create a store that derives the time the page has been open: ```js -export const elapsed = derive( +export const elapsed = derived( time, $time => Math.round(($time - start) / 1000) ); diff --git a/site/src/routes/_components/Blurb.svelte b/site/src/routes/_components/Blurb.svelte new file mode 100644 index 0000000000..61b249be80 --- /dev/null +++ b/site/src/routes/_components/Blurb.svelte @@ -0,0 +1,166 @@ + + +
+
+

Write less code

+

Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript

+ + learn more +
+ +
+

No virtual DOM

+

Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast

+ + learn more +
+ +
+

Truly reactive

+

No more complex state management libraries — Svelte brings reactivity to JavaScript itself

+ + learn more +
+ +
+

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

+ +

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

+ +

Read the introductory blog post to learn more.

+
+ +
+ 
+npx degit sveltejs/template my-svelte-project
+cd my-svelte-project
+
+npm install
+npm run dev & open http://localhost:5000
+
+ +

See the quickstart guide for more information.

+ +

Learn Svelte

+
+
\ No newline at end of file diff --git a/site/src/components/WhosUsingSvelte/index.svelte b/site/src/routes/_components/WhosUsingSvelte.svelte similarity index 100% rename from site/src/components/WhosUsingSvelte/index.svelte rename to site/src/routes/_components/WhosUsingSvelte.svelte diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte index 4c9b175464..58b28f09b3 100644 --- a/site/src/routes/index.svelte +++ b/site/src/routes/index.svelte @@ -1,7 +1,8 @@ diff --git a/test/runtime/samples/svg-foreignobject-namespace/_config.js b/test/runtime/samples/svg-foreignobject-namespace/_config.js index a0185bae8e..950e35e79d 100644 --- a/test/runtime/samples/svg-foreignobject-namespace/_config.js +++ b/test/runtime/samples/svg-foreignobject-namespace/_config.js @@ -8,6 +8,9 @@ export default { `, test({ assert, target }) { + const foreignObject = target.querySelector('foreignObject'); + assert.equal(foreignObject.namespaceURI, 'http://www.w3.org/2000/svg'); + const p = target.querySelector('p'); assert.equal(p.namespaceURI, 'http://www.w3.org/1999/xhtml'); } diff --git a/test/store/index.js b/test/store/index.js index f077b183e1..a70bae68fc 100644 --- a/test/store/index.js +++ b/test/store/index.js @@ -1,5 +1,5 @@ import * as assert from 'assert'; -import { readable, writable, derive, get } from '../../store.js'; +import { readable, writable, derived, get } from '../../store.js'; describe('store', () => { describe('writable', () => { @@ -100,10 +100,10 @@ describe('store', () => { }); }); - describe('derive', () => { + describe('derived', () => { it('maps a single store', () => { const a = writable(1); - const b = derive(a, n => n * 2); + const b = derived(a, n => n * 2); const values = []; @@ -123,7 +123,7 @@ describe('store', () => { it('maps multiple stores', () => { const a = writable(2); const b = writable(3); - const c = derive(([a, b]), ([a, b]) => a * b); + const c = derived(([a, b]), ([a, b]) => a * b); const values = []; @@ -143,7 +143,7 @@ describe('store', () => { it('passes optional set function', () => { const number = writable(0); - const evens = derive(number, (n, set) => { + const evens = derived(number, (n, set) => { if (n % 2 === 0) set(n); }); @@ -169,9 +169,9 @@ describe('store', () => { it('prevents glitches', () => { const lastname = writable('Jekyll'); - const firstname = derive(lastname, n => n === 'Jekyll' ? 'Henry' : 'Edward'); + const firstname = derived(lastname, n => n === 'Jekyll' ? 'Henry' : 'Edward'); - const fullname = derive([firstname, lastname], names => names.join(' ')); + const fullname = derived([firstname, lastname], names => names.join(' ')); const values = []; diff --git a/transition.mjs b/transition.mjs index 1b6fbec605..ccb0ef68c7 100644 --- a/transition.mjs +++ b/transition.mjs @@ -66,6 +66,32 @@ export function slide(node, { }; } +export function scale(node, { + delay = 0, + duration = 400, + easing = cubicOut, + start = 0, + opacity = 0 +}) { + const sd = 1 - start; + const od = 1 - opacity; + + const transform = ( + node.style.transform || + getComputedStyle(node).transform + ).replace('none', ''); + + return { + delay, + duration, + easing, + css: (t, u) => ` + transform: ${transform} scale(${1 - (sd * u)}); + opacity: ${1 - (od * u)} + ` + }; +} + export function draw(node, { delay = 0, duration = 800,