diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/EventHandler.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/EventHandler.ts index 159c7997c..277212740 100644 --- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/EventHandler.ts +++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/EventHandler.ts @@ -19,9 +19,9 @@ export function handleEventHandler( const nameEnd = nameStart + attr.name.length; if (element instanceof Element) { - // Prefix with "on" for better mapping. + // Prefix with "on:" for better mapping. // Surround with quotes because event name could contain invalid prop chars. - surroundWith(str, [nameStart, nameEnd], '"on', '"'); + surroundWith(str, [nameStart, nameEnd], '"on:', '"'); element.addAttribute( [[nameStart, nameEnd]], attr.expression diff --git a/packages/svelte2tsx/svelte-jsx.d.ts b/packages/svelte2tsx/svelte-jsx.d.ts index f6f158dbe..2b8f711ea 100644 --- a/packages/svelte2tsx/svelte-jsx.d.ts +++ b/packages/svelte2tsx/svelte-jsx.d.ts @@ -62,14 +62,335 @@ declare namespace svelteHTML { // This interface is not complete. Only properties accepting // unit-less numbers are listed here (see CSSProperty.js in React) - // eslint-disable-next-line @typescript-eslint/no-empty-interface - interface DOMAttributes extends svelte.JSX.DOMAttributes {} + interface DOMAttributes { + // Clipboard Events + "on:copy"?: ClipboardEventHandler | undefined | null; + "on:cut"?: ClipboardEventHandler | undefined | null; + "on:paste"?: ClipboardEventHandler | undefined | null; + + // Composition Events + "on:compositionend"?: CompositionEventHandler | undefined | null; + "on:compositionstart"?: CompositionEventHandler | undefined | null; + "on:compositionupdate"?: CompositionEventHandler | undefined | null; + + // Focus Events + "on:focus"?: FocusEventHandler | undefined | null; + "on:focusin"?: FocusEventHandler | undefined | null; + "on:focusout"?: FocusEventHandler | undefined | null; + "on:blur"?: FocusEventHandler | undefined | null; + + // Form Events + "on:change"?: FormEventHandler | undefined | null; + "on:input"?: FormEventHandler | undefined | null; + "on:reset"?: FormEventHandler | undefined | null; + "on:submit"?: EventHandler | undefined | null; + "on:invalid"?: EventHandler | undefined | null; + "on:beforeinput"?: EventHandler | undefined | null; + + // Image Events + "on:load"?: EventHandler | undefined | null; + "on:error"?: EventHandler | undefined | null; // also a Media Event + + // Detail Events + "on:toggle"?: EventHandler | undefined | null; + + // Keyboard Events + "on:keydown"?: KeyboardEventHandler | undefined | null; + "on:keypress"?: KeyboardEventHandler | undefined | null; + "on:keyup"?: KeyboardEventHandler | undefined | null; + + // Media Events + "on:abort"?: EventHandler | undefined | null; + "on:canplay"?: EventHandler | undefined | null; + "on:canplaythrough"?: EventHandler | undefined | null; + "on:cuechange"?: EventHandler | undefined | null; + "on:durationchange"?: EventHandler | undefined | null; + "on:emptied"?: EventHandler | undefined | null; + "on:encrypted"?: EventHandler | undefined | null; + "on:ended"?: EventHandler | undefined | null; + "on:loadeddata"?: EventHandler | undefined | null; + "on:loadedmetadata"?: EventHandler | undefined | null; + "on:loadstart"?: EventHandler | undefined | null; + "on:pause"?: EventHandler | undefined | null; + "on:play"?: EventHandler | undefined | null; + "on:playing"?: EventHandler | undefined | null; + "on:progress"?: EventHandler | undefined | null; + "on:ratechange"?: EventHandler | undefined | null; + "on:seeked"?: EventHandler | undefined | null; + "on:seeking"?: EventHandler | undefined | null; + "on:stalled"?: EventHandler | undefined | null; + "on:suspend"?: EventHandler | undefined | null; + "on:timeupdate"?: EventHandler | undefined | null; + "on:volumechange"?: EventHandler | undefined | null; + "on:waiting"?: EventHandler | undefined | null; + + // MouseEvents + "on:auxclick"?: MouseEventHandler | undefined | null; + "on:click"?: MouseEventHandler | undefined | null; + "on:contextmenu"?: MouseEventHandler | undefined | null; + "on:dblclick"?: MouseEventHandler | undefined | null; + "on:drag"?: DragEventHandler | undefined | null; + "on:dragend"?: DragEventHandler | undefined | null; + "on:dragenter"?: DragEventHandler | undefined | null; + "on:dragexit"?: DragEventHandler | undefined | null; + "on:dragleave"?: DragEventHandler | undefined | null; + "on:dragover"?: DragEventHandler | undefined | null; + "on:dragstart"?: DragEventHandler | undefined | null; + "on:drop"?: DragEventHandler | undefined | null; + "on:mousedown"?: MouseEventHandler | undefined | null; + "on:mouseenter"?: MouseEventHandler | undefined | null; + "on:mouseleave"?: MouseEventHandler | undefined | null; + "on:mousemove"?: MouseEventHandler | undefined | null; + "on:mouseout"?: MouseEventHandler | undefined | null; + "on:mouseover"?: MouseEventHandler | undefined | null; + "on:mouseup"?: MouseEventHandler | undefined | null; + + // Selection Events + "on:select"?: EventHandler | undefined | null; + "on:selectionchange"?: EventHandler | undefined | null; + "on:selectstart"?: EventHandler | undefined | null; + + // Touch Events + "on:touchcancel"?: TouchEventHandler | undefined | null; + "on:touchend"?: TouchEventHandler | undefined | null; + "on:touchmove"?: TouchEventHandler | undefined | null; + "on:touchstart"?: TouchEventHandler | undefined | null; + + // Pointer Events + "on:gotpointercapture"?: PointerEventHandler | undefined | null; + "on:pointercancel"?: PointerEventHandler | undefined | null; + "on:pointerdown"?: PointerEventHandler | undefined | null; + "on:pointerenter"?: PointerEventHandler | undefined | null; + "on:pointerleave"?: PointerEventHandler | undefined | null; + "on:pointermove"?: PointerEventHandler | undefined | null; + "on:pointerout"?: PointerEventHandler | undefined | null; + "on:pointerover"?: PointerEventHandler | undefined | null; + "on:pointerup"?: PointerEventHandler | undefined | null; + "on:lostpointercapture"?: PointerEventHandler | undefined | null; + + // UI Events + "on:scroll"?: UIEventHandler | undefined | null; + "on:resize"?: UIEventHandler | undefined | null; + + // Wheel Events + "on:wheel"?: WheelEventHandler | undefined | null; + + // Animation Events + "on:animationstart"?: AnimationEventHandler | undefined | null; + "on:animationend"?: AnimationEventHandler | undefined | null; + "on:animationiteration"?: AnimationEventHandler | undefined | null; + + // Transition Events + "on:transitionstart"?: TransitionEventHandler | undefined | null; + "on:transitionrun"?: TransitionEventHandler | undefined | null; + "on:transitionend"?: TransitionEventHandler | undefined | null; + "on:transitioncancel"?: TransitionEventHandler | undefined | null; + + // Svelte Transition Events + "on:outrostart"?: EventHandler, T> | undefined | null; + "on:outroend"?: EventHandler, T> | undefined | null; + "on:introstart"?: EventHandler, T> | undefined | null; + "on:introend"?: EventHandler, T> | undefined | null; + + // Message Events + "on:message"?: MessageEventHandler | undefined | null; + "on:messageerror"?: MessageEventHandler | undefined | null; + + // Global Events + "on:cancel"?: EventHandler | undefined | null; + "on:close"?: EventHandler | undefined | null; + "on:fullscreenchange"?: EventHandler | undefined | null; + "on:fullscreenerror"?: EventHandler | undefined | null; + } // eslint-disable-next-line @typescript-eslint/no-empty-interface interface AriaAttributes extends svelte.JSX.AriaAttributes {} - // eslint-disable-next-line @typescript-eslint/no-empty-interface - interface HTMLAttributes extends svelte.JSX.HTMLAttributes {} + interface HTMLAttributes extends AriaAttributes, DOMAttributes { + // Standard HTML Attributes + class?: string | undefined | null; + dataset?: object | undefined | null; // eslint-disable-line + accept?: string | undefined | null; + acceptcharset?: string | undefined | null; + accesskey?: string | undefined | null; + action?: string | undefined | null; + allow?: string | undefined | null; + allowfullscreen?: boolean | undefined | null; + allowtransparency?: boolean | undefined | null; + allowpaymentrequest?: boolean | undefined | null; + alt?: string | undefined | null; + as?: string | undefined | null; + async?: boolean | undefined | null; + autocomplete?: string | undefined | null; + autofocus?: boolean | undefined | null; + autoplay?: boolean | undefined | null; + capture?: 'environment' | 'user' | boolean | undefined | null; + cellpadding?: number | string | undefined | null; + cellspacing?: number | string | undefined | null; + charset?: string | undefined | null; + challenge?: string | undefined | null; + checked?: boolean | undefined | null; + cite?: string | undefined | null; + classid?: string | undefined | null; + cols?: number | undefined | null; + colspan?: number | undefined | null; + content?: string | undefined | null; + contenteditable?: 'true' | 'false' | boolean | undefined | null; + + // Doesn't work when used as HTML attribute + /** + * Elements with the contenteditable attribute support innerHTML and textContent bindings. + */ + innerHTML?: string | undefined | null; + // Doesn't work when used as HTML attribute + /** + * Elements with the contenteditable attribute support innerHTML and textContent bindings. + */ + + textContent?: string | undefined | null; + + contextmenu?: string | undefined | null; + controls?: boolean | undefined | null; + coords?: string | undefined | null; + crossorigin?: string | undefined | null; + currenttime?: number | undefined | null; + decoding?: 'async' | 'sync' | 'auto' | undefined | null; + data?: string | undefined | null; + datetime?: string | undefined | null; + default?: boolean | undefined | null; + defaultmuted?: boolean | undefined | null; + defaultplaybackrate?: number | undefined | null; + defer?: boolean | undefined | null; + dir?: string | undefined | null; + dirname?: string | undefined | null; + disabled?: boolean | undefined | null; + download?: any | undefined | null; + draggable?: boolean | 'true' | 'false' | undefined | null; + enctype?: string | undefined | null; + enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined | null; + for?: string | undefined | null; + form?: string | undefined | null; + formaction?: string | undefined | null; + formenctype?: string | undefined | null; + formmethod?: string | undefined | null; + formnovalidate?: boolean | undefined | null; + formtarget?: string | undefined | null; + frameborder?: number | string | undefined | null; + headers?: string | undefined | null; + height?: number | string | undefined | null; + hidden?: boolean | undefined | null; + high?: number | undefined | null; + href?: string | undefined | null; + hreflang?: string | undefined | null; + htmlfor?: string | undefined | null; + httpequiv?: string | undefined | null; + id?: string | undefined | null; + inputmode?: string | undefined | null; + integrity?: string | undefined | null; + is?: string | undefined | null; + ismap?: boolean | undefined | null; + keyparams?: string | undefined | null; + keytype?: string | undefined | null; + kind?: string | undefined | null; + label?: string | undefined | null; + lang?: string | undefined | null; + list?: string | undefined | null; + loading?: string | undefined | null; + loop?: boolean | undefined | null; + low?: number | undefined | null; + manifest?: string | undefined | null; + marginheight?: number | undefined | null; + marginwidth?: number | undefined | null; + max?: number | string | undefined | null; + maxlength?: number | undefined | null; + media?: string | undefined | null; + mediagroup?: string | undefined | null; + method?: string | undefined | null; + min?: number | string | undefined | null; + minlength?: number | undefined | null; + multiple?: boolean | undefined | null; + muted?: boolean | undefined | null; + name?: string | undefined | null; + nonce?: string | undefined | null; + novalidate?: boolean | undefined | null; + open?: boolean | undefined | null; + optimum?: number | undefined | null; + part?: string | undefined | null; + pattern?: string | undefined | null; + placeholder?: string | undefined | null; + playsinline?: boolean | undefined | null; + ping?: string | undefined | null; + poster?: string | undefined | null; + preload?: string | undefined | null; + radiogroup?: string | undefined | null; + readonly?: boolean | undefined | null; + referrerpolicy?: string | undefined | null; + rel?: string | undefined | null; + required?: boolean | undefined | null; + reversed?: boolean | undefined | null; + role?: string | undefined | null; + rows?: number | undefined | null; + rowspan?: number | undefined | null; + sandbox?: string | undefined | null; + scope?: string | undefined | null; + scoped?: boolean | undefined | null; + scrolling?: string | undefined | null; + seamless?: boolean | undefined | null; + selected?: boolean | undefined | null; + shape?: string | undefined | null; + size?: number | undefined | null; + sizes?: string | undefined | null; + slot?: string | undefined | null; + span?: number | undefined | null; + spellcheck?: boolean | 'true' | 'false' | undefined | null; + src?: string | undefined | null; + srcdoc?: string | undefined | null; + srclang?: string | undefined | null; + srcset?: string | undefined | null; + start?: number | undefined | null; + step?: number | string | undefined | null; + style?: string | undefined | null; + summary?: string | undefined | null; + tabindex?: number | undefined | null; + target?: string | undefined | null; + title?: string | undefined | null; + translate?: "yes" | "no" | "" | undefined | null; + type?: string | undefined | null; + usemap?: string | undefined | null; + value?: any | undefined | null; + /** + * a value between 0 and 1 + */ + volume?: number | undefined | null; + width?: number | string | undefined | null; + wmode?: string | undefined | null; + wrap?: string | undefined | null; + + // RDFa Attributes + about?: string | undefined | null; + datatype?: string | undefined | null; + inlist?: any | undefined | null; + prefix?: string | undefined | null; + property?: string | undefined | null; + resource?: string | undefined | null; + typeof?: string | undefined | null; + vocab?: string | undefined | null; + + // Non-standard Attributes + autocapitalize?: string | undefined | null; + autocorrect?: string | undefined | null; + autosave?: string | undefined | null; + color?: string | undefined | null; + controlslist?: 'nodownload' | 'nofullscreen' | 'noplaybackrate' | 'noremoteplayback'; + itemprop?: string | undefined | null; + itemscope?: boolean | undefined | null; + itemtype?: string | undefined | null; + itemid?: string | undefined | null; + itemref?: string | undefined | null; + results?: number | undefined | null; + security?: string | undefined | null; + unselectable?: boolean | undefined | null; + } // eslint-disable-next-line @typescript-eslint/no-empty-interface interface SVGAttributes extends svelte.JSX.SVGAttributes { diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expectedv2.js index 6b1b60b5a..2def2fb4c 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expectedv2.js @@ -1,4 +1,4 @@ - { svelteHTML.createElement("h1", { "onclick":()=>console.log("click"),}); } + { svelteHTML.createElement("h1", { "on:click":()=>console.log("click"),}); } { const $$_Component0C = __sveltets_2_ensureComponent(Component); const $$_Component0 = new $$_Component0C({ target: __sveltets_2_any(), props: { }});$$_Component0.$on("click", test);} { svelteHTML.createElement("img", { });__sveltets_2_ensureAction(action(svelteHTML.mapElementTag('img'),(thing)));} { svelteHTML.createElement("img", { });__sveltets_2_ensureTransition(fade(svelteHTML.mapElementTag('img'),(params)));} diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/editing-event-handler/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/editing-event-handler/expectedv2.js index 312c6d750..8993cfc30 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/editing-event-handler/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/editing-event-handler/expectedv2.js @@ -1,3 +1,3 @@ - { svelteHTML.createElement("div", { "onclick":handlers.,}); } + { svelteHTML.createElement("div", { "on:click":handlers.,}); } { const $$_Component0C = __sveltets_2_ensureComponent(Component); const $$_Component0 = new $$_Component0C({ target: __sveltets_2_any(), props: { }});$$_Component0.$on("click", handlers.);} \ No newline at end of file diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-bare/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-bare/expectedv2.js index 38a46de7e..9ae89e9a6 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-bare/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-bare/expectedv2.js @@ -1 +1 @@ - { svelteHTML.createElement("h1", { "onclick":undefined,}); } \ No newline at end of file + { svelteHTML.createElement("h1", { "on:click":undefined,}); } \ No newline at end of file diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/expectedv2.js index 5aa576eaa..6e5abcb65 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-customname/expectedv2.js @@ -1 +1 @@ - { svelteHTML.createElement("h1", { "onclick-outside":undefined,"onclick-outside2":() => 'hi',}); } \ No newline at end of file + { svelteHTML.createElement("h1", { "on:click-outside":undefined,"on:click-outside2":() => 'hi',}); } \ No newline at end of file diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-modifiers/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-modifiers/expectedv2.js index caab42067..95531480a 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-modifiers/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-modifiers/expectedv2.js @@ -1 +1 @@ - { svelteHTML.createElement("h1", { "onclick":click,}); } \ No newline at end of file + { svelteHTML.createElement("h1", { "on:click":click,}); } \ No newline at end of file diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-quoted/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-quoted/expectedv2.js index 04696ca2c..8fa03941d 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-quoted/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-quoted/expectedv2.js @@ -1,2 +1,2 @@ - { svelteHTML.createElement("button", { "onclick":(e) => {},}); } - { svelteHTML.createElement("button", { "onclick":(e) => {},}); } \ No newline at end of file + { svelteHTML.createElement("button", { "on:click":(e) => {},}); } + { svelteHTML.createElement("button", { "on:click":(e) => {},}); } \ No newline at end of file diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler/expectedv2.js index 79df435d8..256b731e6 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler/expectedv2.js +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler/expectedv2.js @@ -1 +1 @@ - { svelteHTML.createElement("h1", { "onclick":()=>console.log("click"),"onUpperCaseEvent":() => log('hi'),}); } \ No newline at end of file + { svelteHTML.createElement("h1", { "on:click":()=>console.log("click"),"on:UpperCaseEvent":() => log('hi'),}); } \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expectedv2.ts index 18e7444c9..37f1ef048 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expectedv2.ts @@ -65,13 +65,13 @@ async () => { { svelteHTML.createElement("div", { "class":`controls`,}); - { svelteHTML.createElement("button", { "onclick":() => travel(-1),"disabled":i === 0,}); } - { svelteHTML.createElement("button", { "onclick":() => travel(+1),"disabled":i === undoStack.length -1,}); } + { svelteHTML.createElement("button", { "on:click":() => travel(-1),"disabled":i === 0,}); } + { svelteHTML.createElement("button", { "on:click":() => travel(+1),"disabled":i === undoStack.length -1,}); } } - { svelteHTML.createElement("svg", { "onclick":handleClick,}); + { svelteHTML.createElement("svg", { "on:click":handleClick,}); for(const circle of __sveltets_2_ensureArray(circles)){ - { svelteHTML.createElement("circle", { "cx":circle.cx,"cy":circle.cy,"r":circle.r,"onclick":event => select(circle, event),"oncontextmenu":() => { + { svelteHTML.createElement("circle", { "cx":circle.cx,"cy":circle.cy,"r":circle.r,"on:click":event => select(circle, event),"on:contextmenu":() => { adjusting = !adjusting; if (adjusting) selected = circle; },"fill":circle === selected ? '#ccc': 'white',});} @@ -81,7 +81,7 @@ async () => { if(adjusting){ { svelteHTML.createElement("div", { "class":`adjuster`,}); { svelteHTML.createElement("p", {}); selected.cx; selected.cy; } - { svelteHTML.createElement("input", { "type":`range`,"value":selected.r,"oninput":adjust,});} + { svelteHTML.createElement("input", { "type":`range`,"value":selected.r,"on:input":adjust,});} } }}; return { props: {}, slots: {}, getters: {}, events: {} }} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expectedv2.ts index 681828dd7..8d6dfbc75 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expectedv2.ts @@ -10,7 +10,7 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":undefined,}); }}; + { svelteHTML.createElement("button", { "on:click":undefined,}); }}; return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_1_mapElementEvent('click'), 'foo': __sveltets_1_customEvent} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(render())) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-and-forwarded-event/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-and-forwarded-event/expectedv2.ts index b612ffb3a..c93b0196e 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/event-and-forwarded-event/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/event-and-forwarded-event/expectedv2.ts @@ -10,7 +10,7 @@ function render() { ; async () => { - { svelteHTML.createElement("input", { "onfocus":undefined,});}}; + { svelteHTML.createElement("input", { "on:focus":undefined,});}}; return { props: {}, slots: {}, getters: {}, events: {'focus':__sveltets_1_mapElementEvent('focus'), 'mount': __sveltets_1_customEvent} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-element/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-element/expectedv2.ts index dafff8ee4..f9f406f6c 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-element/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-element/expectedv2.ts @@ -1,6 +1,6 @@ /// ;function render() { -async () => { { svelteHTML.createElement("button", { "onclick":undefined,}); }}; +async () => { { svelteHTML.createElement("button", { "on:click":undefined,}); }}; return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_1_mapElementEvent('click')} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts index d65196c96..7dd6c3dd2 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expectedv2.ts @@ -1,7 +1,7 @@ /// ;function render() { -async () => { { svelteHTML.createElement("svelte:body", { "onclick":undefined,}); } - { svelteHTML.createElement("svelte:window", { "onresize":undefined,}); }}; +async () => { { svelteHTML.createElement("svelte:body", { "on:click":undefined,}); } + { svelteHTML.createElement("svelte:window", { "on:resize":undefined,}); }}; return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_1_mapBodyEvent('click'), 'resize':__sveltets_1_mapWindowEvent('resize')} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events-alias/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events-alias/expectedv2.ts index 179354b1d..806c8a9a6 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events-alias/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events-alias/expectedv2.ts @@ -17,7 +17,7 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":() => dispatch('btn', ''),}); }}; + { svelteHTML.createElement("button", { "on:click":() => dispatch('btn', ''),}); }}; return { props: {}, slots: {}, getters: {}, events: {'btn': __sveltets_1_customEvent, 'hi': __sveltets_1_customEvent, 'bye': __sveltets_1_customEvent} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events/expectedv2.ts index fd1173450..a3a1f3a9f 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatcher-events/expectedv2.ts @@ -17,7 +17,7 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":() => dispatch('btn', ''),}); }}; + { svelteHTML.createElement("button", { "on:click":() => dispatch('btn', ''),}); }}; return { props: {}, slots: {}, getters: {}, events: {'btn': __sveltets_1_customEvent, 'hi': __sveltets_1_customEvent, 'bye': __sveltets_1_customEvent} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatchers/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatchers/expectedv2.ts index 3a799353b..6fc894883 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatchers/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/event-dispatchers/expectedv2.ts @@ -14,7 +14,7 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":undefined,}); }}; + { svelteHTML.createElement("button", { "on:click":undefined,}); }}; return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_1_mapElementEvent('click'), 'hi': __sveltets_1_customEvent, 'bye': __sveltets_1_customEvent} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-template/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-template/expectedv2.ts index f8816c6c4..9f536daf6 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-template/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-template/expectedv2.ts @@ -1,6 +1,6 @@ /// ;function render() { -async () => { { svelteHTML.createElement("h1", { "onclick":() => { +async () => { { svelteHTML.createElement("h1", { "on:click":() => { // TODO: this is invalid Svelte right now, stores have to be top level // it's therefore okay to not append "let top1$/top2$ = __svelte_store_get(..)" diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/svelte-element/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/svelte-element/expectedv2.ts index ff17b1eaf..dfeb85824 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/svelte-element/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/svelte-element/expectedv2.ts @@ -9,7 +9,7 @@ async () => { { svelteHTML.createElement("tag", { });} { svelteHTML.createElement(tag ? 'a' : 'b', { });} { svelteHTML.createElement(tag, { });tag; } - { svelteHTML.createElement(tag, { "onclick":() => tag,});} + { svelteHTML.createElement(tag, { "on:click":() => tag,});} { svelteHTML.createElement('a', { "sveltekit:prefetch":true,"href":`https://kit.svelte.dev`,});}}; return { props: {}, slots: {}, getters: {}, events: {} }} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatcher-typed/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatcher-typed/expectedv2.ts index 06ec93748..cba15e75a 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatcher-typed/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatcher-typed/expectedv2.ts @@ -30,7 +30,7 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":() => dispatch('btn', ''),}); }}; + { svelteHTML.createElement("button", { "on:click":() => dispatch('btn', ''),}); }}; return { props: {}, slots: {}, getters: {}, events: {...__sveltets_1_toEventTypings<{ /** * A DOC diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers-same-event/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers-same-event/expectedv2.ts index 390ea7b04..13982b86a 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers-same-event/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers-same-event/expectedv2.ts @@ -19,7 +19,7 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":undefined,}); }}; + { svelteHTML.createElement("button", { "on:click":undefined,}); }}; return { props: {}, slots: {}, getters: {}, events: {...__sveltets_1_toEventTypings<{ /** * A DOC diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers/expectedv2.ts index 175a5cdcd..899dd9352 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatchers/expectedv2.ts @@ -19,7 +19,7 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":undefined,}); }}; + { svelteHTML.createElement("button", { "on:click":undefined,}); }}; return { props: {}, slots: {}, getters: {}, events: {...__sveltets_1_toEventTypings<{ /** * A DOC diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-in-event-binding/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-in-event-binding/expectedv2.ts index 7c83db819..e686c9cbd 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-in-event-binding/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-in-event-binding/expectedv2.ts @@ -1,7 +1,7 @@ /// ;function render() { async () => { { const $$_Component0C = __sveltets_2_ensureComponent(Component); const $$_Component0 = new $$_Component0C({ target: __sveltets_2_any(), props: { }});$$_Component0.$on("click", $check ? method1 : method2);} - { svelteHTML.createElement("button", { "onclick":$check ? method1 : method2,}); }}; + { svelteHTML.createElement("button", { "on:click":$check ? method1 : method2,}); }}; return { props: {}, slots: {}, getters: {}, events: {} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-assignment-operators/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-assignment-operators/expectedv2.ts index 329b08940..99198bfd5 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-assignment-operators/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-assignment-operators/expectedv2.ts @@ -21,18 +21,18 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":() => $count += myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count -= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count *= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count /= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count **= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count %= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count <<= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count >>= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count >>>= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count &= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count ^= myvar,}); } - { svelteHTML.createElement("button", { "onclick":() => $count |= myvar,}); }}; + { svelteHTML.createElement("button", { "on:click":() => $count += myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count -= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count *= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count /= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count **= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count %= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count <<= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count >>= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count >>>= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count &= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count ^= myvar,}); } + { svelteHTML.createElement("button", { "on:click":() => $count |= myvar,}); }}; return { props: {}, slots: {}, getters: {}, events: {} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-increments/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-increments/expectedv2.ts index 8a7ac317b..1ed54b64d 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-increments/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-increments/expectedv2.ts @@ -10,9 +10,9 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":() => ++$count,}); } - { svelteHTML.createElement("button", { "onclick":() => $count--,}); } - { svelteHTML.createElement("button", { "onclick":() => $count++,}); }}; + { svelteHTML.createElement("button", { "on:click":() => ++$count,}); } + { svelteHTML.createElement("button", { "on:click":() => $count--,}); } + { svelteHTML.createElement("button", { "on:click":() => $count++,}); }}; return { props: {}, slots: {}, getters: {}, events: {} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-unary-operators/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-unary-operators/expectedv2.ts index b63ffa3dd..0a85401d0 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-unary-operators/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store-with-unary-operators/expectedv2.ts @@ -12,10 +12,10 @@ function render() { ; async () => { - { svelteHTML.createElement("button", { "onclick":() => !$count,}); } - { svelteHTML.createElement("button", { "onclick":() => +$count,}); } - { svelteHTML.createElement("button", { "onclick":() => -$count,}); } - { svelteHTML.createElement("button", { "onclick":() => ~$count,}); }}; + { svelteHTML.createElement("button", { "on:click":() => !$count,}); } + { svelteHTML.createElement("button", { "on:click":() => +$count,}); } + { svelteHTML.createElement("button", { "on:click":() => -$count,}); } + { svelteHTML.createElement("button", { "on:click":() => ~$count,}); }}; return { props: {}, slots: {}, getters: {}, events: {} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store/expectedv2.ts index 2ee7d1999..dbbb81dbf 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-$store/expectedv2.ts @@ -2,7 +2,7 @@ ;function render() { $b=$b.concat(5); async () => { - { svelteHTML.createElement("h1", { "onclick":() => $b=$b.concat(5),});$b; }}; + { svelteHTML.createElement("h1", { "on:click":() => $b=$b.concat(5),});$b; }}; return { props: {}, slots: {}, getters: {}, events: {} }} export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts index b1b203480..544cf0bbc 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts @@ -6,8 +6,8 @@ async () => {if(true){ { const $$_svelte_component0C = __sveltets_2_ensureComponent(testComponent); new $$_svelte_component0C({ target: __sveltets_2_any(), props: { "propa":5,}}); { svelteHTML.createElement("h1", {}); } } - { svelteHTML.createElement("svelte:window", { "onclick":e => {},});} - { svelteHTML.createElement("svelte:body", { "onclick":e => {},});} + { svelteHTML.createElement("svelte:window", { "on:click":e => {},});} + { svelteHTML.createElement("svelte:body", { "on:click":e => {},});} { svelteHTML.createElement("svelte:head", {}); { svelteHTML.createElement("h1", {}); } }