Skip to content

fix: expand boolean attribute support #15095

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 4 commits into from
Jan 23, 2025
Merged

fix: expand boolean attribute support #15095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d9f2c14
Adding test for expected boolean attribute support
Rican7 Jan 23, 2025
144b643
Improving support for more boolean attributes:
Rican7 Jan 23, 2025
c728177
Skipping JSDOM version of boolean attribute test
Rican7 Jan 23, 2025
b66cd0b
Adding changeset
Rican7 Jan 23, 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/strange-hairs-trade.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: expand boolean attribute support
16 changes: 13 additions & 3 deletions packages/svelte/src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,10 @@ const DOM_BOOLEAN_ATTRIBUTES = [
'reversed',
'seamless',
'selected',
'webkitdirectory'
'webkitdirectory',
'defer',
'disablepictureinpicture',
'disableremoteplayback'
];

/**
Expand All @@ -197,7 +200,10 @@ const ATTRIBUTE_ALIASES = {
defaultvalue: 'defaultValue',
defaultchecked: 'defaultChecked',
srcobject: 'srcObject',
novalidate: 'noValidate'
novalidate: 'noValidate',
allowfullscreen: 'allowFullscreen',
disablepictureinpicture: 'disablePictureInPicture',
disableremoteplayback: 'disableRemotePlayback'
};

/**
Expand All @@ -219,7 +225,11 @@ const DOM_PROPERTIES = [
'volume',
'defaultValue',
'defaultChecked',
'srcObject'
'srcObject',
'noValidate',
'allowFullscreen',
'disablePictureInPicture',
'disableRemotePlayback'
];

/**
Expand Down
60 changes: 60 additions & 0 deletions packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { test } from '../../test';

export default test({
// JSDOM lacks support for some of these attributes, so we'll skip it for now.
//
// See:
// - `async`: https://github.com/jsdom/jsdom/issues/1564
// - `nomodule`: https://github.com/jsdom/jsdom/issues/2475
// - `autofocus`: https://github.com/jsdom/jsdom/issues/3041
// - `inert`: https://github.com/jsdom/jsdom/issues/3605
// - etc...: https://github.com/jestjs/jest/issues/139#issuecomment-592673550
skip_mode: ['client'],

html: `
<script nomodule async defer></script>
<form novalidate></form>
<input readonly required checked webkitdirectory>
<select multiple disabled></select>
<button formnovalidate></button>
<img ismap>
<video autoplay controls loop muted playsinline disablepictureinpicture disableremoteplayback></video>
<audio disableremoteplayback></audio>
<track default>
<iframe allowfullscreen></iframe>
<details open></details>
<ol reversed></ol>
<div autofocus></div>
<span inert></span>

<script nomodule async defer></script>
<form novalidate></form>
<input readonly required checked webkitdirectory>
<select multiple disabled></select>
<button formnovalidate></button>
<img ismap>
<video autoplay controls loop muted playsinline disablepictureinpicture disableremoteplayback></video>
<audio disableremoteplayback></audio>
<track default>
<iframe allowfullscreen></iframe>
<details open></details>
<ol reversed></ol>
<div autofocus></div>
<span inert></span>

<script></script>
<form></form>
<input>
<select></select>
<button></button>
<img>
<video></video>
<audio></audio>
<track>
<iframe></iframe>
<details></details>
<ol></ol>
<div></div>
<span></span>
`
});
22 changes: 22 additions & 0 deletions packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/main.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script>
let runesMode = $state('using a rune so that we trigger runes mode');

const attributeValues = [true, 'test', false];
</script>

{#each attributeValues as val}
<script NOMODULE={val} ASYNC={val} DEFER={val}></script>
<form NOVALIDATE={val}></form>
<input READONLY={val} REQUIRED={val} CHECKED={val} WEBKITDIRECTORY={val} />
<select MULTIPLE={val} DISABLED={val}></select>
<button FORMNOVALIDATE={val}></button>
<img ISMAP={val} />
<video AUTOPLAY={val} CONTROLS={val} LOOP={val} MUTED={val} PLAYSINLINE={val} DISABLEPICTUREINPICTURE={val} DISABLEREMOTEPLAYBACK={val}></video>
<audio DISABLEREMOTEPLAYBACK={val}></audio>
<track DEFAULT={val} />
<iframe ALLOWFULLSCREEN={val}></iframe>
<details OPEN={val}></details>
<ol REVERSED={val}></ol>
<div AUTOFOCUS={val}></div>
<span INERT={val}></span>
{/each}
Loading