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

Merge pull request #732 from sveltejs/gh-638

Browse Source 
Event propagation shorthand
pull/733/head
Rich Harris 7 years ago committed by GitHub
parent 6a74db035b 1b92f5fa20
commit 71047c2961
11 changed files with 115 additions and 43 deletions
Show Stats Download Patch File Download Diff File

33
src/generators/dom/visitors/Component/EventHandler.ts
Unescape View File

@ -13,22 +13,25 @@ export default function visitEventHandler(
local
) {
// TODO verify that it's a valid callee (i.e. built-in or declared method)
generator.addSourcemapLocations(attribute.expression);
generator.code.prependRight(
attribute.expression.start,
`${block.alias('component')}.`
);
const usedContexts: string[] = [];
attribute.expression.arguments.forEach((arg: Node) => {
const { contexts } = block.contextualise(arg, null, true);
contexts.forEach(context => {
if (!~usedContexts.indexOf(context)) usedContexts.push(context);
if (!~local.allUsedContexts.indexOf(context))
local.allUsedContexts.push(context);
if (attribute.expression) {
generator.addSourcemapLocations(attribute.expression);
generator.code.prependRight(
attribute.expression.start,
`${block.alias('component')}.`
);
attribute.expression.arguments.forEach((arg: Node) => {
const { contexts } = block.contextualise(arg, null, true);
contexts.forEach(context => {
if (!~usedContexts.indexOf(context)) usedContexts.push(context);
if (!~local.allUsedContexts.indexOf(context))
local.allUsedContexts.push(context);
});
});
});
}
// TODO hoist event handlers? can do `this.__component.method(...)`
const declarations = usedContexts.map(name => {
@ -42,7 +45,9 @@ export default function visitEventHandler(
const handlerBody =
(declarations.length ? declarations.join('\n') + '\n\n' : '') +
`[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
(attribute.expression ?
`[✂${attribute.expression.start}-${attribute.expression.end}✂];` :
`${block.alias('component')}.fire('${attribute.name}', event);`);
local.create.addBlock(deindent`
${local.name}.on( '${attribute.name}', function ( event ) {

47
src/generators/dom/visitors/Element/EventHandler.ts
Unescape View File

@ -16,30 +16,33 @@ export default function visitEventHandler(
const isCustomEvent = generator.events.has(name);
const shouldHoist = !isCustomEvent && state.inEachBlock;
generator.addSourcemapLocations(attribute.expression);
const flattened = flattenReference(attribute.expression.callee);
if (flattened.name !== 'event' && flattened.name !== 'this') {
// allow event.stopPropagation(), this.select() etc
// TODO verify that it's a valid callee (i.e. built-in or declared method)
generator.code.prependRight(
attribute.expression.start,
`${block.alias('component')}.`
);
if (shouldHoist) state.usesComponent = true; // this feels a bit hacky but it works!
}
const context = shouldHoist ? null : state.parentNode;
const usedContexts: string[] = [];
attribute.expression.arguments.forEach((arg: Node) => {
const { contexts } = block.contextualise(arg, context, true);
contexts.forEach(context => {
if (!~usedContexts.indexOf(context)) usedContexts.push(context);
if (!~state.allUsedContexts.indexOf(context))
state.allUsedContexts.push(context);
if (attribute.expression) {
generator.addSourcemapLocations(attribute.expression);
const flattened = flattenReference(attribute.expression.callee);
if (flattened.name !== 'event' && flattened.name !== 'this') {
// allow event.stopPropagation(), this.select() etc
// TODO verify that it's a valid callee (i.e. built-in or declared method)
generator.code.prependRight(
attribute.expression.start,
`${block.alias('component')}.`
);
if (shouldHoist) state.usesComponent = true; // this feels a bit hacky but it works!
}
attribute.expression.arguments.forEach((arg: Node) => {
const { contexts } = block.contextualise(arg, context, true);
contexts.forEach(context => {
if (!~usedContexts.indexOf(context)) usedContexts.push(context);
if (!~state.allUsedContexts.indexOf(context))
state.allUsedContexts.push(context);
});
});
});
}
const _this = context || 'this';
const declarations = usedContexts.map(name => {
@ -66,7 +69,9 @@ export default function visitEventHandler(
${state.usesComponent &&
`var ${block.alias('component')} = ${_this}._svelte.component;`}
${declarations}
[✂${attribute.expression.start}-${attribute.expression.end}✂];
${attribute.expression ?
`[✂${attribute.expression.start}-${attribute.expression.end}✂];` :
`${block.alias('component')}.fire('${attribute.name}', event);`}
`;
if (isCustomEvent) {

2
src/parse/index.ts
Unescape View File

@ -111,6 +111,8 @@ export class Parser {
if (required) {
this.error(`Expected ${str}`);
}
return false;
}
match(str: string) {

17
src/parse/read/directives.ts
Unescape View File

@ -43,16 +43,21 @@ function readExpression(parser: Parser, start: number, quoteMark) {
export function readEventHandlerDirective(
parser: Parser,
start: number,
name: string
name: string,
hasValue: boolean
) {
const quoteMark = parser.eat(`'`) ? `'` : parser.eat(`"`) ? `"` : null;
let expression;
const expressionStart = parser.index;
if (hasValue) {
const quoteMark = parser.eat(`'`) ? `'` : parser.eat(`"`) ? `"` : null;
const expression = readExpression(parser, expressionStart, quoteMark);
const expressionStart = parser.index;
if (expression.type !== 'CallExpression') {
parser.error(`Expected call expression`, expressionStart);
expression = readExpression(parser, expressionStart, quoteMark);
if (expression.type !== 'CallExpression') {
parser.error(`Expected call expression`, expressionStart);
}
}
return {

3
src/parse/state/tag.ts
Unescape View File

@ -256,8 +256,7 @@ function readAttribute(parser: Parser, uniqueNames) {
parser.allowWhitespace();
if (/^on:/.test(name)) {
parser.eat('=', true);
return readEventHandlerDirective(parser, start, name.slice(3));
return readEventHandlerDirective(parser, start, name.slice(3), parser.eat('='));
}
if (/^bind:/.test(name)) {

2
src/validate/html/validateEventHandler.ts
Unescape View File

@ -10,6 +10,8 @@ export default function validateEventHandlerCallee(
attribute: Node,
refCallees: Node[]
) {
if (!attribute.expression) return;
const { callee, start, type } = attribute.expression;
if (type !== 'CallExpression') {

1
test/runtime/samples/event-handler-shorthand-component/Widget.html
Unescape View File

@ -0,0 +1 @@
<button on:click='fire("foo", { answer: 42 })'>click me</button>

18
test/runtime/samples/event-handler-shorthand-component/_config.js
Unescape View File

@ -0,0 +1,18 @@
export default {
html: `
<button>click me</button>
`,
test (assert, component, target, window) {
const button = target.querySelector('button');
const event = new window.MouseEvent('click');
let answer;
component.on('foo', event => {
answer = event.answer;
});
button.dispatchEvent(event);
assert.equal(answer, 42);
}
};

11
test/runtime/samples/event-handler-shorthand-component/main.html
Unescape View File

@ -0,0 +1,11 @@
<Widget on:foo/>
<script>
import Widget from './Widget.html';
export default {
components: {
Widget
}
};
</script>

13
test/runtime/samples/event-handler-shorthand/_config.js
Unescape View File

@ -0,0 +1,13 @@
export default {
html: `
<button>click me</button>
`,
test (assert, component, target, window) {
const button = target.querySelector('button');
const event = new window.MouseEvent('click');
button.dispatchEvent(event);
assert.ok(component.clicked);
}
};

11
test/runtime/samples/event-handler-shorthand/main.html
Unescape View File

@ -0,0 +1,11 @@
<button on:click>click me</button>
<script>
export default {
oncreate () {
this.on('click', () => {
this.clicked = true;
});
}
};
</script>
Write Preview
Loading…
Cancel
Save