Svelte: conociendo acciones

Recientemente, apareció un artículo de @sanReal en Habr , donde Alexander habló sobre qué técnicas y qué capacidades de Svelte aprendió de su propia experiencia. Me sorprendió un poco no ver en su lista la mención de una de las herramientas de framework más poderosas: Actions . Además, al comunicarme con personas de la comunidad @sveltejs que ya están creando muy buenas aplicaciones con Svelte, a veces me doy cuenta de que no todos usan Acciones, incluso cuando su aplicación idealmente resolvería el problema. En este artículo te diré qué son las acciones y, con los ejemplos más simples, mostraré su aplicación.

Supongamos que tenemos un cuadro de texto en el que el usuario debe ingresar un número de teléfono. Necesitamos asegurarnos de que el usuario pueda ingresar solo números en el campo.

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

Cuando la tarea es dotar a un elemento HTML estándar con características adicionales, es una práctica común cuando se trabaja en cualquier componente del marco para crear un componente reutilizable alrededor de este elemento, dentro del cual se implementa la lógica del comportamiento no estándar. Puedes hacer lo mismo en 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 en acción

La tarea se ha completado, pero el elemento en sí está <input/>ahora oculto dentro del componente, por lo que ya no podremos manipularlo como un elemento HTML normal; para "colgar" cualquier clase de CSS, controladores de eventos o algunos atributos especiales no será tan simple.

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: Muy pronto en Moscú se llevará a cabo Svelte Russia Meetup # 1 . Regístrese, todavía hay espacio. Para aquellos que no podrán asistir en persona, se organizará una transmisión y grabación del evento.