Merge pull request #1970 from sveltejs/gh-1846

replace <svelte:document> with <svelte:body>

site/content/guide/06-special-components.md

@@ -114,11 +114,9 @@ You can also bind to certain values — so far `innerWidth`, `outerWidth`, `inne
 ```
 
 
-### `<svelte:document>`
+### `<svelte:body>`
 
-TODO REPLACE THIS WITH svelte:body
-
-The `<svelte:document>` tag, just like `<svelte:window>`, 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 `<svelte:body>` tag, just like `<svelte:window>`, 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`.
 
 
 ### `<svelte:head>`

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) {

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;
 	});
-}
+}

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});
 			`);
 		});
 	}
-}
+}

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);
 		}
 	}
-}
+}

src/compile/render-ssr/Renderer.ts

@@ -19,9 +19,9 @@ function noop(){}
 
 const handlers: Record<string, Handler> = {
 	AwaitBlock,
+	Body: noop,
 	Comment,
 	DebugTag,
-	Document: noop,
 	EachBlock,
 	Element,
 	Head,
@@ -64,4 +64,4 @@ export default class Renderer {
 			handler(node, this, options);
 		});
 	}
-}
+}

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`
 	});
-}
+}

test/parser/samples/error-svelte-selfdestructive/error.json

@@ -1,10 +1,10 @@
 {
 	"code": "invalid-tag-name",
-	"message": "Valid <svelte:...> tag names are svelte:head, svelte:meta, svelte:window, svelte:document, svelte:self or svelte:component",
+	"message": "Valid <svelte:...> 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
 	}
-}
+}

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']);
 	},
-};
+};

test/runtime/samples/document-event/main.html

@@ -6,4 +6,4 @@
 	}
 </script>
 
-<svelte:document on:mouseenter='{() => log("enter")}' on:mouseleave='{() => log("leave")}'/>
+<svelte:body on:mouseenter='{() => log("enter")}' on:mouseleave='{() => log("leave")}'/>