Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
tilt.js
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 3.24.1.
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import tilt from './tilt.js';
let reverse = false;
</script>
<style>
:global(body) {
display: grid;
justify-content: center;
align-content: center;
grid-gap: 20px;
}
* { margin: 0; }
div {
height: 200px;
width: 200px;
background: linear-gradient(45deg, #cc00ff, #d9055d);
color: white;
display: grid;
justify-content: center;
align-content: center;
text-align: center;
}
</style>
<div use:tilt={{ scale: 1.1, reverse }}>
<h3>Svelte Tilt!</h3>
<p>
Just hover!
</p>
</div>
<button on:click={() => reverse = !reverse}>
toggle tilt direction
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
/* App.svelte generated by Svelte v3.24.1 */
import {
SvelteComponent,
action_destroyer,
append,
attr,
detach,
element,
init,
insert,
is_function,
listen,
noop,
run_all,
safe_not_equal,
space
} from "svelte/internal";
import tilt from "./tilt.js";
function add_css() {
var style = element("style");
style.id = "svelte-14fxowx-style";
style.textContent = "body{display:grid;justify-content:center;align-content:center;grid-gap:20px}.svelte-14fxowx{margin:0}div.svelte-14fxowx{height:200px;width:200px;background:linear-gradient(45deg, #cc00ff, #d9055d);color:white;display:grid;justify-content:center;align-content:center;text-align:center}";
append(document.head, style);
}
function create_fragment(ctx) {
let div;
let tilt_action;
let t3;
let button;
let mounted;
let dispose;
return {
result = svelte.compile(source, {
generate: ,
});9
1
›
body{display:grid;justify-content:center;align-content:center;grid-gap:20px}.svelte-14fxowx{margin:0}div.svelte-14fxowx{height:200px;width:200px;background:linear-gradient(45deg, #cc00ff, #d9055d);color:white;display:grid;justify-content:center;align-content:center;text-align:center}
{
html: Fragment {...}
- start: 75
- end: 601
- type: "Fragment"
children: [...] (5)
Text {...}
- start: 73
- end: 75
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Text {...}
- start: 425
- end: 427
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 427
- end: 522
- type: "Element"
- name: "div"
attributes: [...] (1)
Action {...}
- start: 432
- end: 466
- type: "Action"
- name: "tilt"
- modifiers: []
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 442
- end: 465
loc: {...}
start: {...}
- line: 28
- column: 15
}end: {...}
- line: 28
- column: 38
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 444
- end: 454
loc: {...}
start: {...}
- line: 28
- column: 17
}end: {...}
- line: 28
- column: 27
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 444
- end: 449
loc: {...}
start: {...}
- line: 28
- column: 17
}end: {...}
- line: 28
- column: 22
}
}- name: "scale"
}value: Literal {...}
- type: "Literal"
- start: 451
- end: 454
loc: {...}
start: {...}
- line: 28
- column: 24
}end: {...}
- line: 28
- column: 27
}
}- value: 1.1
- raw: "1.1"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 456
- end: 463
loc: {...}
start: {...}
- line: 28
- column: 29
}end: {...}
- line: 28
- column: 36
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 456
- end: 463
loc: {...}
start: {...}
- line: 28
- column: 29
}end: {...}
- line: 28
- column: 36
}
}- name: "reverse"
}- kind: "init"
value: MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 28
- column: 29
}end: {...}
- line: 28
- column: 36
}
}
}property: Literal {...}
- type: "Literal"
- value: 0
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "reverse"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}
}
]
}
}
]children: [...] (5)
Text {...}
- start: 467
- end: 469
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 469
- end: 490
- type: "Element"
- name: "h3"
- attributes: []
children: [...] (1)
Text {...}
- start: 473
- end: 485
- type: "Text"
- raw: "Svelte Tilt!"
- data: "Svelte Tilt!"
}
]
} Text {...}
- start: 490
- end: 492
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 492
- end: 515
- type: "Element"
- name: "p"
- attributes: []
children: [...] (1)
Text {...}
- start: 495
- end: 511
- type: "Text"
- raw: "\n\t\tJust hover!\n\t"
- data: "\n\t\tJust hover!\n\t"
}
]
} Text {...}
- start: 515
- end: 516
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
} Text {...}
- start: 522
- end: 524
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 524
- end: 601
- type: "Element"
- name: "button"
attributes: [...] (1)
EventHandler {...}
- start: 532
- end: 567
- type: "EventHandler"
- name: "click"
- modifiers: []
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 542
- end: 566
loc: {...}
start: {...}
- line: 35
- column: 18
}end: {...}
- line: 35
- column: 42
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 0
- end: 69
callee: Identifier {...}
- type: "Identifier"
- start: 0
- end: 12
- name: "$$invalidate"
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- value: 0
} AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 548
- end: 566
loc: {...}
start: {...}
- line: 35
- column: 24
}end: {...}
- line: 35
- column: 42
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 548
- end: 555
loc: {...}
start: {...}
- line: 35
- column: 24
}end: {...}
- line: 35
- column: 31
}
}- name: "reverse"
}right: UnaryExpression {...}
- type: "UnaryExpression"
- start: 558
- end: 566
loc: {...}
start: {...}
- line: 35
- column: 34
}end: {...}
- line: 35
- column: 42
}
}- operator: "!"
- prefix: true
argument: Identifier {...}
- type: "Identifier"
- start: 559
- end: 566
loc: {...}
start: {...}
- line: 35
- column: 35
}end: {...}
- line: 35
- column: 42
}
}- name: "reverse"
}
}
}
]- optional: false
}
}
}
]children: [...] (1)
Text {...}
- start: 568
- end: 592
- type: "Text"
- raw: "\n\ttoggle tilt direction\n"
- data: "\n\ttoggle tilt direction\n"
}
]
}
]
}css: Style {...}
- type: "Style"
- start: 75
- end: 425
- attributes: []
children: [...] (3)
Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
children: [...] (1)
Raw {...}
- type: "Raw"
- value: "body"
- start: 92
- end: 96
}
]- start: 84
- end: 97
}
]- start: 84
- end: 97
}
]- start: 84
- end: 97
}block: Block {...}
- type: "Block"
children: [...] (4)
Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "grid"
- start: 111
- end: 115
}
]- start: 110
- end: 115
}- start: 102
- end: 115
} Declaration {...}
- type: "Declaration"
- important: false
- property: "justify-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 136
- end: 142
}
]- start: 135
- end: 142
}- start: 119
- end: 142
} Declaration {...}
- type: "Declaration"
- important: false
- property: "align-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 161
- end: 167
}
]- start: 160
- end: 167
}- start: 146
- end: 167
} Declaration {...}
- type: "Declaration"
- important: false
- property: "grid-gap"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "20"
- unit: "px"
- start: 181
- end: 185
}
]- start: 180
- end: 185
}- start: 171
- end: 185
}
]- start: 98
- end: 189
}- start: 84
- end: 189
} Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "*"
- start: 191
- end: 192
}
]- start: 191
- end: 192
}
]- start: 191
- end: 192
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "margin"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 203
- end: 204
}
]- start: 202
- end: 204
}- start: 195
- end: 204
}
]- start: 193
- end: 207
}- start: 191
- end: 207
} Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "div"
- start: 209
- end: 212
}
]- start: 209
- end: 212
}
]- start: 209
- end: 212
}block: Block {...}
- type: "Block"
children: [...] (8)
Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "200"
- unit: "px"
- start: 225
- end: 230
}
]- start: 224
- end: 230
}- start: 217
- end: 230
} Declaration {...}
- type: "Declaration"
- important: false
- property: "width"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "200"
- unit: "px"
- start: 241
- end: 246
}
]- start: 240
- end: 246
}- start: 234
- end: 246
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "linear-gradient"
children: [...] (5)
Dimension {...}
- type: "Dimension"
- value: "45"
- unit: "deg"
- start: 278
- end: 283
} Operator {...}
- type: "Operator"
- value: ","
- start: 283
- end: 284
} HexColor {...}
- type: "HexColor"
- value: "cc00ff"
- start: 285
- end: 292
} Operator {...}
- type: "Operator"
- value: ","
- start: 292
- end: 293
} HexColor {...}
- type: "HexColor"
- value: "d9055d"
- start: 294
- end: 301
}
]- start: 262
- end: 302
}
]- start: 261
- end: 302
}- start: 250
- end: 302
} Declaration {...}
- type: "Declaration"
- important: false
- property: "color"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "white"
- start: 313
- end: 318
}
]- start: 312
- end: 318
}- start: 306
- end: 318
} Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "grid"
- start: 334
- end: 338
}
]- start: 333
- end: 338
}- start: 325
- end: 338
} Declaration {...}
- type: "Declaration"
- important: false
- property: "justify-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 359
- end: 365
}
]- start: 358
- end: 365
}- start: 342
- end: 365
} Declaration {...}
- type: "Declaration"
- important: false
- property: "align-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 384
- end: 390
}
]- start: 383
- end: 390
}- start: 369
- end: 390
} Declaration {...}
- type: "Declaration"
- important: false
- property: "text-align"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 406
- end: 412
}
]- start: 405
- end: 412
}- start: 394
- end: 412
}
]- start: 213
- end: 416
}- start: 209
- end: 416
}
]content: {...}
- start: 82
- end: 417
- styles: "\n\t:global(body) {\n\t\tdisplay: grid;\n\t\tjustify-content: center;\n\t\talign-content: center;\n\t\tgrid-gap: 20px;\n\t}\n\t* { margin: 0; }\n\tdiv {\n\t\theight: 200px;\n\t\twidth: 200px;\n\t\tbackground: linear-gradient(45deg, #cc00ff, #d9055d);\n\t\tcolor: white;\n\t\t\n\t\tdisplay: grid;\n\t\tjustify-content: center;\n\t\talign-content: center;\n\t\ttext-align: center;\n\t}\n"
}
}instance: Script {...}
- type: "Script"
- start: 0
- end: 73
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 64
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 5
- column: 0
}
}body: [...] (2)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 39
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 30
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 21
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 12
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 21
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 12
}
}- name: "tilt"
}
}
]source: Literal {...}
- type: "Literal"
- start: 27
- end: 38
loc: {...}
start: {...}
- line: 2
- column: 18
}end: {...}
- line: 2
- column: 29
}
}- value: "./tilt.js"
- raw: "'./tilt.js'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 43
- end: 63
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 21
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 47
- end: 62
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 20
}
}id: Identifier {...}
- type: "Identifier"
- start: 47
- end: 54
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 12
}
}- name: "reverse"
}init: Literal {...}
- type: "Literal"
- start: 57
- end: 62
loc: {...}
start: {...}
- line: 4
- column: 15
}end: {...}
- line: 4
- column: 20
}
}- value: false
- raw: "false"
}
}
]- kind: "let"
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time