Skip to content

Commit

Permalink
fix: handle #await inside #snippet (#2348)
Browse files Browse the repository at this point in the history 
#2342
also removes old versions of snippet and render tag AST
  • Loading branch information
@dummdidumm
dummdidumm authored Apr 25, 2024
1 parent a8e45c6 commit 6aa40f7
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 55 deletions.
25 changes: 5 additions & 20 deletions packages/svelte2tsx/src/htmlxtojsx_v2/nodes/RenderTag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,9 @@ export function handleRenderTag(str: MagicString, renderTag: BaseNode): void {
str.overwrite(renderTag.start, renderTag.expression.start, ';__sveltets_2_ensureSnippet(', {
contentOnly: true
});

// argument was present until https://github.com/sveltejs/svelte/pull/9988 / https://github.com/sveltejs/svelte/pull/10656,
// remove and only keep last else block at some point
const arg = renderTag.argument || renderTag.arguments?.[renderTag.arguments.length - 1];

if (arg) {
str.overwrite(withTrailingPropertyAccess(str.original, arg.end), renderTag.end, '));');
} else if ('argument' in renderTag || 'arguments' in renderTag) {
str.overwrite(
withTrailingPropertyAccess(str.original, renderTag.expression.end),
renderTag.end,
'());'
);
} else {
str.overwrite(
withTrailingPropertyAccess(str.original, renderTag.expression.end),
renderTag.end,
');'
);
}
str.overwrite(
withTrailingPropertyAccess(str.original, renderTag.expression.end),
renderTag.end,
');'
);
}
33 changes: 9 additions & 24 deletions packages/svelte2tsx/src/htmlxtojsx_v2/nodes/SnippetBlock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function handleSnippet(
str.overwrite(
endSnippet,
snippetBlock.end,
`return __sveltets_2_any(0)}${isImplicitProp ? '' : ';'}`,
`};return __sveltets_2_any(0)}${isImplicitProp ? '' : ';'}`,
{
contentOnly: true
}
Expand All @@ -46,18 +46,15 @@ export function handleSnippet(
str.original.indexOf(
'}',
// context was the first iteration in a .next release, remove at some point
snippetBlock.context?.end ||
snippetBlock.parameters?.at(-1)?.end ||
snippetBlock.expression.end
snippetBlock.parameters?.at(-1)?.end || snippetBlock.expression.end
) + 1;

if (isImplicitProp) {
str.overwrite(snippetBlock.start, snippetBlock.expression.start, '', { contentOnly: true });
const transforms: TransformationArray = ['('];
if (snippetBlock.context || snippetBlock.parameters?.length) {
// context was the first iteration in a .next release, remove at some point
const start = snippetBlock.context?.start || snippetBlock.parameters?.[0].start;
const end = snippetBlock.context?.end || snippetBlock.parameters.at(-1).end;
if (snippetBlock.parameters?.length) {
const start = snippetBlock.parameters?.[0].start;
const end = snippetBlock.parameters.at(-1).end;
transforms.push([start, end]);
str.overwrite(snippetBlock.expression.end, start, '', {
contentOnly: true
Expand All @@ -66,24 +63,15 @@ export function handleSnippet(
} else {
str.overwrite(snippetBlock.expression.end, startEnd, '', { contentOnly: true });
}
transforms.push(') => {');
transforms.push(') => {async () => {'); // inner async function for potential #await blocks
transforms.push([startEnd, snippetBlock.end]);
component.addProp(
[[snippetBlock.expression.start, snippetBlock.expression.end]],
transforms
);
} else {
let generic = '';
// context was the first iteration in a .next release, remove at some point
if (snippetBlock.context) {
generic = snippetBlock.context.typeAnnotation
? `<${str.original.slice(
snippetBlock.context.typeAnnotation.start + 1,
snippetBlock.context.typeAnnotation.end
)}>`
: // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
'<any>';
} else if (snippetBlock.parameters?.length) {
if (snippetBlock.parameters?.length) {
generic = `<[${snippetBlock.parameters
.map((p) =>
p.typeAnnotation
Expand All @@ -101,16 +89,13 @@ export function handleSnippet(
typeAnnotation + ' = ('
];

// context was the first iteration in a .next release, remove at some point
if (snippetBlock.context) {
transforms.push([snippetBlock.context.start, snippetBlock.context.end]);
} else if (snippetBlock.parameters?.length) {
if (snippetBlock.parameters?.length) {
const start = snippetBlock.parameters[0].start;
const end = snippetBlock.parameters.at(-1).end;
transforms.push([start, end]);
}

transforms.push(') => {');
transforms.push(') => {async () => {'); // inner async function for potential #await blocks
transform(str, snippetBlock.start, startEnd, startEnd, transforms);
}
}
Expand Down
24 changes: 16 additions & 8 deletions packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/expectedv2.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,32 @@
var foo/*Ωignore_startΩ*/: import('svelte').Snippet<[any]>/*Ωignore_endΩ*/ = (x) => {
var foo/*Ωignore_startΩ*/: import('svelte').Snippet<[any]>/*Ωignore_endΩ*/ = (x) => {async () => {
{ svelteHTML.createElement("div", {}); x; }
return __sveltets_2_any(0)};
};return __sveltets_2_any(0)};

var bar/*Ωignore_startΩ*/: import('svelte').Snippet/*Ωignore_endΩ*/ = () => {
var bar/*Ωignore_startΩ*/: import('svelte').Snippet/*Ωignore_endΩ*/ = () => {async () => {
{ svelteHTML.createElement("div", {}); }
return __sveltets_2_any(0)};
};return __sveltets_2_any(0)};

var await_inside/*Ωignore_startΩ*/: import('svelte').Snippet/*Ωignore_endΩ*/ = () => {async () => {
{ const $$_value = await (foo);{ const bar = $$_value; bar;}}
};return __sveltets_2_any(0)};

;__sveltets_2_ensureSnippet(foo(1));
;__sveltets_2_ensureSnippet(bar());
;__sveltets_2_ensureSnippet(await_inside());

{ const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {children:() => { return __sveltets_2_any(0); },bar:(x) => {
{ const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {children:() => { return __sveltets_2_any(0); },bar:(x) => {async () => {
{ svelteHTML.createElement("div", {}); x; }
return __sveltets_2_any(0)},}});
};return __sveltets_2_any(0)},}});
{ svelteHTML.createElement("div", {});asd; }

Component}

{ const $$_tsiL0C = __sveltets_2_ensureComponent(List); new $$_tsiL0C({ target: __sveltets_2_any(), props: { "data":[1, 2, 3],row:(item) => {
{ const $$_tsiL0C = __sveltets_2_ensureComponent(List); new $$_tsiL0C({ target: __sveltets_2_any(), props: {
"data":[1, 2, 3],row:(item) => {async () => {
item;
return __sveltets_2_any(0)},}});
};return __sveltets_2_any(0)},await_inside:() => {async () => {
{ const $$_value = await (foo);{ const bar = $$_value; bar;}}
};return __sveltets_2_any(0)},}});

List}

Expand Down
8 changes: 8 additions & 0 deletions packages/svelte2tsx/test/htmlx2jsx/samples/snippet.v5/input.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,13 @@
<div>asd</div>
{/snippet}

{#snippet await_inside()}
{#await foo then bar}{bar}{/await}
{/snippet}

{@render foo(1)}
{@render bar()}
{@render await_inside()}

<Component>
<div>{asd}</div>
Expand All @@ -20,6 +25,9 @@
{#snippet row(item)}
{item}
{/snippet}
{#snippet await_inside()}
{#await foo then bar}{bar}{/await}
{/snippet}
</List>

<List>
Expand Down
2 changes: 1 addition & 1 deletion packages/svelte2tsx/test/htmlx2jsx/samples/ts-in-template.v5/expectedv2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ try { const $$_value = await (foo as Promise<void>);{ const result: any = $$_val

item as string;

var foo/*Ωignore_startΩ*/: import('svelte').Snippet<[ string]>/*Ωignore_endΩ*/ = (bar: string) => { return __sveltets_2_any(0)};
var foo/*Ωignore_startΩ*/: import('svelte').Snippet<[ string]>/*Ωignore_endΩ*/ = (bar: string) => {async () => { };return __sveltets_2_any(0)};

;__sveltets_2_ensureSnippet(foo(bar as string));

Expand Down
4 changes: 2 additions & 2 deletions packages/svelte2tsx/test/svelte2tsx/samples/snippet-instance-script.v5/expectedv2.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
///<reference types="svelte" />
;function render() {
var bar/*Ωignore_startΩ*/: import('svelte').Snippet/*Ωignore_endΩ*/ = () => { foo;
return __sveltets_2_any(0)};
var bar/*Ωignore_startΩ*/: import('svelte').Snippet/*Ωignore_endΩ*/ = () => {async () => { foo;
};return __sveltets_2_any(0)};
let foo = true;
bar;
;
Expand Down

0 comments on commit 6aa40f7

Please sign in to comment.