Svelte: découvrir les actions

Récemment, un article de @sanReal est apparu sur Habr , où Alexander a parlé des techniques et des capacités de Svelte qu'il a apprises de sa propre expérience. J'ai été un peu surpris de ne pas voir dans sa liste la mention de l'un des outils-cadres les plus puissants - Actions . De plus, en communiquant avec des personnes de la communauté @sveltejs qui créent déjà de très bonnes applications à l'aide de Svelte, je remarque parfois que tout le monde n'utilise pas Actions, même là où leur application résoudrait idéalement le problème. Dans cet article, je vous dirai ce que sont les actions et, avec les exemples les plus simples, je montrerai leur application.

Supposons que nous ayons une zone de texte dans laquelle l'utilisateur doit entrer un numéro de téléphone. Nous devons nous assurer que l'utilisateur ne peut saisir que des chiffres dans le champ.

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

Lorsque la tâche consiste à doter un élément HTML standard de fonctionnalités supplémentaires, il est courant de travailler dans n'importe quel composant du framework pour créer un composant réutilisable autour de cet élément, à l'intérieur duquel la logique du comportement non standard est implémentée. Vous pouvez faire de même dans 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 />

Voir en action

La tâche est terminée, mais l'élément lui-même est <input/>maintenant caché à l'intérieur du composant, nous ne pourrons donc plus le manipuler comme un élément HTML normal - pour y "accrocher" des classes CSS, des gestionnaires d'événements ou certains attributs spéciaux ne seront pas si 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 , , .

Remarque: Très prochainement à Moscou aura lieu le Svelte Russia Meetup # 1 . Inscrivez-vous, il reste de la place. Pour ceux qui ne pourront pas y assister en personne, une diffusion et un enregistrement de l'événement seront organisés.