Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migration/vuejs3 #960

Draft
wants to merge 13 commits into
base: doryphore-dev
Choose a base branch
from
Draft

Migration/vuejs3 #960

wants to merge 13 commits into from

Conversation

J9rem
Copy link
Contributor

@J9rem J9rem commented Jul 16, 2022

Je crée cette PR draft pour recueillir les discussions autour de la migration vers vuejs3.

J'ai commencé quelques bricoles mais il y a encore plein de choses qui ne fonctionnement pas comme

  • VueSelect dans actions-builder
  • des soucis de DOM avec des </div> en trop (avant ça ne râlait pas)
  • vérifier que tous les appels de new Vue( sont bien remplacés par app = createApp
  • vérifier le fonctionnement de this.$slots en remplacement de this.$scopedSlots
  • faire attention à ce que this.$el.parentNode.dataset fonctionne bien en remplacement de this.$el.dataset
  • etc etc etc

@J9rem J9rem force-pushed the migration/vuejs3 branch 2 times, most recently from d048f77 to cd35142 Compare July 18, 2022 16:42
@seballot
Copy link
Contributor

seballot commented Sep 9, 2022

Yo !

Je viens de voir cette PR !
Il y a une raison particulière pour laquelle tu as voulu migrer vers Vue 3? j'ai rien contre, c'est juste que ça va probablement demander pas mal de taf (comme tu as déjà du te rendre compte :)) pour assez peu de gain IMHO

Juste pour info, j'ai vite fait matté les changements de code, pour nextTick, plutot que de sauvegarder la valeur de this dans une variable tu peux utiliser une arrow function

nextTick(() => {
  this.myData
})
// plutot que faire
const myApp = this
nextTick(function() {
  myApp.myData
})

Et pour les watchers, le deep: true était déjà présent sur Vue2, donc à ma connaissance il n'y a pas besoin de le rajouter dans la migration vers Vue3 (sauf cas exceptionels peut etre). Car la syntaxe est vachement plus lourde, avec la fonction handler en plus

happy coding !

@J9rem
Copy link
Contributor Author

J9rem commented Sep 13, 2022

merci @seballot d'avoir jeté un coup d'oeil ici

Il y a une raison particulière pour laquelle tu as voulu migrer vers Vue 3

cette PR draft fait suite à des échanges avec @mrflos .
Elle sert surtout à partager les bouts de code tester et les discussions pour éventuellement passer à VueJS 3.

La question du départ de @mrflos était : pourquoi restons-nous en vuejs2 alors que de nouvelles librairies sympa JS sortent en utilisant VueJs 3 ? Nous risquons de ne pas pouvoir les utiliser en faisant tourner un VueJS2 sur YesWiki... en plus, il y a aura bien un jour un arrêt de la maintenance de VueJS 2. Autant s'y préparer.

L'intention de la présente PR et du code associé n'est pas de faire une migration à VueJS 3 mais plutôt de faire une tentative de migration en identifiant ce qui bloque et donc les points à travailler pour passer à VueJs 3. A priori c'est principalement vue-leaflet et vue-select qui sont compliquée à migrer.

Je me suis arrêté sur ce point et je pense que la branche reprendra vie le jour où il nous faudra migrer à VueJS 3 pour raison d'incompatibilité ou de faille de sécurité dans VueJS 2 non maintenue

deep: true

c'est un breaking-change pour VueJS 3. en VueJs 2 l'option a pour valeur par défaut true alors qu'en VueJs 3, la valeur par défaut est false et dans certains cas nous en avons besoin.

Pour le reste, je n'ai pas optimisé l'écriture du code. Effectivement, tes remarques sont pertinentes

@seballot seballot force-pushed the doryphore-dev branch 2 times, most recently from e04ba59 to 0747d97 Compare September 26, 2022 11:31
Base automatically changed from doryphore-dev to doryphore November 17, 2022 15:31
@mrflos
Copy link
Contributor

mrflos commented Dec 21, 2022

Pour info, vue-leaflet a une lib compatible vuejs3 https://github.com/vue-leaflet/vue-leaflet et vue-select une procédure de migration https://vue-select.org/guide/upgrading.html#index-prop-replaced-with-reduce

Pour ma part aussi je suis partisant de ne pas migrer trop tot vers une version majeure, mais de s'y préparer et de le faire pas trop tard car en laissant e jachère, on se retrouve avec une dette plus difficile à résoudre dans le code, comme l'illustre par exemple le fait d'avoir bootstrap 3 et jquery encore dans le code de yeswiki!

@J9rem
Copy link
Contributor Author

J9rem commented Dec 21, 2022

@mrflos effectivement @vue-leaflet/vue-leaflet est compatible mais ça n'est pas la librairie que nous utilisons.
Nous utilisons vue2-leaflet
(voir fichier package.json)

Il se trouve que notre code fait pour vue2-leaflet n'est pas compatible de @vue-leaflet/vue-leaflet. J'ai commencé à introduire @vue-leaflet/vue-leaflet en remplacement de vue2-leaflet mais ça ne semble pas fonctionner du premier coup.

@J9rem J9rem changed the base branch from doryphore to doryphore-dev December 22, 2022 10:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants