diff --git a/site/content/guide/06-special-components.md b/site/content/guide/06-special-components.md index 47c31c3733..56ee2b4964 100644 --- a/site/content/guide/06-special-components.md +++ b/site/content/guide/06-special-components.md @@ -114,11 +114,9 @@ You can also bind to certain values — so far `innerWidth`, `outerWidth`, `inne ``` -### `` +### `` -TODO REPLACE THIS WITH svelte:body - -The `` tag, just like ``, gives you a convenient way to declaratively add event listeners to the `document` object. This is useful for listening to events that don't fire on `window`, such as `mouseenter` and `mouseleave`. +The `` tag, just like ``, gives you a convenient way to declaratively add event listeners to the `document.body` object. This is useful for listening to events that don't fire on `window`, such as `mouseenter` and `mouseleave`. ### `` diff --git a/src/compile/nodes/Document.ts b/src/compile/nodes/Body.ts similarity index 87% rename from src/compile/nodes/Document.ts rename to src/compile/nodes/Body.ts index 48e985291c..74c63b1f57 100644 --- a/src/compile/nodes/Document.ts +++ b/src/compile/nodes/Body.ts @@ -1,8 +1,8 @@ import Node from './shared/Node'; import EventHandler from './EventHandler'; -export default class Document extends Node { - type: 'Document'; +export default class Body extends Node { + type: 'Body'; handlers: EventHandler[]; constructor(component, parent, scope, info) { diff --git a/src/compile/nodes/shared/mapChildren.ts b/src/compile/nodes/shared/mapChildren.ts index 775f72dc16..21df3e2918 100644 --- a/src/compile/nodes/shared/mapChildren.ts +++ b/src/compile/nodes/shared/mapChildren.ts @@ -1,6 +1,6 @@ import AwaitBlock from '../AwaitBlock'; +import Body from '../Body'; import Comment from '../Comment'; -import Document from '../Document'; import EachBlock from '../EachBlock'; import Element from '../Element'; import Head from '../Head'; @@ -19,8 +19,8 @@ import Node from './Node'; function getConstructor(type): typeof Node { switch (type) { case 'AwaitBlock': return AwaitBlock; + case 'Body': return Body; case 'Comment': return Comment; - case 'Document': return Document; case 'EachBlock': return EachBlock; case 'Element': return Element; case 'Head': return Head; @@ -50,4 +50,4 @@ export default function mapChildren(component, parent, scope, children: any[]) { return node; }); -} \ No newline at end of file +} diff --git a/src/compile/render-dom/wrappers/Document.ts b/src/compile/render-dom/wrappers/Body.ts similarity index 60% rename from src/compile/render-dom/wrappers/Document.ts rename to src/compile/render-dom/wrappers/Body.ts index a87a486f6c..678c790053 100644 --- a/src/compile/render-dom/wrappers/Document.ts +++ b/src/compile/render-dom/wrappers/Body.ts @@ -1,22 +1,22 @@ import Block from '../Block'; import Wrapper from './shared/Wrapper'; import deindent from '../../../utils/deindent'; -import Document from '../../nodes/Document'; +import Body from '../../nodes/Body'; -export default class DocumentWrapper extends Wrapper { - node: Document; +export default class BodyWrapper extends Wrapper { + node: Body; render(block: Block, parentNode: string, parentNodes: string) { this.node.handlers.forEach(handler => { const snippet = handler.render(block); block.builders.init.addBlock(deindent` - document.addEventListener("${handler.name}", ${snippet}); + document.body.addEventListener("${handler.name}", ${snippet}); `); block.builders.destroy.addBlock(deindent` - document.removeEventListener("${handler.name}", ${snippet}); + document.body.removeEventListener("${handler.name}", ${snippet}); `); }); } -} \ No newline at end of file +} diff --git a/src/compile/render-dom/wrappers/Fragment.ts b/src/compile/render-dom/wrappers/Fragment.ts index 56c7e2d6f0..aad4c74c80 100644 --- a/src/compile/render-dom/wrappers/Fragment.ts +++ b/src/compile/render-dom/wrappers/Fragment.ts @@ -1,7 +1,7 @@ import Wrapper from './shared/Wrapper'; import AwaitBlock from './AwaitBlock'; +import Body from './Body'; import DebugTag from './DebugTag'; -import Document from './Document'; import EachBlock from './EachBlock'; import Element from './Element'; import Head from './Head'; @@ -21,8 +21,8 @@ import Block from '../Block'; const wrappers = { AwaitBlock, + Body, Comment: null, - Document, DebugTag, EachBlock, Element, @@ -140,4 +140,4 @@ export default class FragmentWrapper { this.nodes[i].render(block, parentNode, parentNodes); } } -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/Renderer.ts b/src/compile/render-ssr/Renderer.ts index 9e98979e26..ad7d44459e 100644 --- a/src/compile/render-ssr/Renderer.ts +++ b/src/compile/render-ssr/Renderer.ts @@ -19,9 +19,9 @@ function noop(){} const handlers: Record = { AwaitBlock, + Body: noop, Comment, DebugTag, - Document: noop, EachBlock, Element, Head, @@ -64,4 +64,4 @@ export default class Renderer { handler(node, this, options); }); } -} \ No newline at end of file +} diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts index d2cc9cc9ba..6e53ab03e0 100644 --- a/src/parse/state/tag.ts +++ b/src/parse/state/tag.ts @@ -14,7 +14,7 @@ const metaTags = new Map([ ['svelte:head', 'Head'], ['svelte:meta', 'Meta'], ['svelte:window', 'Window'], - ['svelte:document', 'Document'] + ['svelte:body', 'Body'] ]); const valid_meta_tags = [...metaTags.keys(), 'svelte:self', 'svelte:component']; @@ -101,7 +101,7 @@ export default function tag(parser: Parser) { const slug = metaTags.get(name).toLowerCase(); if (isClosingTag) { if ( - (name === 'svelte:window' || name === 'svelte:document') && + (name === 'svelte:window' || name === 'svelte:body') && parser.current().children.length ) { parser.error({ @@ -540,4 +540,4 @@ function readSequence(parser: Parser, done: () => boolean) { code: `unexpected-eof`, message: `Unexpected end of input` }); -} \ No newline at end of file +} diff --git a/test/parser/samples/error-svelte-selfdestructive/error.json b/test/parser/samples/error-svelte-selfdestructive/error.json index 1b4dc7fdec..bdef619538 100644 --- a/test/parser/samples/error-svelte-selfdestructive/error.json +++ b/test/parser/samples/error-svelte-selfdestructive/error.json @@ -1,10 +1,10 @@ { "code": "invalid-tag-name", - "message": "Valid tag names are svelte:head, svelte:meta, svelte:window, svelte:document, svelte:self or svelte:component", + "message": "Valid tag names are svelte:head, svelte:meta, svelte:window, svelte:body, svelte:self or svelte:component", "pos": 10, "start": { "character": 10, "line": 2, "column": 2 } -} \ No newline at end of file +} diff --git a/test/runtime/samples/document-event/_config.js b/test/runtime/samples/document-event/_config.js index 98e619af0f..f5e4b46f4f 100644 --- a/test/runtime/samples/document-event/_config.js +++ b/test/runtime/samples/document-event/_config.js @@ -1,13 +1,13 @@ export default { - test({ assert, component, target, window }) { + test({ assert, component, window }) { assert.deepEqual(component.events, []); const event1 = new window.Event('mouseenter'); - window.document.dispatchEvent(event1); + window.document.body.dispatchEvent(event1); assert.deepEqual(component.events, ['enter']); const event2 = new window.Event('mouseleave'); - window.document.dispatchEvent(event2); + window.document.body.dispatchEvent(event2); assert.deepEqual(component.events, ['enter', 'leave']); }, -}; \ No newline at end of file +}; diff --git a/test/runtime/samples/document-event/main.html b/test/runtime/samples/document-event/main.html index 6e7ab3a47c..078ae1ee02 100644 --- a/test/runtime/samples/document-event/main.html +++ b/test/runtime/samples/document-event/main.html @@ -6,4 +6,4 @@ } - \ No newline at end of file +