From 3d87ce00279831701152e61c2ba97944dfc6b6a5 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 19 Dec 2018 18:03:42 -0500 Subject: [PATCH] update docs --- site/content/guide/07-events.md | 456 ------------------------ site/content/guide/08-bindings.md | 220 +++--------- site/content/guide/14-module-context.md | 1 + 3 files changed, 44 insertions(+), 633 deletions(-) diff --git a/site/content/guide/07-events.md b/site/content/guide/07-events.md index 11c8c18f9f..6cf6b98a23 100644 --- a/site/content/guide/07-events.md +++ b/site/content/guide/07-events.md @@ -178,459 +178,3 @@ There is also a shorthand for listening for and re-firing an event unchanged. ``` Since component events do not propagate as DOM events do, this can be used to pass events through intermediate components. This shorthand technique also applies to element events (`on:click` is equivalent to `on:click="fire('click', event)"`). - -### Refs - -Refs are a convenient way to store a reference to particular DOM nodes or components. Declare a ref with `ref:[name]`, and access it inside your component's methods with `this.refs.[name]`: - -```html - - - - -``` - -```js -/* { filename: 'createRenderer.js', hidden: true } */ -export default function createRenderer(canvas, ctx) { - let running = true; - loop(); - - return { - stop: () => { - running = false; - } - }; - - function loop() { - if (!running) return; - requestAnimationFrame(loop); - - const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); - - for (let p = 0; p < imageData.data.length; p += 4) { - const i = p / 4; - const x = i % canvas.width; - const y = i / canvas.height >>> 0; - - const t = window.performance.now(); - - const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000)); - const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000)); - const b = 128; - - imageData.data[p + 0] = r; - imageData.data[p + 1] = g; - imageData.data[p + 2] = b; - imageData.data[p + 3] = 255; - } - - ctx.putImageData(imageData, 0, 0); - } -} -``` - -> Since only one element or component can occupy a given `ref`, don't use them in `{#each ...}` blocks. It's fine to use them in `{#if ...}` blocks however. - -Note that you can use refs in your ` -``` - -```json -/* { hidden: true } */ -{ - "url": "/" -} -``` - -Classes will work with an existing class attribute on your element. If you find yourself adding multiple ternary statements inside a class attribute, classes can simplify your component. Classes are recognized by the compiler and scoped correctly. - -If your class name is the same as a property in your component's state, you can use the shorthand of a class binding which drops the expression (`class:myProp`). - -Note that class names with dashes in them do not usually make good shorthand classes since the property will also need a dash in it. The example below uses a computed property to make working with this easier, but it may be easier to not use the shorthand in cases like this. - -```html - -
-

Active? {active}

-

Selected? {isSelected}

-
- - - - - - - -``` - -```json -/* { hidden: true } */ -{ - "active": true, - "isSelected": false, - "isAdmin": false, -} -``` diff --git a/site/content/guide/08-bindings.md b/site/content/guide/08-bindings.md index 943713682d..b899ea2376 100644 --- a/site/content/guide/08-bindings.md +++ b/site/content/guide/08-bindings.md @@ -94,202 +94,68 @@ Here is a complete example of using two way bindings with a form: > 'two way' bindings allow you to update a value in a nested property as seen in [checkbox input](repl?demo=binding-input-checkbox). -### Actions -Actions let you decorate elements with additional functionality. Actions are functions which may return an object with lifecycle methods, `update` and `destroy`. The action will be called when its element is added to the DOM. +### bind:this -Use actions for things like: -* tooltips -* lazy loading images as the page is scrolled, e.g. `` -* capturing link clicks for your client router -* adding drag and drop +There's a special binding that exists on all elements and components — `this`. It allows you to store a reference to a DOM node or component instance so that you can interact with it programmatically: ```html - - + + -``` + onMount(() => { + const ctx = canvas.getContext('2d'); + const renderer = createRenderer(canvas, ctx); -```json -/* { hidden: true } */ -{ - language: "english", - translations: { - english: { - tooltip: "Switch Languages", - }, - latin: { - tooltip: "Itchsway Anguageslay", - }, - } -} + // stop updating the canvas when + // the component is destroyed + return renderer.stop; + }); + ``` -### Classes - -Classes let you toggle element classes on and off. To use classes add the directive `class` followed by a colon and the class name you want toggled (`class:the-class-name="anExpression"`). The expression inside the directive's quotes will be evaluated and toggle the class on and off depending on the truthiness of the expression's result. You can only add class directives to elements. +```js +/* { filename: 'createRenderer.js', hidden: true } */ +export default function createRenderer(canvas, ctx) { + let running = true; + loop(); -This example adds the class `active` to `
  • ` elements when the `url` property matches the path their links target. - -```html - - - - - - -``` + }; -```json -/* { hidden: true } */ -{ - "url": "/" -} -``` + function loop() { + if (!running) return; + requestAnimationFrame(loop); -Classes will work with an existing class attribute on your element. If you find yourself adding multiple ternary statements inside a class attribute, classes can simplify your component. Classes are recognized by the compiler and scoped correctly. + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); -If your class name is the same as a property in your component's state, you can use the shorthand of a class binding which drops the expression (`class:myProp`). + for (let p = 0; p < imageData.data.length; p += 4) { + const i = p / 4; + const x = i % canvas.width; + const y = i / canvas.height >>> 0; -Note that class names with dashes in them do not usually make good shorthand classes since the property will also need a dash in it. The example below uses a computed property to make working with this easier, but it may be easier to not use the shorthand in cases like this. + const t = window.performance.now(); -```html - -
    -

    Active? {active}

    -

    Selected? {isSelected}

    -
    - - - + const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000)); + const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000)); + const b = 128; - + imageData.data[p + 0] = r; + imageData.data[p + 1] = g; + imageData.data[p + 2] = b; + imageData.data[p + 3] = 255; + } - -``` - -```json -/* { hidden: true } */ -{ - "active": true, - "isSelected": false, - "isAdmin": false, } -``` +``` \ No newline at end of file diff --git a/site/content/guide/14-module-context.md b/site/content/guide/14-module-context.md index ec311af8e5..89cb8c4fd6 100644 --- a/site/content/guide/14-module-context.md +++ b/site/content/guide/14-module-context.md @@ -28,6 +28,7 @@ So far, our `