What is svelte?
svelte is a lightweight modern JavaScript library (4.57KB minified) intended for use on projects where legacy browser support is not necessary.
It uses modern JavaScript (querySelectorAll, classList, matchesSelector) to help make it as lightweight as possible and therefore only works on the latest version of modern browsers E.g. Chrome, Firefox, Opera, IE10+.
Quick Example
If you have used other JavaScript libraries like Zepto or jQuery most functions will be familiar to you. For example, to set the text of an element, you would write:
$('.hello').text("Hello svelte");
API
- $(selector, context)
- each(callback)
- find(selector)
- css(property, value)
- hide()
- show()
- toggle()
- addClass(className)
- removeClass(className)
- toggleClass(className)
- hasClass(className)
- on(name, callback)
- off(name, callback)
- focus()
- blur()
- trigger(eventName, detail)
- next()
- first()
- last()
- parent()
- children()
- append(position, html)
- text(textToAdd)
- html(html)
- outerHTML(html)
- empty()
- clone()
- remove()
- attr(name, (value))
- removeAttr(name)
- val((value))
- length()
- height()
- width()
- position()
- matches(selector)
View JSDoc generated documention.
Custom Functions
You can easily add a custom function to svelte by adding to $.fn.
$.fn.cool = function() {
return this.each(function(el) {
el.textContent = 'Cool';
});
}
$('.says-cool').cool();
Ajax
The svelte ajax function was removed in version 1.4.0. Instead it is recommended that you use the fetch api. There is a version of svelte bundled with a fetch and polyfill polyfill svelte.fetch.min.js.
fetch('/test.html')
.then(function(response) {
return response.text()
}).then(function(body) {
document.body.innerHTML = body
})
IE9
If you need to support IE9, you will need to use a pollyfill for ClassList like this one and put it somewhere before svelte is included on the page.
<!--[if IE 9]>
<script src="js/classlist.js"></script>
<![endif]-->
Get Involved
Contributions to the project are welcome.
The svelte project is hosted on github.