From 0b3af67290133831a5da153f0795766bdba16989 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 12 May 2023 13:19:42 +0200 Subject: [PATCH] Convert src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts to JavaScript --- .../render_dom/wrappers/Element/Binding.js | 18 +-- .../wrappers/Element/EventHandler.ts | 128 +++++++++--------- 2 files changed, 76 insertions(+), 70 deletions(-) diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.js b/src/compiler/compile/render_dom/wrappers/Element/Binding.js index 65428e3840..74a5beb200 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Binding.js +++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.js @@ -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; - * 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} contextual_dependencies */ diff --git a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts index 99ecb94b98..77bac25d47 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts @@ -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})`); - } -}