├── repositories ├── README.md └── sveltejs │ └── svelte │ ├── site │ ├── static │ │ └── fonts │ │ │ └── README.md │ ├── content │ │ ├── examples │ │ │ ├── 99-embeds │ │ │ │ ├── meta.json │ │ │ │ ├── 20181225-blog-svelte-css-in-js │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── Hero.svelte │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── styles.js │ │ │ │ └── 20190420-blog-write-less-code │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ ├── 02-props │ │ │ │ ├── meta.json │ │ │ │ ├── 02-spread-props │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Info.svelte │ │ │ │ ├── 00-declaring-props │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ └── App.svelte │ │ │ │ └── 01-default-values │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ └── App.svelte │ │ │ ├── 03-logic │ │ │ │ ├── meta.json │ │ │ │ ├── 00-if-blocks │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 01-else-blocks │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 03-each-blocks │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 05-await-blocks │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 02-else-if-blocks │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ └── 04-keyed-each-blocks │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── Thing.svelte │ │ │ │ │ └── App.svelte │ │ │ ├── 12-svg │ │ │ │ ├── meta.json │ │ │ │ ├── 01-clock │ │ │ │ │ └── meta.json │ │ │ │ ├── 02-bar-chart │ │ │ │ │ └── meta.json │ │ │ │ ├── 03-area-chart │ │ │ │ │ └── meta.json │ │ │ │ ├── 04-scatterplot │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ └── 05-svg-transitions │ │ │ │ │ ├── meta.json │ │ │ │ │ └── custom-transitions.js │ │ │ ├── 20-7guis │ │ │ │ ├── meta.json │ │ │ │ ├── 04-7guis-timer │ │ │ │ │ └── meta.json │ │ │ │ ├── 05-7guis-crud │ │ │ │ │ └── meta.json │ │ │ │ ├── 01-7guis-counter │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 06-7guis-circles │ │ │ │ │ └── meta.json │ │ │ │ ├── 03-7guis-flight-booker │ │ │ │ │ └── meta.json │ │ │ │ └── 02-7guis-temperature │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ ├── 04-events │ │ │ │ ├── meta.json │ │ │ │ ├── 00-dom-events │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 01-inline-handlers │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 02-event-modifiers │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 03-component-events │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Inner.svelte │ │ │ │ ├── 04-event-forwarding │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── Outer.svelte │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Inner.svelte │ │ │ │ └── 05-dom-event-forwarding │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── FancyButton.svelte │ │ │ ├── 07-stores │ │ │ │ ├── meta.json │ │ │ │ ├── 00-writable-stores │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── stores.js │ │ │ │ │ ├── Resetter.svelte │ │ │ │ │ ├── Decrementer.svelte │ │ │ │ │ ├── Incrementer.svelte │ │ │ │ │ └── App.svelte │ │ │ │ ├── 02-readable-stores │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── stores.js │ │ │ │ │ └── App.svelte │ │ │ │ ├── 03-derived-stores │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── stores.js │ │ │ │ ├── 04-custom-stores │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── stores.js │ │ │ │ └── 01-auto-subscriptions │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── stores.js │ │ │ │ │ ├── Resetter.svelte │ │ │ │ │ ├── Decrementer.svelte │ │ │ │ │ ├── Incrementer.svelte │ │ │ │ │ └── App.svelte │ │ │ ├── 08-motion │ │ │ │ ├── meta.json │ │ │ │ ├── 00-tweened │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ └── 01-spring │ │ │ │ │ └── meta.json │ │ │ ├── 11-easing │ │ │ │ ├── meta.json │ │ │ │ └── 00-easing │ │ │ │ │ └── meta.json │ │ │ ├── 13-actions │ │ │ │ ├── meta.json │ │ │ │ ├── 00-actions │ │ │ │ │ └── meta.json │ │ │ │ └── 01-adding-parameters-to-actions │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── longpress.js │ │ │ ├── 14-classes │ │ │ │ ├── meta.json │ │ │ │ ├── 00-classes │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ └── 01-class-shorthand │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ ├── 01-reactivity │ │ │ │ ├── meta.json │ │ │ │ ├── 00-reactive-assignments │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 02-reactive-statements │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ └── 01-reactive-declarations │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ ├── 05-bindings │ │ │ │ ├── meta.json │ │ │ │ ├── 00-text-inputs │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 09-dimensions │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 01-numeric-inputs │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 03-group-inputs │ │ │ │ │ └── meta.json │ │ │ │ ├── 08-media-elements │ │ │ │ │ └── meta.json │ │ │ │ ├── 10-bind-this │ │ │ │ │ └── meta.json │ │ │ │ ├── 02-checkbox-inputs │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 04-textarea-inputs │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 05-select-bindings │ │ │ │ │ └── meta.json │ │ │ │ ├── 07-each-block-bindings │ │ │ │ │ └── meta.json │ │ │ │ ├── 11-component-bindings │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ └── 06-multiple-select-bindings │ │ │ │ │ └── meta.json │ │ │ ├── 06-lifecycle │ │ │ │ ├── meta.json │ │ │ │ ├── 03-tick │ │ │ │ │ └── meta.json │ │ │ │ ├── 00-onmount │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 01-ondestroy │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── utils.js │ │ │ │ │ └── App.svelte │ │ │ │ └── 02-update │ │ │ │ │ └── meta.json │ │ │ ├── 10-animations │ │ │ │ ├── meta.json │ │ │ │ └── 00-animate │ │ │ │ │ └── meta.json │ │ │ ├── 16-context │ │ │ │ ├── meta.json │ │ │ │ └── 00-context-api │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── mapbox.js │ │ │ │ │ ├── MapMarker.svelte │ │ │ │ │ └── App.svelte │ │ │ ├── 19-debugging │ │ │ │ ├── meta.json │ │ │ │ └── 00-debug │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ ├── 00-introduction │ │ │ │ ├── meta.json │ │ │ │ ├── 02-styling │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 04-html-tags │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 00-hello-world │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 03-nested-components │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ └── 01-dynamic-attributes │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ ├── 09-transitions │ │ │ │ ├── meta.json │ │ │ │ ├── 02-in-and-out │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 00-transition │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 05-transition-events │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ ├── 06-deferred-transitions │ │ │ │ │ └── meta.json │ │ │ │ ├── 03-custom-css-transitions │ │ │ │ │ └── meta.json │ │ │ │ ├── 04-custom-js-transitions │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ └── 01-adding-parameters-to-transitions │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ ├── 15-composition │ │ │ │ ├── 00-slots │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Box.svelte │ │ │ │ ├── 04-modal │ │ │ │ │ └── meta.json │ │ │ │ ├── 03-slot-props │ │ │ │ │ ├── meta.json │ │ │ │ │ └── Hoverable.svelte │ │ │ │ ├── meta.json │ │ │ │ ├── 02-named-slots │ │ │ │ │ ├── meta.json │ │ │ │ │ └── App.svelte │ │ │ │ └── 01-slot-fallbacks │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Box.svelte │ │ │ ├── 18-module-context │ │ │ │ ├── meta.json │ │ │ │ └── 01-module-exports │ │ │ │ │ └── meta.json │ │ │ ├── 21-miscellaneous │ │ │ │ ├── meta.json │ │ │ │ ├── 01-hacker-news │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── Comment.svelte │ │ │ │ │ ├── Item.svelte │ │ │ │ │ └── Summary.svelte │ │ │ │ └── 02-immutable-data │ │ │ │ │ ├── meta.json │ │ │ │ │ ├── flash.js │ │ │ │ │ ├── MutableTodo.svelte │ │ │ │ │ └── ImmutableTodo.svelte │ │ │ └── 17-special-elements │ │ │ │ ├── meta.json │ │ │ │ ├── 00-svelte-self │ │ │ │ ├── meta.json │ │ │ │ └── File.svelte │ │ │ │ ├── 04-svelte-body │ │ │ │ └── meta.json │ │ │ │ ├── 05-svelte-head │ │ │ │ ├── meta.json │ │ │ │ └── App.svelte │ │ │ │ ├── 02-svelte-window │ │ │ │ └── meta.json │ │ │ │ ├── 01-svelte-component │ │ │ │ ├── meta.json │ │ │ │ ├── BlueThing.svelte │ │ │ │ ├── RedThing.svelte │ │ │ │ ├── GreenThing.svelte │ │ │ │ └── App.svelte │ │ │ │ └── 03-svelte-window-bindings │ │ │ │ └── meta.json │ │ ├── tutorial │ │ │ ├── 03-props │ │ │ │ ├── meta.json │ │ │ │ ├── 01-declaring-props │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 02-default-values │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ └── 03-spread-props │ │ │ │ │ ├── app-b │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Info.svelte │ │ │ │ │ ├── app-a │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Info.svelte │ │ │ │ │ └── text.md │ │ │ ├── 04-logic │ │ │ │ ├── meta.json │ │ │ │ ├── 03-else-if-blocks │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 01-if-blocks │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 02-else-blocks │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 04-each-blocks │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 05-keyed-each-blocks │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Thing.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Thing.svelte │ │ │ │ └── 06-await-blocks │ │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ └── App.svelte │ │ │ ├── 05-events │ │ │ │ ├── meta.json │ │ │ │ ├── 05-event-forwarding │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── Outer.svelte │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Inner.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ ├── Outer.svelte │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Inner.svelte │ │ │ │ ├── 03-event-modifiers │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 04-component-events │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── Inner.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Inner.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 06-dom-event-forwarding │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── FancyButton.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── FancyButton.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 01-dom-events │ │ │ │ │ ├── text.md │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ └── 02-inline-handlers │ │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ ├── 08-stores │ │ │ │ ├── meta.json │ │ │ │ ├── 01-writable-stores │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── stores.js │ │ │ │ │ │ ├── Resetter.svelte │ │ │ │ │ │ ├── Decrementer.svelte │ │ │ │ │ │ ├── Incrementer.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ ├── stores.js │ │ │ │ │ │ ├── Resetter.svelte │ │ │ │ │ │ ├── Decrementer.svelte │ │ │ │ │ │ ├── Incrementer.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 02-auto-subscriptions │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── stores.js │ │ │ │ │ │ ├── Resetter.svelte │ │ │ │ │ │ ├── Decrementer.svelte │ │ │ │ │ │ ├── Incrementer.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ ├── stores.js │ │ │ │ │ │ ├── Resetter.svelte │ │ │ │ │ │ ├── Decrementer.svelte │ │ │ │ │ │ ├── Incrementer.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 06-store-bindings │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── stores.js │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── stores.js │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 03-readable-stores │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── stores.js │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── stores.js │ │ │ │ ├── 05-custom-stores │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── stores.js │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── stores.js │ │ │ │ │ └── text.md │ │ │ │ └── 04-derived-stores │ │ │ │ │ ├── app-a │ │ │ │ │ ├── stores.js │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── stores.js │ │ │ │ │ └── text.md │ │ │ ├── 09-motion │ │ │ │ ├── meta.json │ │ │ │ └── 01-tweened │ │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ └── App.svelte │ │ │ ├── 12-actions │ │ │ │ ├── meta.json │ │ │ │ ├── 01-actions │ │ │ │ │ └── app-a │ │ │ │ │ │ └── pannable.js │ │ │ │ └── 02-adding-parameters-to-actions │ │ │ │ │ ├── app-a │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── longpress.js │ │ │ │ │ └── app-b │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── longpress.js │ │ │ ├── 13-classes │ │ │ │ ├── meta.json │ │ │ │ ├── 02-class-shorthand │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ └── 01-classes │ │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ ├── 02-reactivity │ │ │ │ ├── meta.json │ │ │ │ ├── 01-reactive-assignments │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 02-reactive-declarations │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 03-reactive-statements │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ └── 04-updating-arrays-and-objects │ │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ └── App.svelte │ │ │ ├── 06-bindings │ │ │ │ ├── meta.json │ │ │ │ ├── 01-text-inputs │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 03-checkbox-inputs │ │ │ │ │ ├── text.md │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 08-contenteditable-bindings │ │ │ │ │ ├── text.md │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 05-textarea-inputs │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 02-numeric-inputs │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 13-component-bindings │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 11-dimensions │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 09-each-block-bindings │ │ │ │ │ └── text.md │ │ │ │ ├── 12-bind-this │ │ │ │ │ └── text.md │ │ │ │ ├── 07-multiple-select-bindings │ │ │ │ │ └── text.md │ │ │ │ └── 06-select-bindings │ │ │ │ │ └── text.md │ │ │ ├── 07-lifecycle │ │ │ │ ├── meta.json │ │ │ │ ├── 02-ondestroy │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── utils.js │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ ├── utils.js │ │ │ │ │ │ └── App.svelte │ │ │ │ └── 01-onmount │ │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ └── App.svelte │ │ │ ├── 11-animations │ │ │ │ └── meta.json │ │ │ ├── 15-context │ │ │ │ ├── meta.json │ │ │ │ └── 01-context-api │ │ │ │ │ ├── app-a │ │ │ │ │ ├── mapbox.js │ │ │ │ │ ├── MapMarker.svelte │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ ├── mapbox.js │ │ │ │ │ ├── MapMarker.svelte │ │ │ │ │ └── App.svelte │ │ │ ├── 18-debugging │ │ │ │ ├── meta.json │ │ │ │ └── 01-debug │ │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ ├── 19-next-steps │ │ │ │ └── meta.json │ │ │ ├── 01-introduction │ │ │ │ ├── meta.json │ │ │ │ ├── 01-basics │ │ │ │ │ └── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 07-making-an-app │ │ │ │ │ └── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 02-adding-data │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 05-nested-components │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 03-dynamic-attributes │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 04-styling │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ └── 06-html-tags │ │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ ├── 10-transitions │ │ │ │ ├── meta.json │ │ │ │ ├── 01-transition │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 02-adding-parameters-to-transitions │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 03-in-and-out │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 06-transition-events │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── text.md │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 05-custom-js-transitions │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── text.md │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 07-local-transitions │ │ │ │ │ ├── text.md │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ └── 04-custom-css-transitions │ │ │ │ │ └── app-a │ │ │ │ │ └── App.svelte │ │ │ ├── 17-module-context │ │ │ │ ├── meta.json │ │ │ │ └── 01-sharing-code │ │ │ │ │ └── app-a │ │ │ │ │ └── AudioPlayer.svelte │ │ │ ├── 14-composition │ │ │ │ ├── meta.json │ │ │ │ ├── 01-slots │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Box.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Box.svelte │ │ │ │ │ └── text.md │ │ │ │ ├── 03-named-slots │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ ├── 02-slot-fallbacks │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Box.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Box.svelte │ │ │ │ │ └── text.md │ │ │ │ └── 04-slot-props │ │ │ │ │ ├── app-a │ │ │ │ │ ├── Hoverable.svelte │ │ │ │ │ └── App.svelte │ │ │ │ │ └── app-b │ │ │ │ │ └── Hoverable.svelte │ │ │ └── 16-special-elements │ │ │ │ ├── meta.json │ │ │ │ ├── 02-svelte-component │ │ │ │ ├── app-a │ │ │ │ │ ├── RedThing.svelte │ │ │ │ │ ├── BlueThing.svelte │ │ │ │ │ ├── GreenThing.svelte │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ ├── RedThing.svelte │ │ │ │ │ ├── BlueThing.svelte │ │ │ │ │ ├── GreenThing.svelte │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ │ ├── 06-svelte-head │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ │ ├── 01-svelte-self │ │ │ │ ├── app-a │ │ │ │ │ └── File.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── File.svelte │ │ │ │ └── text.md │ │ │ │ ├── 03-svelte-window │ │ │ │ └── text.md │ │ │ │ ├── 07-svelte-options │ │ │ │ ├── app-a │ │ │ │ │ ├── flash.js │ │ │ │ │ ├── Todo.svelte │ │ │ │ │ └── App.svelte │ │ │ │ └── app-b │ │ │ │ │ ├── flash.js │ │ │ │ │ ├── Todo.svelte │ │ │ │ │ └── App.svelte │ │ │ │ ├── 05-svelte-body │ │ │ │ ├── text.md │ │ │ │ └── app-a │ │ │ │ │ └── App.svelte │ │ │ │ └── 04-svelte-window-bindings │ │ │ │ └── text.md │ │ └── docs │ │ │ └── 00-introduction.md │ └── config.js │ └── translation.json ├── heroku.sh ├── heroku.yml ├── .gitignore ├── scripts ├── do.ts └── targets.ts └── Dockerfile /repositories/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/static/fonts/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /heroku.sh: -------------------------------------------------------------------------------- 1 | node ./scripts/do update svelte 2 | node ./scripts/do build svelte -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/99-embeds/meta.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /heroku.yml: -------------------------------------------------------------------------------- 1 | build: 2 | docker: 3 | web: Dockerfile 4 | run: 5 | web: npm start -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Props" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Logic" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/12-svg/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "SVG" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/20-7guis/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "7GUIs" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Props" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Logic" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Events" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Stores" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/08-motion/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Motion" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/11-easing/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Easing" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/13-actions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Actions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/14-classes/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Classes" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Events" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Stores" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/09-motion/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Motion" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/12-actions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Actions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/13-classes/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Classes" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/01-reactivity/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactivity" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Bindings" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/06-lifecycle/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Lifecycle" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/10-animations/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Animations" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/12-svg/01-clock/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Clock" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/16-context/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Context API" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/19-debugging/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Debugging" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/02-reactivity/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactivity" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Bindings" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/07-lifecycle/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Lifecycle" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/11-animations/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Animations" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/15-context/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Context API" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/18-debugging/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Debugging" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/19-next-steps/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Next steps" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | scripts/*.js 4 | 5 | __svelte 6 | __sapper 7 | __svelte-native 8 | node_modules -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Introduction" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/06-lifecycle/03-tick/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "tick" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/08-motion/00-tweened/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Tweened" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/08-motion/01-spring/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Spring" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Transitions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/12-svg/02-bar-chart/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Bar chart" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/00-slots/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Slots" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/04-modal/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Modal" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/20-7guis/04-7guis-timer/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Timer" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/20-7guis/05-7guis-crud/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "CRUD" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Introduction" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Transitions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/02-styling/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Styling" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/00-if-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "If blocks" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/00-dom-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "DOM events" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/06-lifecycle/00-onmount/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "onMount" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/12-svg/03-area-chart/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Area chart" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/12-svg/04-scatterplot/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Scatterplot" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/18-module-context/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Module context" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/20-7guis/01-7guis-counter/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Counter" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/21-miscellaneous/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Miscellaneous" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/01-basics/app-a/App.svelte: -------------------------------------------------------------------------------- 1 |

Hello world!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte: -------------------------------------------------------------------------------- 1 |

What now?

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/17-module-context/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Module context" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/04-html-tags/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "HTML tags" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/02-spread-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Spread props" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/01-else-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Else blocks" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/03-each-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Each blocks" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/05-await-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Await blocks" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/00-text-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Text inputs" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/09-dimensions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Dimensions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/06-lifecycle/01-ondestroy/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "onDestroy" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/02-in-and-out/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "In and out" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/11-easing/00-easing/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Ease Visualiser" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/13-actions/00-actions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The use directive" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/03-slot-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Slot props" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Component composition" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Special elements" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/19-debugging/00-debug/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The @debug tag" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/20-7guis/06-7guis-circles/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Circle Drawer" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte: -------------------------------------------------------------------------------- 1 |

Hello world!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Component composition" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Special elements" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/00-hello-world/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Hello world" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/00-declaring-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Declaring props" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/01-default-values/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Default values" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/02-else-if-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Else-if blocks" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/01-inline-handlers/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Inline handlers" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/02-event-modifiers/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Event modifiers" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/01-numeric-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Numeric inputs" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/03-group-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Group inputs" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/08-media-elements/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Media elements" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/10-bind-this/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "bind:this={canvas}" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/00-writable-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Writable stores" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/02-readable-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Readable stores" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/03-derived-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Derived stores" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/04-custom-stores/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Custom stores" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/12-svg/05-svg-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "SVG transitions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/14-classes/00-classes/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The class directive" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/02-named-slots/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Named slots" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/21-miscellaneous/01-hacker-news/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Hacker News" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/04-keyed-each-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Keyed each blocks" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/03-component-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Component events" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/04-event-forwarding/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Event forwarding" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/02-checkbox-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Checkbox inputs" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/04-textarea-inputs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Textarea inputs" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/05-select-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Select bindings" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/10-animations/00-animate/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The animate directive" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/01-slot-fallbacks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Slot fallbacks" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/00-svelte-self/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/04-svelte-body/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/05-svelte-head/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/18-module-context/01-module-exports/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Named exports" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/20-7guis/03-7guis-flight-booker/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Flight booker" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/21-miscellaneous/02-immutable-data/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Immutable data" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "-" 3 | } 4 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "-" 3 | } 4 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/03-nested-components/Nested.svelte: -------------------------------------------------------------------------------- 1 |

...don't affect this element

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/03-nested-components/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Nested components" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/05-dom-event-forwarding/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "DOM event forwarding" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/07-each-block-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Each block bindings" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/11-component-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Component bindings" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/06-lifecycle/02-update/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "beforeUpdate and afterUpdate" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/01-auto-subscriptions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Auto-subscriptions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/00-transition/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "The transition directive" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/05-transition-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Transition events" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/16-context/00-context-api/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "setContext and getContext" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/02-svelte-window/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/20-7guis/02-7guis-temperature/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Temperature Converter" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/01-dynamic-attributes/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Dynamic attributes" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/01-reactivity/00-reactive-assignments/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive assignments" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/01-reactivity/02-reactive-statements/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive statements" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Select multiple" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/06-deferred-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Deferred transitions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/14-classes/01-class-shorthand/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Shorthand class directive" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/01-svelte-component/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte: -------------------------------------------------------------------------------- 1 |

This is another paragraph.

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte: -------------------------------------------------------------------------------- 1 |

This is another paragraph.

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/01-reactivity/01-reactive-declarations/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive declarations" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/03-custom-css-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Custom CSS transitions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/04-custom-js-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Custom JS transitions" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/13-actions/01-adding-parameters-to-actions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Adding parameters" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Adding parameters" 3 | } -------------------------------------------------------------------------------- /scripts/do.ts: -------------------------------------------------------------------------------- 1 | import { get_task,get_target } from './helpers'; 2 | 3 | const task = get_task(); 4 | const target = get_target(); 5 | 6 | task(target); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/03-svelte-window-bindings/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": " bindings" 3 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/config.js: -------------------------------------------------------------------------------- 1 | export const SLUG_PRESERVE_UNICODE = false; 2 | export const SLUG_SEPARATOR = '_'; 3 | export const SLUG_LANG = 'ko'; 4 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/00-hello-world/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Hello {name}!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/00-writable-stores/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const count = writable(0); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/00-declaring-props/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/01-auto-subscriptions/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const count = writable(0); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-a/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const count = writable(0); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-b/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const count = writable(0); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

This is a paragraph.

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const count = writable(0); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | export const count = writable(0); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/00-declaring-props/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/04-event-forwarding/Outer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/01-default-values/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | blue thing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | red thing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Hello {name.toUpperCase()}!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/02-default-values/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/01-default-values/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | green thing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | red thing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | red thing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/06-svelte-head/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Hello world!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/04-html-tags/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{@html string}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 |

Hello {name}!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | blue thing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | green thing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | blue thing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | green thing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/02-default-values/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 |

Hello {name}!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/01-slots/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/06-html-tags/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{string}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/05-svelte-head/App.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Hello world!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{@html string}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js: -------------------------------------------------------------------------------- 1 | import { onDestroy } from 'svelte'; 2 | 3 | export function onInterval(callback, milliseconds) { 4 | // implementation goes here 5 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{$greeting}

6 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/06-svelte-head/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Hello world!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/02-styling/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

Styled!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/00-text-inputs/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

Hello {name || 'stranger'}!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/00-slots/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

Hello!

7 |

This is a box. It can contain anything.

8 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {name} dances. 7 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/12-actions/01-actions/app-a/pannable.js: -------------------------------------------------------------------------------- 1 | export function pannable(node) { 2 | // setup work goes here... 3 | 4 | return { 5 | destroy() { 6 | // ...cleanup goes here 7 | } 8 | }; 9 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/02-event-modifiers/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/01-slots/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

Hello!

7 |

This is a box. It can contain anything.

8 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

This is a paragraph.

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

Hello!

7 |

This is a box. It can contain anything.

8 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

This is a paragraph.

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | {name} dancing -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/01-slot-fallbacks/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

Hello!

7 |

This is a box. It can contain anything.

8 | 9 | 10 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 |

{a} + {b} = {a + b}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/03-component-events/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/04-event-forwarding/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/05-dom-event-forwarding/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/04-component-events/app-a/Inner.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js: -------------------------------------------------------------------------------- 1 | import { writable, derived } from 'svelte/store'; 2 | 3 | export const name = writable('world'); 4 | 5 | export const greeting = derived( 6 | name, 7 | $name => `Hello ${$name}!` 8 | ); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js: -------------------------------------------------------------------------------- 1 | import { writable, derived } from 'svelte/store'; 2 | 3 | export const name = writable('world'); 4 | 5 | export const greeting = derived( 6 | name, 7 | $name => `Hello ${$name}!` 8 | ); -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:alpine 2 | WORKDIR /app 3 | RUN apk add --no-cache \ 4 | git \ 5 | python \ 6 | ; 7 | COPY . /app 8 | RUN npm i -g nodemon 9 | RUN npm ci 10 | RUN npm run update-svelte 11 | RUN npm run build-svelte 12 | EXPOSE 80 13 | ENTRYPOINT ["npm", "start"] -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/00-writable-stores/Resetter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/16-context/00-context-api/mapbox.js: -------------------------------------------------------------------------------- 1 | import mapbox from 'mapbox-gl'; 2 | 3 | // https://docs.mapbox.com/help/glossary/access-token/ 4 | mapbox.accessToken = MAPBOX_ACCESS_TOKEN; 5 | 6 | const key = {}; 7 | 8 | export { mapbox, key }; -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/04-component-events/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/04-component-events/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/03-readable-stores/app-a/stores.js: -------------------------------------------------------------------------------- 1 | import { readable } from 'svelte/store'; 2 | 3 | export const time = readable(null, function start(set) { 4 | // implementation goes here 5 | 6 | return function stop() {}; 7 | }); 8 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

Hello!

7 |

This is a box. It can contain anything.

8 | 9 | 10 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js: -------------------------------------------------------------------------------- 1 | import mapbox from 'mapbox-gl'; 2 | 3 | // https://docs.mapbox.com/help/glossary/access-token/ 4 | mapbox.accessToken = MAPBOX_ACCESS_TOKEN; 5 | 6 | const key = {}; 7 | 8 | export { mapbox, key }; -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js: -------------------------------------------------------------------------------- 1 | import mapbox from 'mapbox-gl'; 2 | 3 | // https://docs.mapbox.com/help/glossary/access-token/ 4 | mapbox.accessToken = MAPBOX_ACCESS_TOKEN; 5 | 6 | const key = {}; 7 | 8 | export { mapbox, key }; -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/translation.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | { 4 | "file": "src/routes/index.svelte", 5 | "strings": [ 6 | { 7 | "o": "Write less code", 8 | "t": "적은 코드량" 9 | } 10 | ] 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/20-7guis/01-7guis-counter/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

8 | The page has been open for 9 | {seconds} {seconds === 1 ? 'second' : 'seconds'} 10 |

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/02-else-if-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

{x} is greater than 10

7 | {:else if 5 > x} 8 |

{x} is less than 5

9 | {:else} 10 |

{x} is between 5 and 10

11 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

{x} is greater than 10

7 | {:else if 5 > x} 8 |

{x} is less than 5

9 | {:else} 10 |

{x} is between 5 and 10

11 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/02-spread-props/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/06-lifecycle/01-ondestroy/utils.js: -------------------------------------------------------------------------------- 1 | import { onDestroy } from 'svelte'; 2 | 3 | export function onInterval(callback, milliseconds) { 4 | const interval = setInterval(callback, milliseconds); 5 | 6 | onDestroy(() => { 7 | clearInterval(interval); 8 | }); 9 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/03-spread-props/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Checkbox inputs 3 | --- 4 | 5 | Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`: 6 | 7 | ```html 8 | 9 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/utils.js: -------------------------------------------------------------------------------- 1 | import { onDestroy } from 'svelte'; 2 | 3 | export function onInterval(callback, milliseconds) { 4 | const interval = setInterval(callback, milliseconds); 5 | 6 | onDestroy(() => { 7 | clearInterval(interval); 8 | }); 9 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/01-transition/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 | {#if visible} 11 |

12 | Fades in and out 13 |

14 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{$greeting}

6 | 7 | 8 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

{x} is greater than 10

7 | {:else} 8 | {#if 5 > x} 9 |

{x} is less than 5

10 | {:else} 11 |

{x} is between 5 and 10

12 | {/if} 13 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/01-inline-handlers/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 |
10 | The mouse position is {m.x} x {m.y} 11 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/06-lifecycle/01-ondestroy/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The page has been open for 10 | {seconds} {seconds === 1 ? 'second' : 'seconds'} 11 |

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/04-custom-stores/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The count is {$count}

6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/19-debugging/00-debug/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | {@debug user} 12 | 13 |

Hello {user.firstname}!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/01-dom-events/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM events 3 | --- 4 | 5 | As we've briefly seen already, you can listen to any event on an element with the `on:` directive: 6 | 7 | ```html 8 |
9 | The mouse position is {m.x} x {m.y} 10 |
11 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 |
10 | The mouse position is {m.x} x {m.y} 11 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The page has been open for 10 | {seconds} {seconds === 1 ? 'second' : 'seconds'} 11 |

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/05-custom-stores/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The count is {$count}

6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/05-custom-stores/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The count is {$count}

6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/18-debugging/01-debug/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | {@debug user} 12 | 13 |

Hello {user.firstname}!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/00-introduction/03-nested-components/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | 13 |

These styles...

14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/00-slots/Box.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/02-named-slots/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | P. Sherman 8 | 9 | 10 | 11 | 42 Wallaby Way
12 | Sydney 13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/18-debugging/01-debug/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | {(console.log(user), '')} 12 | 13 |

Hello {user.firstname}!

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | 13 |

This is a paragraph.

14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contenteditable bindings 3 | --- 4 | 5 | Elements with a `contenteditable="true"` attribute support `textContent` and `innerHTML` bindings: 6 | 7 | ```html 8 |
12 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | P. Sherman 8 | 9 | 10 | 11 | 42 Wallaby Way
12 | Sydney 13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 | 15 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/04-textarea-inputs/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | 10 | 11 | 12 | {@html marked(text)} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/02-readable-stores/stores.js: -------------------------------------------------------------------------------- 1 | import { readable } from 'svelte/store'; 2 | 3 | export const time = readable(new Date(), function start(set) { 4 | const interval = setInterval(() => { 5 | set(new Date()); 6 | }, 1000); 7 | 8 | return function stop() { 9 | clearInterval(interval); 10 | }; 11 | }); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | 10 | 11 | 12 | {@html marked(value)} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/02-readable-stores/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

The time is {formatter.format($time)}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/03-slot-props/Hoverable.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 | 15 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | 10 | 11 | 12 | {@html marked(value)} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/00-transition/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Fades in and out 14 |

15 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/14-classes/01-class-shorthand/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 15 | 16 |
17 | some {big ? 'big' : 'small'} text 18 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/03-readable-stores/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

The time is {formatter.format($time)}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/03-readable-stores/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

The time is {formatter.format($time)}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/03-readable-stores/app-b/stores.js: -------------------------------------------------------------------------------- 1 | import { readable } from 'svelte/store'; 2 | 3 | export const time = readable(new Date(), function start(set) { 4 | const interval = setInterval(() => { 5 | set(new Date()); 6 | }, 1000); 7 | 8 | return function stop() { 9 | clearInterval(interval); 10 | }; 11 | }); 12 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 | 15 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/03-spread-props/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/01-transition/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Fades in and out 14 |

15 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 15 | 16 |
17 | some {big ? 'big' : 'small'} text 18 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/03-else-if-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Else-if blocks 3 | --- 4 | 5 | Multiple conditions can be 'chained' together with `else if`: 6 | 7 | ```html 8 | {#if x > 10} 9 |

{x} is greater than 10

10 | {:else if 5 > x} 11 |

{x} is less than 5

12 | {:else} 13 |

{x} is between 5 and 10

14 | {/if} 15 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 | 
{html}
8 | 9 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 15 | 16 |
17 | some {big ? 'big' : 'small'} text 18 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
15 | The mouse position is {m.x} x {m.y} 16 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/01-else-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {:else} 14 | 17 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |

{count} doubled is {doubled}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/05-custom-stores/app-a/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | function createCount() { 4 | const { subscribe, set, update } = writable(0); 5 | 6 | return { 7 | subscribe, 8 | increment: () => {}, 9 | decrement: () => {}, 10 | reset: () => {} 11 | }; 12 | } 13 | 14 | export const count = createCount(); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/03-component-events/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/04-event-forwarding/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

7 |
8 |
9 |
CSS
10 | in JS 11 |
12 | in HTML 13 |
14 |

15 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Fades in and out 14 |

15 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {:else} 14 | 17 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/04-component-events/app-b/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/01-auto-subscriptions/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

The count is {$count}

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 | no content was provided 15 | 16 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/03-in-and-out/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Flies in and out 14 |

15 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/01-reactivity/02-reactive-statements/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/00-dom-events/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
15 | The mouse position is {m.x} x {m.y} 16 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/04-events/05-dom-event-forwarding/FancyButton.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/02-in-and-out/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Flies in, fades out 14 |

15 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/FancyButton.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

The count is {$count}

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | 14 | no content was provided 15 | 16 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/02-props/02-spread-props/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
15 | The mouse position is {m.x} x {m.y} 16 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/03-in-and-out/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Flies in, fades out 14 |

15 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/00-if-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/04-custom-stores/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | function createCount() { 4 | const { subscribe, set, update } = writable(0); 5 | 6 | return { 7 | subscribe, 8 | increment: () => update(n => n + 1), 9 | decrement: () => update(n => n - 1), 10 | reset: () => set(0) 11 | }; 12 | } 13 | 14 | export const count = createCount(); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Flies in and out 14 |

15 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

{numbers.join(' + ')} = {sum}

12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
15 | The mouse position is {m.x} x {m.y} 16 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/FancyButton.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
9 | 10 | 
{html}
11 | 12 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/17-special-elements/00-svelte-self/File.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 13 | 14 | {name} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/05-custom-stores/app-b/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store'; 2 | 3 | function createCount() { 4 | const { subscribe, set, update } = writable(0); 5 | 6 | return { 7 | subscribe, 8 | increment: () => update(n => n + 1), 9 | decrement: () => update(n => n - 1), 10 | reset: () => set(0) 11 | }; 12 | } 13 | 14 | export const count = createCount(); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | {#if visible} 12 |

13 | Flies in and out 14 |

15 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

{numbers.join(' + ')} = {sum}

12 | 13 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/06-dom-event-forwarding/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM event forwarding 3 | --- 4 | 5 | Event forwarding works for DOM events too. 6 | 7 | We want to get notified of clicks on our `` — to do that, we just need to forward `click` events on the ` 13 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 13 | 14 | {name} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 13 | 14 | {name} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 15 | 16 |

{a} + {b} = {a + b}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/13-component-bindings/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

{view}

13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/13-classes/02-class-shorthand/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Shorthand class directive 3 | --- 4 | 5 | Often, the name of the class will be the same as the name of the value it depends on: 6 | 7 | ```html 8 |
9 | 10 |
11 | ``` 12 | 13 | In those cases we can use a shorthand form: 14 | 15 | ```html 16 |
17 | 18 |
19 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/02-default-values/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Default values 3 | --- 4 | 5 | We can easily specify default values for props: 6 | 7 | ```html 8 | 11 | ``` 12 | 13 | If we now add a second component *without* an `answer` prop, it will fall back to the default: 14 | 15 | ```html 16 | 17 | 18 | ``` 19 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/01-numeric-inputs/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 15 | 16 |

{a} + {b} = {a + b}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/11-component-bindings/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

{view}

13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 10 | 11 | 15 | 16 |

{a} + {b} = {a + b}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/13-component-bindings/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

{view}

13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/15-context/01-context-api/app-a/MapMarker.svelte: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/12-svg/05-svg-transitions/custom-transitions.js: -------------------------------------------------------------------------------- 1 | import { cubicOut } from 'svelte/easing'; 2 | 3 | export function expand(node, params) { 4 | const { 5 | delay = 0, 6 | duration = 400, 7 | easing = cubicOut 8 | } = params; 9 | 10 | const w = parseFloat(getComputedStyle(node).strokeWidth); 11 | 12 | return { 13 | delay, 14 | duration, 15 | easing, 16 | css: t => `opacity: ${t}; stroke-width: ${t * w}` 17 | }; 18 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/06-svelte-head/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3 | --- 4 | 5 | The `` element allows you to insert elements inside the `` of your document: 6 | 7 | ```html 8 | 9 | 10 | 11 | ``` 12 | 13 | > In server-side rendering (SSR) mode, contents of `` are returned separately from the rest of your HTML. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/06-transition-events/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

status: {status}

9 | 10 | 14 | 15 | {#if visible} 16 |

17 | Flies in and out 18 |

19 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | 17 |

{count} * 2 = {doubled}

18 |

{doubled} * 2 = {quadrupled}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/03-derived-stores/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

The time is {formatter.format($time)}

13 | 14 |

15 | This page has been open for 16 | {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'} 17 |

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/04-derived-stores/app-a/stores.js: -------------------------------------------------------------------------------- 1 | import { readable, derived } from 'svelte/store'; 2 | 3 | export const time = readable(new Date(), function start(set) { 4 | const interval = setInterval(() => { 5 | set(new Date()); 6 | }, 1000); 7 | 8 | return function stop() { 9 | clearInterval(interval); 10 | }; 11 | }); 12 | 13 | const start = new Date(); 14 | 15 | export const elapsed = derived( 16 | time, 17 | $time => {} 18 | ); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/04-derived-stores/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

The time is {formatter.format($time)}

13 | 14 |

15 | This page has been open for 16 | {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'} 17 |

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/04-derived-stores/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |

The time is {formatter.format($time)}

13 | 14 |

15 | This page has been open for 16 | {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'} 17 |

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 17 | 18 | {#if visible} 19 |

20 | The quick brown fox jumps over the lazy dog 21 |

22 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/21-miscellaneous/02-immutable-data/flash.js: -------------------------------------------------------------------------------- 1 | export default function flash(element) { 2 | requestAnimationFrame(() => { 3 | element.style.transition = 'none'; 4 | element.style.color = 'rgba(255,62,0,1)'; 5 | element.style.backgroundColor = 'rgba(255,62,0,0.2)'; 6 | 7 | setTimeout(() => { 8 | element.style.transition = 'color 1s, background 1s'; 9 | element.style.color = ''; 10 | element.style.backgroundColor = ''; 11 | }); 12 | }); 13 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/05-textarea-inputs/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Textarea inputs 3 | --- 4 | 5 | The ` 9 | ``` 10 | 11 | In cases like these, where the names match, we can also use a shorthand form: 12 | 13 | ```html 14 | 15 | ``` 16 | 17 | This applies to all bindings, not just textareas. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/03-svelte-window/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3 | --- 4 | 5 | Just as you can add event listeners to any DOM element, you can add event listeners to the `window` object with ``. 6 | 7 | On line 33, add the `keydown` listener: 8 | 9 | ```html 10 | 11 | ``` 12 | 13 | > As with DOM elements, you can add [event modifiers](tutorial/event-modifiers) like `preventDefault`. 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/09-dimensions/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 13 | 14 | 15 | 16 |

size: {w}px x {h}px

17 | 18 |
19 | {text} 20 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/03-derived-stores/stores.js: -------------------------------------------------------------------------------- 1 | import { readable, derived } from 'svelte/store'; 2 | 3 | export const time = readable(new Date(), function start(set) { 4 | const interval = setInterval(() => { 5 | set(new Date()); 6 | }, 1000); 7 | 8 | return function stop() { 9 | clearInterval(interval); 10 | }; 11 | }); 12 | 13 | const start = new Date(); 14 | 15 | export const elapsed = derived( 16 | time, 17 | $time => Math.round(($time - start) / 1000) 18 | ); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 15 | 16 | 17 |

size: {w}px x {h}px

18 | 19 |
20 | {text} 21 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/07-svelte-options/app-a/flash.js: -------------------------------------------------------------------------------- 1 | export default function flash(element) { 2 | requestAnimationFrame(() => { 3 | element.style.transition = 'none'; 4 | element.style.color = 'rgba(255,62,0,1)'; 5 | element.style.backgroundColor = 'rgba(255,62,0,0.2)'; 6 | 7 | setTimeout(() => { 8 | element.style.transition = 'color 1s, background 1s'; 9 | element.style.color = ''; 10 | element.style.backgroundColor = ''; 11 | }); 12 | }); 13 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/07-svelte-options/app-b/flash.js: -------------------------------------------------------------------------------- 1 | export default function flash(element) { 2 | requestAnimationFrame(() => { 3 | element.style.transition = 'none'; 4 | element.style.color = 'rgba(255,62,0,1)'; 5 | element.style.backgroundColor = 'rgba(255,62,0,0.2)'; 6 | 7 | setTimeout(() => { 8 | element.style.transition = 'color 1s, background 1s'; 9 | element.style.color = ''; 10 | element.style.backgroundColor = ''; 11 | }); 12 | }); 13 | } -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 | {#if yes} 11 |

Thank you. We will bombard your inbox and sell your personal details.

12 | {:else} 13 |

You must opt in to continue. If you're not paying, you're the product.

14 | {/if} 15 | 16 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 | {#if yes} 11 |

Thank you. We will bombard your inbox and sell your personal details.

12 | {:else} 13 |

You must opt in to continue. If you're not paying, you're the product.

14 | {/if} 15 | 16 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/04-derived-stores/app-b/stores.js: -------------------------------------------------------------------------------- 1 | import { readable, derived } from 'svelte/store'; 2 | 3 | export const time = readable(new Date(), function start(set) { 4 | const interval = setInterval(() => { 5 | set(new Date()); 6 | }, 1000); 7 | 8 | return function stop() { 9 | clearInterval(interval); 10 | }; 11 | }); 12 | 13 | const start = new Date(); 14 | 15 | export const elapsed = derived( 16 | time, 17 | $time => Math.round(($time - start) / 1000) 18 | ); -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/03-each-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

The Famous Cats of YouTube

10 | 11 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/02-numeric-inputs/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Numeric inputs 3 | --- 4 | 5 | In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it. 6 | 7 | With `bind:value`, Svelte takes care of it for you: 8 | 9 | ```html 10 | 11 | 12 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 | {#if yes} 11 |

Thank you. We will bombard your inbox and sell your personal details.

12 | {:else} 13 |

You must opt in to continue. If you're not paying, you're the product.

14 | {/if} 15 | 16 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

The Famous Cats of YouTube

10 | 11 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/07-stores/00-writable-stores/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |

The count is {count_value}

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

The Famous Cats of YouTube

10 | 11 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |

The count is {count_value}

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |

The count is {count_value}

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |

The count is {count_value}

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/16-context/00-context-api/MapMarker.svelte: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/15-context/01-context-api/app-b/MapMarker.svelte: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/05-svelte-body/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3 | --- 4 | 5 | Similar to ``, the `` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`. 6 | 7 | Add the `mouseenter` and `mouseleave` handlers to the `` tag: 8 | 9 | ```html 10 | 14 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 15 | 16 | 17 |

size: {w}px x {h}px

18 | 19 |
20 | {text} 21 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/03-props/03-spread-props/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Spread props 3 | --- 4 | 5 | If you have an object of properties, you can 'spread' them on to a component instead of specifying each one: 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | > Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/01-if-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: If blocks 3 | --- 4 | 5 | HTML doesn't have a way of expressing *logic*, like conditionals and loops. Svelte does. 6 | 7 | To conditionally render some markup, we wrap it in an `if` block: 8 | 9 | ```html 10 | {#if user.loggedIn} 11 | 14 | {/if} 15 | 16 | {#if !user.loggedIn} 17 | 20 | {/if} 21 | ``` 22 | 23 | Try it — update the component, and click on the buttons. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/09-each-block-bindings/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Each block bindings 3 | --- 4 | 5 | You can even bind to properties inside an `each` block. 6 | 7 | ```html 8 | 12 | 13 | 17 | ``` 18 | 19 | > Note that interacting with these `` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | 18 | 19 |
20 | {#if hovering} 21 |

I am being hovered upon.

22 | {:else} 23 |

Hover over me!

24 | {/if} 25 |
26 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/12-bind-this/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: This 3 | --- 4 | 5 | The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `` element: 6 | 7 | ```html 8 | 13 | ``` 14 | 15 | Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorial/onmount). 16 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/02-slot-fallbacks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Slot fallbacks 3 | --- 4 | 5 | A component can specify *fallbacks* for any slots that are left empty, by putting content inside the `` element: 6 | 7 | ```html 8 |
9 | 10 | no content was provided 11 | 12 |
13 | ``` 14 | 15 | We can now create instances of `` without any children: 16 | 17 | ```html 18 | 19 |

Hello!

20 |

This is a box. It can contain anything.

21 | 22 | 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 20 | 21 | 23 |
24 | {todo.done ? '👍': ''} {todo.text} 25 |
26 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/04-styling/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Styling 3 | --- 4 | 5 | Just like in HTML, you can add a ` 15 | 16 |

This is a paragraph.

17 | ``` 18 | 19 | Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `

` elements elsewhere in your app, as we'll see in the next step. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 13 | 17 | 18 | {#if pressed} 19 |

congratulations, you pressed and held for {duration}ms

20 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/04-svelte-window-bindings/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: bindings 3 | --- 4 | 5 | We can also bind to certain properties of `window`, such as `scrollY`. Update line 7: 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | The list of properties you can bind to is as follows: 12 | 13 | * `innerWidth` 14 | * `innerHeight` 15 | * `outerWidth` 16 | * `outerHeight` 17 | * `scrollX` 18 | * `scrollY` 19 | * `online` — an alias for `window.navigator.onLine` 20 | 21 | All except `scrollX` and `scrollY` are readonly. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 13 | 17 | 18 | {#if pressed} 19 |

congratulations, you pressed and held for {duration}ms

20 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 | {#each things as thing} 22 | 23 | {/each} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 21 | 22 | 24 |
25 | {todo.done ? '👍': ''} {todo.text} 26 |
27 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/03-in-and-out/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: In and out 3 | --- 4 | 5 | Instead of the `transition` directive, an element can have an `in` or an `out` directive, or both together. Import `fade` alongside `fly`... 6 | 7 | ```js 8 | import { fade, fly } from 'svelte/transition'; 9 | ``` 10 | 11 | ...then replace the `transition` directive with separate `in` and `out` directives: 12 | 13 | ```html 14 |

15 | Flies in, fades out 16 |

17 | ``` 18 | 19 | In this case, the transitions are *not* reversed. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/06-transition-events/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Transition events 3 | --- 4 | 5 | It can be useful to know when transitions are beginning and ending. Svelte dispatches events that you can listen to like any other DOM event: 6 | 7 | ```html 8 |

15 | Flies in and out 16 |

17 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 13 | 17 | 18 | {#if pressed} 19 |

congratulations, you pressed and held for {duration}ms

20 | {/if} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/12-svg/04-scatterplot/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 |
18 |

Anscombe's quartet

19 | 20 | 21 | 22 | 23 | 24 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 | {#each things as thing (thing.id)} 22 | 23 | {/each} -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Select multiple 3 | --- 4 | 5 | A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value. 6 | 7 | Returning to our [earlier ice cream example](tutorial/group-inputs), we can replace the checkboxes with a ` 13 | {#each menu as flavour} 14 | 17 | {/each} 18 | 19 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | 24 | 25 |

{promise}

-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/10-transitions/01-transition/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: The transition directive 3 | --- 4 | 5 | We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the `transition` directive. 6 | 7 | First, import the `fade` function from `svelte/transition`... 8 | 9 | ```html 10 | 14 | ``` 15 | 16 | ...then add it to the `

` element: 17 | 18 | ```html 19 |

Fades in and out

20 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/14-classes/00-classes/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 20 | 21 | 25 | 26 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 15 | 16 | 22 | 23 | 25 |
26 | {todo.done ? '👍': ''} {todo.text} 27 |
28 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/13-classes/01-classes/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 20 | 21 | 25 | 26 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/docs/00-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Before we begin 3 | --- 4 | 5 | > Temporary note: This document is a work-in-progress. Please forgive any missing or misleading parts, and don't be shy about asking for help in the [Discord chatroom](chat). The [tutorial](tutorial) is more complete; start there. 6 | 7 | This page contains detailed API reference documentation. It's intended to be a resource for people who already have some familiarity with Svelte. 8 | 9 | If that's not you (yet), you may prefer to visit the [interactive tutorial](tutorial) or the [examples](examples) before consulting this reference. 10 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16 | 17 | 23 | 24 | 26 |
27 | {todo.done ? '👍': ''} {todo.text} 28 |
29 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/18-debugging/01-debug/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: The @debug tag 3 | --- 4 | 5 | Occasionally, it's useful to inspect a piece of data as it flows through your app. 6 | 7 | One approach is to use `console.log(...)` inside your markup. If you want to pause execution, though, you can use the `{@debug ...}` tag with a comma-separated list of values you want to inspect: 8 | 9 | ```html 10 | {@debug user} 11 | 12 |

Hello {user.firstname}!

13 | ``` 14 | 15 | If you now open your devtools and start interacting with the `` elements, you'll trigger the debugger as the value of `user` changes. 16 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/01-introduction/02-adding-data/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adding data 3 | --- 4 | 5 | A component that just renders some static markup isn't very interesting. Let's add some data. 6 | 7 | First, add a script tag to your component and declare a `name` variable: 8 | 9 | ```html 10 | 13 | 14 |

Hello world!

15 | ``` 16 | 17 | Then, we can refer to `name` in the markup: 18 | 19 | ```html 20 |

Hello {name}!

21 | ``` 22 | 23 | Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

10 | initial 11 | current 12 |

13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/05-events/02-inline-handlers/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inline handlers 3 | --- 4 | 5 | You can also declare event handlers inline: 6 | 7 | ```html 8 |
9 | The mouse position is {m.x} x {m.y} 10 |
11 | ``` 12 | 13 | The quote marks are optional, but they're helpful for syntax highlighting in some environments. 14 | 15 | > In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose. -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/13-classes/01-classes/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | 16 | 20 | 21 | 25 | 26 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/14-composition/01-slots/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Slots 3 | --- 4 | 5 | Just like elements can have children... 6 | 7 | ```html 8 |
9 |

I'm a child of the div

10 |
11 | ``` 12 | 13 | ...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `` element. Put this inside `Box.svelte`: 14 | 15 | ```html 16 |
17 | 18 |
19 | ``` 20 | 21 | You can now put things in the box: 22 | 23 | ```html 24 | 25 |

Hello!

26 |

This is a box. It can contain anything.

27 | 28 | ``` -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | 22 |
23 |

{comment.user} {comment.time_ago}

24 | 25 | {@html comment.content} 26 | 27 |
28 | {#each comment.comments as child} 29 | 30 | {/each} 31 |
32 |
-------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

10 | initial 11 | current 12 |

13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

10 | initial 11 | current 12 |

13 | 14 | -------------------------------------------------------------------------------- /repositories/sveltejs/svelte/site/content/tutorial/06-bindings/06-select-bindings/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Select bindings 3 | --- 4 | 5 | We can also use `bind:value` with ` 9 | ``` 10 | 11 | Note that the `