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

chore: revert bubble as prop init but keep fix for restProps

Browse Source
pull/13362/head
paoloricciuti 2 years ago
parent d5e0eaa21d
commit 5445056248
4 changed files with 32 additions and 67 deletions
Show Stats Download Patch File Download Diff File

29
packages/svelte/src/compiler/migrate/index.js
Unescape View File

@ -172,7 +172,7 @@ export function migrate(source) {
? `\n${indent}${[...state.script_insertions].join(indent)}\n`
: '';
str.prepend(
`<script>\n${imports}${script_insertions}${indent}${props_declaration}\n</script>\n\n`
`<script>\n${imports}${indent}${props_declaration}${script_insertions}\n</script>\n\n`
);
added_legacy_import = true;
}
@ -723,14 +723,6 @@ function handle_events(element, state) {
}
for (const [name, nodes] of handlers) {
// turn on:click into a prop
let exported = name;
if (!regex_is_valid_identifier.test(name)) {
exported = `'${exported}'`;
}
// Check if prop already set, could happen when on:click on different elements
let local = state.props.find((prop) => prop.exported === exported)?.local;
if (nodes.length > 1) {
state.legacy_imports.add('handlers');
}
@ -743,15 +735,13 @@ function handle_events(element, state) {
const new_line_index = state.str.original.lastIndexOf('\n', node.start);
const needs_line_delete =
state.str.original.substring(new_line_index, node.start).trim() === '' && i !== 0;
// Check if prop already set, could happen when on:click on different elements
let local = state.props.find((prop) => prop.exported === exported)?.local;
// always move once as the first modifier
const sorted_modifier = [...node.modifiers].sort((a, b) =>
a === 'once' ? 1 : b === 'once' ? -1 : 0
);
let body = local ?? name;
let body = `${state.legacy_imports_names.bubble}('${node.name}')`;
if (node.expression) {
body = state.str.original.substring(
@ -759,19 +749,6 @@ function handle_events(element, state) {
/** @type {number} */ (node.expression.end)
);
} else {
const init = `${state.legacy_imports_names.bubble}('${node.name}')`;
if (!local) {
local = state.scope.generate(`on${node.name}`);
state.props.push({
local,
exported,
init,
bindable: false,
optional: true,
type: '(event: any) => void'
});
}
body = local;
state.legacy_imports.add('createBubbler');
state.script_insertions.add(
`const ${state.legacy_imports_names.bubble} = ${state.legacy_imports_names.createBubbler}();\n`
@ -800,7 +777,7 @@ function handle_events(element, state) {
handlers_body += `${handler.needs_line_delete || nodes.length > 1 ? `\n${handler.indent}` : ''}${handler.handler},`;
}
handlers_body = handlers_body.substring(0, handlers_body.length - 1);
if (handlers_body === name && local === name) {
if (handlers_body === name) {
state.str.overwrite(first_node.start, first_node.end, `{${name}}`);
} else {
state.str.overwrite(

1
packages/svelte/tests/migrate/samples/event-handlers-with-alias/input.svelte
Unescape View File

@ -1,6 +1,7 @@
<script>
let handlers;
let stopPropagation;
let preventDefault;
let stopImmediatePropagation;
let once;
let trusted;

42
packages/svelte/tests/migrate/samples/event-handlers-with-alias/output.svelte
Unescape View File

@ -1,17 +1,11 @@
<script>
/** @type {{onclick?: (event: any) => void, ontoggle?: (event: any) => void, 'oncustom-event-bubble'?: (event: any) => void, onblur?: (event: any) => void}} */
let {
onclick = bubble_1('click'),
ontoggle = bubble_1('toggle'),
'oncustom-event-bubble': oncustom_event_bubble = bubble_1('custom-event-bubble'),
onblur = bubble_1('blur')
} = $props();
import { handlers as handlers_1, createBubbler as createBubbler_1, preventDefault, stopPropagation as stopPropagation_1, stopImmediatePropagation as stopImmediatePropagation_1, self as self_1, trusted as trusted_1, once as once_1 } from 'svelte/legacy';
import { handlers as handlers_1, createBubbler as createBubbler_1, preventDefault as preventDefault_1, stopPropagation as stopPropagation_1, stopImmediatePropagation as stopImmediatePropagation_1, self as self_1, trusted as trusted_1, once as once_1 } from 'svelte/legacy';
const bubble_1 = createBubbler_1();
let handlers;
let stopPropagation;
let preventDefault;
let stopImmediatePropagation;
let once;
let trusted;
@ -22,28 +16,28 @@
<button onclick={handlers_1(
() => console.log('hi'),
onclick)} >click me</button>
bubble_1('click'))} >click me</button>
<button onclick={handlers_1(
function(){ console.log('hi') },
onclick)} >click me</button>
bubble_1('click'))} >click me</button>
<button onclick={handlers_1(
() => console.log('before'),
onclick,
bubble_1('click'),
() => console.log('after'))}
>click me</button
>
<button onclick={handlers_1(
onclick,
bubble_1('click'),
foo)} >click me</button>
<button {onclick}>click me</button>
<button onclick={bubble_1('click')}>click me</button>
<button ondblclick={() => console.log('hi')}>click me</button>
<button ontoggle={ontoggle}>click me</button>
<button ontoggle={bubble_1('toggle')}>click me</button>
<button oncustom-event={() => 'hi'}>click me</button>
<button oncustom-event-bubble={oncustom_event_bubble}>click me</button>
<button oncustom-event-bubble={bubble_1('custom-event-bubble')}>click me</button>
<button onclick={preventDefault(() => (searching = true))}>click me</button>
<button onclick={preventDefault(() => '')}>click me</button>
<button onclick={preventDefault_1(() => (searching = true))}>click me</button>
<button onclick={preventDefault_1(() => '')}>click me</button>
<button onclick={stopPropagation_1(() => {})}>click me</button>
<button onclick={stopImmediatePropagation_1(() => '')}>click me</button>
<button onclickcapture={() => ''}>click me</button>
@ -51,22 +45,22 @@
<button onclick={trusted_1(() => '')}>click me</button>
<button onclick={once_1(() => '')}>click me</button>
<button onclick={stopPropagation_1(preventDefault(() => ''))}>click me</button>
<button onclick={stopPropagation_1(preventDefault_1(() => ''))}>click me</button>
<button onclick={stopImmediatePropagation_1(stopPropagation_1(() => {}))}>click me</button>
<button onclick={self_1(stopImmediatePropagation_1(() => ''))}>click me</button>
<button onclick={trusted_1(self_1(() => ''))}>click me</button>
<button onclick={once_1(trusted_1(() => ''))}>click me</button>
<button onclick={once_1(preventDefault(() => ''))}>click me</button>
<button onclick={once_1(preventDefault_1(() => ''))}>click me</button>
<button
onclick={handlers_1(
onclick,
bubble_1('click'),
foo,
()=>'',
once_1(preventDefault(trusted_1(()=>''))))}
once_1(preventDefault_1(trusted_1(()=>''))))}
onblur={handlers_1(
foo,
once_1(preventDefault(trusted_1(onblur))))}
once_1(preventDefault_1(trusted_1(bubble_1('blur')))))}
>
click me
</button>
@ -81,9 +75,9 @@
}}>click me</button
>
<button
onclick={preventDefault(() => {
onclick={preventDefault_1(() => {
console.log('hi');
})}>click me</button
>
<button onclick={preventDefault(() => (count += 1))}>click me</button>
<button onclick={preventDefault_1(() => (count += 1))}>click me</button>
</div>

27
packages/svelte/tests/migrate/samples/event-handlers/output.svelte
Unescape View File

@ -1,38 +1,31 @@
<script>
import { handlers, createBubbler, preventDefault, stopPropagation, stopImmediatePropagation, self, trusted, once } from 'svelte/legacy';
const bubble = createBubbler();
/** @type {{onclick?: (event: any) => void, ontoggle?: (event: any) => void, 'oncustom-event-bubble'?: (event: any) => void, onblur?: (event: any) => void}} */
let {
onclick = bubble('click'),
ontoggle = bubble('toggle'),
'oncustom-event-bubble': oncustom_event_bubble = bubble('custom-event-bubble'),
onblur = bubble('blur')
} = $props();
</script>
<button onclick={handlers(
() => console.log('hi'),
onclick)} >click me</button>
bubble('click'))} >click me</button>
<button onclick={handlers(
function(){ console.log('hi') },
onclick)} >click me</button>
bubble('click'))} >click me</button>
<button onclick={handlers(
() => console.log('before'),
onclick,
bubble('click'),
() => console.log('after'))}
>click me</button
>
<button onclick={handlers(
onclick,
bubble('click'),
foo)} >click me</button>
<button {onclick}>click me</button>
<button onclick={bubble('click')}>click me</button>
<button ondblclick={() => console.log('hi')}>click me</button>
<button ontoggle={ontoggle}>click me</button>
<button ontoggle={bubble('toggle')}>click me</button>
<button oncustom-event={() => 'hi'}>click me</button>
<button oncustom-event-bubble={oncustom_event_bubble}>click me</button>
<button oncustom-event-bubble={bubble('custom-event-bubble')}>click me</button>
<button onclick={preventDefault(() => (searching = true))}>click me</button>
<button onclick={preventDefault(() => '')}>click me</button>
@ -52,13 +45,13 @@
<button
onclick={handlers(
onclick,
bubble('click'),
foo,
()=>'',
once(preventDefault(trusted(()=>''))))}
onblur={handlers(
foo,
once(preventDefault(trusted(onblur))))}
once(preventDefault(trusted(bubble('blur')))))}
>
click me
</button>

Write Preview
Loading…
Cancel
Save