search

FranckFreiburger / vue3-sfc-loader

Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.
MIT License
1.03k stars 116 forks source link

wip(vue2): add scopeId support for vue2 #26

Closed Toilal closed 3 years ago

Toilal commented 3 years ago

Here's the proper scoped style support for vue2.

I have found answers in vue-loader master branch

Toilal commented 3 years ago

I still work on this pull request, to bring unit tests and solve related issues. Error handling can be enhanced too.

FranckFreiburger commented 3 years ago

Nice job about scopeId support ! I also wondering how to handle custom template/style pre-processors like here : https://github.com/FranckFreiburger/vue3-sfc-loader/blob/61014db433b7fd13bbdee31ebefdac178c370bdc/src/createVue3SFCModule.ts#L100-L101

Toilal commented 3 years ago

Tu préfères continuer en Anglais dans nos échanges, ou on peut utiliser le Français ?

FranckFreiburger commented 3 years ago

Je ne pense pas qu'il y ai beaucoup de gens qui suivent ce thread, continuons en français !

Toilal commented 3 years ago

Ok :). Donc je viens d'ajouter les tests communs vue2/vue3 et ça semble bien se passer. J'ai du ajouter/modifier les fonctions permettant de formater les erreurs pour que ça sorte bien aussi avec vue2.

Je m'attaque maintenant aux preprocessors avec lang="ts" par exemple.

FranckFreiburger commented 3 years ago

Top !

A propos des preprocessors (template/style) , pour le moment je n'ai pas d'autre idée que de de créer un faux consolidate, (vue2 compileTemplate.ts#L44) car malheureusement pour vue2 on a pas de preprocessCustomRequire (vue3 compileTemplate.ts#L121 ) (et j'ai pas très envie d'inclure la lib consolidate). Ca devrait bien se passer, on peut transmettre des trucs via preprocessOptions. T'en penses quoi ?

Toilal commented 3 years ago

Je commençais a regarder justement, je découvre tout ça donc merci pour les points d'entrée. J'ai déjà fait pas mal d'applications en VueJS, mais la on est vraiment dans les mécanismes internes :p

Toilal commented 3 years ago

Je te propose une première version avec consolidate, comme ça on va voir l'impact sur le poids du livrable.

FranckFreiburger commented 3 years ago

Ok, il va falloir binder tous les require(...) de consolidate vers notre options.moduleCache, non ? Autre pb, on traîne buble.js via vue-template-es2015-compiler résultat : +400KB (FYI, buble.js ~= babel) On peut là aussi créer un faux buble.js qui va utiliser babel à la place (var code = buble.transform(code, opts).code)

Toilal commented 3 years ago

consolidate importe uniquement bluebird qui est une implémentation de Promise, donc facilement remplacable.

Pour buble, ça risque d’être un peu plus compliqué qu'il n'y parait. Déja, il faut gérer le mapping des options bubble vers les options babel. J'ai pas encore regardé, peut-être que la plupart sont les mêmes, mais en tout cas component-compiler-utils ajoute une option qu'il faudrait convertir dans l'adapteur buble / babel.

https://github.com/vuejs/component-compiler-utils/blob/8b0da745c5a4c7a07b3b88560a1d1cb3c00a9d32/lib/compileTemplate.ts#L146-L150

Mais surtout, il s'agit d'un fork de buble visiblement.

https://github.com/yyx990803/buble/tree/f5996c9cdb2e61cb7dddf0f6c6f25d0f3f600055

Ce fork permet apparemment de prendre en charge les deux options stripWith et stripWithFunctional.

https://github.com/vuejs/vue-template-es2015-compiler/blob/2d4fbd7bce59c3cedb56e061898b9500a86b421d/index.js#L7-L10

En fouillant les sources du fork, ces deux options n'ont pas l'air de faire grand chose et on devrait pouvoir facilement les intégrer quand même.

FranckFreiburger commented 3 years ago

vue-template-es2015-compiler est utilisé pour : 1/ add support to ES2015 features in template expressions via Buble. (see supported features here). 2/ remove the with block inside render functions to make it strict-mode compliant. This is performed only at build time so that the base template compiler can be extremely small and lightweight.

Pour le 1/, c'est facile, on a babel, et pour le 2/, c'est un peu moins facile, mais babel peut être facilement étendu. J'ai fait un plugin babel qui reproduit le 2/, je push bientôt.

Toilal commented 3 years ago

Le preprocessor de template fonctionne pour Vue2. Par contre, je ne comprends pas pourquoi le test ne passe pas sur vue3.

FranckFreiburger commented 3 years ago

Pour info, a propos des tests, dans mon commit ???, j'ai remplacé '/optionsOverride.js' et '/appOverride.js' par '/boot.js', pour plus de flexibilité, par exemple dans : https://github.com/FranckFreiburger/vue3-sfc-loader/blob/88c93560b2703df2b088d7c884209db9602bf396/tests/basic.test.js#L489-L495

Toilal commented 3 years ago

Oui, j'ai quand même remis le /optionsOverride.js car c'est moins verbeux que de réécrire tout le boot.js juste pour changer une option dans le test.

Je suis en train de regarder pour les preprocessors de styles, mais c'est plus compliqué que pour les templates car il y a un peu de logique dans component-compiler-utils.

https://github.com/vuejs/component-compiler-utils/blob/8b0da745c5a4c7a07b3b88560a1d1cb3c00a9d32/lib/styleProcessors/index.ts#L24-L46

J'ai bien envie de reprendre ce code source et de l'adapter directement dans nos sources car ça risque d’être compliqué autrement.

FranckFreiburger commented 3 years ago

Si on a pas d'autre solution, on peut faire avec './styleProcessors' la même chose que pour './buble.js' ...

Toilal commented 3 years ago

en passant, ça serait bien d'avoir typescript dans la configuration webpack et les tests. Je crois que c'est possible avec ts-node.

Sinon, il se passe quoi si plusieurs modules dans l'arbre de dépendance importent un ./buble.js ou un ./styleProcessors ? C'est pas possible de le définir en absolu cet alias pour éviter ce risque ?

Toilal commented 3 years ago

Bon je viens de push une version modifiée de styleProcessors, mais pour l'instant elle est gérée manuellement dans nos sources car le module est en typescript (d'ou ma question sur l'intégration de typescript dans la configuration webpack).

FranckFreiburger commented 3 years ago

1/ typescript dans la configuration webpack et les tests pour le moment je ne suis pas très chaud, je souhaite qu'on puisse re-builder et tester facilement, sans outils additionnels.

2/ plusieurs modules dans l'arbre de dépendance importent un ./buble.js ou un ./styleProcessors pour l'instant c'est la merde ! par la suite, il faudra gérer ça par un loader webpack

3/ version modifiée de styleProcessors, gérée manuellement dans nos sources car le module en typescript je regarde

je vais merger tes modifs, c'est ok pour toi ?

Toilal commented 3 years ago

3/ version modifiée de styleProcessors, gérée manuellement dans nos sources car le module en typescript je regarde

Je suis dessus, en fait ça pose pas de problème d'enregistrer un alias vers un fichier typescript, donc je vais pouvoir le faire.

Attends un peu avant de merger du coup.

FranckFreiburger commented 3 years ago

super ! bon, tiens moi au courant ...

Toilal commented 3 years ago

Voila, ça fonctionne, prêt à merge.

Toilal commented 3 years ago

par contre y'a toujours un soucis sur le test des preprocesseurs de templates dans vue3.