Skip to content

fix : bug "$0 is not defined" with svelte:element and a single class with a function call #15396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 27, 2025
Merged

fix : bug "$0 is not defined" with svelte:element and a single class with a function call #15396

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4f63f9d
add spread to test
adiguba Feb 25, 2025
5d6bb2f
fix #15386
adiguba Feb 25, 2025
b07781d
Merge branch 'main' of https://github.com/sveltejs/svelte
adiguba Feb 26, 2025
6bc3416
fix #15392
adiguba Feb 26, 2025
311c8ff
test
adiguba Feb 26, 2025
ea0c942
changeset
adiguba Feb 26, 2025
22c5338
use is_text_attribute
adiguba Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/two-dragons-camp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix : bug "$0 is not defined" on svelte:element with a function call on class
7 changes: 5 additions & 2 deletions packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,12 @@ export function SvelteElement(node, context) {
if (
attributes.length === 1 &&
attributes[0].type === 'Attribute' &&
attributes[0].name.toLowerCase() === 'class'
attributes[0].name.toLowerCase() === 'class' &&
attributes[0].value !== true &&
Copy link
Member

@paoloricciuti paoloricciuti Feb 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I might be wrong but there should be a is_text_attrobute utility somewhere...can you check if that's the case and use that?

Copy link
Contributor Author

@adiguba adiguba Feb 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will change that in the morning

!Array.isArray(attributes[0].value) &&
attributes[0].value.metadata.expression.has_call === false
) {
// special case when there only a class attribute
// special case when there only a class attribute, without call expression
let { value, has_state } = build_attribute_value(
attributes[0].value,
context,
Expand Down
60 changes: 60 additions & 0 deletions packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
`
);
}
});
20 changes: 20 additions & 0 deletions packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>