mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
committed by
GitHub
commit
54fe128cf8
@ -1,62 +0,0 @@
|
||||
import Renderer from '../../Renderer';
|
||||
import Block from '../../Block';
|
||||
import Wrapper from './Wrapper';
|
||||
import EventHandler from '../../../nodes/EventHandler';
|
||||
import validCalleeObjects from '../../../../utils/validCalleeObjects';
|
||||
|
||||
export default class EventHandlerWrapper extends Wrapper {
|
||||
node: EventHandler;
|
||||
|
||||
constructor(
|
||||
renderer: Renderer,
|
||||
block: Block,
|
||||
parent: Wrapper,
|
||||
node: EventHandler,
|
||||
stripWhitespace: boolean,
|
||||
nextSibling: Wrapper
|
||||
) {
|
||||
super(renderer, block, parent, node);
|
||||
}
|
||||
|
||||
render(block: Block, parentNode: string, parentNodes: string) {
|
||||
const { renderer } = this;
|
||||
const { component } = renderer;
|
||||
|
||||
const hoisted = this.node.shouldHoist;
|
||||
|
||||
if (this.node.insertionPoint === null) return; // TODO handle shorthand events here?
|
||||
|
||||
if (!validCalleeObjects.has(this.node.callee.name)) {
|
||||
const component_name = hoisted ? `component` : block.alias(`component`);
|
||||
|
||||
// allow event.stopPropagation(), this.select() etc
|
||||
// TODO verify that it's a valid callee (i.e. built-in or declared method)
|
||||
if (this.node.callee.name[0] === '$' && !component.methods.has(this.node.callee.name)) {
|
||||
component.code.overwrite(
|
||||
this.node.insertionPoint,
|
||||
this.node.insertionPoint + 1,
|
||||
`${component_name}.store.`
|
||||
);
|
||||
} else {
|
||||
component.code.prependRight(
|
||||
this.node.insertionPoint,
|
||||
`${component_name}.`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.node.isCustomEvent) {
|
||||
this.node.args.forEach(arg => {
|
||||
arg.overwriteThis(this.parent.var);
|
||||
});
|
||||
|
||||
if (this.node.callee && this.node.callee.name === 'this') {
|
||||
const node = this.node.callee.nodes[0];
|
||||
component.code.overwrite(node.start, node.end, this.parent.var, {
|
||||
storeName: true,
|
||||
contentOnly: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import { addListener, append, assign, createElement, createText, detachNode, init, insert, noop, proto, removeListener } from "svelte/shared.js";
|
||||
|
||||
var methods = {
|
||||
handleTouchstart() {
|
||||
// ...
|
||||
},
|
||||
|
||||
handleClick() {
|
||||
// ...
|
||||
}
|
||||
};
|
||||
|
||||
function create_main_fragment(component, ctx) {
|
||||
var div, button0, text1, button1, text3, button2;
|
||||
|
||||
function click_handler(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
component.handleClick();
|
||||
}
|
||||
|
||||
function click_handler_1(event) {
|
||||
component.handleClick();
|
||||
}
|
||||
|
||||
function click_handler_2(event) {
|
||||
component.handleClick();
|
||||
}
|
||||
|
||||
function touchstart_handler(event) {
|
||||
component.handleTouchstart();
|
||||
}
|
||||
|
||||
return {
|
||||
c() {
|
||||
div = createElement("div");
|
||||
button0 = createElement("button");
|
||||
button0.textContent = "click me";
|
||||
text1 = createText("\n\t");
|
||||
button1 = createElement("button");
|
||||
button1.textContent = "or me";
|
||||
text3 = createText("\n\t");
|
||||
button2 = createElement("button");
|
||||
button2.textContent = "or me!";
|
||||
addListener(button0, "click", click_handler);
|
||||
addListener(button1, "click", click_handler_1, { once: true, capture: true });
|
||||
addListener(button2, "click", click_handler_2, true);
|
||||
addListener(div, "touchstart", touchstart_handler, { passive: true });
|
||||
},
|
||||
|
||||
m(target, anchor) {
|
||||
insert(target, div, anchor);
|
||||
append(div, button0);
|
||||
append(div, text1);
|
||||
append(div, button1);
|
||||
append(div, text3);
|
||||
append(div, button2);
|
||||
},
|
||||
|
||||
p: noop,
|
||||
|
||||
d(detach) {
|
||||
if (detach) {
|
||||
detachNode(div);
|
||||
}
|
||||
|
||||
removeListener(button0, "click", click_handler);
|
||||
removeListener(button1, "click", click_handler_1, { once: true, capture: true });
|
||||
removeListener(button2, "click", click_handler_2, true);
|
||||
removeListener(div, "touchstart", touchstart_handler, { passive: true });
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function SvelteComponent(options) {
|
||||
init(this, options);
|
||||
this._state = assign({}, options.data);
|
||||
this._intro = true;
|
||||
|
||||
this._fragment = create_main_fragment(this, this._state);
|
||||
|
||||
if (options.target) {
|
||||
this._fragment.c();
|
||||
this._mount(options.target, options.anchor);
|
||||
}
|
||||
}
|
||||
|
||||
assign(SvelteComponent.prototype, proto);
|
||||
assign(SvelteComponent.prototype, methods);
|
||||
export default SvelteComponent;
|
||||
@ -0,0 +1,19 @@
|
||||
<div on:touchstart="handleTouchstart()">
|
||||
<button on:click|stopPropagation|preventDefault="handleClick()">click me</button>
|
||||
<button on:click|once|capture="handleClick()">or me</button>
|
||||
<button on:click|capture="handleClick()">or me!</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleTouchstart() {
|
||||
// ...
|
||||
},
|
||||
|
||||
handleClick() {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
[{
|
||||
"message": "The 'passive' and 'preventDefault' modifiers cannot be used together",
|
||||
"code": "invalid-event-modifier",
|
||||
"start": {
|
||||
"line": 1,
|
||||
"column": 5,
|
||||
"character": 5
|
||||
},
|
||||
"end": {
|
||||
"line": 1,
|
||||
"column": 52,
|
||||
"character": 52
|
||||
},
|
||||
"pos": 5
|
||||
}]
|
||||
@ -0,0 +1,3 @@
|
||||
<div on:wheel|passive|preventDefault="handleWheel()">
|
||||
oops
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
[{
|
||||
"message": "Valid event modifiers are preventDefault, stopPropagation, capture, once or passive",
|
||||
"code": "invalid-event-modifier",
|
||||
"start": {
|
||||
"line": 1,
|
||||
"column": 8,
|
||||
"character": 8
|
||||
},
|
||||
"end": {
|
||||
"line": 1,
|
||||
"column": 36,
|
||||
"character": 36
|
||||
},
|
||||
"pos": 8
|
||||
}]
|
||||
@ -0,0 +1 @@
|
||||
<button on:click|stop|bad="doThat()"></button>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
legacy: true
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
[{
|
||||
"message": "The 'once' modifier cannot be used in legacy mode",
|
||||
"code": "invalid-event-modifier",
|
||||
"start": {
|
||||
"line": 1,
|
||||
"column": 8,
|
||||
"character": 8
|
||||
},
|
||||
"end": {
|
||||
"line": 1,
|
||||
"column": 37,
|
||||
"character": 37
|
||||
},
|
||||
"pos": 8
|
||||
}]
|
||||
@ -0,0 +1 @@
|
||||
<button on:click|once="handleClick()"></button>
|
||||
@ -0,0 +1,16 @@
|
||||
<button on:click|passive="handleClick()"></button>
|
||||
<div on:touchstart|passive="handleTouchstart()"></div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleTouchstart() {
|
||||
// ...
|
||||
},
|
||||
|
||||
handleClick() {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,32 @@
|
||||
[
|
||||
{
|
||||
"message": "The passive modifier only works with wheel and touch events",
|
||||
"code": "redundant-event-modifier",
|
||||
"start": {
|
||||
"line": 1,
|
||||
"column": 8,
|
||||
"character": 8
|
||||
},
|
||||
"end": {
|
||||
"line": 1,
|
||||
"column": 40,
|
||||
"character": 40
|
||||
},
|
||||
"pos": 8
|
||||
},
|
||||
{
|
||||
"message": "Touch event handlers that don't use the 'event' object are passive by default",
|
||||
"code": "redundant-event-modifier",
|
||||
"start": {
|
||||
"line": 2,
|
||||
"column": 5,
|
||||
"character": 56
|
||||
},
|
||||
"end": {
|
||||
"line": 2,
|
||||
"column": 47,
|
||||
"character": 98
|
||||
},
|
||||
"pos": 56
|
||||
}
|
||||
]
|
||||
Loading…
Reference in new issue