svelte - npm Package Compare versions

Comparing version 5.0.0-next.112 to 5.0.0-next.113

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.0.0-next.112",
+  "version": "5.0.0-next.113",
   "type": "module",
@@ -8,0 +8,0 @@ "types": "./types/index.d.ts",

src/compiler/phases/3-transform/client/transform-client.js

@@ -258,3 +258,5 @@ import { walk } from 'zimmerframe';
 	if (analysis.runes && options.dev) {
-		const bindable = analysis.exports.map(({ name, alias }) => b.literal(alias ?? name));
+		const exports = analysis.exports.map(({ name, alias }) => b.literal(alias ?? name));
+		/** @type {import('estree').Literal[]} */
+		const bindable = [];
 		for (const [name, binding] of properties) {
@@ -266,3 +268,11 @@ if (binding.kind === 'bindable_prop') {
 		instance.body.unshift(
-			b.stmt(b.call('$.validate_prop_bindings', b.id('$$props'), b.array(bindable)))
+			b.stmt(
+				b.call(
+					'$.validate_prop_bindings',
+					b.id('$$props'),
+					b.array(bindable),
+					b.array(exports),
+					b.id(`${analysis.name}`)
+				)
+			)
 		);
@@ -269,0 +279,0 @@ }

src/compiler/phases/3-transform/client/visitors/javascript-runes.js

@@ -225,3 +225,4 @@ import { get_rune } from '../../../scope.js';
 
-				const seen = state.analysis.exports.map(({ name, alias }) => alias ?? name);
+				/** @type {string[]} */
+				const seen = [];
 
@@ -228,0 +229,0 @@ for (const property of declarator.id.properties) {

src/internal/client/validate.js

@@ -88,16 +88,26 @@ import { untrack } from './runtime.js';
  * @param {string[]} bindable
+ * @param {string[]} exports
+ * @param {Function & { filename: string }} component
  */
-export function validate_prop_bindings($$props, bindable) {
+export function validate_prop_bindings($$props, bindable, exports, component) {
 	for (const key in $$props) {
-		if (!bindable.includes(key)) {
-			var setter = get_descriptor($$props, key)?.set;
+		var setter = get_descriptor($$props, key)?.set;
+		var name = component.name;
 
-			if (setter) {
+		if (setter) {
+			if (exports.includes(key)) {
 				throw new Error(
-					`Cannot use bind:${key} on this component because the property was not declared as bindable. ` +
-						`To mark a property as bindable, use the $bindable() rune like this: \`let { ${key} = $bindable() } = $props()\``
+					`Component ${component.filename} has an export named ${key} that a consumer component is trying to access using bind:${key}, which is disallowed. ` +
+						`Instead, use bind:this (e.g. <${name} bind:this={component} />) ` +
+						`and then access the property on the bound component instance (e.g. component.${key}).`
 				);
 			}
+			if (!bindable.includes(key)) {
+				throw new Error(
+					`A component is binding to property ${key} of ${name}.svelte (i.e. <${name} bind:${key} />). This is disallowed because the property was not declared as bindable inside ${component.filename}. ` +
+						`To mark a property as bindable, use the $bindable() rune in ${name}.svelte like this: \`let { ${key} = $bindable() } = $props()\``
+				);
+			}
 		}
 	}
 }

src/version.js

@@ -9,3 +9,3 @@ // generated during release, do not modify
  */
-export const VERSION = '5.0.0-next.112';
+export const VERSION = '5.0.0-next.113';
 export const PUBLIC_VERSION = '5';

No alert changes

Improved metrics

Total package byte prevSize

1956540

Lines of code

42184

increased by0.01%

No dependency changes