Cours sur la Composition API et les composables sous Vue.js : https://go.devtheory.fr/cours-vue-capi-composables?utm_source=youtube
Actu: Vue.js 3.3 : https://blog.vuejs.org/posts/vue-3-3
Actu: Popover API : https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
Actu: Vercel - Automatic recursion protection : https://vercel.com/changelog/automatic-recursion-protection-for-vercel-serverless-functions
--------------------------------------------------------------------
DevTheory
Formations : https://devtheory.fr/?utm_source=youtube&utm_medium=yt_description
Discord : https://go.devtheory.fr/discord
Twitter: https://go.devtheory.fr/twitter
LinkedIn : https://go.devtheory.fr/linkedin
--------------------------------------------------------------------
Informations
00:00 - Introduction
00:19 - Actu: Vue.js 3.3
10:09 - Actu: Popover API
12:30 - Actu: Vercel - Automatic recursion protection
Contact pro / partenariat : contact@devtheory.fr
Actu: Vue.js 3.3 : https://blog.vuejs.org/posts/vue-3-3
Actu: Popover API : https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
Actu: Vercel - Automatic recursion protection : https://vercel.com/changelog/automatic-recursion-protection-for-vercel-serverless-functions
--------------------------------------------------------------------
DevTheory
Formations : https://devtheory.fr/?utm_source=youtube&utm_medium=yt_description
Discord : https://go.devtheory.fr/discord
Twitter: https://go.devtheory.fr/twitter
LinkedIn : https://go.devtheory.fr/linkedin
--------------------------------------------------------------------
Informations
00:00 - Introduction
00:19 - Actu: Vue.js 3.3
10:09 - Actu: Popover API
12:30 - Actu: Vercel - Automatic recursion protection
Contact pro / partenariat : contact@devtheory.fr
Category
📚
ÉducationTranscription
00:00 Vue.js version 3.3 ainsi que la Popover API en expérimental.
00:05 Bienvenue sur les actualités de la semaine du lundi 15 mai 2023.
00:10 C'est parti.
00:11 Bonjour à tous, c'est Brian de Dev Theory,
00:16 la chaîne pour devenir et rester un bon développeur JavaScript.
00:19 Cette semaine, on va donc parler de la fameuse version 3.3 de Vue.js
00:23 qui est sortie et qui se centre principalement
00:27 sur des améliorations au niveau de notre développeur expérience.
00:31 En fait, ça va surtout se jouer par rapport à TypeScript dans cette version 3.3.
00:36 Pourquoi ça ? Parce qu'on a beaucoup d'améliorations
00:39 par rapport à TypeScript et au script setup.
00:42 Si on descend un peu, on regarde la première amélioration,
00:45 c'est une superbe amélioration.
00:46 C'est le fait qu'avant, il y avait une limitation dans le typage des props
00:52 au sein de nos components.
00:53 Il y avait une limitation, je vais peut-être zoomer un peu plus.
00:57 La limitation, c'était qu'on ne pouvait pas importer l'objet props
01:01 qu'on mettait dans le typage DefineProps.
01:04 On ne pouvait pas l'importer, c'était une limitation qu'il y avait.
01:07 Maintenant, cette limitation n'existe plus.
01:10 On peut bel et bien importer les types
01:11 que l'on peut mettre directement dans DefineProps.
01:15 Et ça, c'est vraiment super.
01:16 On peut même combiner le type importé avec un autre type.
01:20 Il n'y a plus de limitation à ce niveau-là.
01:22 Et ça, c'est un vrai plaisir,
01:23 parce qu'on va pouvoir avoir des props qui soient un peu plus partagés,
01:28 donc réutilisés sur différents components si besoin.
01:32 Si on le sent un petit peu, on voit une autre grosse amélioration.
01:36 C'est le fait d'avoir des génériques,
01:38 des types génériques au sein des components.
01:41 Alors, qu'est-ce que ça veut dire ?
01:42 On a ce nouvel attribut générique de disponible
01:45 à l'instant où on est dans un script setup Lang TS.
01:48 Et en fait, ce script générique-là, c'est n'importe quel type
01:53 et il faut le voir de la même manière que l'implémentation des types
01:57 que l'on met dans les fonctions en TypeScript.
01:59 Donc, quand on utilise ces petits chevrons en TypeScript
02:01 pour indiquer des types dans une fonction qu'on définit,
02:04 c'est exactement la même chose qui se passe ici,
02:07 donc dans cet argument générique-là.
02:09 C'est-à-dire qu'on peut faire ce que le type T,
02:11 il extend d'autres types qui sont par exemple String ou Number.
02:15 Et je peux même mettre un autre type.
02:17 Donc, il y a deux types dans mon component, T et U, par exemple.
02:20 Donc ça, c'est vraiment bien.
02:22 Et pourquoi c'est vraiment bien ? Parce que justement, ce type générique-là,
02:24 eh bien, on va le mettre dans nos props et en fait, ça va être lié, si vous voulez.
02:28 Donc, on va avoir plusieurs props dans notre component
02:32 qui vont avoir donc le même type ou alors lié au même type.
02:35 Ici, donc, on a une prop items qui est donc un Array de type,
02:40 mais on ne sait pas exactement le type en question.
02:41 C'est un type générique.
02:42 Mais ce type-là, on sait que ça doit être exactement le même
02:45 qu'il y a dans la prop Selected.
02:47 Et donc, ce qui se passe, c'est que si jamais maintenant,
02:50 eh bien, on appelle ce component-là.
02:52 Donc, si jamais, on va faire un petit exemple simplement dans play.vujs.org,
02:58 qui est la version un peu en ligne de Vujs.
03:01 Donc, je vais juste l'écrire là, mais ça ne va pas fonctionner.
03:03 Si on a un component test ici avec items et Selected,
03:08 comme on avait précédemment,
03:09 si on fait en sorte que items soit un Array de chaîne de caractère, par exemple,
03:14 et qu'après, on a donc Selected qui est finalement un nombre,
03:18 eh bien, là, il y aurait une erreur.
03:20 Parce qu'ici, on a le type nombre, en fait, on a le type int.
03:24 Et derrière, eh bien là, on a pourtant un Array de chaîne de caractère.
03:27 Donc, ce n'est pas bon.
03:28 Et donc, il faudrait, par exemple, qu'il y ait ici, de cette manière-là,
03:31 une chaîne de caractère ou alors qu'il y ait str ou quelque chose comme ça.
03:34 Là, ça marcherait parce que du coup, les types auraient été respectés.
03:37 Le type de Selected serait le même qu'un élément de l'Array de items.
03:42 Eh bien, ça, c'est donc une grosse nouveauté des génériques
03:45 qui nous permet d'avoir des props qui soient liés, justement,
03:48 grâce à ce système de générique-là.
03:50 Comme vous avez vu en dessous, on peut même l'extend
03:51 et même l'extend avec nos propres types,
03:53 c'est-à-dire qu'on peut importer notre type et le mettre dans le extend de ce générique-là.
03:57 Et après, de faire ID et liste, par exemple,
03:59 de la même manière avec différents génériques.
04:03 Donc ça, c'est une superbe amélioration que moi, je vais déjà utiliser
04:06 dès que Nuxt se met à jour par rapport à Vue.js 3.3.
04:09 Je veux utiliser cette amélioration-là
04:11 parce qu'elle est très, très intéressante au niveau TypeScript.
04:13 D'autres nouveautés, notamment une par rapport au Define Emits.
04:17 Alors, comme vous le saviez peut-être,
04:19 on peut définir sous TypeScript le type des événements
04:23 que l'on envoie à partir d'un component vers le component parent.
04:26 Et pour le typage de ces emits,
04:29 il fallait écrire la signature de la fonction en question.
04:33 Il fallait écrire les différentes signatures possibles de la fonction.
04:36 La fonction, c'est laquelle ? C'est cette fonction-là, "emit".
04:38 Ça veut dire qu'en fait, cette fonction-là, "emit",
04:40 on devait mettre en premier paramètre le nom d'un événement,
04:44 ici donc soit "foo", soit "bar".
04:45 Et ensuite, il fallait mettre soit un nombre dans le cas de "foo"
04:48 ou un "name" dans le cas de "bar", etc.
04:51 Donc, on écrivait vraiment les signatures de cette fonction-là,
04:54 toutes les signatures possibles.
04:55 Mais maintenant, on a une autre manière d'écrire.
04:58 Cette manière-là est toujours disponible,
04:59 mais on a une nouvelle manière de mettre en place le typage de la fonction "emit".
05:03 C'est une manière qui se veut un peu plus logique,
05:07 même si je trouvais celle d'avant logique,
05:08 qui se veut un peu plus ergonomique.
05:11 Et en fait, on va écrire un objet avec des clés.
05:14 Et ces clés-là vont être le nom des événements,
05:18 donc la "foo" et "bar".
05:18 Et en ce temps, on va avoir un tuple.
05:21 Donc, on peut même avoir un "labeled tuple",
05:24 ça veut dire qu'on donne un nom aux différents éléments qu'il y a dedans.
05:28 Ici, je dis que le premier élément s'appelle "id",
05:30 et que c'est un type "number",
05:31 mais j'aurais pu simplement mettre "number" et ça aurait marché, bien sûr.
05:34 Et on a également "bar",
05:35 donc ici, on a une "string" d'abord,
05:37 et ensuite, n'importe quelle autre chose qui entre dans le nom "rest",
05:41 ici dans le nom "name",
05:41 mais c'est un "rest", donc c'est simplement au niveau des types pour que ce soit plus visible.
05:45 Voilà la nouvelle manière d'écrire un "define_emits".
05:48 Et avec la modification de cette macro-là, "define_emits",
05:53 on a également la modification de la macro "define_slots".
05:55 Et ça, c'est super intéressant aussi,
05:57 parce qu'on n'avait pas encore de typage possible pour les slots.
06:00 Les slots, vous savez, c'est quand on est dans un component,
06:04 par exemple, ce component "test" là, qui n'existe pas ici.
06:06 Eh bien, ce que j'écris ici, là, c'est un slot,
06:11 parce que c'est l'intérieur d'un component.
06:13 Donc ça, c'est le slot par défaut.
06:14 Ici, il n'y a pas de nom à ce slot-là, c'est un slot par défaut.
06:17 Mais j'aurais pu lui mettre un nom grâce au...
06:20 grâce à "template", justement.
06:24 Grâce à l'élément "template", j'aurais pu mettre un nom en mettant...
06:27 Non, c'est "#", tac.
06:29 Ici, j'aurais pu mettre, par exemple, "item".
06:31 Et donc là, c'est un slot.
06:32 Ici, c'est un slot qui s'appelle "item", en fait.
06:34 Et si jamais on ne précise pas ça, alors c'est simplement un slot par défaut.
06:39 Si jamais on ne le précise pas.
06:40 Et donc là, c'est le slot par défaut.
06:42 Donc si on revient ici,
06:43 on va pouvoir définir les slots au niveau de leur type.
06:47 Et là, vous voyez qu'on a un slot par défaut qui est possible,
06:51 mais qui n'est pas obligatoire.
06:52 Et on a également un slot "item" qui est possible, mais qui n'est pas obligatoire.
06:55 Ça veut dire que si j'enlève ce point d'interrogation-là,
06:58 on est obligé de mettre un slot,
07:00 donc on est obligé de mettre du contenu ici dans "test",
07:03 si jamais il n'y a pas de point d'interrogation au niveau de "default" ici.
07:07 Et donc ça veut dire que si jamais je fais ça dans un "define slot"
07:11 où le "default" n'est pas optionnel,
07:13 eh bien ça, ça entraînerait une erreur au niveau du type,
07:15 parce qu'il me manque un attribut qui est donc le slot "default".
07:18 Et ça, c'est également super bien pour nous,
07:20 parce qu'on va pouvoir savoir quand on écrit un component
07:22 s'il manque des choses ou pas.
07:23 En fait, on n'a pas besoin d'aller voir l'implémentation du component,
07:27 d'aller voir le code de ce component-là pour savoir quel slot il faut.
07:29 Directement, TypeScript va nous dire "Ah ben là, il manque le slot "item"
07:32 ou il ne le manque pas si jamais il est optionnel, par exemple."
07:34 Donc ça, c'est super.
07:35 Et en plus de ça, on a même le typage des propriétés des propres,
07:40 parce qu'on peut même avoir des "props" sur les slots,
07:43 excusez-moi, on peut même avoir des "props" sur les slots.
07:44 Donc on a même le typage de ces "props" là,
07:46 mais bon, on ne va pas aller jusqu'à là non plus.
07:48 Autre chose avant de vous parler des features expérimentales,
07:51 une autre macro qui a vu le jour, c'est "define options",
07:55 qui permet en fait de donner des options au component en lui-même.
07:59 Je ne sais pas si vous saviez, mais avant, par exemple,
08:02 pour faire en sorte de ne pas avoir l'héritage de tous les attributs
08:05 à l'élément "root" d'un component,
08:08 il fallait faire "inherit attributes false",
08:12 mais on ne pouvait pas le mettre sur un script setup.
08:15 Donc il fallait à la fois avoir un script setup
08:17 et à la fois avoir un script normal qui faisait "export default" d'un objet
08:21 qui contenait cette propriété-là.
08:22 Donc on avait deux scripts si jamais on voulait mettre ce genre d'options
08:26 pour notre component.
08:26 Et bien maintenant, ça, c'est "chao",
08:29 et donc on va pouvoir utiliser directement cette macro-là, "define options",
08:32 afin de mettre les options du component, et ça, c'est bien mieux,
08:35 comme ça, on n'a pas un double script qui faisait un peu bizarre.
08:38 Dernière chose, j'essaie d'aller assez vite
08:40 parce que vous n'êtes pas forcément tous sur Vue.js 3,
08:42 "define model", qui est une superbe, également nouvelle macro de disponible,
08:49 parce qu'en fait, elle va remplacer le fait de faire une "prop_model_value"
08:55 et un "init_update_model_value"
08:56 quand on veut faire un "vmodel" sur un component.
08:59 Donc là, sur ce component-là, on peut appeler le "vmodel",
09:04 qui nous permet d'avoir la modification d'une variable réactive,
09:09 et pour créer un "vmodel" dans un component,
09:11 il fallait avoir une "prop" qui s'appelait "model_value"
09:15 et avoir un "init_update_model_value",
09:18 et dans ce cas-là, le "vmodel" pouvait marcher.
09:20 Donc il fallait faire le code pour "init_update_value"
09:23 à l'instant où il y avait un input de votre input ou de votre select,
09:26 ou de n'importe quoi.
09:26 Et bien maintenant, on a un code beaucoup plus simple,
09:30 qui est simplement ce "define_model".
09:32 C'est-à-dire qu'on crée une variable qui est "define_model",
09:35 et cette variable-là, on va la mettre sur un "vmodel" natif,
09:38 par exemple celui du "tag_input",
09:40 et ensuite, tout simplement, ça va marcher.
09:43 Donc là, le "model_value" est une variable réactive
09:47 qui va tout simplement s'envoyer au component parent,
09:50 parce que le component parent aura également un "vmodel".
09:53 Donc vous voyez que c'est bien plus rapide de faire cette manière-là
09:56 que l'ancienne manière.
09:57 Donc ça, c'est vraiment une superbe mise à jour
10:00 qui n'est pas liée à TypeScript, justement,
10:01 et c'est également une bonne chose.
10:03 Voilà tout concernant Vue.js 3.3.
10:06 On passe au reste, désolé, c'était un peu long.
10:08 La Popover API, c'est une nouvelle API en expérimental
10:13 seulement sous Chromium, donc Chrome, Edge, etc.
10:16 Et c'est intéressant, je voulais vous en parler,
10:19 parce qu'en fait, ça permet de mettre en place des éléments Popover.
10:22 Donc vous voyez, ces éléments Popover,
10:23 c'est un peu comme un mini-modal qui se met sur un élément particulier.
10:28 Donc ici, il y aurait des nouveaux attributs HTML
10:32 qui feront en sorte d'activer ou non un Popover.
10:34 On aurait par exemple un bouton avec l'attribut "popover_target",
10:37 qui est en fait l'ID d'un Popover,
10:39 et ce Popover-là, il aurait l'attribut "popover"
10:41 pour bien savoir que c'est un Popover,
10:43 et donc il apparaîtrait ou non à l'instant où on clique sur ce bouton-là.
10:46 Et ce bouton-là, il pourrait même avoir différentes actions,
10:49 vous voyez, "popover_target_actions",
10:51 qu'il soit "hide", "show" ou "toggle".
10:53 Donc si jamais on va sur Chrome Canary pour tester cette version-là,
10:56 parce que c'est seulement disponible sous Chrome version 114,
10:59 qui n'est actuellement pas disponible dans la version normale de Chrome.
11:01 Donc voilà, là on est sur Chrome Canary, on est sur leur page d'exemple,
11:04 et si par exemple on regarde les différents Popovers,
11:08 ici j'ai un bouton "show popover1",
11:10 je vais simplement inspecter l'élément pour voir un peu plus ce dont il s'agit.
11:13 Et donc vous voyez qu'ici on a un "popover_target_my_popup1",
11:20 et donc ce "my_popup1", c'est cet élément-là
11:23 qui actuellement n'est pas présent, vous voyez,
11:25 et donc il est en "id my_popup1" et il a un "popover" de "manual",
11:29 ça veut dire quoi ? Ça veut dire qu'on doit forcément utiliser les boutons
11:32 pour l'afficher ou les afficher.
11:34 Donc ici, si je clique sur le bouton, mon élément apparaît,
11:37 et si je clique sur "hide", il s'en va.
11:39 Et la même chose pour un deuxième Popover qui se trouve juste ici,
11:41 et si je clique sur "hide", il s'en va.
11:43 Donc si jamais je change le "show", par exemple ici, en "toggle",
11:47 je vais pouvoir cliquer dessus et recliquer dessus
11:49 pour voir l'affiché et le désaffiché.
11:50 Vous voyez que c'est super intéressant,
11:52 et si jamais j'enlève ce mode "manual" là, mais je mets "auto",
11:55 ça fait en sorte que si je clique en dehors de ce Popover Content,
11:59 il disparaît, en fait.
12:01 Donc ça, c'est également une super chose.
12:02 Donc ça, c'est une API qui est assez intéressante,
12:05 qu'il ne faut absolument pas utiliser pour le moment,
12:06 attention, c'est en expérimental,
12:08 mais je trouve qu'elle est assez intéressante
12:09 pour se passer un peu du JavaScript
12:11 et d'avoir ce genre de fonctionnement
12:13 directement depuis le HTML, finalement.
12:15 Alors il y a également une interface en JavaScript
12:17 qui existe déjà pour cette API-là,
12:19 mais c'est intéressant d'avoir ces petites tentatives
12:23 d'avoir des choses un peu plus natives,
12:25 comme ça on a moins de JS sur nos pages
12:26 et c'est directement optimisé par le navigateur.
12:29 Dernière chose cette semaine pour nous quitter,
12:31 c'est un mini-article, simplement pour ceux qui sont sur Vercel.
12:34 Vous avez maintenant une protection automatique
12:37 de la récursion de vos fonctions.
12:39 Parce que si jamais vous ne savez pas,
12:41 en serverless, un des gros problèmes
12:43 et une des grosses peurs qu'on peut avoir,
12:45 c'est si jamais on a une serverless function ou autre
12:47 qui en fait en appelle une autre,
12:48 et après ça crée une boucle où ça s'appelle tout le temps, etc.,
12:51 et alors on a un usage qui est énorme
12:54 et donc on va payer une énorme facture
12:56 parce que justement, toutes les fonctions
12:57 se sont appelées les unes entre elles alors que c'est un bug.
13:00 Maintenant, on a une protection automatique
13:03 de cette récursion-là, de ce boucle-là,
13:05 qui permet d'arrêter le fait d'avoir cette boucle,
13:08 et ça c'est grâce notamment à un header
13:10 qui va s'appeler x-vercel-id,
13:11 et donc que Vercel va gérer et va pouvoir
13:13 arrêter l'exécution d'une serverless function
13:17 si jamais il voit que ça a été trop de fois
13:21 dans une boucle en fait.
13:22 Et donc ça, ça marche sur les serverless functions,
13:23 les edge functions, les edge middleware
13:25 et même les rewrites,
13:27 donc pour ne pas avoir une boucle de redirection non plus.
13:29 Donc ça, c'est une bonne chose
13:30 et c'est automatique sur tous les plans,
13:32 le plan gratuit au plan payant.
13:33 Par contre, il faut simplement refaire un déploiement
13:36 pour que ce soit activé.
13:37 Donc si là, vous n'avez pas fait de déploiement
13:38 depuis une semaine ou deux,
13:39 eh bien, ce n'est pas activé,
13:41 donc si vous en refaites un tout de suite,
13:42 eh bien là, c'est bon, ce sera activé
13:44 et c'est une bonne chose pour éviter pas mal de problèmes,
13:47 notamment des problèmes de facturation.
13:49 Moi, ça ne m'est jamais arrivé, mais ça peut arriver.
13:50 Je sais qu'il y a pas mal de personnes sur Twitter
13:52 qui peuvent se plaindre de ça.
13:54 Donc c'est bien d'avoir ce genre de protection
13:56 inclue dans votre déploiement.
13:58 Voilà tout concernant cette semaine.
14:01 Je vous mets le lien de toutes ces petites actus
14:02 juste en dessous, en description.
14:04 Désolé, c'était un peu long cette semaine,
14:06 mais c'est parce que Vue.js 3,
14:07 personnellement, c'est mon framework de prédilection,
14:09 donc forcément, j'en parle beaucoup.
14:11 D'ailleurs, si Vue.js vous intéresse,
14:12 j'ai pas mal de cours disponibles
14:14 sur le site web devtheory.fr
14:16 par rapport à Vue.js 3.
14:17 Je vous mets également quelques liens en description
14:19 juste en dessous.
14:20 Je vous souhaite une très bonne semaine,
14:21 un très bon codage,
14:23 et on se retrouve dès lundi prochain.
14:25 (Générique)
14:28 ---