msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

docs, tutorial

Browse Source
pull/7149/head
Simon H 4 years ago committed by GitHub
parent bc7ad99afb
commit 98c0368433
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 54 additions and 17 deletions
Show Stats Download Patch File Download Diff File

6
site/content/docs/03-template-syntax.md
Unescape View File

@ -1756,7 +1756,7 @@ All except `scrollX` and `scrollY` are readonly.
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](/docs#template-syntax-element-directives-use-action) on `document`.
`<svelte:document>` also has to appear at the top level of your component.
As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
```sv
<svelte:document
@ -1775,7 +1775,7 @@ Similarly to `<svelte:window>`, this element allows you to add listeners to even
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs#template-syntax-element-directives-use-action) on the `<body>` element.
As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
```sv
<svelte:body
@ -1796,7 +1796,7 @@ As with `<svelte:window>`, this element may only appear the top level of your co
This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `html` content.
As with `<svelte:window>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.
As with `<svelte:window>`, `<svelte:document>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.
```sv
<svelte:head>

14
site/content/tutorial/16-special-elements/06-svelte-body/text.md
Unescape View File

@ -1,14 +0,0 @@
---
title: <svelte:body>
---
Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
```html
<svelte:body
on:mouseenter={handleMouseenter}
on:mouseleave={handleMouseleave}
/>
```

10
site/content/tutorial/16-special-elements/06-svelte-document/app-a/App.svelte
Unescape View File

@ -0,0 +1,10 @@
<script>
let selection = '';
const handleSelectionChange = (e) => selection = document.getSelection();
</script>
<svelte:body />
<p>Select this text to fire events</p>
<p>Selection: {selection}</p>

10
site/content/tutorial/16-special-elements/06-svelte-document/app-b/App.svelte
Unescape View File

@ -0,0 +1,10 @@
<script>
let selection = '';
const handleSelectionChange = (e) => selection = document.getSelection();
</script>
<svelte:document on:selectionchange={handleSelectionChange} />
<p>Select this text to fire events</p>
<p>Selection: {selection}</p>

13
site/content/tutorial/16-special-elements/06-svelte-document/text.md
Unescape View File

@ -0,0 +1,13 @@
---
title: <svelte:document>
---
Similar to `<svelte:window>`, the `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
Add the `selectionchange` handler to the `<svelte:document>` tag:
```html
<svelte:document on:selectionchange={handleSelectionChange} />
```
> Avoid `mouseenter` and `mouseleave` handlers on this element, these events are not fired on `document` in all browsers. Use `<svelte:body>` for this instead.

0
site/content/tutorial/16-special-elements/06-svelte-body/app-a/App.svelte → site/content/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/06-svelte-body/app-b/App.svelte → site/content/tutorial/16-special-elements/07-svelte-body/app-b/App.svelte
Unescape View File

14
site/content/tutorial/16-special-elements/07-svelte-body/text.md
Unescape View File

@ -0,0 +1,14 @@
---
title: <svelte:body>
---
Similar to `<svelte:window>` and `<svelte:document>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
```html
<svelte:body
on:mouseenter={handleMouseenter}
on:mouseleave={handleMouseleave}
/>
```

0
site/content/tutorial/16-special-elements/07-svelte-head/app-a/App.svelte → site/content/tutorial/16-special-elements/08-svelte-head/app-a/App.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/07-svelte-head/app-b/App.svelte → site/content/tutorial/16-special-elements/08-svelte-head/app-b/App.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/07-svelte-head/text.md → site/content/tutorial/16-special-elements/08-svelte-head/text.md
Unescape View File

0
site/content/tutorial/16-special-elements/08-svelte-options/app-a/App.svelte → site/content/tutorial/16-special-elements/09-svelte-options/app-a/App.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte → site/content/tutorial/16-special-elements/09-svelte-options/app-a/Todo.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/08-svelte-options/app-a/flash.js → site/content/tutorial/16-special-elements/09-svelte-options/app-a/flash.js
Unescape View File

0
site/content/tutorial/16-special-elements/08-svelte-options/app-b/App.svelte → site/content/tutorial/16-special-elements/09-svelte-options/app-b/App.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte → site/content/tutorial/16-special-elements/09-svelte-options/app-b/Todo.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/08-svelte-options/app-b/flash.js → site/content/tutorial/16-special-elements/09-svelte-options/app-b/flash.js
Unescape View File

0
site/content/tutorial/16-special-elements/08-svelte-options/text.md → site/content/tutorial/16-special-elements/09-svelte-options/text.md
Unescape View File

0
site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/App.svelte → site/content/tutorial/16-special-elements/10-svelte-fragment/app-a/App.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/Box.svelte → site/content/tutorial/16-special-elements/10-svelte-fragment/app-a/Box.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/App.svelte → site/content/tutorial/16-special-elements/10-svelte-fragment/app-b/App.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/Box.svelte → site/content/tutorial/16-special-elements/10-svelte-fragment/app-b/Box.svelte
Unescape View File

0
site/content/tutorial/16-special-elements/09-svelte-fragment/text.md → site/content/tutorial/16-special-elements/10-svelte-fragment/text.md
Unescape View File

4
src/compiler/compile/nodes/Document.ts
Unescape View File

@ -24,6 +24,10 @@ export default class Document extends Node {
}
});
this.validate();
}
private validate() {
const handlers_map = new Set();
this.handlers.forEach(handler => (

Write Preview
Loading…
Cancel
Save