replace <svelte:document> with <svelte:body> (#1846)

pull/1970/head
Conduitry 6 years ago
parent 88b6a26a35
commit f8d69e296f

@ -1,8 +1,8 @@
import Node from './shared/Node'; import Node from './shared/Node';
import EventHandler from './EventHandler'; import EventHandler from './EventHandler';
export default class Document extends Node { export default class Body extends Node {
type: 'Document'; type: 'Body';
handlers: EventHandler[]; handlers: EventHandler[];
constructor(component, parent, scope, info) { constructor(component, parent, scope, info) {

@ -1,6 +1,6 @@
import AwaitBlock from '../AwaitBlock'; import AwaitBlock from '../AwaitBlock';
import Body from '../Body';
import Comment from '../Comment'; import Comment from '../Comment';
import Document from '../Document';
import EachBlock from '../EachBlock'; import EachBlock from '../EachBlock';
import Element from '../Element'; import Element from '../Element';
import Head from '../Head'; import Head from '../Head';
@ -19,8 +19,8 @@ import Node from './Node';
function getConstructor(type): typeof Node { function getConstructor(type): typeof Node {
switch (type) { switch (type) {
case 'AwaitBlock': return AwaitBlock; case 'AwaitBlock': return AwaitBlock;
case 'Body': return Body;
case 'Comment': return Comment; case 'Comment': return Comment;
case 'Document': return Document;
case 'EachBlock': return EachBlock; case 'EachBlock': return EachBlock;
case 'Element': return Element; case 'Element': return Element;
case 'Head': return Head; case 'Head': return Head;
@ -50,4 +50,4 @@ export default function mapChildren(component, parent, scope, children: any[]) {
return node; return node;
}); });
} }

@ -1,22 +1,22 @@
import Block from '../Block'; import Block from '../Block';
import Wrapper from './shared/Wrapper'; import Wrapper from './shared/Wrapper';
import deindent from '../../../utils/deindent'; import deindent from '../../../utils/deindent';
import Document from '../../nodes/Document'; import Body from '../../nodes/Body';
export default class DocumentWrapper extends Wrapper { export default class BodyWrapper extends Wrapper {
node: Document; node: Body;
render(block: Block, parentNode: string, parentNodes: string) { render(block: Block, parentNode: string, parentNodes: string) {
this.node.handlers.forEach(handler => { this.node.handlers.forEach(handler => {
const snippet = handler.render(block); const snippet = handler.render(block);
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
document.addEventListener("${handler.name}", ${snippet}); document.body.addEventListener("${handler.name}", ${snippet});
`); `);
block.builders.destroy.addBlock(deindent` block.builders.destroy.addBlock(deindent`
document.removeEventListener("${handler.name}", ${snippet}); document.body.removeEventListener("${handler.name}", ${snippet});
`); `);
}); });
} }
} }

@ -1,7 +1,7 @@
import Wrapper from './shared/Wrapper'; import Wrapper from './shared/Wrapper';
import AwaitBlock from './AwaitBlock'; import AwaitBlock from './AwaitBlock';
import Body from './Body';
import DebugTag from './DebugTag'; import DebugTag from './DebugTag';
import Document from './Document';
import EachBlock from './EachBlock'; import EachBlock from './EachBlock';
import Element from './Element'; import Element from './Element';
import Head from './Head'; import Head from './Head';
@ -21,8 +21,8 @@ import Block from '../Block';
const wrappers = { const wrappers = {
AwaitBlock, AwaitBlock,
Body,
Comment: null, Comment: null,
Document,
DebugTag, DebugTag,
EachBlock, EachBlock,
Element, Element,
@ -140,4 +140,4 @@ export default class FragmentWrapper {
this.nodes[i].render(block, parentNode, parentNodes); this.nodes[i].render(block, parentNode, parentNodes);
} }
} }
} }

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

@ -14,7 +14,7 @@ const metaTags = new Map([
['svelte:head', 'Head'], ['svelte:head', 'Head'],
['svelte:meta', 'Meta'], ['svelte:meta', 'Meta'],
['svelte:window', 'Window'], ['svelte:window', 'Window'],
['svelte:document', 'Document'] ['svelte:body', 'Body']
]); ]);
const valid_meta_tags = [...metaTags.keys(), 'svelte:self', 'svelte:component']; 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(); const slug = metaTags.get(name).toLowerCase();
if (isClosingTag) { if (isClosingTag) {
if ( if (
(name === 'svelte:window' || name === 'svelte:document') && (name === 'svelte:window' || name === 'svelte:body') &&
parser.current().children.length parser.current().children.length
) { ) {
parser.error({ parser.error({
@ -540,4 +540,4 @@ function readSequence(parser: Parser, done: () => boolean) {
code: `unexpected-eof`, code: `unexpected-eof`,
message: `Unexpected end of input` message: `Unexpected end of input`
}); });
} }

@ -1,10 +1,10 @@
{ {
"code": "invalid-tag-name", "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, "pos": 10,
"start": { "start": {
"character": 10, "character": 10,
"line": 2, "line": 2,
"column": 2 "column": 2
} }
} }

@ -1,13 +1,13 @@
export default { export default {
test({ assert, component, target, window }) { test({ assert, component, window }) {
assert.deepEqual(component.events, []); assert.deepEqual(component.events, []);
const event1 = new window.Event('mouseenter'); const event1 = new window.Event('mouseenter');
window.document.dispatchEvent(event1); window.document.body.dispatchEvent(event1);
assert.deepEqual(component.events, ['enter']); assert.deepEqual(component.events, ['enter']);
const event2 = new window.Event('mouseleave'); const event2 = new window.Event('mouseleave');
window.document.dispatchEvent(event2); window.document.body.dispatchEvent(event2);
assert.deepEqual(component.events, ['enter', 'leave']); assert.deepEqual(component.events, ['enter', 'leave']);
}, },
}; };

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

Loading…
Cancel
Save