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

more efficient event listeners

Browse Source
pull/1839/head
Rich Harris 7 years ago
parent e87ab18914
commit e394493f71
9 changed files with 71 additions and 62 deletions
Show Stats Download Patch File Download Diff File

26
src/compile/render-dom/Block.ts
Unescape View File

@ -47,6 +47,8 @@ export default class Block {
destroy: CodeBuilder;
};
event_listeners: string[] = [];
maintainContext: boolean;
hasAnimation: boolean;
hasIntros: boolean;
@ -234,6 +236,30 @@ export default class Block {
this.builders.mount.addLine(`${this.autofocus}.focus();`);
}
if (this.event_listeners.length > 0) {
this.addVariable('#dispose');
if (this.event_listeners.length === 1) {
this.builders.hydrate.addLine(
`#dispose = ${this.event_listeners[0]};`
);
this.builders.destroy.addLine(
`#dispose();`
)
} else {
this.builders.hydrate.addBlock(deindent`
#dispose = [
${this.event_listeners.join(',\n')}
];
`);
this.builders.destroy.addLine(
`@run_all(#dispose);`
);
}
}
const properties = new CodeBuilder();
if (localKey) {

8
src/compile/render-dom/wrappers/Element/index.ts
Unescape View File

@ -503,12 +503,8 @@ export default class ElementWrapper extends Wrapper {
`${resize_listener}.cancel();`
);
} else {
block.builders.hydrate.addLine(
`@addListener(${this.var}, "${name}", ${callee});`
);
block.builders.destroy.addLine(
`@removeListener(${this.var}, "${name}", ${callee});`
block.event_listeners.push(
`@addListener(${this.var}, "${name}", ${callee})`
);
}
});

16
src/compile/render-dom/wrappers/shared/addEventHandlers.ts
Unescape View File

@ -20,20 +20,12 @@ export default function addEventHandlers(
? 'true'
: `{ ${opts.map(opt => `${opt}: true`).join(', ')} }`;
block.builders.hydrate.addLine(
`@addListener(${target}, "${handler.name}", ${snippet}, ${optString});`
);
block.builders.destroy.addLine(
`@removeListener(${target}, "${handler.name}", ${snippet}, ${optString});`
block.event_listeners.push(
`@addListener(${target}, "${handler.name}", ${snippet}, ${optString})`
);
} else {
block.builders.hydrate.addLine(
`@addListener(${target}, "${handler.name}", ${snippet});`
);
block.builders.destroy.addLine(
`@removeListener(${target}, "${handler.name}", ${snippet});`
block.event_listeners.push(
`@addListener(${target}, "${handler.name}", ${snippet})`
);
}

5
src/internal/dom.js
Unescape View File

@ -75,10 +75,7 @@ export function createComment() {
export function addListener(node, event, handler, options) {
node.addEventListener(event, handler, options);
}
export function removeListener(node, event, handler, options) {
node.removeEventListener(event, handler, options);
return () => node.removeEventListener(event, handler, options);
}
export function setAttribute(node, attribute, value) {

19
test/js/samples/event-modifiers/expected.js
Unescape View File

@ -1,8 +1,8 @@
/* generated by Svelte vX.Y.Z-alpha1 */
import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, removeListener, run, safe_not_equal } from "svelte/internal.js";
import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, run, run_all, safe_not_equal } from "svelte/internal.js";
function create_fragment(component, ctx) {
var div, button0, text1, button1, text3, button2, current;
var div, button0, text1, button1, text3, button2, current, dispose;
function click_handler(event) {
event.stopPropagation();
@ -21,10 +21,12 @@ function create_fragment(component, ctx) {
text3 = createText("\n\t");
button2 = createElement("button");
button2.textContent = "or me!";
addListener(button0, click_handler);
addListener(button1, "click", handleClick, { once: true, capture: true });
addListener(button2, "click", handleClick, true);
addListener(div, "touchstart", handleTouchstart, { passive: true });
dispose = [
addListener(button0, click_handler),
addListener(button1, "click", handleClick, { once: true, capture: true }),
addListener(button2, "click", handleClick, true),
addListener(div, "touchstart", handleTouchstart, { passive: true })
];
},
m(target, anchor) {
@ -51,10 +53,7 @@ function create_fragment(component, ctx) {
detachNode(div);
}
removeListener(button0, click_handler);
removeListener(button1, "click", handleClick, { once: true, capture: true });
removeListener(button2, "click", handleClick, true);
removeListener(div, "touchstart", handleTouchstart, { passive: true });
run_all(dispose);
}
};
}

8
test/js/samples/input-files/expected.js
Unescape View File

@ -1,15 +1,15 @@
/* generated by Svelte vX.Y.Z-alpha1 */
import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, removeListener, run, safe_not_equal, setAttribute } from "svelte/internal.js";
import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, run, safe_not_equal, setAttribute } from "svelte/internal.js";
function create_fragment(component, ctx) {
var input, input_updating = false, current;
var input, input_updating = false, current, dispose;
return {
c() {
input = createElement("input");
addListener(input, "input", ctx.input_input_handler);
setAttribute(input, "type", "file");
input.multiple = true;
dispose = addListener(input, "input", ctx.input_input_handler);
},
m(target, anchor) {
@ -36,7 +36,7 @@ function create_fragment(component, ctx) {
detachNode(input);
}
removeListener(input, "input", ctx.input_input_handler);
dispose();
}
};
}

14
test/js/samples/input-range/expected.js
Unescape View File

@ -1,15 +1,18 @@
/* generated by Svelte vX.Y.Z-alpha1 */
import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, removeListener, run, safe_not_equal, setAttribute, toNumber } from "svelte/internal.js";
import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, run, run_all, safe_not_equal, setAttribute, toNumber } from "svelte/internal.js";
function create_fragment(component, ctx) {
var input, current;
var input, current, dispose;
return {
c() {
input = createElement("input");
addListener(input, "change", ctx.input_change_input_handler);
addListener(input, "input", ctx.input_change_input_handler);
setAttribute(input, "type", "range");
dispose = [
addListener(input, "change", ctx.input_change_input_handler),
addListener(input, "input", ctx.input_change_input_handler)
];
},
m(target, anchor) {
@ -36,8 +39,7 @@ function create_fragment(component, ctx) {
detachNode(input);
}
removeListener(input, "change", ctx.input_change_input_handler);
removeListener(input, "input", ctx.input_change_input_handler);
run_all(dispose);
}
};
}

8
test/js/samples/input-without-blowback-guard/expected.js
Unescape View File

@ -1,14 +1,14 @@
/* generated by Svelte vX.Y.Z-alpha1 */
import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, removeListener, run, safe_not_equal, setAttribute } from "svelte/internal.js";
import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, flush, init, insert, run, safe_not_equal, setAttribute } from "svelte/internal.js";
function create_fragment(component, ctx) {
var input, current;
var input, current, dispose;
return {
c() {
input = createElement("input");
addListener(input, "change", ctx.input_change_handler);
setAttribute(input, "type", "checkbox");
dispose = addListener(input, "change", ctx.input_change_handler);
},
m(target, anchor) {
@ -35,7 +35,7 @@ function create_fragment(component, ctx) {
detachNode(input);
}
removeListener(input, "change", ctx.input_change_handler);
dispose();
}
};
}

29
test/js/samples/media-bindings/expected.js
Unescape View File

@ -1,23 +1,26 @@
/* generated by Svelte vX.Y.Z-alpha1 */
import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, createElement, detachNode, flush, init, insert, removeListener, run, safe_not_equal, timeRangesToArray } from "svelte/internal.js";
import { SvelteComponent as SvelteComponent_1, addListener, add_render_callback, createElement, detachNode, flush, init, insert, run, run_all, safe_not_equal, timeRangesToArray } from "svelte/internal.js";
function create_fragment(component, ctx) {
var audio, audio_is_paused = true, audio_updating = false, audio_animationframe, current;
var audio, audio_is_paused = true, audio_updating = false, audio_animationframe, current, dispose;
return {
c() {
audio = createElement("audio");
addListener(audio, "timeupdate", ctx.audio_timeupdate_handler);
if (ctx.played === void 0 || ctx.currentTime === void 0) add_render_callback(() => ctx.audio_timeupdate_handler.call(audio));
addListener(audio, "durationchange", ctx.audio_durationchange_handler);
if (ctx.duration === void 0) add_render_callback(() => ctx.audio_durationchange_handler.call(audio));
addListener(audio, "play", ctx.audio_play_pause_handler);
addListener(audio, "pause", ctx.audio_play_pause_handler);
addListener(audio, "progress", ctx.audio_progress_handler);
if (ctx.buffered === void 0) add_render_callback(() => ctx.audio_progress_handler.call(audio));
addListener(audio, "loadedmetadata", ctx.audio_loadedmetadata_handler);
if (ctx.buffered === void 0 || ctx.seekable === void 0) add_render_callback(() => ctx.audio_loadedmetadata_handler.call(audio));
addListener(audio, "volumechange", ctx.audio_volumechange_handler);
dispose = [
addListener(audio, "timeupdate", ctx.audio_timeupdate_handler),
addListener(audio, "durationchange", ctx.audio_durationchange_handler),
addListener(audio, "play", ctx.audio_play_pause_handler),
addListener(audio, "pause", ctx.audio_play_pause_handler),
addListener(audio, "progress", ctx.audio_progress_handler),
addListener(audio, "loadedmetadata", ctx.audio_loadedmetadata_handler),
addListener(audio, "volumechange", ctx.audio_volumechange_handler)
];
},
m(target, anchor) {
@ -46,13 +49,7 @@ function create_fragment(component, ctx) {
detachNode(audio);
}
removeListener(audio, "timeupdate", ctx.audio_timeupdate_handler);
removeListener(audio, "durationchange", ctx.audio_durationchange_handler);
removeListener(audio, "play", ctx.audio_play_pause_handler);
removeListener(audio, "pause", ctx.audio_play_pause_handler);
removeListener(audio, "progress", ctx.audio_progress_handler);
removeListener(audio, "loadedmetadata", ctx.audio_loadedmetadata_handler);
removeListener(audio, "volumechange", ctx.audio_volumechange_handler);
run_all(dispose);
}
};
}

Write Preview
Loading…
Cancel
Save