Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
tilt.js
<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
/* 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: ,
});
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