from slot props to render props • Playground • Svelte

App.svelte

Hoverable.svelte

// This is a re-implementation for the example from the tutorial using render props

// The example can be found here: https://svelte.dev/tutorial/slot-props

// Notice - I don't recommend this pattern - it is super cool to know that it is possible though :)

import Hoverable from './Hoverable.svelte';

</script>

<style>

/* Notice - we lose style scoping when using this pattern because svelte doesn't know what we're rendering ahead of time */

:global(div) {

padding: 1em;

margin: 0 0 1em 0;

background-color: #eee;

}

:global(.active) {

background-color: #ff3e00;

color: white;

}

</style>

<Hoverable render={active => `

<p>

${active ? "I am being hovered upon" : "Hover over me!"}

</p>

</div>

`}/>

<Hoverable render={active => `

<p>

${active ? "I am being hovered upon" : "Hover over me!"}

</p>

</div>

`}/>

<Hoverable render={active => `

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

// This is a re-implementation for the example from the tutorial using render props

// The example can be found here: https://svelte.dev/tutorial/slot-props

// Notice - I don't recommend this pattern - it is super cool to know that it is possible though :)

import Hoverable from './Hoverable.svelte';

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

export default function App($$anchor) {

var fragment = root();

var node = $.first_child(fragment);

Hoverable(node, {

render: (active) => `

<p>

${active ? "I am being hovered upon" : "Hover over me!"}

</p>

</div>

});

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

Hoverable(node_1, {

render: (active) => `

<p>

${active ? "I am being hovered upon" : "Hover over me!"}

</p>

</div>

});

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Notice - we lose style scoping when using this pattern because svelte doesn't know what we're rendering ahead of time */

div {

padding: 1em;

margin: 0 0 1em 0;

background-color: #eee;

}

.active {

background-color: #ff3e00;

color: white;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 325
end: 617
attributes: []
children: [...] (2)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 459
end: 471
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 459
end: 471
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  PseudoClassSelector {...}
 type: "PseudoClassSelector"
name: "global"
args: SelectorList {...}
 type: "SelectorList"
start: 467
end: 470
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 467
end: 470
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "div"
start: 467
end: 470
 }
 ]
start: 467
end: 470
 }
 ]
 }
 ]
 }
start: 459
end: 471
 }
 ]
start: 459
end: 471
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 472
end: 539
children: [...] (3)
  Declaration {...}
 type: "Declaration"
start: 476
end: 488
property: "padding"
value: "1em"
 }
 Declaration {...}
 type: "Declaration"
start: 492
end: 509
property: "margin"
value: "0 0 1em 0"
 }
 Declaration {...}
 type: "Declaration"
start: 513
end: 535
property: "background-color"
value: "#eee"
 }
 ]
 }
start: 459
end: 539
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 542
end: 558
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 542
end: 558
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  PseudoClassSelector {...}
 type: "PseudoClassSelector"
name: "global"
args: SelectorList {...}
 type: "SelectorList"
start: 550
end: 557
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 550
end: 557
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "active"
start: 550
end: 557
 }
 ]
start: 550
end: 557
 }
 ]
 }
 ]
 }
start: 542
end: 558
 }
 ]
start: 542
end: 558
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 559
end: 608
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 563
end: 588
property: "background-color"
value: "#ff3e00"
 }
 Declaration {...}
 type: "Declaration"
start: 592
end: 604
property: "color"
value: "white"
 }
 ]
 }
start: 542
end: 608
 }
 ]
content:  {...}
 start: 332
end: 609
styles: "\n/* \tNotice - we lose style scoping when using this pattern because svelte doesn't know what we're rendering ahead of time */\n\t:global(div) {\n\t\tpadding: 1em;\n\t\tmargin: 0 0 1em 0;\n\t\tbackground-color: #eee;\n\t}\n\n\t:global(.active) {\n\t\tbackground-color: #ff3e00;\n\t\tcolor: white;\n\t}\n"
comment: null
 }
 }
js: []
start: 325
end: 1111
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (7)
  Text {...}
 type: "Text"
start: 323
end: 325
raw: "\n\n"
data: "\n\n"
 }
 Text {...}
 type: "Text"
start: 617
end: 619
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 619
end: 782
name: "Hoverable"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 630
end: 780
name: "render"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 637
end: 780
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 638
end: 779
loc:  {...}
 start:  {...}
 line: 22
column: 19
 }
end:  {...}
 line: 28
column: 2
 }
 }
id: null
expression: true
generator: false
async: false
params: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 638
end: 644
loc:  {...}
 start:  {...}
 line: 22
column: 19
 }
end:  {...}
 line: 22
column: 25
 }
 }
name: "active"
 }
 ]
body: TemplateLiteral {...}
 type: "TemplateLiteral"
start: 648
end: 779
loc:  {...}
 start:  {...}
 line: 22
column: 29
 }
end:  {...}
 line: 28
column: 2
 }
 }
expressions: [...] (2)
  ConditionalExpression {...}
 type: "ConditionalExpression"
start: 666
end: 688
loc:  {...}
 start:  {...}
 line: 23
column: 16
 }
end:  {...}
 line: 23
column: 38
 }
 }
test: Identifier {...}
 type: "Identifier"
start: 666
end: 672
loc:  {...}
 start:  {...}
 line: 23
column: 16
 }
end:  {...}
 line: 23
column: 22
 }
 }
name: "active"
 }
consequent: Literal {...}
 type: "Literal"
start: 675
end: 683
loc:  {...}
 start:  {...}
 line: 23
column: 25
 }
end:  {...}
 line: 23
column: 33
 }
 }
value: "active"
raw: "\"active\""
 }
alternate: Literal {...}
 type: "Literal"
start: 686
end: 688
loc:  {...}
 start:  {...}
 line: 23
column: 36
 }
end:  {...}
 line: 23
column: 38
 }
 }
value: ""
raw: "\"\""
 }
 }
 ConditionalExpression {...}
 type: "ConditionalExpression"
start: 704
end: 757
loc:  {...}
 start:  {...}
 line: 25
column: 6
 }
end:  {...}
 line: 25
column: 59
 }
 }
test: Identifier {...}
 type: "Identifier"
start: 704
end: 710
loc:  {...}
 start:  {...}
 line: 25
column: 6
 }
end:  {...}
 line: 25
column: 12
 }
 }
name: "active"
 }
consequent: Literal {...}
 type: "Literal"
start: 713
end: 738
loc:  {...}
 start:  {...}
 line: 25
column: 15
 }
end:  {...}
 line: 25
column: 40
 }
 }
value: "I am being hovered upon"
raw: "\"I am being hovered upon\""
 }
alternate: Literal {...}
 type: "Literal"
start: 741
end: 757
loc:  {...}
 start:  {...}
 line: 25
column: 43
 }
end:  {...}
 line: 25
column: 59
 }
 }
value: "Hover over me!"
raw: "\"Hover over me!\""
 }
 }
 ]
quasis: [...] (3)
  TemplateElement {...}
 type: "TemplateElement"
start: 649
end: 664
loc:  {...}
 start:  {...}
 line: 22
column: 30
 }
end:  {...}
 line: 23
column: 14
 }
 }
value:  {...}
 raw: "\n\t\t<div class= "
cooked: "\n\t\t<div class= "
 }
tail: false
 }
 TemplateElement {...}
 type: "TemplateElement"
start: 689
end: 702
loc:  {...}
 start:  {...}
 line: 23
column: 39
 }
end:  {...}
 line: 25
column: 4
 }
 }
value:  {...}
 raw: ">\n\t\t\t<p>\n\t\t\t\t"
cooked: ">\n\t\t\t<p>\n\t\t\t\t"
 }
tail: false
 }
 TemplateElement {...}
 type: "TemplateElement"
start: 758
end: 778
loc:  {...}
 start:  {...}
 line: 25
column: 60
 }
end:  {...}
 line: 28
column: 1
 }
 }
value:  {...}
 raw: "\n\t\t\t</p>\n\t  </div>\n\t"
cooked: "\n\t\t\t</p>\n\t  </div>\n\t"
 }
tail: true
 }
 ]
 }
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 782
end: 784
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 784
end: 947
name: "Hoverable"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 795
end: 945
name: "render"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 802
end: 945
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 803
end: 944
loc:  {...}
 start:  {...}
 line: 29
column: 20
 }
end:  {...}
 line: 35
column: 2
 }
 }
id: null
expression: true
generator: false
async: false
params: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 803
end: 809
loc:  {...}
 start:  {...}
 line: 29
column: 20
 }
end:  {...}
 line: 29
column: 26
 }
 }
name: "active"
 }
 ]
body: TemplateLiteral {...}
 type: "TemplateLiteral"
start: 813
end: 944
loc:  {...}
 start:  {...}
 line: 29
column: 30
 }
end:  {...}
 line: 35
column: 2
 }
 }
expressions: [...] (2)
  ConditionalExpression {...}
 type: "ConditionalExpression"
start: 831
end: 853
loc:  {...}
 start:  {...}
 line: 30
column: 16
 }
end:  {...}
 line: 30
column: 38
 }
 }
test: Identifier {...}
 type: "Identifier"
start: 831
end: 837
loc:  {...}
 start:  {...}
 line: 30
column: 16
 }
end:  {...}
 line: 30
column: 22
 }
 }
name: "active"
 }
consequent: Literal {...}
 type: "Literal"
start: 840
end: 848
loc:  {...}
 start:  {...}
 line: 30
column: 25
 }
end:  {...}
 line: 30
column: 33
 }
 }
value: "active"
raw: "\"active\""
 }
alternate: Literal {...}
 type: "Literal"
start: 851
end: 853
loc:  {...}
 start:  {...}
 line: 30
column: 36
 }
end:  {...}
 line: 30
column: 38
 }
 }
value: ""
raw: "\"\""
 }
 }
 ConditionalExpression {...}
 type: "ConditionalExpression"
start: 869
end: 922
loc:  {...}
 start:  {...}
 line: 32
column: 6
 }
end:  {...}
 line: 32
column: 59
 }
 }
test: Identifier {...}
 type: "Identifier"
start: 869
end: 875
loc:  {...}
 start:  {...}
 line: 32
column: 6
 }
end:  {...}
 line: 32
column: 12
 }
 }
name: "active"
 }
consequent: Literal {...}
 type: "Literal"
start: 878
end: 903
loc:  {...}
 start:  {...}
 line: 32
column: 15
 }
end:  {...}
 line: 32
column: 40
 }
 }
value: "I am being hovered upon"
raw: "\"I am being hovered upon\""
 }
alternate: Literal {...}
 type: "Literal"
start: 906
end: 922
loc:  {...}
 start:  {...}
 line: 32
column: 43
 }
end:  {...}
 line: 32
column: 59
 }
 }
value: "Hover over me!"
raw: "\"Hover over me!\""
 }
 }
 ]
quasis: [...] (3)
  TemplateElement {...}
 type: "TemplateElement"
start: 814
end: 829
loc:  {...}
 start:  {...}
 line: 29
column: 31
 }
end:  {...}
 line: 30
column: 14
 }
 }
value:  {...}
 raw: "\n\t\t<div class= "
cooked: "\n\t\t<div class= "
 }
tail: false
 }
 TemplateElement {...}
 type: "TemplateElement"
start: 854
end: 867
loc:  {...}
 start:  {...}
 line: 30
column: 39
 }
end:  {...}
 line: 32
column: 4
 }
 }
value:  {...}
 raw: ">\n\t\t\t<p>\n\t\t\t\t"
cooked: ">\n\t\t\t<p>\n\t\t\t\t"
 }
tail: false
 }
 TemplateElement {...}
 type: "TemplateElement"
start: 923
end: 943
loc:  {...}
 start:  {...}
 line: 32
column: 60
 }
end:  {...}
 line: 35
column: 1
 }
 }
value:  {...}
 raw: "\n\t\t\t</p>\n\t  </div>\n\t"
cooked: "\n\t\t\t</p>\n\t  </div>\n\t"
 }
tail: true
 }
 ]
 }
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 947
end: 949
raw: " "
data: " "
 }
 Component {...}
 type: "Component"
start: 949
end: 1111
name: "Hoverable"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 960
end: 1109
name: "render"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 967
end: 1109
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 968
end: 1108
loc:  {...}
 start:  {...}
 line: 36
column: 20
 }
end:  {...}
 line: 42
column: 2
 }
 }
id: null
expression: true
generator: false
async: false
params: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 968
end: 974
loc:  {...}
 start:  {...}
 line: 36
column: 20
 }
end:  {...}
 line: 36
column: 26
 }
 }
name: "active"
 }
 ]
body: TemplateLiteral {...}
 type: "TemplateLiteral"
start: 978
end: 1108
loc:  {...}
 start:  {...}
 line: 36
column: 30
 }
end:  {...}
 line: 42
column: 2
 }
 }
expressions: [...] (2)
  ConditionalExpression {...}
 type: "ConditionalExpression"
start: 996
end: 1018
loc:  {...}
 start:  {...}
 line: 37
column: 16
 }
end:  {...}
 line: 37
column: 38
 }
 }
test: Identifier {...}
 type: "Identifier"
start: 996
end: 1002
loc:  {...}
 start:  {...}
 line: 37
column: 16
 }
end:  {...}
 line: 37
column: 22
 }
 }
name: "active"
 }
consequent: Literal {...}
 type: "Literal"
start: 1005
end: 1013
loc:  {...}
 start:  {...}
 line: 37
column: 25
 }
end:  {...}
 line: 37
column: 33
 }
 }
value: "active"
raw: "\"active\""
 }
alternate: Literal {...}
 type: "Literal"
start: 1016
end: 1018
loc:  {...}
 start:  {...}
 line: 37
column: 36
 }
end:  {...}
 line: 37
column: 38
 }
 }
value: ""
raw: "\"\""
 }
 }
 ConditionalExpression {...}
 type: "ConditionalExpression"
start: 1034
end: 1087
loc:  {...}
 start:  {...}
 line: 39
column: 6
 }
end:  {...}
 line: 39
column: 59
 }
 }
test: Identifier {...}
 type: "Identifier"
start: 1034
end: 1040
loc:  {...}
 start:  {...}
 line: 39
column: 6
 }
end:  {...}
 line: 39
column: 12
 }
 }
name: "active"
 }
consequent: Literal {...}
 type: "Literal"
start: 1043
end: 1068
loc:  {...}
 start:  {...}
 line: 39
column: 15
 }
end:  {...}
 line: 39
column: 40
 }
 }
value: "I am being hovered upon"
raw: "\"I am being hovered upon\""
 }
alternate: Literal {...}
 type: "Literal"
start: 1071
end: 1087
loc:  {...}
 start:  {...}
 line: 39
column: 43
 }
end:  {...}
 line: 39
column: 59
 }
 }
value: "Hover over me!"
raw: "\"Hover over me!\""
 }
 }
 ]
quasis: [...] (3)
  TemplateElement {...}
 type: "TemplateElement"
start: 979
end: 994
loc:  {...}
 start:  {...}
 line: 36
column: 31
 }
end:  {...}
 line: 37
column: 14
 }
 }
value:  {...}
 raw: "\n\t\t<div class= "
cooked: "\n\t\t<div class= "
 }
tail: false
 }
 TemplateElement {...}
 type: "TemplateElement"
start: 1019
end: 1032
loc:  {...}
 start:  {...}
 line: 37
column: 39
 }
end:  {...}
 line: 39
column: 4
 }
 }
value:  {...}
 raw: ">\n\t\t\t<p>\n\t\t\t\t"
cooked: ">\n\t\t\t<p>\n\t\t\t\t"
 }
tail: false
 }
 TemplateElement {...}
 type: "TemplateElement"
start: 1088
end: 1107
loc:  {...}
 start:  {...}
 line: 39
column: 60
 }
end:  {...}
 line: 42
column: 1
 }
 }
value:  {...}
 raw: "\n\t\t\t</p>\n\t\t</div>\n\t"
cooked: "\n\t\t\t</p>\n\t\t</div>\n\t"
 }
tail: true
 }
 ]
 }
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 323
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 314
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 6
column: 0
 }
 }
body: [...] (1)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 270
end: 313
loc:  {...}
 start:  {...}
 line: 5
column: 1
 }
end:  {...}
 line: 5
column: 44
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 277
end: 286
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 17
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 277
end: 286
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 17
 }
 }
name: "Hoverable"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 292
end: 312
loc:  {...}
 start:  {...}
 line: 5
column: 23
 }
end:  {...}
 line: 5
column: 43
 }
 }
value: "./Hoverable.svelte"
raw: "'./Hoverable.svelte'"
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern