mirror of https://github.com/sveltejs/svelte
fix : bug "$0 is not defined" with svelte:element and a single class with a function call (#15396)
* add spread to test * fix #15386 * fix #15392 * test * changeset * use is_text_attributepull/15383/head
parent
cf56973bf0
commit
8fb2fb70e1
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix : bug "$0 is not defined" on svelte:element with a function call on class
|
@ -0,0 +1,60 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<div></div>
|
||||
<div class="red svelte-p153w3"></div>
|
||||
<div></div>
|
||||
<div class="red svelte-p153w3"></div>
|
||||
<div class="blue svelte-p153w3"></div>
|
||||
<div class="blue svelte-p153w3"></div>
|
||||
`,
|
||||
|
||||
async test({ assert, target, component }) {
|
||||
component.active = true;
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div></div>
|
||||
<div class="red svelte-p153w3"></div>
|
||||
<div class="active"></div>
|
||||
<div class="red svelte-p153w3 active"></div>
|
||||
<div class="blue svelte-p153w3"></div>
|
||||
<div class="blue svelte-p153w3 active"></div>
|
||||
`
|
||||
);
|
||||
|
||||
component.tag = 'span';
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<span></span>
|
||||
<span class="red svelte-p153w3"></span>
|
||||
<span class="active"></span>
|
||||
<span class="red svelte-p153w3 active"></span>
|
||||
<span class="blue svelte-p153w3"></span>
|
||||
<span class="blue svelte-p153w3 active"></span>
|
||||
`
|
||||
);
|
||||
|
||||
component.active = false;
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<span></span>
|
||||
<span class="red svelte-p153w3"></span>
|
||||
<span class=""></span>
|
||||
<span class="red svelte-p153w3"></span>
|
||||
<span class="blue svelte-p153w3"></span>
|
||||
<span class="blue svelte-p153w3"></span>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
let { tag = "div", active = false } = $props();
|
||||
|
||||
function cn(classname) {
|
||||
return classname;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:element this={tag}></svelte:element>
|
||||
<svelte:element this={tag} class="red"></svelte:element>
|
||||
<svelte:element this={tag} class:active={active}></svelte:element>
|
||||
<svelte:element this={tag} class="red" class:active={active}></svelte:element>
|
||||
<svelte:element this={tag} class={cn("blue")}></svelte:element>
|
||||
<svelte:element this={tag} class={cn("blue")} class:active={active}></svelte:element>
|
||||
|
||||
<style>
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue