geist-org/vue

Replace Popper v1 with Popper v2

Closed this issue · 1 comments

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:
Screen Shot 2020-06-15 at 8 49 05 PM

After:
Screen Shot 2020-06-15 at 9 25 37 PM

Here's the process I had to follow:

  1. Remove popperjs v1 and replace with
    "@popperjs/core": "^2.4.2"

  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.