Nieuwe booking widgets
TODO: Write introduction here...
Overgang van Vue 2 naar Vue 3
Vue 2 is eind dit jaar (31 december) end of life. Er is nog wel een lts support versie beschikbaar maar er zullen geen nieuwe features meer bij komen. Door deze ontwikkeling is ervoor gekozen om over te stappen naar Vue 3.
Overgang van Webpack naar Vite
Door de overstap van Vue 2 naar Vue 3 is er ook gekeken naar de build tools. De keuze is gemaakt om van Webpack af te stappen. Webpack is ontzettend complex en langzaam, hierdoor duurt een build & deploy van de widgets erg lang. Vue 3 gebruikt een nieuwe build tool genaamd Vite. Vite is een stuk sneller (en simpeler) dan Webpack.
Structuur wijzigingen
De structuur van het project is aangepast om een aantal Vite features te kunnen gebruiken.
Assets die door code aangeroepen worden (zoals CSS en images) moeten in de ./src/assets map staan. Alle items binnen deze map zullen tijdens het build proces netjes verwerkt worden.
Assets die via de web root ingeladen worden (bijv. <img src="/example.png">) moeten in de ./public map staan. Tijdens het build proces zullen deze assets netjes overgenomen worden.
Styling
Tijdens het overzetten van alle scss code is er redelijk wat aangepast om ervoor te zorgen dat alles ge-compiled kon worden.
Een aantal aanpassingen waren top level parent selectors (&) verwijderen (Doordat vite dit niet toe laat is wat styling kapot gegaan), Externe stylesheets, zoals bootstrap en vue-slick-carousel, lokaal in de 0_vendor map plaatsen (Vite laat het niet toe om via ~ node_modules te specificeren).
Elk theme heeft nu zijn eigen [themanaam]-theme.scss bestand gekregen. Dit bestand wordt door het build proces gebruikt om per thema één CSS file te maken. Er worden ook geen aparte stylesheets per widget meer gemaakt. Dit komt doordat elke widget stylesheet ontzettend veel code hergebruikt. Hierdoor is de keuze gemaakt om één CSS bestand per thema aan te houden.
Opnieuw stylen
- Slick slider is vervangen door swiper slider, even alle sliders nalopen.
- Calendar is vervangen door nieuwe plugin, even alle calenders nalopen.
Styling fixen
- Alle deprecation warnings oplossen (kan gezien worden door een keer
yarn build-stylesuit te voeren). - De location search book mist een height, hierdoor lijkt de map niet ingeladen te worden.
- Styling voor filters (bijv. bij location search book) is niet meer correct.
- Hover op image cards (bijv. bij lastminute widget) is niet meer correct.
- Font awesome icons lijken niet meer van kleur te veranderen, kan zijn doordat ze als SVG ingeladen worden.
- Styling van het sorteren (bijv. bij search book) is niet meer correct.
- Lastminute widget card footer styling is niet meer correct.