build: migrate to vite #61
Conversation
pirhoo
force-pushed
the
build/migrate-to-vite
branch
from
ec568e9 to
6082569
Compare
| <button class="btn btn-info font-weight-bold" @click="$refs.formModal.show()"> | ||
| Click to see the form | ||
| </button> | ||
| <div> |
There was a problem hiding this comment.
Do you want to add a surrounding template tag like in other example?
There was a problem hiding this comment.
I couldn't understand why, but sometimes it's needed, and sometime it's not 🤷♂️
Co-authored-by: Caroline Desprat <[email protected]>
Co-authored-by: Caroline Desprat <[email protected]>
| @@ -32,11 +32,11 @@ import uniqueId from 'lodash/uniqueId' | |||
| import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes' | |||
| import { BTooltip } from 'bootstrap-vue/esm/components/tooltip/tooltip' | |||
|
|
|||
| import { library } from './Fa' | |||
| import { library, default as Fa } from './Fa' | |||
There was a problem hiding this comment.
| import { library, default as Fa } from './Fa' | |
| import Fa from './Fa' |
To avoid importing twice the library object, maybe it could be interesting to just use Fa and then line 159 useFa.library (
There was a problem hiding this comment.
As far as I know, we cannot use Fa.library
There was a problem hiding this comment.
Ok so all of the other comments are pointless ^^
| @@ -1,5 +1,5 @@ | |||
| import { mount } from '@vue/test-utils' | |||
| import HapticCopy from '@/components/HapticCopy.vue' | |||
| import HapticCopy from '@lib/components/HapticCopy.vue' | |||
There was a problem hiding this comment.
Somewhere (sorry it's vague) I saw this component imported with relative path (looked like something like that: import HapticCopy from './HapticCopy.vue' )
It could be great to change to look like this import HapticCopy from '@lib/components/HapticCopy.vue'
There was a problem hiding this comment.
The imports are not consistent indeed. We should do a refactoring branch for that purpose. Maybe with additional alias for keys directories (@components, @maps, etc)?
| @@ -176,7 +176,7 @@ describe('SharingOptionsLink', () => { | |||
| // Close the popup | |||
| $popup.instance.closed = true | |||
| // Wait for the interval to be called | |||
| jest.advanceTimersByTime(1000) | |||
| vi.advanceTimersByTime(1000) | |||
There was a problem hiding this comment.
good to see that vitest supports this kind of feature
There was a problem hiding this comment.
Vitest was made so "migrating from Jest is straightforward" and I can testify it is true!
|
Thanks @caro3801 for the review! |
Big PR to migrate to Vite, since it's the recommended way by the Vue CLI team.
Summary
The migration was done following those steps:
@libto refer to the root of the ./lib folder./plugins./plugins/markdown-it./plugins/docs.ts@vue/compiler-sfc.vueto.mdto avoid maintaining bothObservations
Documentation
To migrate the documentation to vite, we had to rewrite Webpack loaders into Vite plugins. This task was straight forward, with a few observations:
<template>tagsTests
Jest is not officially supported by Vite. Vite team recommend to use Vitest which has a syntax very similar to Jest. Since using Jest with Vite requires a lot of extra work and is not straight-forward, we decided to take this opportunity to migrate to Vitest. The operation was seamless.
Assets
As of today, it is not officially supported to inline assets out of the bundle when using lib mode with Vite. This has consequences for components like
TexturedDeckthat load asset dynamically. To handle this we parameterized the host of some assets (all configurable in the Murmur's config):TexturedDeckhas a newbackgroundBaseUrlproperty ;ChoroplethMaphas a new default value for thetopojsonUrlproperty ;SymbolMaphas a new default value for thetopojsonUrlproperty.