Replace Popper v1 with Popper v2
Closed this issue · 1 comments
msurguy commented
Popper.js V1 is a huge library and this project could be trimmed down significantly by replacing Popper V1 with V2.
Here are bundle sizes before and after replacement:
Before:
Here's the process I had to follow:
-
Remove popperjs v1 and replace with
"@popperjs/core": "^2.4.2"
-
In tooltip.vue:
import { createPopper } from '@popperjs/core';
...
mounted() {
createPopper(this.$refs.host, this.$refs.inner, {
placement: this.placement,
modifiers: [
{
name: 'arrow',
options: {
element: this.$refs.arrow
}
},
{
name: 'offset',
options: {
offset: [0, 8]
}
}
]
})
},
Then, in tooltip.styl, remove all existing arrow styles and replace with:
.zi-tooltip-arrow,
.zi-tooltip-arrow::before {
position: absolute;
width: 8px;
height: 8px;
z-index: -1;
}
.zi-tooltip-arrow::before {
content: '';
transform: rotate(45deg);
background: var(--geist-foreground);
}
.zi-tooltip-box[data-popper-placement^=bottom] .zi-tooltip-arrow
top -4px
.zi-tooltip-box[data-popper-placement^=top] .zi-tooltip-arrow
bottom -4px
.zi-tooltip-box[data-popper-placement^=left] .zi-tooltip-arrow
right 0
.zi-tooltip-box[data-popper-placement^=right] .zi-tooltip-arrow
left -8px
After that, the size is significantly trimmed!
Hope this helps!
unix commented
Thankyou for your proposal, this is a big improvement.