Event forwarding / dispatching an action • Playground • Svelte

App.svelte

Child.svelte

import Child from './Child.svelte'

let inputBoxValue = ''

const parentValidation = ({ detail }) => {

// validation here

alert(detail)

}

</script>

<Child

bind:value="{inputBoxValue}"

on:child-blur="{parentValidation}"

<p>Input box value is: {inputBoxValue}</p>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

import Child from './Child.svelte';

var root = $.template(`<!> <p> </p>`, 1);

export default function App($$anchor) {

let inputBoxValue = $.mutable_state('');

const parentValidation = ({ detail }) => {

// validation here

alert(detail);

};

var fragment = root();

var node = $.first_child(fragment);

Child(node, {

get value() {

return $.get(inputBoxValue);

set value($$value) {

$.set(inputBoxValue, $$value);

$$events: { 'child-blur': parentValidation },

$$legacy: true

});

var p = $.sibling(node, 2);

var text = $.child(p);

$.reset(p);

$.template_effect(() => $.set_text(text, `Input box value is: ${$.get(inputBoxValue) ?? ''}`));

$.append($$anchor, fragment);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Add a <style> tag to see the CSS output */

		
			
				
					 Root {
 css: null
js: []
start: 172
end: 293
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (4)
  Text {...}
 type: "Text"
start: 170
end: 172
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 172
end: 249
name: "Child"
attributes: [...] (2)
  BindDirective {...}
 start: 181
end: 209
type: "BindDirective"
name: "value"
expression: Identifier {...}
 type: "Identifier"
start: 194
end: 207
loc:  {...}
 start:  {...}
 line: 11
column: 15
 }
end:  {...}
 line: 11
column: 28
 }
 }
name: "inputBoxValue"
 }
modifiers: []
 }
 OnDirective {...}
 start: 212
end: 246
type: "OnDirective"
name: "child-blur"
expression: Identifier {...}
 type: "Identifier"
start: 228
end: 244
loc:  {...}
 start:  {...}
 line: 12
column: 18
 }
end:  {...}
 line: 12
column: 34
 }
 }
name: "parentValidation"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 249
end: 251
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 251
end: 293
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 254
end: 274
raw: "Input box value is: "
data: "Input box value is: "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 274
end: 289
expression: Identifier {...}
 type: "Identifier"
start: 275
end: 288
loc:  {...}
 start:  {...}
 line: 15
column: 24
 }
end:  {...}
 line: 15
column: 37
 }
 }
name: "inputBoxValue"
 }
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 170
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 161
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 8
column: 0
 }
 }
body: [...] (3)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 11
end: 45
loc:  {...}
 start:  {...}
 line: 2
column: 2
 }
end:  {...}
 line: 2
column: 36
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 18
end: 23
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 14
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 18
end: 23
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 14
 }
 }
name: "Child"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 29
end: 45
loc:  {...}
 start:  {...}
 line: 2
column: 20
 }
end:  {...}
 line: 2
column: 36
 }
 }
value: "./Child.svelte"
raw: "'./Child.svelte'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 48
end: 70
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 24
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 52
end: 70
loc:  {...}
 start:  {...}
 line: 3
column: 6
 }
end:  {...}
 line: 3
column: 24
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 52
end: 65
loc:  {...}
 start:  {...}
 line: 3
column: 6
 }
end:  {...}
 line: 3
column: 19
 }
 }
name: "inputBoxValue"
 }
init: Literal {...}
 type: "Literal"
start: 68
end: 70
loc:  {...}
 start:  {...}
 line: 3
column: 22
 }
end:  {...}
 line: 3
column: 24
 }
 }
value: ""
raw: "''"
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 73
end: 160
loc:  {...}
 start:  {...}
 line: 4
column: 2
 }
end:  {...}
 line: 7
column: 3
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 79
end: 160
loc:  {...}
 start:  {...}
 line: 4
column: 8
 }
end:  {...}
 line: 7
column: 3
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 79
end: 95
loc:  {...}
 start:  {...}
 line: 4
column: 8
 }
end:  {...}
 line: 4
column: 24
 }
 }
name: "parentValidation"
 }
init: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 98
end: 160
loc:  {...}
 start:  {...}
 line: 4
column: 27
 }
end:  {...}
 line: 7
column: 3
 }
 }
id: null
expression: false
generator: false
async: false
params: [...] (1)
  ObjectPattern {...}
 type: "ObjectPattern"
start: 99
end: 109
loc:  {...}
 start:  {...}
 line: 4
column: 28
 }
end:  {...}
 line: 4
column: 38
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 101
end: 107
loc:  {...}
 start:  {...}
 line: 4
column: 30
 }
end:  {...}
 line: 4
column: 36
 }
 }
method: false
shorthand: true
computed: false
key: Identifier {...}
 type: "Identifier"
start: 101
end: 107
loc:  {...}
 start:  {...}
 line: 4
column: 30
 }
end:  {...}
 line: 4
column: 36
 }
 }
name: "detail"
 }
kind: "init"
value: Identifier {...}
 type: "Identifier"
start: 101
end: 107
loc:  {...}
 start:  {...}
 line: 4
column: 30
 }
end:  {...}
 line: 4
column: 36
 }
 }
name: "detail"
 }
 }
 ]
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 114
end: 160
loc:  {...}
 start:  {...}
 line: 4
column: 43
 }
end:  {...}
 line: 7
column: 3
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 143
end: 156
loc:  {...}
 start:  {...}
 line: 6
column: 4
 }
end:  {...}
 line: 6
column: 17
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 143
end: 156
loc:  {...}
 start:  {...}
 line: 6
column: 4
 }
end:  {...}
 line: 6
column: 17
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 143
end: 148
loc:  {...}
 start:  {...}
 line: 6
column: 4
 }
end:  {...}
 line: 6
column: 9
 }
 }
name: "alert"
 }
arguments: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 149
end: 155
loc:  {...}
 start:  {...}
 line: 6
column: 10
 }
end:  {...}
 line: 6
column: 16
 }
 }
name: "detail"
 }
 ]
optional: false
 }
leadingComments: [...] (1)
  Line {...}
 type: "Line"
value: " validation here"
start: 120
end: 138
 }
 ]
 }
 ]
 }
 }
 }
 ]
kind: "const"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern