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

Convert src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts to JavaScript

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 5c7b9594dd
commit 0b3af67290
2 changed files with 76 additions and 70 deletions
Show Stats Download Patch File Download Diff File

18
src/compiler/compile/render_dom/wrappers/Element/Binding.js
Unescape View File

@ -11,7 +11,7 @@ export default class BindingWrapper {
/** @type {import('../../../nodes/Binding.js').default} */
node = undefined;
/** @type {ElementWrapper | InlineComponentWrapper} */
/** @type {import('./index.js').default | import('../InlineComponent/index.js').default} */
parent = undefined;
/** @type {string} */
@ -19,9 +19,9 @@ export default class BindingWrapper {
/**
* @type {{
* uses_context: boolean;
* mutation: Node | Node[];
* mutation: import('estree').Node | import('estree').Node[];
* contextual_dependencies: Set<string>;
* lhs?: Node;
* lhs?: import('estree').Node;
* }}
*/
handler = undefined;
@ -41,7 +41,7 @@ export default class BindingWrapper {
/**
* @param {import('../../Block.js').default} block
* @param {import('../../../nodes/Binding.js').default} node
* @param {ElementWrapper | InlineComponentWrapper} parent
* @param {import('./index.js').default | import('../InlineComponent/index.js').default} parent
*/
constructor(block, node, parent) {
this.node = node;
@ -154,8 +154,8 @@ export default class BindingWrapper {
case 'group': {
block.renderer.add_to_context('$$binding_groups');
this.binding_group.add_element(block, this.parent.var);
if (/** @type {import('../Element.js').default} */ (this.parent).has_dynamic_value) {
update_or_condition = /** @type {import('../Element.js').default} */ (this.parent)
if (/** @type {import('./index.js').default} */ (this.parent).has_dynamic_value) {
update_or_condition = /** @type {import('./index.js').default} */ (this.parent)
.dynamic_value_condition;
}
break;
@ -225,7 +225,7 @@ export default class BindingWrapper {
}
/**
* @param {ElementWrapper | InlineComponentWrapper} element
* @param {import('./index.js').default | import('../InlineComponent/index.js').default} element
* @param {BindingWrapper} binding
* @param {boolean} mounting
*/
@ -385,7 +385,7 @@ function get_event_handler(binding, renderer, block, name, lhs) {
const contextual_dependencies = new Set(binding.node.expression.contextual_dependencies);
const context = block.bindings.get(name);
/** @type {Node[] | undefined} */
/** @type {import('estree').Node[] | undefined} */
let set_store;
if (context) {
const { object, property, store, snippet } = context;
@ -418,7 +418,7 @@ function get_event_handler(binding, renderer, block, name, lhs) {
/**
* @param {import('../../Renderer.js').default} _renderer
* @param {ElementWrapper | InlineComponentWrapper} element
* @param {import('./index.js').default | import('../InlineComponent/index.js').default} element
* @param {BindingWrapper} binding
* @param {Set<string>} contextual_dependencies
*/

128
src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
Unescape View File

@ -1,76 +1,82 @@
import EventHandler from '../../../nodes/EventHandler';
import Wrapper from '../shared/Wrapper';
import Block from '../../Block';
import { b, x, p } from 'code-red';
import { Expression } from 'estree';
const TRUE = x`true`;
const FALSE = x`false`;
const TRUE = x `true`;
const FALSE = x `false`;
/** */
export default class EventHandlerWrapper {
node: EventHandler;
parent: Wrapper;
constructor(node: EventHandler, parent: Wrapper) {
this.node = node;
this.parent = parent;
/** @type {import('../../../nodes/EventHandler.js').default} */
node;
if (!node.expression) {
this.parent.renderer.add_to_context(node.handler_name.name);
/** @type {import('../shared/Wrapper.js').default} */
parent;
this.parent.renderer.component.partly_hoisted.push(b`
/**
* @param {import('../../../nodes/EventHandler.js').default} node
* @param {import('../shared/Wrapper.js').default} parent
*/
constructor(node, parent) {
this.node = node;
this.parent = parent;
if (!node.expression) {
this.parent.renderer.add_to_context(node.handler_name.name);
this.parent.renderer.component.partly_hoisted.push(b `
function ${node.handler_name.name}(event) {
@bubble.call(this, $$self, event);
}
`);
}
}
get_snippet(block: Block) {
const snippet = this.node.expression
? this.node.expression.manipulate(block)
: block.renderer.reference(this.node.handler_name);
}
}
if (this.node.reassigned) {
block.maintain_context = true;
return x`function () { if (@is_function(${snippet})) ${snippet}.apply(this, arguments); }`;
}
return snippet;
}
/** @param {import('../../Block.js').default} block */
get_snippet(block) {
const snippet = this.node.expression
? this.node.expression.manipulate(block)
: block.renderer.reference(this.node.handler_name);
if (this.node.reassigned) {
block.maintain_context = true;
return x `function () { if (@is_function(${snippet})) ${snippet}.apply(this, arguments); }`;
}
return snippet;
}
render(block: Block, target: string | Expression) {
let snippet = this.get_snippet(block);
if (this.node.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`;
if (this.node.modifiers.has('stopPropagation')) snippet = x`@stop_propagation(${snippet})`;
if (this.node.modifiers.has('stopImmediatePropagation'))
snippet = x`@stop_immediate_propagation(${snippet})`;
if (this.node.modifiers.has('self')) snippet = x`@self(${snippet})`;
if (this.node.modifiers.has('trusted')) snippet = x`@trusted(${snippet})`;
/**
* @param {import('../../Block.js').default} block
* @param {string | import('estree').Expression} target
*/
render(block, target) {
let snippet = this.get_snippet(block);
if (this.node.modifiers.has('preventDefault'))
snippet = x `@prevent_default(${snippet})`;
if (this.node.modifiers.has('stopPropagation'))
snippet = x `@stop_propagation(${snippet})`;
if (this.node.modifiers.has('stopImmediatePropagation'))
snippet = x `@stop_immediate_propagation(${snippet})`;
if (this.node.modifiers.has('self'))
snippet = x `@self(${snippet})`;
if (this.node.modifiers.has('trusted'))
snippet = x `@trusted(${snippet})`;
const args = [];
const opts = ['nonpassive', 'passive', 'once', 'capture'].filter((mod) => this.node.modifiers.has(mod));
if (opts.length) {
if (opts.length === 1 && opts[0] === 'capture') {
args.push(TRUE);
}
else {
args.push(x `{ ${opts.map((opt) => (opt === 'nonpassive' ? p `passive: false` : p `${opt}: true`))} }`);
}
}
else if (block.renderer.options.dev) {
args.push(FALSE);
}
if (block.renderer.options.dev) {
args.push(this.node.modifiers.has('preventDefault') ? TRUE : FALSE);
args.push(this.node.modifiers.has('stopPropagation') ? TRUE : FALSE);
args.push(this.node.modifiers.has('stopImmediatePropagation') ? TRUE : FALSE);
}
block.event_listeners.push(x `@listen(${target}, "${this.node.name}", ${snippet}, ${args})`);
}
}
const args = [];
const opts = ['nonpassive', 'passive', 'once', 'capture'].filter((mod) =>
this.node.modifiers.has(mod)
);
if (opts.length) {
if (opts.length === 1 && opts[0] === 'capture') {
args.push(TRUE);
} else {
args.push(
x`{ ${opts.map((opt) => (opt === 'nonpassive' ? p`passive: false` : p`${opt}: true`))} }`
);
}
} else if (block.renderer.options.dev) {
args.push(FALSE);
}
if (block.renderer.options.dev) {
args.push(this.node.modifiers.has('preventDefault') ? TRUE : FALSE);
args.push(this.node.modifiers.has('stopPropagation') ? TRUE : FALSE);
args.push(this.node.modifiers.has('stopImmediatePropagation') ? TRUE : FALSE);
}
block.event_listeners.push(x`@listen(${target}, "${this.node.name}", ${snippet}, ${args})`);
}
}

Write Preview
Loading…
Cancel
Save