20190831 - Svelte

[onvno]

• awesome-svelte:集合
• svelte-routing：路由
• svelte-flat-ui:UI，很少，不完整

文章

• React 不是真正的响应式编程，Svelte 才是：介绍svelte无需像react通过API接口实现响应式。

实例对比

• 初识Svelte:反馈页面渲染性能svelte更高一筹，介绍如何在vue中使用svelte
• 使用svelte3框架项目实践(2019.06)：一个实践参考

  1.构建工具问题：svelte3是没有成熟的脚手架，初始化项目分为两种，分为直接下载和模板。个人建议使用模板，官方推荐rollup作为构建工具，也可以使用webpack。不过这两种构建工具模板都只进行了简单的支持，提供了处理svelte格式文件的能力，其它东西(eslint、scss、ts、图片处理...)还需要自己花时间去配置，不像vue-cli开箱即用、成熟、灵活。
  2.社区不成熟：svelte官方文档和教程都比较简单(目前还没发现中文版的)，看完这些大部分代码上的问题都可以解决。其它问题主要还是到github的issues去找找看，去stackoverflow、百度、谷歌能找到答案的不多。svelte相关的文章也不多，最佳实践和方案只有自己去摸索。
  3.面条代码：缺乏经验的用户可能会写出 “面条代码”，因为在svelte文件里的script标签里可以自由发挥，不过我们可以通过抽取函数去组织代码，让代码更简洁、容易理解和维护。另外svelte3写代码的方式有点像还未发布的vue3，可以参考一下这篇文章《Vue Function-based API RFC》。
  4.IDE支持问题：目前IDE对svelte文件的支持还不是很完善，对于webstorm用户，可以安装Svelte插件来获取部分支持，然后通过设置Editor->File Types找到Vue.js Templates添加*.svelte来获取进一步的支持。

  感觉如上的问题都不能算作太大问题，生态是需要逐步建立的

[onvno]

props设置

default values for props

<script>
        // 获取父组件值，需要使用export
    export let answer = 'a mystery';
</script>

react变量

reactive declarations

let count = 0;
$: doubled = count * 2;

$: {
    console.log(`the count is ${count}`);
    alert(`I SAID THE COUNT IS ${count}`);
}

逻辑

<script>
    let user = { loggedIn: false };

    function toggle() {
        user.loggedIn = !user.loggedIn;
    }
</script>

{#if user.loggedIn}
<button on:click={toggle}>
    Log out
</button>
{/if}

{#if !user.loggedIn}
<button on:click={toggle}>
    Log in
</button>
{/if}

优化

{#if user.loggedIn}
    <button on:click={toggle}>
        Log out
    </button>
{:else}
    <button on:click={toggle}>
        Log in
    </button>
{/if}

[onvno]

svelte动画版todolist

https://svelte.dev/tutorial/deferred-transitions https://svelte.dev/tutorial/animate 官方提供的例子，两类动画

[onvno]

插入组件，外部控制组件动画的actiong

https://svelte.dev/tutorial/actions

看着很酷

[onvno]

https://svelte.dev/tutorial/context-api

context-api与store对比还是看官方此文档

[onvno]

Svelte组件库：

• svelte-material-ui：MaterialUI组件库
• svelte-components: Github话题搜索结果

[onvno]

Svelte - 拖拽组件demo: https://svelte.dev/repl/3721cbc9490a4c51b07068944a36a40d?version=3.4.2

[onvno]

Svelte 子组件触发父组件事件：

组件事件

子组件

<script>
    // setup code goes here
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    function sayHello() {
        dispatch('message', {
            text: 'Hello!'
        });
    }
</script>

<button on:click={sayHello}>
    Click to say hello
</button>

父组件

<script>
    import Inner from './Inner.svelte';

    function handleMessage(event) {
        alert(event.detail.text);
    }
</script>

<Inner on:message={handleMessage}/>

当子组件与父组件层级隔得太深，可以使用这个方法传递： https://svelte.dev/tutorial/event-forwarding

子组件bind影响父组件

Component Binding

子组件：

<script>
    import { createEventDispatcher } from 'svelte';

    export let value = '';

    const dispatch = createEventDispatcher();

    const select = num => () => value += num;
    const clear  = () => value = '';
    const submit = () => dispatch('submit');
</script>

<style>
    .keypad {
        display: grid;
        grid-template-columns: repeat(3, 5em);
        grid-template-rows: repeat(4, 3em);
        grid-gap: 0.5em
    }

    button {
        margin: 0
    }
</style>

<div class="keypad">
    <button on:click={select(1)}>1</button>
    <button on:click={select(2)}>2</button>
    <button on:click={select(3)}>3</button>
    <button on:click={select(4)}>4</button>
    <button on:click={select(5)}>5</button>
    <button on:click={select(6)}>6</button>
    <button on:click={select(7)}>7</button>
    <button on:click={select(8)}>8</button>
    <button on:click={select(9)}>9</button>

    <button disabled={!value} on:click={clear}>clear</button>
    <button on:click={select(0)}>0</button>
    <button disabled={!value} on:click={submit}>submit</button>
</div>

父组件：

<script>
    import Keypad from './Keypad.svelte';

    let pin;
    $: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';

    function handleSubmit() {
        console.log("pin:", pin)
        alert(`submitted ${pin}`);
    }
</script>

<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>

<Keypad bind:value={pin} on:submit={handleSubmit}/>

[onvno]

更简单的应该是通过直接绑定props来实现： https://svelte.dev/tutorial/store-bindings

组件：

<script>
    import { name, greeting } from './stores.js';
</script>

<h1>{$greeting}</h1>
<input bind:value={$name}>

Store:

import { writable, derived } from 'svelte/store';

export const name = writable('world');

export const greeting = derived(
    name,
    $name => `Hello ${$name}!`
);