mirror of https://github.com/sveltejs/svelte
feat: provide migration function (#11334)
Provides a migration function, exported as `migrate` from `svelte/compiler`, which tries its best to automatically migrate towards runes, render tags (instead of slots) and event attributes (instead of event handlers) The preview REPL was updated with a migrate button so people can try it out in the playground. closes #9239pull/11347/head
Simon H
1 year ago
committed by
GitHub
parent
f1986da755
commit
cd798077b4
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
feat: provide migration helper
|
||||
@ -0,0 +1,770 @@
|
||||
import MagicString from 'magic-string';
|
||||
import { walk } from 'zimmerframe';
|
||||
import { parse } from '../phases/1-parse/index.js';
|
||||
import { analyze_component } from '../phases/2-analyze/index.js';
|
||||
import { validate_component_options } from '../validate-options.js';
|
||||
import { get_rune } from '../phases/scope.js';
|
||||
import { reset_warnings } from '../warnings.js';
|
||||
import { extract_identifiers } from '../utils/ast.js';
|
||||
import { regex_is_valid_identifier } from '../phases/patterns.js';
|
||||
|
||||
/**
|
||||
* Does a best-effort migration of Svelte code towards using runes, event attributes and render tags.
|
||||
* May throw an error if the code is too complex to migrate automatically.
|
||||
*
|
||||
* @param {string} source
|
||||
* @returns {{ code: string; }}
|
||||
*/
|
||||
export function migrate(source) {
|
||||
try {
|
||||
reset_warnings({ source, filename: 'migrate.svelte' });
|
||||
|
||||
let parsed = parse(source);
|
||||
|
||||
const { customElement: customElementOptions, ...parsed_options } = parsed.options || {};
|
||||
|
||||
/** @type {import('#compiler').ValidatedCompileOptions} */
|
||||
const combined_options = {
|
||||
...validate_component_options({}, ''),
|
||||
...parsed_options,
|
||||
customElementOptions
|
||||
};
|
||||
|
||||
const str = new MagicString(source);
|
||||
const analysis = analyze_component(parsed, source, combined_options);
|
||||
const indent = guess_indent(source);
|
||||
|
||||
/** @type {State} */
|
||||
let state = {
|
||||
scope: analysis.instance.scope,
|
||||
analysis,
|
||||
str,
|
||||
indent,
|
||||
props: [],
|
||||
props_insertion_point: parsed.instance?.content.start ?? 0,
|
||||
has_props_rune: false,
|
||||
props_name: analysis.root.unique('props').name,
|
||||
rest_props_name: analysis.root.unique('rest').name,
|
||||
end: source.length,
|
||||
run_name: analysis.root.unique('run').name,
|
||||
needs_run: false
|
||||
};
|
||||
|
||||
if (parsed.instance) {
|
||||
walk(parsed.instance.content, state, instance_script);
|
||||
}
|
||||
|
||||
state = { ...state, scope: analysis.template.scope };
|
||||
walk(parsed.fragment, state, template);
|
||||
|
||||
const run_import = `import { run${state.run_name === 'run' ? '' : `as ${state.run_name}`} } from 'svelte/legacy';`;
|
||||
let added_legacy_import = false;
|
||||
|
||||
if (state.props.length > 0 || analysis.uses_rest_props || analysis.uses_props) {
|
||||
const has_many_props = state.props.length > 3;
|
||||
const props_separator = has_many_props ? `\n${indent}${indent}` : ' ';
|
||||
let props = '';
|
||||
if (analysis.uses_props) {
|
||||
props = `...${state.props_name}`;
|
||||
} else {
|
||||
props = state.props
|
||||
.map((prop) => {
|
||||
let prop_str =
|
||||
prop.local === prop.exported ? prop.local : `${prop.exported}: ${prop.local}`;
|
||||
if (prop.bindable) {
|
||||
prop_str += ` = $bindable(${prop.init})`;
|
||||
} else if (prop.init) {
|
||||
prop_str += ` = ${prop.init}`;
|
||||
}
|
||||
return prop_str;
|
||||
})
|
||||
.join(`,${props_separator}`);
|
||||
|
||||
if (analysis.uses_rest_props) {
|
||||
props += `,${props_separator}...${state.rest_props_name}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (state.has_props_rune) {
|
||||
// some render tags or forwarded event attributes to add
|
||||
str.appendRight(state.props_insertion_point, ` ${props},`);
|
||||
} else {
|
||||
const uses_ts = parsed.instance?.attributes.some(
|
||||
(attr) => attr.name === 'lang' && /** @type {any} */ (attr).value[0].data === 'ts'
|
||||
);
|
||||
const type_name = state.scope.root.unique('Props').name;
|
||||
let type = '';
|
||||
if (uses_ts) {
|
||||
if (analysis.uses_props || analysis.uses_rest_props) {
|
||||
type = `interface ${type_name} { [key: string]: any }`;
|
||||
} else {
|
||||
type = `interface ${type_name} {${props_separator}${state.props
|
||||
.map((prop) => {
|
||||
return `${prop.exported}${prop.optional ? '?' : ''}: ${prop.type}`;
|
||||
})
|
||||
.join(`,${props_separator}`)}${has_many_props ? `\n${indent}` : ' '}}`;
|
||||
}
|
||||
} else {
|
||||
if (analysis.uses_props || analysis.uses_rest_props) {
|
||||
type = `{Record<string, any>}`;
|
||||
} else {
|
||||
type = `{${state.props
|
||||
.map((prop) => {
|
||||
return `${prop.exported}${prop.optional ? '?' : ''}: ${prop.type}`;
|
||||
})
|
||||
.join(`, `)}}`;
|
||||
}
|
||||
}
|
||||
|
||||
let props_declaration = `let {${props_separator}${props}${has_many_props ? `\n${indent}` : ' '}}`;
|
||||
if (uses_ts) {
|
||||
props_declaration = `${type}\n\n${indent}${props_declaration}`;
|
||||
props_declaration = `${props_declaration}${type ? `: ${type_name}` : ''} = $props();`;
|
||||
} else {
|
||||
props_declaration = `/** @type {${type}} */\n${indent}${props_declaration}`;
|
||||
props_declaration = `${props_declaration} = $props();`;
|
||||
}
|
||||
|
||||
if (parsed.instance) {
|
||||
props_declaration = `\n${indent}${props_declaration}`;
|
||||
str.appendRight(state.props_insertion_point, props_declaration);
|
||||
} else {
|
||||
const imports = state.needs_run ? `${indent}${run_import}\n` : '';
|
||||
str.prepend(`<script>\n${imports}${indent}${props_declaration}\n</script>\n\n`);
|
||||
added_legacy_import = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (state.needs_run && !added_legacy_import) {
|
||||
if (parsed.instance) {
|
||||
str.appendRight(
|
||||
/** @type {number} */ (parsed.instance.content.start),
|
||||
`\n${indent}${run_import}\n`
|
||||
);
|
||||
} else {
|
||||
str.prepend(`<script>\n${indent}${run_import}\n</script>\n\n`);
|
||||
}
|
||||
}
|
||||
|
||||
return { code: str.toString() };
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('Error while migrating Svelte code');
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* scope: import('../phases/scope.js').Scope;
|
||||
* str: MagicString;
|
||||
* analysis: import('../phases/types.js').ComponentAnalysis;
|
||||
* indent: string;
|
||||
* props: Array<{ local: string; exported: string; init: string; bindable: boolean; optional: boolean; type: string }>;
|
||||
* props_insertion_point: number;
|
||||
* has_props_rune: boolean;
|
||||
* props_name: string;
|
||||
* rest_props_name: string;
|
||||
* end: number;
|
||||
* run_name: string;
|
||||
* needs_run: boolean;
|
||||
* }} State
|
||||
*/
|
||||
|
||||
/** @type {import('zimmerframe').Visitors<import('../types/template.js').SvelteNode, State>} */
|
||||
const instance_script = {
|
||||
Identifier(node, { state }) {
|
||||
handle_identifier(node, state);
|
||||
},
|
||||
ExportNamedDeclaration(node, { state, next }) {
|
||||
if (node.declaration) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
let count_removed = 0;
|
||||
for (const specifier of node.specifiers) {
|
||||
const binding = state.scope.get(specifier.local.name);
|
||||
if (binding?.kind === 'bindable_prop') {
|
||||
state.str.remove(
|
||||
/** @type {number} */ (specifier.start),
|
||||
/** @type {number} */ (specifier.end)
|
||||
);
|
||||
count_removed++;
|
||||
}
|
||||
}
|
||||
if (count_removed === node.specifiers.length) {
|
||||
state.str.remove(/** @type {number} */ (node.start), /** @type {number} */ (node.end));
|
||||
}
|
||||
},
|
||||
VariableDeclaration(node, { state, path }) {
|
||||
if (state.scope !== state.analysis.instance.scope) {
|
||||
return;
|
||||
}
|
||||
|
||||
let nr_of_props = 0;
|
||||
|
||||
for (const declarator of node.declarations) {
|
||||
if (state.analysis.runes) {
|
||||
if (get_rune(declarator.init, state.scope) === '$props') {
|
||||
state.props_insertion_point = /** @type {number} */ (declarator.id.start) + 1;
|
||||
state.has_props_rune = true;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
let bindings;
|
||||
try {
|
||||
bindings = state.scope.get_bindings(declarator);
|
||||
} catch (e) {
|
||||
// no bindings, so we can skip this
|
||||
continue;
|
||||
}
|
||||
const has_state = bindings.some((binding) => binding.kind === 'state');
|
||||
const has_props = bindings.some((binding) => binding.kind === 'bindable_prop');
|
||||
|
||||
if (!has_state && !has_props) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (has_props) {
|
||||
nr_of_props++;
|
||||
|
||||
if (declarator.id.type !== 'Identifier') {
|
||||
// TODO invest time in this?
|
||||
throw new Error(
|
||||
'Encountered an export declaration pattern that is not supported for automigration.'
|
||||
);
|
||||
// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
|
||||
// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
|
||||
// const tmp = state.scope.generate('tmp');
|
||||
// const paths = extract_paths(declarator.id);
|
||||
// state.props_pre.push(
|
||||
// b.declaration('const', b.id(tmp), visit(declarator.init!) as Expression)
|
||||
// );
|
||||
// for (const path of paths) {
|
||||
// const name = (path.node as Identifier).name;
|
||||
// const binding = state.scope.get(name)!;
|
||||
// const value = path.expression!(b.id(tmp));
|
||||
// if (binding.kind === 'bindable_prop' || binding.kind === 'rest_prop') {
|
||||
// state.props.push({
|
||||
// local: name,
|
||||
// exported: binding.prop_alias ? binding.prop_alias : name,
|
||||
// init: value
|
||||
// });
|
||||
// state.props_insertion_point = /** @type {number} */(declarator.end);
|
||||
// } else {
|
||||
// declarations.push(b.declarator(path.node, value));
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
const binding = /** @type {import('#compiler').Binding} */ (
|
||||
state.scope.get(declarator.id.name)
|
||||
);
|
||||
|
||||
if (
|
||||
state.analysis.uses_props &&
|
||||
(declarator.init || binding.mutated || binding.reassigned)
|
||||
) {
|
||||
throw new Error(
|
||||
'$$props is used together with named props in a way that cannot be automatically migrated.'
|
||||
);
|
||||
}
|
||||
|
||||
state.props.push({
|
||||
local: declarator.id.name,
|
||||
exported: binding.prop_alias ? binding.prop_alias : declarator.id.name,
|
||||
init: declarator.init
|
||||
? state.str.original.substring(
|
||||
/** @type {number} */ (declarator.init.start),
|
||||
/** @type {number} */ (declarator.init.end)
|
||||
)
|
||||
: '',
|
||||
optional: !!declarator.init,
|
||||
type: extract_type(declarator, state.str, path),
|
||||
bindable: binding.mutated || binding.reassigned
|
||||
});
|
||||
state.props_insertion_point = /** @type {number} */ (declarator.end);
|
||||
state.str.update(
|
||||
/** @type {number} */ (declarator.start),
|
||||
/** @type {number} */ (declarator.end),
|
||||
''
|
||||
);
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
// state
|
||||
if (declarator.init) {
|
||||
state.str.prependLeft(/** @type {number} */ (declarator.init.start), '$state(');
|
||||
state.str.appendRight(/** @type {number} */ (declarator.init.end), ')');
|
||||
} else {
|
||||
state.str.prependLeft(/** @type {number} */ (declarator.id.end), ' = $state()');
|
||||
}
|
||||
}
|
||||
|
||||
if (nr_of_props === node.declarations.length) {
|
||||
let start = /** @type {number} */ (node.start);
|
||||
let end = /** @type {number} */ (node.end);
|
||||
|
||||
const parent = path.at(-1);
|
||||
if (parent?.type === 'ExportNamedDeclaration') {
|
||||
start = /** @type {number} */ (parent.start);
|
||||
end = /** @type {number} */ (parent.end);
|
||||
}
|
||||
while (state.str.original[start] !== '\n') start--;
|
||||
while (state.str.original[end] !== '\n') end++;
|
||||
state.str.update(start, end, '');
|
||||
}
|
||||
},
|
||||
BreakStatement(node, { state, path }) {
|
||||
if (path[1].type !== 'LabeledStatement') return;
|
||||
if (node.label?.name !== '$') return;
|
||||
state.str.update(
|
||||
/** @type {number} */ (node.start),
|
||||
/** @type {number} */ (node.end),
|
||||
'return;'
|
||||
);
|
||||
},
|
||||
LabeledStatement(node, { path, state, next }) {
|
||||
if (state.analysis.runes) return;
|
||||
if (path.length > 1) return;
|
||||
if (node.label.name !== '$') return;
|
||||
|
||||
next();
|
||||
|
||||
if (
|
||||
node.body.type === 'ExpressionStatement' &&
|
||||
node.body.expression.type === 'AssignmentExpression'
|
||||
) {
|
||||
const ids = extract_identifiers(node.body.expression.left);
|
||||
const bindings = ids.map((id) => state.scope.get(id.name));
|
||||
const reassigned_bindings = bindings.filter((b) => b?.reassigned);
|
||||
if (reassigned_bindings.length === 0 && !bindings.some((b) => b?.kind === 'store_sub')) {
|
||||
// $derived
|
||||
state.str.update(
|
||||
/** @type {number} */ (node.start),
|
||||
/** @type {number} */ (node.body.expression.start),
|
||||
'let '
|
||||
);
|
||||
state.str.prependLeft(
|
||||
/** @type {number} */ (node.body.expression.right.start),
|
||||
'$derived('
|
||||
);
|
||||
state.str.update(
|
||||
/** @type {number} */ (node.body.expression.right.end),
|
||||
/** @type {number} */ (node.end),
|
||||
');'
|
||||
);
|
||||
return;
|
||||
} else {
|
||||
for (const binding of reassigned_bindings) {
|
||||
if (binding && ids.includes(binding.node)) {
|
||||
// implicitly-declared variable which we need to make explicit
|
||||
state.str.prependLeft(
|
||||
/** @type {number} */ (node.start),
|
||||
`let ${binding.node.name}${binding.kind === 'state' ? ' = $state()' : ''};\n${state.indent}`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
state.needs_run = true;
|
||||
const is_block_stmt = node.body.type === 'BlockStatement';
|
||||
const start_end = /** @type {number} */ (node.body.start);
|
||||
// TODO try to find out if we can use $derived.by instead?
|
||||
if (is_block_stmt) {
|
||||
state.str.update(
|
||||
/** @type {number} */ (node.start),
|
||||
start_end + 1,
|
||||
`${state.run_name}(() => {`
|
||||
);
|
||||
const end = /** @type {number} */ (node.body.end);
|
||||
state.str.update(end - 1, end, '});');
|
||||
} else {
|
||||
state.str.update(
|
||||
/** @type {number} */ (node.start),
|
||||
start_end,
|
||||
`${state.run_name}(() => {\n${state.indent}`
|
||||
);
|
||||
state.str.indent(state.indent, {
|
||||
exclude: [
|
||||
[0, /** @type {number} */ (node.body.start)],
|
||||
[/** @type {number} */ (node.body.end), state.end]
|
||||
]
|
||||
});
|
||||
state.str.appendRight(/** @type {number} */ (node.end), `\n${state.indent}});`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** @type {import('zimmerframe').Visitors<import('../types/template.js').SvelteNode, State>} */
|
||||
const template = {
|
||||
Identifier(node, { state }) {
|
||||
handle_identifier(node, state);
|
||||
},
|
||||
RegularElement(node, { state, next }) {
|
||||
handle_events(node, state);
|
||||
next();
|
||||
},
|
||||
SvelteElement(node, { state, next }) {
|
||||
handle_events(node, state);
|
||||
next();
|
||||
},
|
||||
SvelteWindow(node, { state, next }) {
|
||||
handle_events(node, state);
|
||||
next();
|
||||
},
|
||||
SvelteBody(node, { state, next }) {
|
||||
handle_events(node, state);
|
||||
next();
|
||||
},
|
||||
SvelteDocument(node, { state, next }) {
|
||||
handle_events(node, state);
|
||||
next();
|
||||
},
|
||||
SlotElement(node, { state, next }) {
|
||||
let name = 'children';
|
||||
let slot_props = '{ ';
|
||||
|
||||
for (const attr of node.attributes) {
|
||||
if (attr.type === 'SpreadAttribute') {
|
||||
slot_props += `...${state.str.original.substring(/** @type {number} */ (attr.expression.start), attr.expression.end)}, `;
|
||||
} else if (attr.type === 'Attribute') {
|
||||
if (attr.name === 'name') {
|
||||
name = state.scope.generate(/** @type {any} */ (attr.value)[0].data);
|
||||
} else {
|
||||
const value =
|
||||
attr.value !== true
|
||||
? state.str.original.substring(
|
||||
attr.value[0].start,
|
||||
attr.value[attr.value.length - 1].end
|
||||
)
|
||||
: 'true';
|
||||
slot_props += value === attr.name ? `${value}, ` : `${attr.name}: ${value}, `;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
slot_props += '}';
|
||||
if (slot_props === '{ }') {
|
||||
slot_props = '';
|
||||
}
|
||||
|
||||
state.props.push({
|
||||
local: name,
|
||||
exported: name,
|
||||
init: '',
|
||||
bindable: false,
|
||||
optional: true,
|
||||
type: `import('svelte').${slot_props ? 'Snippet<[any]>' : 'Snippet'}`
|
||||
});
|
||||
|
||||
if (node.fragment.nodes.length > 0) {
|
||||
next();
|
||||
state.str.update(
|
||||
node.start,
|
||||
node.fragment.nodes[0].start,
|
||||
`{#if ${name}}{@render ${name}(${slot_props})}{:else}`
|
||||
);
|
||||
state.str.update(node.fragment.nodes[node.fragment.nodes.length - 1].end, node.end, '{/if}');
|
||||
} else {
|
||||
state.str.update(node.start, node.end, `{@render ${name}?.(${slot_props})}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {import('estree').VariableDeclarator} declarator
|
||||
* @param {MagicString} str
|
||||
* @param {import('#compiler').SvelteNode[]} path
|
||||
*/
|
||||
function extract_type(declarator, str, path) {
|
||||
if (declarator.id.typeAnnotation) {
|
||||
let start = declarator.id.typeAnnotation.start + 1; // skip the colon
|
||||
while (str.original[start] === ' ') {
|
||||
start++;
|
||||
}
|
||||
return str.original.substring(start, declarator.id.typeAnnotation.end);
|
||||
}
|
||||
|
||||
// try to find a comment with a type annotation, hinting at jsdoc
|
||||
const parent = path.at(-1);
|
||||
if (parent?.type === 'ExportNamedDeclaration' && parent.leadingComments) {
|
||||
const last = parent.leadingComments[parent.leadingComments.length - 1];
|
||||
if (last.type === 'Block') {
|
||||
const match = /@type {([^}]+)}/.exec(last.value);
|
||||
if (match) {
|
||||
str.update(/** @type {any} */ (last).start, /** @type {any} */ (last).end, '');
|
||||
return match[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// try to infer it from the init
|
||||
if (declarator.init?.type === 'Literal') {
|
||||
const type = typeof declarator.init.value;
|
||||
if (type === 'string' || type === 'number' || type === 'boolean') {
|
||||
return type;
|
||||
}
|
||||
}
|
||||
|
||||
return 'any';
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import('#compiler').RegularElement | import('#compiler').SvelteElement | import('#compiler').SvelteWindow | import('#compiler').SvelteDocument | import('#compiler').SvelteBody} node
|
||||
* @param {State} state
|
||||
*/
|
||||
function handle_events(node, state) {
|
||||
/** @type {Map<string, import('#compiler').OnDirective[]>} */
|
||||
const handlers = new Map();
|
||||
for (const attribute of node.attributes) {
|
||||
if (attribute.type !== 'OnDirective') continue;
|
||||
|
||||
let name = `on${attribute.name}`;
|
||||
if (attribute.modifiers.includes('capture')) {
|
||||
name += 'capture';
|
||||
}
|
||||
|
||||
const nodes = handlers.get(name) || [];
|
||||
nodes.push(attribute);
|
||||
handlers.set(name, nodes);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
const last = nodes[nodes.length - 1];
|
||||
const payload_name =
|
||||
last.expression?.type === 'ArrowFunctionExpression' &&
|
||||
last.expression.params[0]?.type === 'Identifier'
|
||||
? last.expression.params[0].name
|
||||
: generate_event_name(last, state);
|
||||
let prepend = '';
|
||||
|
||||
for (let i = 0; i < nodes.length - 1; i += 1) {
|
||||
const node = nodes[i];
|
||||
if (node.expression) {
|
||||
let body = '';
|
||||
if (node.expression.type === 'ArrowFunctionExpression') {
|
||||
body = state.str.original.substring(
|
||||
/** @type {number} */ (node.expression.body.start),
|
||||
/** @type {number} */ (node.expression.body.end)
|
||||
);
|
||||
} else {
|
||||
body = `${state.str.original.substring(
|
||||
/** @type {number} */ (node.expression.start),
|
||||
/** @type {number} */ (node.expression.end)
|
||||
)}();`;
|
||||
}
|
||||
// TODO check how many indents needed
|
||||
for (const modifier of node.modifiers) {
|
||||
if (modifier === 'stopPropagation') {
|
||||
body = `\n${state.indent}${payload_name}.stopPropagation();\n${body}`;
|
||||
} else if (modifier === 'preventDefault') {
|
||||
body = `\n${state.indent}${payload_name}.preventDefault();\n${body}`;
|
||||
} else if (modifier === 'stopImmediatePropagation') {
|
||||
body = `\n${state.indent}${payload_name}.stopImmediatePropagation();\n${body}`;
|
||||
} else {
|
||||
body = `\n${state.indent}// @migration-task: incorporate ${modifier} modifier\n${body}`;
|
||||
}
|
||||
}
|
||||
prepend += `\n${state.indent}${body}\n`;
|
||||
} else {
|
||||
if (!local) {
|
||||
local = state.scope.generate(`on${node.name}`);
|
||||
state.props.push({
|
||||
local,
|
||||
exported,
|
||||
init: '',
|
||||
bindable: false,
|
||||
optional: true,
|
||||
type: '(event: any) => void'
|
||||
});
|
||||
}
|
||||
prepend += `\n${state.indent}${local}?.(${payload_name});\n`;
|
||||
}
|
||||
|
||||
state.str.remove(node.start, node.end);
|
||||
}
|
||||
|
||||
if (last.expression) {
|
||||
// remove : from on:click
|
||||
state.str.remove(last.start + 2, last.start + 3);
|
||||
// remove modifiers
|
||||
if (last.modifiers.length > 0) {
|
||||
state.str.remove(
|
||||
last.start + last.name.length + 3,
|
||||
state.str.original.indexOf('=', last.start)
|
||||
);
|
||||
}
|
||||
if (last.modifiers.includes('capture')) {
|
||||
state.str.appendRight(last.start + last.name.length + 3, 'capture');
|
||||
}
|
||||
|
||||
for (const modifier of last.modifiers) {
|
||||
if (modifier === 'stopPropagation') {
|
||||
prepend += `\n${state.indent}${payload_name}.stopPropagation();\n`;
|
||||
} else if (modifier === 'preventDefault') {
|
||||
prepend += `\n${state.indent}${payload_name}.preventDefault();\n`;
|
||||
} else if (modifier === 'stopImmediatePropagation') {
|
||||
prepend += `\n${state.indent}${payload_name}.stopImmediatePropagation();\n`;
|
||||
} else if (modifier !== 'capture') {
|
||||
prepend += `\n${state.indent}// @migration-task: incorporate ${modifier} modifier\n`;
|
||||
}
|
||||
}
|
||||
|
||||
if (prepend) {
|
||||
let pos = last.expression.start;
|
||||
if (last.expression.type === 'ArrowFunctionExpression') {
|
||||
pos = last.expression.body.start;
|
||||
if (
|
||||
last.expression.params.length > 0 &&
|
||||
last.expression.params[0].type !== 'Identifier'
|
||||
) {
|
||||
const start = /** @type {number} */ (last.expression.params[0].start);
|
||||
const end = /** @type {number} */ (last.expression.params[0].end);
|
||||
// replace event payload with generated one that others use,
|
||||
// then destructure generated payload param into what the user wrote
|
||||
state.str.overwrite(start, end, payload_name);
|
||||
prepend = `let ${state.str.original.substring(
|
||||
start,
|
||||
end
|
||||
)} = ${payload_name};\n${prepend}`;
|
||||
} else if (last.expression.params.length === 0) {
|
||||
// add generated payload param to arrow function
|
||||
const pos = state.str.original.lastIndexOf(')', last.expression.body.start);
|
||||
state.str.prependLeft(pos, payload_name);
|
||||
}
|
||||
|
||||
const needs_curlies = last.expression.body.type !== 'BlockStatement';
|
||||
state.str.prependRight(
|
||||
/** @type {number} */ (pos) + (needs_curlies ? 0 : 1),
|
||||
`${needs_curlies ? '{' : ''}${prepend}${state.indent}`
|
||||
);
|
||||
state.str.appendRight(
|
||||
/** @type {number} */ (last.expression.body.end) - (needs_curlies ? 0 : 1),
|
||||
`\n${needs_curlies ? '}' : ''}`
|
||||
);
|
||||
} else {
|
||||
state.str.update(
|
||||
/** @type {number} */ (last.expression.start),
|
||||
/** @type {number} */ (last.expression.end),
|
||||
`(${payload_name}) => {${prepend}\n${state.indent}${state.str.original.substring(
|
||||
/** @type {number} */ (last.expression.start),
|
||||
/** @type {number} */ (last.expression.end)
|
||||
)}?.(${payload_name});\n}`
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// turn on:click into a prop
|
||||
// Check if prop already set, could happen when on:click on different elements
|
||||
if (!local) {
|
||||
local = state.scope.generate(`on${last.name}`);
|
||||
state.props.push({
|
||||
local,
|
||||
exported,
|
||||
init: '',
|
||||
bindable: false,
|
||||
optional: true,
|
||||
type: '(event: any) => void'
|
||||
});
|
||||
}
|
||||
|
||||
let replacement = '';
|
||||
if (!prepend) {
|
||||
if (exported === local) {
|
||||
replacement = `{${name}}`;
|
||||
} else {
|
||||
replacement = `${name}={${local}}`;
|
||||
}
|
||||
} else {
|
||||
replacement = `${name}={(${payload_name}) => {${prepend}\n${state.indent}${local}?.(${payload_name});\n}}`;
|
||||
}
|
||||
|
||||
state.str.update(last.start, last.end, replacement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import('#compiler').OnDirective} last
|
||||
* @param {State} state
|
||||
*/
|
||||
function generate_event_name(last, state) {
|
||||
const scope =
|
||||
(last.expression && state.analysis.template.scopes.get(last.expression)) || state.scope;
|
||||
|
||||
let name = 'event';
|
||||
if (!scope.get(name)) return name;
|
||||
|
||||
let i = 1;
|
||||
while (scope.get(`${name}${i}`)) i += 1;
|
||||
return `${name}${i}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {import('estree').Identifier} node
|
||||
* @param {State} state
|
||||
*/
|
||||
function handle_identifier(node, state) {
|
||||
if (state.analysis.uses_props) {
|
||||
if (node.name === '$$props' || node.name === '$$restProps') {
|
||||
// not 100% correct for $$restProps but it'll do
|
||||
state.str.update(
|
||||
/** @type {number} */ (node.start),
|
||||
/** @type {number} */ (node.end),
|
||||
state.props_name
|
||||
);
|
||||
} else {
|
||||
const binding = state.scope.get(node.name);
|
||||
if (binding?.kind === 'bindable_prop') {
|
||||
state.str.prependLeft(/** @type {number} */ (node.start), `${state.props_name}.`);
|
||||
}
|
||||
}
|
||||
} else if (node.name === '$$restProps' && state.analysis.uses_rest_props) {
|
||||
state.str.update(
|
||||
/** @type {number} */ (node.start),
|
||||
/** @type {number} */ (node.end),
|
||||
state.rest_props_name
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/** @param {string} content */
|
||||
function guess_indent(content) {
|
||||
const lines = content.split('\n');
|
||||
|
||||
const tabbed = lines.filter((line) => /^\t+/.test(line));
|
||||
const spaced = lines.filter((line) => /^ {2,}/.test(line));
|
||||
|
||||
if (tabbed.length === 0 && spaced.length === 0) {
|
||||
return '\t';
|
||||
}
|
||||
|
||||
// More lines tabbed than spaced? Assume tabs, and
|
||||
// default to tabs in the case of a tie (or nothing
|
||||
// to go on)
|
||||
if (tabbed.length >= spaced.length) {
|
||||
return '\t';
|
||||
}
|
||||
|
||||
// Otherwise, we need to guess the multiple
|
||||
const min = spaced.reduce((previous, current) => {
|
||||
const count = /^ +/.exec(current)?.[0].length ?? 0;
|
||||
return Math.min(count, previous);
|
||||
}, Infinity);
|
||||
|
||||
return ' '.repeat(min);
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let count = 0;
|
||||
$: doubled = count * 2;
|
||||
$: ({ quadrupled } = { quadrupled: count * 4 });
|
||||
</script>
|
||||
|
||||
{count} / {doubled} / {quadrupled}
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let count = 0;
|
||||
let doubled = $derived(count * 2);
|
||||
let { quadrupled } = $derived({ quadrupled: count * 4 });
|
||||
</script>
|
||||
|
||||
{count} / {doubled} / {quadrupled}
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
let count = 0;
|
||||
$: console.log(count);
|
||||
$: if (count > 10) {
|
||||
alert('too high')
|
||||
}
|
||||
$: {
|
||||
console.log('foo');
|
||||
if (x) break $;
|
||||
console.log('bar');
|
||||
}
|
||||
$: $count = 1;
|
||||
</script>
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
let count = 0;
|
||||
run(() => {
|
||||
console.log(count);
|
||||
});
|
||||
run(() => {
|
||||
if (count > 10) {
|
||||
alert('too high')
|
||||
}
|
||||
});
|
||||
run(() => {
|
||||
console.log('foo');
|
||||
if (x) return;
|
||||
console.log('bar');
|
||||
});
|
||||
run(() => {
|
||||
$count = 1;
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,17 @@
|
||||
<button on:click={() => console.log('hi')} on:click>click me</button>
|
||||
<button on:click={() => console.log('before')} on:click on:click={() => console.log('after')}>click me</button>
|
||||
<button on:click on:click={foo}>click me</button>
|
||||
<button on:click>click me</button>
|
||||
|
||||
<button on:dblclick={() => console.log('hi')}>click me</button>
|
||||
<button on:toggle>click me</button>
|
||||
<button on:custom-event={() => 'hi'}>click me</button>
|
||||
<button on:custom-event-bubble>click me</button>
|
||||
|
||||
<button on:click|preventDefault={() => ''}>click me</button>
|
||||
<button on:click|stopPropagation={() => {}}>click me</button>
|
||||
<button on:click|stopImmediatePropagation={() => ''}>click me</button>
|
||||
<button on:click|capture={() => ''}>click me</button>
|
||||
<button on:click|self={() => ''}>click me</button>
|
||||
|
||||
<Button on:click={() => 'leave untouched'} on:click>click me</Button>
|
||||
@ -0,0 +1,47 @@
|
||||
<script>
|
||||
/** @type {{onclick?: (event: any) => void, ontoggle?: (event: any) => void, 'oncustom-event-bubble'?: (event: any) => void}} */
|
||||
let { onclick, ontoggle, 'oncustom-event-bubble': oncustom_event_bubble } = $props();
|
||||
</script>
|
||||
|
||||
<button onclick={(event) => {
|
||||
console.log('hi')
|
||||
|
||||
onclick?.(event);
|
||||
}}>click me</button>
|
||||
<button onclick={(event) => {
|
||||
console.log('before')
|
||||
|
||||
onclick?.(event);
|
||||
console.log('after')
|
||||
}}>click me</button>
|
||||
<button onclick={(event) => {
|
||||
onclick?.(event);
|
||||
|
||||
foo?.(event);
|
||||
}}>click me</button>
|
||||
<button {onclick}>click me</button>
|
||||
|
||||
<button ondblclick={() => console.log('hi')}>click me</button>
|
||||
<button {ontoggle}>click me</button>
|
||||
<button oncustom-event={() => 'hi'}>click me</button>
|
||||
<button oncustom-event-bubble={oncustom_event_bubble}>click me</button>
|
||||
|
||||
<button onclick={(event) => {
|
||||
event.preventDefault();
|
||||
''
|
||||
}}>click me</button>
|
||||
<button onclick={(event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
}}>click me</button>
|
||||
<button onclick={(event) => {
|
||||
event.stopImmediatePropagation();
|
||||
''
|
||||
}}>click me</button>
|
||||
<button onclickcapture={() => ''}>click me</button>
|
||||
<button onclick={(event) => {
|
||||
// @migration-task: incorporate self modifier
|
||||
''
|
||||
}}>click me</button>
|
||||
|
||||
<Button on:click={() => 'leave untouched'} on:click>click me</Button>
|
||||
@ -0,0 +1,6 @@
|
||||
<script lang="ts">
|
||||
let klass = '';
|
||||
export { klass as class }
|
||||
</script>
|
||||
|
||||
{klass}
|
||||
@ -0,0 +1,8 @@
|
||||
<script lang="ts">
|
||||
interface Props { class?: string }
|
||||
|
||||
let { class: klass = '' }: Props = $props();
|
||||
|
||||
</script>
|
||||
|
||||
{klass}
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
<button {foo} {...$$restProps}>click me</button>
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
/** @type {{Record<string, any>}} */
|
||||
let { foo, ...rest } = $props();
|
||||
</script>
|
||||
|
||||
<button {foo} {...rest}>click me</button>
|
||||
@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let readonly: number;
|
||||
export let optional = 'foo';
|
||||
export let binding: string;
|
||||
export let bindingOptional: string | undefined = 'bar';
|
||||
</script>
|
||||
|
||||
{readonly}
|
||||
{optional}
|
||||
<input bind:value={binding} />
|
||||
<input bind:value={bindingOptional} />
|
||||
@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
readonly: number,
|
||||
optional?: string,
|
||||
binding: string,
|
||||
bindingOptional?: string | undefined
|
||||
}
|
||||
|
||||
let {
|
||||
readonly,
|
||||
optional = 'foo',
|
||||
binding = $bindable(),
|
||||
bindingOptional = $bindable('bar')
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
{readonly}
|
||||
{optional}
|
||||
<input bind:value={binding} />
|
||||
<input bind:value={bindingOptional} />
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
export let readonly;
|
||||
export let optional = 'foo';
|
||||
export let binding;
|
||||
export let bindingOptional = 'bar';
|
||||
</script>
|
||||
|
||||
{readonly}
|
||||
{optional}
|
||||
<input bind:value={binding} />
|
||||
<input bind:value={bindingOptional} />
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
/** @type {{readonly: any, optional?: string, binding: any, bindingOptional?: string}} */
|
||||
let {
|
||||
readonly,
|
||||
optional = 'foo',
|
||||
binding = $bindable(),
|
||||
bindingOptional = $bindable('bar')
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{readonly}
|
||||
{optional}
|
||||
<input bind:value={binding} />
|
||||
<input bind:value={bindingOptional} />
|
||||
@ -0,0 +1,7 @@
|
||||
<button><slot /></button>
|
||||
|
||||
{#if foo}
|
||||
<slot name="foo" {foo} />
|
||||
{/if}
|
||||
|
||||
<slot name="dashed-name" />
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
/** @type {{children?: import('svelte').Snippet, foo_1?: import('svelte').Snippet<[any]>, dashed_name?: import('svelte').Snippet}} */
|
||||
let { children, foo_1, dashed_name } = $props();
|
||||
</script>
|
||||
|
||||
<button>{@render children?.()}</button>
|
||||
|
||||
{#if foo}
|
||||
{@render foo_1?.({ foo, })}
|
||||
{/if}
|
||||
|
||||
{@render dashed_name?.()}
|
||||
@ -0,0 +1,30 @@
|
||||
import * as fs from 'node:fs';
|
||||
import { assert } from 'vitest';
|
||||
import { migrate } from 'svelte/compiler';
|
||||
import { try_read_file } from '../helpers.js';
|
||||
import { suite, type BaseTest } from '../suite.js';
|
||||
|
||||
interface ParserTest extends BaseTest {}
|
||||
|
||||
const { test, run } = suite<ParserTest>(async (config, cwd) => {
|
||||
const input = fs
|
||||
.readFileSync(`${cwd}/input.svelte`, 'utf-8')
|
||||
.replace(/\s+$/, '')
|
||||
.replace(/\r/g, '');
|
||||
|
||||
const actual = migrate(input).code;
|
||||
|
||||
// run `UPDATE_SNAPSHOTS=true pnpm test migrate` to update parser tests
|
||||
if (process.env.UPDATE_SNAPSHOTS || !fs.existsSync(`${cwd}/output.svelte`)) {
|
||||
fs.writeFileSync(`${cwd}/output.svelte`, actual);
|
||||
} else {
|
||||
fs.writeFileSync(`${cwd}/_actual.svelte`, actual);
|
||||
|
||||
const expected = try_read_file(`${cwd}/output.svelte`);
|
||||
assert.deepEqual(actual, expected);
|
||||
}
|
||||
});
|
||||
|
||||
export { test };
|
||||
|
||||
await run(__dirname);
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import { get_repl_context } from '$lib/context.js';
|
||||
|
||||
const { migrate } = get_repl_context();
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<button on:click={migrate} title="Migrate this component towards the new syntax">migrate</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.4rem;
|
||||
padding: 0.8rem;
|
||||
gap: 0.5rem;
|
||||
margin-right: 0.3rem;
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue