用 Svelte 写个简单的 Todo

官网： https://svelte.dev/

Svelte 是个新的前端框架，发展强劲。与目前主流的三大框架不同的是，Svelte 不采用 vdom ，而是借助 complier 的能力，打包出最小化的包，不附带更多的 runtime 。Svelte 是由 rollup 作者开发的 Reative 框架，语法与 vue 很像，个人简单写了一下，速度是真的给力，打包也是真的简洁。

下面是我简单用 Svelte 写的简单 Todo ，只有添加功能，不过实现起来相当舒服。

App.svelte:

<script>
    let list = ['a'];
    let todo = '';
    function add() {
        if (todo !== '') {
            list[list.length] = todo;
            todo = '';
        }
    }
</script>

<style>
    #todo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        height: 100%;
        width: 100%;
    }
</style>

<div id="todo">
    <input bind:value={todo} />
    <button on:click={add}>添加</button>

    {#each list as todo}
        <li>{todo}</li>
    {/each}
</div>

可以在官网的 REPL 里粘贴进去运行。

编译后总代码不到 4KB ，是相当小了。