From 8839951185c6ce0abb8a1fe45e96394418e7950c Mon Sep 17 00:00:00 2001 From: Luca Bonavita Date: Sat, 27 Apr 2019 17:52:14 +0100 Subject: [PATCH 1/9] Site: REPL, use the gist or example title in the page title Closes #2592 --- site/src/components/InlineSvg.svelte | 4 ++-- .../routes/repl/_components/AppControls/index.svelte | 3 +-- site/src/routes/repl/index.svelte | 10 ++++++---- site/src/utils/compat.js | 1 + 4 files changed, 10 insertions(+), 8 deletions(-) create mode 100644 site/src/utils/compat.js diff --git a/site/src/components/InlineSvg.svelte b/site/src/components/InlineSvg.svelte index e29810ae97..741ab7ec9e 100644 --- a/site/src/components/InlineSvg.svelte +++ b/site/src/components/InlineSvg.svelte @@ -5,7 +5,7 @@ - advantage of css-styling - https://github.com/jacobmischka/svelte-feather-icon - https://feathericons.com/ - - if requred we can split out app-controls to REPL only + - if required we can split out app-controls to REPL only ----------------------------------------------- --> @@ -112,4 +112,4 @@ - \ No newline at end of file + diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte index 179a8e4470..1ccd511152 100644 --- a/site/src/routes/repl/_components/AppControls/index.svelte +++ b/site/src/routes/repl/_components/AppControls/index.svelte @@ -6,6 +6,7 @@ import downloadBlob from '../../_utils/downloadBlob.js'; import { user } from '../../../../user.js'; import { enter } from '../../../../utils/events.js'; + import { isMac } from '../../../../utils/compat.js'; const dispatch = createEventDispatcher(); @@ -20,8 +21,6 @@ let justSaved = false; let justForked = false; - const isMac = typeof navigator !== 'undefined' && navigator.platform === 'MacIntel'; - function wait(ms) { return new Promise(f => setTimeout(f, ms)); } diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte index e89c3e0587..39dcfd78f9 100644 --- a/site/src/routes/repl/index.svelte +++ b/site/src/routes/repl/index.svelte @@ -27,7 +27,7 @@ let repl; let gist; - let name = 'loading...'; + let name = 'Loading...'; let zen_mode = false; let relaxed = false; let width = process.browser ? window.innerWidth : 1000; @@ -58,7 +58,9 @@ if (gist_id) { relaxed = false; - fetch(`gist/${gist_id}`).then(r => r.json()).then(data => { + fetch(`gist/${gist_id}`) + .then(r => r.json()) + .then(data => { gist = data; const { description, files } = data; @@ -201,7 +203,7 @@ - REPL • Svelte + {name} • REPL • Svelte @@ -212,9 +214,9 @@
diff --git a/site/src/utils/compat.js b/site/src/utils/compat.js new file mode 100644 index 0000000000..0b0f1e954b --- /dev/null +++ b/site/src/utils/compat.js @@ -0,0 +1 @@ +export const isMac = typeof navigator !== 'undefined' && navigator.platform === 'MacIntel'; From 211d86b4f810670d6549ba196c569a0b9f5d6d6a Mon Sep 17 00:00:00 2001 From: Luca Bonavita Date: Sun, 28 Apr 2019 16:28:26 +0100 Subject: [PATCH 2/9] Update the message in the popup we get when we login in the REPL --- site/README.md | 18 +++++++++++------- site/src/server.js | 3 ++- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/site/README.md b/site/README.md index 1ba94e8b56..c438bda5ca 100644 --- a/site/README.md +++ b/site/README.md @@ -17,13 +17,17 @@ 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 diff --git a/site/src/server.js b/site/src/server.js index 3413e218d8..fabda7c0ce 100644 --- a/site/src/server.js +++ b/site/src/server.js @@ -82,11 +82,12 @@ if (process.env.GITHUB_CLIENT_ID) { res.end(`

Missing .env file

-

In order to use GitHub authentication, you will need to register an OAuth application with gist and read:user scopes, and create a .env file:

+

In order to use GitHub authentication, you will need to register an OAuth application and create a local .env file:

GITHUB_CLIENT_ID=[YOUR_APP_ID]\nGITHUB_CLIENT_SECRET=[YOUR_APP_SECRET]\nBASEURL=http://localhost:3000

The BASEURL variable should match the callback URL specified for your app.

+

See also here

`); }); From 764f71c30d7abdae8d36ad7cce9fa44c5e0e76d9 Mon Sep 17 00:00:00 2001 From: pngwn Date: Mon, 29 Apr 2019 23:17:14 +0100 Subject: [PATCH 3/9] Site: Document createEventDispatcher. (#2583) --- site/content/docs/02-template-syntax.md | 6 +++++ site/content/docs/03-run-time.md | 33 ++++++++++++++++++++++++- 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 260c3482d9..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 diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 0876cf3a36..6eae0094e9 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` From 60e73c41dceaad8354c312105edfadc887849f7b Mon Sep 17 00:00:00 2001 From: pngwn Date: Sat, 27 Apr 2019 00:10:35 +0100 Subject: [PATCH 4/9] Document svelte/animate - flip. --- site/content/docs/03-run-time.md | 46 +++++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 6eae0094e9..5c012ebfa9 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -506,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` From d419274afd550f98d281e9d3eb051e24f314391a Mon Sep 17 00:00:00 2001 From: Emil Tholin Date: Tue, 30 Apr 2019 00:25:07 +0200 Subject: [PATCH 5/9] Narrow down checkbox transitions to background and left --- site/static/global.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/static/global.css b/site/static/global.css index 0681ee133a..4553898006 100644 --- a/site/static/global.css +++ b/site/static/global.css @@ -469,7 +469,6 @@ input[type="checkbox"]::before { top: 0; left: 0; background: var(--second); - -webkit-transition: .25s ease-out; /* box-sizing: border-box; */ box-sizing: content-box; } @@ -489,7 +488,7 @@ input[type="checkbox"]::after { border-radius: 1em; background: white; box-shadow: 0 0px 1px rgba(0,0,0,.4), 0 4px 2px rgba(0,0,0,.1); - -webkit-transition: .2s ease-out; + -webkit-transition: background .2s ease-out, left .2s ease-out; } input[type="checkbox"]:checked::after { From 511060ba9480028d1305f3e6f481754ba1ea1f11 Mon Sep 17 00:00:00 2001 From: raveling Date: Wed, 1 May 2019 11:46:28 +1000 Subject: [PATCH 6/9] improve referencing to code editor for mobile readers (#2632) * improve referencing to code editor for mobile readers The current documentation mentions "to the right" which is not accurate for people reading the tutorial on narrow-viewport devices. I changed it to "the code editor", but this may be improved upon to match other more common references. * typo --- site/content/tutorial/01-introduction/01-basics/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/tutorial/01-introduction/01-basics/text.md b/site/content/tutorial/01-introduction/01-basics/text.md index 95375edb25..c0fa2f48a3 100644 --- a/site/content/tutorial/01-introduction/01-basics/text.md +++ b/site/content/tutorial/01-introduction/01-basics/text.md @@ -29,4 +29,4 @@ Each tutorial chapter will have a 'Show me' button that you can click if you get ## Understanding components -In Svelte, an application is composed from one or more *components*. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The 'hello world' example on the right is a simple component. \ No newline at end of file +In Svelte, an application is composed from one or more *components*. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The 'hello world' example in the code editor is a simple component. From e73084b6affd9ebfc275857897a51df58095b6b4 Mon Sep 17 00:00:00 2001 From: Benjamin Milde Date: Wed, 1 May 2019 03:51:51 +0200 Subject: [PATCH 7/9] Hint at the reactivity limitation of array methods in the api docs (#2622) * Hint at the reactivity limitation of array methods in the api docs * tweaks --- site/content/docs/01-component-format.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md index d116dd8ff4..93af09b283 100644 --- a/site/content/docs/01-component-format.md +++ b/site/content/docs/01-component-format.md @@ -56,6 +56,8 @@ To change component state and trigger a re-render, just assign to a locally decl Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect. +Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. Options for getting around this can be found in the [tutorial](tutorial/updating-arrays-and-objects). + ```html