diff --git a/.changeset/two-dragons-camp.md b/.changeset/two-dragons-camp.md new file mode 100644 index 000000000000..cb0635186fd0 --- /dev/null +++ b/.changeset/two-dragons-camp.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix : bug "$0 is not defined" on svelte:element with a function call on class diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js index 7149f8d0e4af..78c0a12d5395 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js @@ -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 && + !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, diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js new file mode 100644 index 000000000000..c7a6213d82b8 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js @@ -0,0 +1,60 @@ +import { flushSync } from 'svelte'; +import { ok, test } from '../../test'; + +export default test({ + html: ` +
+
+
+
+
+
+ `, + + async test({ assert, target, component }) { + component.active = true; + flushSync(); + + assert.htmlEqual( + target.innerHTML, + ` +
+
+
+
+
+
+ ` + ); + + component.tag = 'span'; + flushSync(); + + assert.htmlEqual( + target.innerHTML, + ` + + + + + + + ` + ); + + component.active = false; + flushSync(); + + assert.htmlEqual( + target.innerHTML, + ` + + + + + + + ` + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte new file mode 100644 index 000000000000..709f7b4fa1d5 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte @@ -0,0 +1,20 @@ + + + + + + + + + +