Skip to content

Beginning with Svelte version 3.54.0, the bind for function has stopped working according to the documentation and with the previous behavior #8152

Closed as not planned
@lukaszpolowczyk

Description

@lukaszpolowczyk

Describe the bug

As of Svelte version 3.54.0, bind for function has stopped working according to the documentation and with the previous behavior.

The culprit is probably this:
Prevent running init binding unnecessarily (#5689, #6298)
(that's my guess)


Here a description of how bind for function works:
https://svelte.dev/docs#component-format-script-1-export-creates-a-component-prop

If you export a const, class or function, it is readonly from outside the component. Functions are valid prop values, however, as shown below.

<script>
	// these are readonly
	export const thisIs = 'readonly';

	export function greet(name) {
		alert(`hello ${name}!`);
	}

	// this is a prop
	export let format = n => n.toFixed(2);
</script>

As of Svelte version 3.54.0, it stopped working this way:
https://svelte.dev/repl/6dbad854b4ac4127a0797fd2dd99cd38?version=3.54.0

Still in Svelte version 3.53.1, it worked as in the documentation:
https://svelte.dev/repl/6dbad854b4ac4127a0797fd2dd99cd38?version=3.53.1

The latest version of Svelte 3.55.0 is also broken:
https://svelte.dev/repl/6dbad854b4ac4127a0797fd2dd99cd38?version=3.55.0

Reproduction

  1. go to https://svelte.dev/repl/6dbad854b4ac4127a0797fd2dd99cd38?version=3.54.0
  2. click Hello world!
  3. see in the console (INCORRECT SVELTE WORKING):
    "outside1"
    "outside2"
  1. go to https://svelte.dev/repl/6dbad854b4ac4127a0797fd2dd99cd38?version=3.53.1
  2. click Hello world!
  3. see in the console (CORRECT SVELTE WORKING):
    "inside"

Test code in REPL (common):

<!-- App.svelte -->
<script>
	import Com from "./Com.svelte"
	let name = 'world';
	let ee = ()=>{console.log("outside1")}
	let ee2 = ()=>{console.log("outside2")}
</script>

<Com bind:ee={ee}/>
<Com bind:ee={ee2}/>
<h1 on:click={()=>{ee();ee2();}}>Hello {name}!</h1>
<!-- Com.svelte -->
<script>
	export function ee () {console.log("inside")}
</script>

Logs

No response

System Info

System:
    OS: Linux 6.0 Arch Linux
    CPU: (4) x64 AMD Athlon(tm) X4 950 Quad Core Processor
    Memory: 9.63 GB / 15.06 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 19.3.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Firefox: 102.6.0esr
  npmPackages:
    svelte: ^3.54.0 => 3.55.0

Severity

blocking all usage of svelte

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions