Svelte: conhecendo ações

Recentemente, um artigo de @sanReal apareceu na Habr , onde Alexander falou sobre quais técnicas e quais recursos de Svelte ele aprendeu com sua própria experiência. Fiquei um pouco surpreso por não ver em sua lista a menção de uma das mais poderosas ferramentas de estrutura - Actions . Além disso, ao me comunicar com pessoas da comunidade @sveltejs que já estão criando aplicativos muito bons usando o Svelte, às vezes percebo que nem todo mundo usa o Actions, mesmo onde o aplicativo resolveria o problema idealmente. Neste artigo , mostrarei o que são ações e, com os exemplos mais simples, mostrarei sua aplicação.

Suponha que tenhamos uma caixa de texto na qual o usuário deve digitar um número de telefone. Precisamos garantir que o usuário possa inserir apenas números no campo.

: +7 <input type="text" />

Quando a tarefa é dotar um elemento HTML padrão de recursos adicionais, é prática comum ao trabalhar em qualquer componente da estrutura criar um componente reutilizável em torno desse elemento, dentro do qual a lógica do comportamento não padrão é implementada. Você pode fazer o mesmo no Svelte:

<!-- InputDigits.svelte -->
<script>
    function clean_value(e){
        e.target.value =  e.target.value.replace(/[^\d]/g,'');
    }
</script>

<input type="text" on:input={clean_value} />

<!-- App.svelte -->
...
: +7 <InputDigits />

Ver em ação

A tarefa foi concluída, mas o elemento em si <input/>agora está oculto dentro do componente; portanto, não poderemos mais manipulá-lo como um elemento HTML comum - para "pendurar" nele quaisquer classes CSS, manipuladores de eventos ou alguns atributos especiais, não será tão simples.

Svelte — ( Actions). Svelte , , , , — "" , . — - HTML-. , DOM. DOM-, .

:

<script>
    function onlydigits(node) {

        function clean_value(){
            node.value = node.value.replace(/[^\d]/g,'');
        }

        node.addEventListener('input',clean_value);

        return {
            destroy: ()=>node.removeEventListener('input',clean_value)
        }

    }
</script>

: +7 <input type="text" use:onlydigits />

onlydigits, . , DOM- node input. , destroy, DOM-, .

Svelte, - HTML- , use. <input/> use:onlydigits.

. , 10 :

<script>
    function onlydigits(node) { ... }

    function max10symbols(node) {

        function trim_value(){
            node.value = node.value.substring(0, 10);
        }

        node.addEventListener('input',trim_value);

        return {
            destroy: ()=>node.removeEventListener('input',trim_value)
        }

    }
</script>

: +7 <input type="text" use:onlydigits use:max10symbols />

<input /> — use:onlydigits use:max10symbols. .

use , . , . :

<script>
    function format_by_pattern(node,pattern) {

        function set_cursor(){
            const match = node.value.match(/[\d]/gi);
            const pos = match ? node.value.lastIndexOf(match.pop())+1 : 0;
            node.setSelectionRange(pos, pos);
        }

        function format_value(e){
            let digits = node.value.replace(/[^\d]/g,'').split('');
            node.value = pattern.replace(/[*]/g,(m)=>digits.shift()||m);
            set_cursor();
        }

        node.addEventListener('input',format_value);

        format_value();

        return {
            destroy: ()=>node.removeEventListener('input',format_value)
        }

    }
</script>

: +7 <input type="text" use:format_by_pattern={'(***) ***-**-**'} /> <br/>
: <input type="text" use:format_by_pattern={' **** №******'} />

<input /> HTML-. format_by_pattern, . , Svelte, JavaScript-.

, , , . .

<script>
    function format_by_pattern(node,pattern) {

        function set_cursor(){...}
        function format_value(){...}

        ...

        return {
            destroy: ...,
            update: (new_pattern)=>{
                pattern=new_pattern;
                format_value();
            }
        }

    }

    let zagran = false;
</script>

: +7 <input type="text" use:format_by_pattern={'(***) ***-**-**'} /> <br/>
: <input type="text" use:format_by_pattern={zagran ? ' ** №*******' : ' **** №******'} /> <br/>
<input type="checkbox" bind:checked={zagran}/> - 

, . , , bind:checked, zagran true false. , Svelte use:format_by_pattern.

, , DOM-, <input /> DOM-, . .

, , , — update. , . .

. , . , , DOM- — , . Svelte. Svelte , , .

Nota: Muito em breve será realizado o Svelte Russia Meetup # 1 . Registre-se, ainda há espaço. Para aqueles que não poderão comparecer pessoalmente, será organizada uma transmissão e gravação do evento.