mirror of https://github.com/sveltejs/svelte
feat: support migration of `svelte:component` (#13437)
* feat: allow migration of `svelte:component` * chore: simplify a lot (thanks @dummdidumm) * chore: update output * chore: use `next()` and `snip` instead of walking the AST * fix: migrate nested `svelte:component` * Update .changeset/good-vans-bake.md --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>main
parent
33ee958087
commit
b665425e5d
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: support migration of `svelte:component`
|
@ -0,0 +1,125 @@
|
|||||||
|
<script>
|
||||||
|
let Component;
|
||||||
|
let fallback;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Component let:Comp>
|
||||||
|
<svelte:component this={Comp} />
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component let:comp>
|
||||||
|
<svelte:component this={comp} />
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component let:comp={stuff}>
|
||||||
|
<svelte:component this={stuff} />
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<div slot="x" let:comp={stuff}>
|
||||||
|
<svelte:component this={stuff} />
|
||||||
|
</div>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<svelte:fragment slot="x" let:comp={stuff}>
|
||||||
|
<svelte:component this={stuff} />
|
||||||
|
</svelte:fragment>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<svelte:element this={"div"} slot="x" let:comp={stuff}>
|
||||||
|
<svelte:component this={stuff} />
|
||||||
|
</svelte:element>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<svelte:component this={Component} let:Comp>
|
||||||
|
<svelte:component this={Comp} />
|
||||||
|
</svelte:component>
|
||||||
|
|
||||||
|
<svelte:component this={Component} let:comp>
|
||||||
|
<svelte:component this={comp} />
|
||||||
|
</svelte:component>
|
||||||
|
|
||||||
|
<svelte:component this={Component} let:comp={stuff}>
|
||||||
|
<svelte:component this={stuff} />
|
||||||
|
</svelte:component>
|
||||||
|
|
||||||
|
<svelte:component this={Component}>
|
||||||
|
<div slot="x" let:comp={stuff}>
|
||||||
|
<svelte:component this={stuff} />
|
||||||
|
</div>
|
||||||
|
</svelte:component>
|
||||||
|
|
||||||
|
<svelte:component this={Component}>
|
||||||
|
<svelte:fragment slot="x" let:comp={stuff}>
|
||||||
|
<svelte:component this={stuff} />
|
||||||
|
</svelte:fragment>
|
||||||
|
</svelte:component>
|
||||||
|
|
||||||
|
<svelte:component this={Component}>
|
||||||
|
<svelte:element this={"div"} slot="x" let:comp={stuff}>
|
||||||
|
<svelte:component this={stuff} />
|
||||||
|
</svelte:element>
|
||||||
|
</svelte:component>
|
||||||
|
|
||||||
|
<svelte:component this={Component} />
|
||||||
|
<svelte:component this={Component} prop value="" on:click on:click={()=>''} />
|
||||||
|
<svelte:component this={Math.random() > .5 ? $$restProps.heads : $$restProps.tail} prop value="" on:click on:click={()=>''}/>
|
||||||
|
|
||||||
|
<svelte:component
|
||||||
|
this={Component}
|
||||||
|
prop value=""
|
||||||
|
on:click
|
||||||
|
on:click={()=>''}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<svelte:component
|
||||||
|
this={Math.random() > .5 ? $$restProps.heads : $$restProps.tail}
|
||||||
|
prop value=""
|
||||||
|
on:click
|
||||||
|
on:click={()=>''}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{#if true}
|
||||||
|
{@const x = {Component}}
|
||||||
|
<svelte:component this={x['Component']} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if true}
|
||||||
|
{@const x = {Component}}
|
||||||
|
<svelte:component this={x.Component} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#each [] as component}
|
||||||
|
<svelte:component this={component} />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each [] as Component}
|
||||||
|
<svelte:component this={Component} />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each [] as component}
|
||||||
|
{@const Comp = component.component}
|
||||||
|
<svelte:component this={Comp} />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each [] as component}
|
||||||
|
{@const comp = component.component}
|
||||||
|
<svelte:component this={comp} />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#await Promise.resolve()}
|
||||||
|
<svelte:component this={Component} />
|
||||||
|
<svelte:component this={fallback} />
|
||||||
|
{:then something}
|
||||||
|
<svelte:component this={something} />
|
||||||
|
{:catch e}
|
||||||
|
<svelte:component this={e} />
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
{#await Promise.resolve() then Something}
|
||||||
|
<svelte:component this={Something} />
|
||||||
|
{:catch Error}
|
||||||
|
<svelte:component this={Error} />
|
||||||
|
{/await}
|
@ -0,0 +1,143 @@
|
|||||||
|
<script>
|
||||||
|
/** @type {{Record<string, any>}} */
|
||||||
|
let { ...rest } = $props();
|
||||||
|
let Component;
|
||||||
|
let fallback;
|
||||||
|
|
||||||
|
const SvelteComponent_10 = $derived(Math.random() > .5 ? rest.heads : rest.tail);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Component let:Comp>
|
||||||
|
<Comp />
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component let:comp>
|
||||||
|
{@const SvelteComponent = comp}
|
||||||
|
<SvelteComponent />
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component let:comp={stuff}>
|
||||||
|
{@const SvelteComponent_1 = stuff}
|
||||||
|
<SvelteComponent_1 />
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<div slot="x" let:comp={stuff}>
|
||||||
|
{@const SvelteComponent_2 = stuff}
|
||||||
|
<SvelteComponent_2 />
|
||||||
|
</div>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<svelte:fragment slot="x" let:comp={stuff}>
|
||||||
|
{@const SvelteComponent_3 = stuff}
|
||||||
|
<SvelteComponent_3 />
|
||||||
|
</svelte:fragment>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<svelte:element this={"div"} slot="x" let:comp={stuff}>
|
||||||
|
{@const SvelteComponent_4 = stuff}
|
||||||
|
<SvelteComponent_4 />
|
||||||
|
</svelte:element>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component let:Comp>
|
||||||
|
<Comp />
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component let:comp>
|
||||||
|
{@const SvelteComponent_5 = comp}
|
||||||
|
<SvelteComponent_5 />
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component let:comp={stuff}>
|
||||||
|
{@const SvelteComponent_6 = stuff}
|
||||||
|
<SvelteComponent_6 />
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<div slot="x" let:comp={stuff}>
|
||||||
|
{@const SvelteComponent_7 = stuff}
|
||||||
|
<SvelteComponent_7 />
|
||||||
|
</div>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<svelte:fragment slot="x" let:comp={stuff}>
|
||||||
|
{@const SvelteComponent_8 = stuff}
|
||||||
|
<SvelteComponent_8 />
|
||||||
|
</svelte:fragment>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component>
|
||||||
|
<svelte:element this={"div"} slot="x" let:comp={stuff}>
|
||||||
|
{@const SvelteComponent_9 = stuff}
|
||||||
|
<SvelteComponent_9 />
|
||||||
|
</svelte:element>
|
||||||
|
</Component>
|
||||||
|
|
||||||
|
<Component />
|
||||||
|
<Component prop value="" on:click on:click={()=>''} />
|
||||||
|
<SvelteComponent_10 prop value="" on:click on:click={()=>''}/>
|
||||||
|
|
||||||
|
<Component
|
||||||
|
prop value=""
|
||||||
|
on:click
|
||||||
|
on:click={()=>''}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SvelteComponent_10
|
||||||
|
prop value=""
|
||||||
|
on:click
|
||||||
|
on:click={()=>''}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{#if true}
|
||||||
|
{@const x = {Component}}
|
||||||
|
{@const SvelteComponent_12 = x['Component']}
|
||||||
|
<SvelteComponent_12 />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if true}
|
||||||
|
{@const x = {Component}}
|
||||||
|
<x.Component />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#each [] as component}
|
||||||
|
{@const SvelteComponent_13 = component}
|
||||||
|
<SvelteComponent_13 />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each [] as Component}
|
||||||
|
<Component />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each [] as component}
|
||||||
|
{@const Comp = component.component}
|
||||||
|
<Comp />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each [] as component}
|
||||||
|
{@const comp = component.component}
|
||||||
|
{@const SvelteComponent_14 = comp}
|
||||||
|
<SvelteComponent_14 />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#await Promise.resolve()}
|
||||||
|
<Component />
|
||||||
|
{@const SvelteComponent_15 = fallback}
|
||||||
|
<SvelteComponent_15 />
|
||||||
|
{:then something}
|
||||||
|
{@const SvelteComponent_16 = something}
|
||||||
|
<SvelteComponent_16 />
|
||||||
|
{:catch e}
|
||||||
|
{@const SvelteComponent_17 = e}
|
||||||
|
<SvelteComponent_17 />
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
{#await Promise.resolve() then Something}
|
||||||
|
<Something />
|
||||||
|
{:catch Error}
|
||||||
|
<Error />
|
||||||
|
{/await}
|
Loading…
Reference in new issue