From f9d0df60417b60d72fbb73ff671b4c2918b15c17 Mon Sep 17 00:00:00 2001 From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com> Date: Mon, 26 May 2025 15:54:19 -0700 Subject: [PATCH 1/5] docs: add link to lvalue info on `bind:` docs (#16008) * add link to lvalue * use more user-friendly info --- documentation/docs/03-template-syntax/12-bind.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/03-template-syntax/12-bind.md b/documentation/docs/03-template-syntax/12-bind.md index a59a2d8321..de57815687 100644 --- a/documentation/docs/03-template-syntax/12-bind.md +++ b/documentation/docs/03-template-syntax/12-bind.md @@ -4,7 +4,7 @@ title: bind: Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent. -The general syntax is `bind:property={expression}`, where `expression` is an _lvalue_ (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent: +The general syntax is `bind:property={expression}`, where `expression` is an [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent: ```svelte From 6e2ba643c5526ae74f7c1c61a5883d1cc8848d0a Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 26 May 2025 18:56:25 -0400 Subject: [PATCH 2/5] Version Packages (#16002) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/olive-pandas-trade.md | 5 ----- .changeset/thin-dolls-cover.md | 5 ----- packages/svelte/CHANGELOG.md | 8 ++++++++ packages/svelte/package.json | 2 +- packages/svelte/src/version.js | 2 +- 5 files changed, 10 insertions(+), 12 deletions(-) delete mode 100644 .changeset/olive-pandas-trade.md delete mode 100644 .changeset/thin-dolls-cover.md diff --git a/.changeset/olive-pandas-trade.md b/.changeset/olive-pandas-trade.md deleted file mode 100644 index bef36a3075..0000000000 --- a/.changeset/olive-pandas-trade.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: allow using typescript in `customElement.extend` option diff --git a/.changeset/thin-dolls-cover.md b/.changeset/thin-dolls-cover.md deleted file mode 100644 index e9f09342a5..0000000000 --- a/.changeset/thin-dolls-cover.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: cleanup event handlers on media elements diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 62b1db3759..dae7f68e85 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,13 @@ # svelte +## 5.33.3 + +### Patch Changes + +- fix: allow using typescript in `customElement.extend` option ([#16001](https://github.com/sveltejs/svelte/pull/16001)) + +- fix: cleanup event handlers on media elements ([#16005](https://github.com/sveltejs/svelte/pull/16005)) + ## 5.33.2 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 65af4a543f..3f625f1590 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -2,7 +2,7 @@ "name": "svelte", "description": "Cybernetically enhanced web apps", "license": "MIT", - "version": "5.33.2", + "version": "5.33.3", "type": "module", "types": "./types/index.d.ts", "engines": { diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js index 2184f10a6c..fb2f375273 100644 --- a/packages/svelte/src/version.js +++ b/packages/svelte/src/version.js @@ -4,5 +4,5 @@ * The current version, as set in package.json. * @type {string} */ -export const VERSION = '5.33.2'; +export const VERSION = '5.33.3'; export const PUBLIC_VERSION = '5'; From 4e3ff0944d3a45266ef5e4507b8e3f7acacd93bb Mon Sep 17 00:00:00 2001 From: Hyunbin Seo <47051820+hyunbinseo@users.noreply.github.com> Date: Tue, 27 May 2025 21:57:45 +0900 Subject: [PATCH 3/5] fix: narrow `defaultChecked` to boolean (#16009) * fix: narrow `defaultChecked` to boolean * Update .changeset/mean-taxis-yell.md --------- Co-authored-by: Rich Harris --- .changeset/mean-taxis-yell.md | 5 +++++ packages/svelte/elements.d.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/mean-taxis-yell.md diff --git a/.changeset/mean-taxis-yell.md b/.changeset/mean-taxis-yell.md new file mode 100644 index 0000000000..6257720d08 --- /dev/null +++ b/.changeset/mean-taxis-yell.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: narrow `defaultChecked` to boolean diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts index 71f28b4f97..0172b0e358 100644 --- a/packages/svelte/elements.d.ts +++ b/packages/svelte/elements.d.ts @@ -1115,8 +1115,8 @@ export interface HTMLInputAttributes extends HTMLAttributes { // needs both casing variants because language tools does lowercase names of non-shorthand attributes defaultValue?: any; defaultvalue?: any; - defaultChecked?: any; - defaultchecked?: any; + defaultChecked?: boolean | undefined | null; + defaultchecked?: boolean | undefined | null; width?: number | string | undefined | null; webkitdirectory?: boolean | undefined | null; From 37488fa65c092c815584133b539ee79f570d2c76 Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Tue, 27 May 2025 15:02:19 +0200 Subject: [PATCH 4/5] fix: warn when using rest or identifier in custom elements without props option (#16003) * fix: warn when using rest or identifier in custom elements without props option * chore: update message * tweak message * update tests --------- Co-authored-by: Rich Harris --- .changeset/mighty-rabbits-teach.md | 5 ++++ .../.generated/compile-warnings.md | 6 +++++ .../messages/compile-warnings/script.md | 4 +++ .../2-analyze/visitors/VariableDeclarator.js | 14 ++++++++++ packages/svelte/src/compiler/warnings.js | 9 +++++++ .../input.svelte | 7 +++++ .../warnings.json | 14 ++++++++++ .../input.svelte | 5 ++++ .../warnings.json | 26 +++++++++++++++++++ .../input.svelte | 5 ++++ .../warnings.json | 26 +++++++++++++++++++ 11 files changed, 121 insertions(+) create mode 100644 .changeset/mighty-rabbits-teach.md create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte create mode 100644 packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json diff --git a/.changeset/mighty-rabbits-teach.md b/.changeset/mighty-rabbits-teach.md new file mode 100644 index 0000000000..0d80ddd51a --- /dev/null +++ b/.changeset/mighty-rabbits-teach.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: warn when using rest or identifier in custom elements without props option diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md index b579d38602..2af9021a6a 100644 --- a/documentation/docs/98-reference/.generated/compile-warnings.md +++ b/documentation/docs/98-reference/.generated/compile-warnings.md @@ -632,6 +632,12 @@ In some situations a selector may target an element that is not 'visible' to the ``` +### custom_element_props_identifier + +``` +Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option. +``` + ### element_implicitly_closed ``` diff --git a/packages/svelte/messages/compile-warnings/script.md b/packages/svelte/messages/compile-warnings/script.md index 6603759156..26bd0c9027 100644 --- a/packages/svelte/messages/compile-warnings/script.md +++ b/packages/svelte/messages/compile-warnings/script.md @@ -1,3 +1,7 @@ +## custom_element_props_identifier + +> Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option. + ## export_let_unused > Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%` diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js index a7d08d315d..c4b4272aba 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js +++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js @@ -4,6 +4,7 @@ import { get_rune } from '../../scope.js'; import { ensure_no_module_import_conflict, validate_identifier_name } from './shared/utils.js'; import * as e from '../../../errors.js'; +import * as w from '../../../warnings.js'; import { extract_paths } from '../../../utils/ast.js'; import { equal } from '../../../utils/assert.js'; @@ -52,6 +53,19 @@ export function VariableDeclarator(node, context) { e.props_invalid_identifier(node); } + if ( + context.state.analysis.custom_element && + context.state.options.customElementOptions?.props == null + ) { + let warn_on; + if ( + node.id.type === 'Identifier' || + (warn_on = node.id.properties.find((p) => p.type === 'RestElement')) != null + ) { + w.custom_element_props_identifier(warn_on ?? node.id); + } + } + context.state.analysis.needs_props = true; if (node.id.type === 'Identifier') { diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index 2a8316308c..1226190891 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -96,6 +96,7 @@ export const codes = [ 'options_removed_hydratable', 'options_removed_loop_guard_timeout', 'options_renamed_ssr_dom', + 'custom_element_props_identifier', 'export_let_unused', 'legacy_component_creation', 'non_reactive_update', @@ -592,6 +593,14 @@ export function options_renamed_ssr_dom(node) { w(node, 'options_renamed_ssr_dom', `\`generate: "dom"\` and \`generate: "ssr"\` options have been renamed to "client" and "server" respectively\nhttps://svelte.dev/e/options_renamed_ssr_dom`); } +/** + * Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option. + * @param {null | NodeLike} node + */ +export function custom_element_props_identifier(node) { + w(node, 'custom_element_props_identifier', `Using a rest element or a non-destructured declaration with \`$props()\` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the \`customElement.props\` option.\nhttps://svelte.dev/e/custom_element_props_identifier`); +} + /** * Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%` * @param {null | NodeLike} node diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte new file mode 100644 index 0000000000..bb7b930dc3 --- /dev/null +++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json new file mode 100644 index 0000000000..b880fe146c --- /dev/null +++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json @@ -0,0 +1,14 @@ +[ + { + "code": "options_missing_custom_element", + "end": { + "column": 2, + "line": 3 + }, + "message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?", + "start": { + "column": 16, + "line": 1 + } + } +] diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte new file mode 100644 index 0000000000..207b554527 --- /dev/null +++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json new file mode 100644 index 0000000000..61e11ab108 --- /dev/null +++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json @@ -0,0 +1,26 @@ +[ + { + "code": "options_missing_custom_element", + "end": { + "column": 34, + "line": 1 + }, + "message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?", + "start": { + "column": 16, + "line": 1 + } + }, + { + "code": "custom_element_props_identifier", + "end": { + "column": 15, + "line": 4 + }, + "message": "Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.", + "start": { + "column": 7, + "line": 4 + } + } +] diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte b/packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte new file mode 100644 index 0000000000..ca5b16f8c3 --- /dev/null +++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json new file mode 100644 index 0000000000..4c50bbd116 --- /dev/null +++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json @@ -0,0 +1,26 @@ +[ + { + "code": "options_missing_custom_element", + "end": { + "column": 34, + "line": 1 + }, + "message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?", + "start": { + "column": 16, + "line": 1 + } + }, + { + "code": "custom_element_props_identifier", + "end": { + "column": 10, + "line": 4 + }, + "message": "Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.", + "start": { + "column": 5, + "line": 4 + } + } +] From 2e27c5d8aab4f77862f79919cb990e4f1009c064 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 27 May 2025 09:10:28 -0400 Subject: [PATCH 5/5] Version Packages (#16010) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/mean-taxis-yell.md | 5 ----- .changeset/mighty-rabbits-teach.md | 5 ----- packages/svelte/CHANGELOG.md | 8 ++++++++ packages/svelte/package.json | 2 +- packages/svelte/src/version.js | 2 +- 5 files changed, 10 insertions(+), 12 deletions(-) delete mode 100644 .changeset/mean-taxis-yell.md delete mode 100644 .changeset/mighty-rabbits-teach.md diff --git a/.changeset/mean-taxis-yell.md b/.changeset/mean-taxis-yell.md deleted file mode 100644 index 6257720d08..0000000000 --- a/.changeset/mean-taxis-yell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: narrow `defaultChecked` to boolean diff --git a/.changeset/mighty-rabbits-teach.md b/.changeset/mighty-rabbits-teach.md deleted file mode 100644 index 0d80ddd51a..0000000000 --- a/.changeset/mighty-rabbits-teach.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: warn when using rest or identifier in custom elements without props option diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index dae7f68e85..72ab89eb4a 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,13 @@ # svelte +## 5.33.4 + +### Patch Changes + +- fix: narrow `defaultChecked` to boolean ([#16009](https://github.com/sveltejs/svelte/pull/16009)) + +- fix: warn when using rest or identifier in custom elements without props option ([#16003](https://github.com/sveltejs/svelte/pull/16003)) + ## 5.33.3 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 3f625f1590..a63771a0b4 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -2,7 +2,7 @@ "name": "svelte", "description": "Cybernetically enhanced web apps", "license": "MIT", - "version": "5.33.3", + "version": "5.33.4", "type": "module", "types": "./types/index.d.ts", "engines": { diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js index fb2f375273..c2af8bbf43 100644 --- a/packages/svelte/src/version.js +++ b/packages/svelte/src/version.js @@ -4,5 +4,5 @@ * The current version, as set in package.json. * @type {string} */ -export const VERSION = '5.33.3'; +export const VERSION = '5.33.4'; export const PUBLIC_VERSION = '5';