vue-virtual-flow

vue-virtual-flow

English | Tiếng Việt

Bộ component virtual scrolling nhỏ gọn, có type đầy đủ và hỗ trợ khả năng tiếp cận cho Vue 3. Thư viện hỗ trợ danh sách chiều cao cố định hoặc động, cuộn theo cửa sổ, grid cuộn theo cửa sổ, giao diện chat, feed media ngắn và carousel ngang.

Chỉ các item cần thiết cho viewport hiện tại được mount, nhờ đó tập dữ liệu lớn vẫn phản hồi nhanh mà component không áp đặt giao diện của từng item.

Mục lục

• Cài đặt
• Bắt đầu nhanh
• Chọn component
• Hướng dẫn từng component
  • VirtualList và DynamicVirtualScroll
  • VirtualScroll
  • WindowDynamicVirtualScroll
  • WindowGirdVirtualScroll
  • ChatVirtualScroll
  • ShortMediaFeed
  • VirtualCarousel
  • SkeletonLoader
• Cách dùng chung
  • Chiều cao viewport
  • Key ổn định cho item
  • Tải thêm dữ liệu
  • Kéo để làm mới
• Các type được export
• Phát triển và phát hành
• Đóng góp
• Giấy phép

Cài đặt

npm install vue-virtual-flow

Import stylesheet của thư viện một lần tại entry point của ứng dụng:

import 'vue-virtual-flow/style.css'

Bắt đầu nhanh

Import component cục bộ:

<script setup lang="ts">
import { VirtualList } from 'vue-virtual-flow'
import 'vue-virtual-flow/style.css'

const users = Array.from({ length: 10_000 }, (_, id) => ({
  id,
  name: `Người dùng ${id + 1}`,
}))
</script>

<template>
  <VirtualList :items="users" item-key="id">
    <template #default="{ item, index }">
      <div>{{ index + 1 }}. {{ item.name }}</div>
    </template>

    <template #empty>Không tìm thấy người dùng.</template>
  </VirtualList>
</template>

Hoặc đăng ký toàn bộ component ở cấp global:

import { createApp } from 'vue'
import VueVirtualScroll from 'vue-virtual-flow'
import 'vue-virtual-flow/style.css'
import App from './App.vue'

createApp(App).use(VueVirtualScroll).mount('#app')

Plugin đăng ký VirtualList, DynamicVirtualScroll, VirtualScroll, WindowDynamicVirtualScroll, WindowGirdVirtualScroll, ChatVirtualScroll, ShortMediaFeed, VirtualCarousel và SkeletonLoader.

Chọn component

Hướng dẫn từng component

Event được lắng nghe bằng cú pháp template của Vue; các method được gọi qua ref của component. Các bảng bên dưới dùng tên ref là list, chat, feed hoặc carousel.

VirtualList và DynamicVirtualScroll

VirtualList là alias của DynamicVirtualScroll. Hai tên này render cùng một component và dùng chung API. Component phù hợp cho card, kết quả tìm kiếm, activity feed hoặc danh sách có các hàng cao thấp khác nhau.

Ban đầu mỗi hàng dùng estimatedItemSize. Sau đó ResizeObserver thay giá trị ước tính bằng chiều cao đã đo. Khi chiều cao của item phía trên viewport thay đổi, component bù lại vị trí cuộn để tránh nội dung bị nhảy.

Ví dụ

<script setup lang="ts">
import { ref } from 'vue'
import {
  VirtualList,
  type VirtualScrollEvent,
  type VirtualListExpose,
} from 'vue-virtual-flow'

const list = ref<VirtualListExpose>()
const posts = ref([
  { id: 'p1', title: 'Bài viết ngắn', body: 'Chỉ có một dòng.' },
  {
    id: 'p2',
    title: 'Bài viết dài',
    body: 'Nội dung xuống nhiều dòng làm cho hàng này có chiều cao khác.',
  },
])

function onScroll(event: VirtualScrollEvent) {
  console.log(event.scrollTop, event.startIndex, event.endIndex)
}
</script>

<template>
  <VirtualList
    ref="list"
    :items="posts"
    :estimated-item-size="96"
    :height="500"
    :overscan="4"
    item-key="id"
    aria-label="Danh sách bài viết"
    @scroll="onScroll"
  >
    <template #default="{ item, index }">
      <article>
        <small>#{{ index + 1 }}</small>
        <h2>{{ item.title }}</h2>
        <p>{{ item.body }}</p>
      </article>
    </template>

    <template #empty>Chưa có bài viết.</template>
  </VirtualList>

  <button @click="list?.scrollToIndex(1, { align: 'center' })">
    Đi tới bài viết thứ hai
  </button>
</template>

Nên chọn giá trị ước tính gần với chiều cao trung bình sau khi render. Các hàng không cần bằng đúng giá trị này; ước tính hợp lý chủ yếu giúp scrollbar ban đầu và thao tác nhảy tới item chưa được đo chính xác hơn.

Props

Slots

Events

API qua ref

Smooth scroll ở khoảng cách xa tự chuyển thành nhảy tức thời vì các hàng chưa đo có thể làm thay đổi offset đích trong lúc cuộn.

VirtualScroll

Dùng VirtualScroll khi mọi hàng có cùng một chiều cao chính xác. Component không cần đo từng hàng, nên rất phù hợp cho bảng, menu, log hoặc danh sách kết quả dày đặc.

Ví dụ

<script setup lang="ts">
import { ref } from 'vue'
import { VirtualScroll, type VirtualScrollExpose } from 'vue-virtual-flow'

const list = ref<VirtualScrollExpose>()
const rows = Array.from({ length: 50_000 }, (_, id) => ({
  id,
  label: `Hàng ${id + 1}`,
}))
</script>

<template>
  <VirtualScroll
    ref="list"
    :items="rows"
    :item-size="44"
    :height="480"
    :overscan="5"
    item-key="id"
    aria-label="Kết quả"
  >
    <template #default="{ item }">
      <div class="result-row">{{ item.label }}</div>
    </template>
  </VirtualScroll>

  <button @click="list?.scrollToIndex(999, { align: 'center' })">
    Đi tới hàng 1.000
  </button>
</template>

<style scoped>
.result-row {
  height: 44px;
  box-sizing: border-box;
}
</style>

Hàng đã render phải giữ đúng itemSize. Nếu nội dung có thể xuống dòng hoặc thay đổi kích thước, hãy dùng VirtualList.

Props

Slots

Events

API qua ref

WindowDynamicVirtualScroll

Dùng WindowDynamicVirtualScroll cho trang hoặc feed dài khi muốn cửa sổ trình duyệt là viewport cuộn thay vì một phần tử bên trong. Component đo các hàng có chiều cao động và theo dõi window.scrollY cùng window.innerHeight. Component này không có prop height.

Ví dụ

<script setup lang="ts">
import { ref } from 'vue'
import {
  WindowDynamicVirtualScroll,
  type VirtualScrollExpose,
} from 'vue-virtual-flow'

const feed = ref(loadInitialFeed())
const list = ref<VirtualScrollExpose>()
</script>

<template>
  <header>Nội dung phía trước virtual list</header>

  <WindowDynamicVirtualScroll
    ref="list"
    :items="feed"
    :estimated-item-size="320"
    :overscan="3"
    item-key="id"
    aria-label="Feed bài viết"
  >
    <template #default="{ item, index }">
      <article>
        <small>{{ index + 1 }}</small>
        <h2>{{ item.title }}</h2>
        <p>{{ item.summary }}</p>
      </article>
    </template>
  </WindowDynamicVirtualScroll>

  <footer>Nội dung phía sau virtual list</footer>
</template>

Props

Slots

Events

API qua ref

WindowGirdVirtualScroll

Dùng WindowGirdVirtualScroll cho grid nhiều cột có card với chiều cao cố định đã biết và dùng cửa sổ trình duyệt làm viewport. Component virtualize theo cả hàng để các cột đang hiển thị luôn được mount cùng nhau.

Ví dụ

<script setup lang="ts">
import { WindowGirdVirtualScroll } from 'vue-virtual-flow'

const products = Array.from({ length: 10_000 }, (_, id) => ({
  id,
  name: `Sản phẩm ${id + 1}`,
}))
</script>

<template>
  <WindowGirdVirtualScroll
    :items="products"
    :item-size="240"
    :columns="4"
    :gap="16"
    item-key="id"
    aria-label="Grid sản phẩm"
  >
    <template #default="{ item, rowIndex, columnIndex }">
      <ProductCard
        :product="item"
        :data-position="`${rowIndex}:${columnIndex}`"
      />
    </template>
  </WindowGirdVirtualScroll>
</template>

Props

Slots

Events

API qua ref

ChatVirtualScroll

ChatVirtualScroll dành cho hội thoại có tin nhắn cao thấp khác nhau. Mặc định component mở tại tin nhắn mới nhất, chỉ bám theo tin nhắn mới khi người dùng đang gần cuối và giữ nguyên nội dung đang xem khi lịch sử cũ được thêm vào đầu.

Ví dụ

<script setup lang="ts">
import { ref } from 'vue'
import {
  ChatVirtualScroll,
  type ChatVirtualScrollExpose,
} from 'vue-virtual-flow'

const chat = ref<ChatVirtualScrollExpose>()
const loadingOlder = ref(false)
const messages = ref(loadLatestMessages())
const hasOlder = ref(true)

async function loadOlder() {
  if (loadingOlder.value || !hasOlder.value) return
  loadingOlder.value = true
  const page = await fetchOlderPage(messages.value[0]?.id)
  messages.value.unshift(...page.items)
  hasOlder.value = page.hasMore
  loadingOlder.value = false
}
</script>

<template>
  <ChatVirtualScroll
    ref="chat"
    :items="messages"
    :estimated-item-size="72"
    :height="600"
    :has-older="hasOlder"
    :loading-older="loadingOlder"
    :load-older-threshold="120"
    item-key="id"
    aria-label="Hội thoại hỗ trợ"
    @load-older="loadOlder"
  >
    <template #default="{ item }">
      <MessageBubble :message="item" />
    </template>

    <template #loadingOlder>Đang tải tin nhắn cũ…</template>
    <template #newItems="{ count, scrollToBottom }">
      <button @click="scrollToBottom('smooth')">{{ count }} tin mới</button>
    </template>
    <template #empty>Chưa có tin nhắn.</template>
  </ChatVirtualScroll>

  <button v-if="!chat?.isAtBottom" @click="chat?.scrollToBottom('smooth')">
    Xem tin nhắn mới nhất
  </button>
</template>

Hãy thêm dữ liệu cũ vào đầu cùng một collection có key ổn định. Vùng cuộn lấy đáy làm mốc nên việc thêm hoặc đo tin nhắn phía trên người đọc không cần sửa vị trí cuộn native. Tin nhắn xuất hiện lần đầu được đo trước khi vẽ; các thay đổi chiều cao được cập nhật trong cây chỉ mục theo key. Append, prepend, đo chiều cao, tìm offset và key thông thường có độ phức tạp O(log n) cho mỗi tin thay đổi; thay thế, xóa hoặc sắp xếp tùy ý sẽ dựng lại index. Nên thay cả array items khi sửa dữ liệu tùy ý. Nếu ứng dụng bắt buộc mutate cùng một array, hãy tăng itemsVersion (hoặc gọi refresh()) sau thao tác xóa/ sắp xếp không đổi độ dài. Cách này giữ được hiệu năng mà không cần deep watcher O(n) chạy sau mọi tin nhắn mới.

Dùng các method qua ref, getScrollPosition() và sự kiện scroll để thao tác với offset dương tính từ đầu danh sách. Phần tử DOM bên trong dùng scrollTop âm (bằng 0 ở đáy) nhằm giữ momentum native khi prepend; code sử dụng component không nên đọc hoặc ghi trực tiếp thuộc tính này. Thứ tự DOM vẫn từ cũ đến mới.

Để chat có ảnh/video cuộn mượt, hãy dành sẵn kích thước bằng width, height hoặc aspect-ratio, đặt chiều cao ước lượng gần thực tế và tránh giới hạn size quá thấp khiến mất phần lớn overscan. Đặt loadOlderThreshold đủ lớn để tải trang kế tiếp trước khi người dùng chạm tin cũ nhất đã có; virtualization không thể che độ trễ mạng sau khi đã chạm mốc này.

Props

Tin nhắn được pin và tin đang chứa keyboard focus được render thêm ngoài giới hạn size. Nên giữ pinnedKeys nhỏ; maxPinnedItems không giới hạn tin đang focus.

Slots

Events

API qua ref

ShortMediaFeed

ShortMediaFeed là viewport headless có scroll snap theo chiều dọc cho reels, stories hoặc media ngắn. Mỗi item chiếm trọn một viewport. Component quản lý việc mount và điều hướng; slot của bạn chịu trách nhiệm cho video, hình ảnh, playback, âm thanh và các nút điều khiển.

Ví dụ

<script setup lang="ts">
import { ref } from 'vue'
import { ShortMediaFeed, type ShortMediaFeedExpose } from 'vue-virtual-flow'

const feed = ref<ShortMediaFeedExpose>()
const activeIndex = ref(0)
const media = ref([
  { id: 1, src: '/media/one.mp4' },
  { id: 2, src: '/media/two.mp4' },
  { id: 3, src: '/media/three.mp4' },
])
</script>

<template>
  <ShortMediaFeed
    ref="feed"
    v-model:active-index="activeIndex"
    :items="media"
    :buffer="1"
    height="100dvh"
    item-key="id"
    aria-label="Feed video"
  >
    <template #default="{ item, active }">
      <video
        :src="item.src"
        :autoplay="active"
        :muted="!active"
        playsinline
        controls
      />
    </template>

    <template #empty>Không có media.</template>
  </ShortMediaFeed>
</template>

Với buffer="1", component chỉ mount tối đa item active, một item phía trước và một item phía sau. State cục bộ trong slot bị mất khi item rời buffer, vì vậy hãy lưu playback state cần duy trì ở component cha.

Props

Slots

Events

API qua ref

Điều khiển bàn phím

Các phím sau hoạt động khi viewport có focus:

Viewport còn chuyển cả input bánh xe chuột thành chuyển slide. Handler wheel đã bật sẵn trong component, parent không phải làm gì thêm. Còn touch để trackpad snap gốc của trình duyệt xử lý.

Với feed không giới hạn, hãy tải theo trang bằng load-more và chỉ giữ một cửa sổ dữ liệu hợp lý ở component cha. Virtualization giới hạn DOM và media element đang mount, nhưng không xóa object khỏi items.

VirtualCarousel

VirtualCarousel là carousel headless có scroll snap ngang và virtualize các slide. activeIndex là index của slide đầu tiên trong vùng nhìn hiện tại.

Ví dụ

<script setup lang="ts">
import { ref } from 'vue'
import { VirtualCarousel, type VirtualCarouselExpose } from 'vue-virtual-flow'

const carousel = ref<VirtualCarouselExpose>()
const activeIndex = ref(0)
const products = ref(loadProducts())
</script>

<template>
  <VirtualCarousel
    ref="carousel"
    v-model:active-index="activeIndex"
    :items="products"
    :slides-per-view="3"
    :slides-to-scroll="1"
    :gap="16"
    :buffer="1"
    :height="320"
    item-key="id"
    aria-label="Sản phẩm nổi bật"
  >
    <template #default="{ item, index, active, visible }">
      <ProductCard
        :product="item"
        :position="index"
        :active="active"
        :visible="visible"
      />
    </template>

    <template #empty>Không có sản phẩm.</template>
  </VirtualCarousel>

  <button @click="carousel?.previous()">Trước</button>
  <button @click="carousel?.next()">Sau</button>
</template>

Chiều rộng slide được tính theo công thức:

(chiều rộng viewport - (slidesPerView - 1) × gap) / slidesPerView

active chỉ là true với slide đầu tiên trong vùng nhìn. visible là true với mọi slide thuộc vùng nhìn đó. Khi hiển thị ba slide và buffer bằng một, thông thường tối đa năm slide được mount ở giữa collection.

Props

Thao tác cảm ứng có khóa hướng: vuốt dọc tiếp tục cuộn trang, còn vuốt ngang di chuyển carousel và tự căn vào slide gần nhất. Trong lúc kéo, track di chuyển bằng translate3d và activeIndex được giữ nguyên tới khi animation drag kết thúc. Vùng render và inViewport chỉ cập nhật khi slide đi vào hoặc ra khỏi vùng nhìn. Khi thả nhanh, track tiếp tục theo vận tốc lúc thả rồi giảm tốc về 0, với quán tính giới hạn tối đa hai slide thêm. Giữ tay trước khi thả sẽ bỏ qua quán tính. Kéo ngang từ ngưỡng dragThreshold sẽ chuyển một slide ngay cả khi chưa đi qua nửa chiều rộng slide.

Button và link giữ hành vi click bình thường. Input và phần tử có data-carousel-no-drag không bắt đầu drag; input giữ hành vi phím mũi tên riêng. Wheel/trackpad ngắt animation tại vị trí đang hiển thị.

autoWidth dùng ResizeObserver, vị trí cộng dồn và binary search. Slide chưa mount dùng chiều rộng ước lượng, nên bước nhảy xa có thể được tinh chỉnh sau khi đo. Kết quả đo muộn được áp dụng khi drag kết thúc để giữ slide đang chọn. Nội dung slot cần có chiều rộng rõ ràng, ví dụ <ProductCard :style="{ width: item.width + 'px' }" />.

keepAlive giữ state của input/component tới khi bị loại khỏi cache LRU. Chỉ nhóm slide khi chuyển động dừng mới cập nhật độ gần đây; frame trung gian không đẩy state của slide đích ra khỏi cache. Slide cache ngoài vùng render bị ẩn và inert. pinnedIndexes giữ media đang chạy; dùng inViewport để quyết định pause media. State cần tồn tại lâu dài vẫn nên lưu bên ngoài theo itemKey ổn định.

loop di chuyển các slide có key quanh chu kỳ hiện tại, không tạo instance trùng. autoplayLoop chỉ quay về đầu khi không bật loop liên tục. Demo tắt tải thêm khi bật loop để biên collection cố định. Loop dùng cùng bộ điều khiển chuyển động để căn slide sau khi wheel dừng, tránh native snap bám theo node vừa đổi chu kỳ. Component vẫn hỗ trợ load-more. Thay đổi dữ liệu hoặc layout sẽ hủy chuyển động hiện tại và căn lại index đang chọn.

Cấu hình responsive

Component chọn breakpoint lớn nhất không vượt quá chiều rộng container của carousel. Nếu không có breakpoint phù hợp, component dùng các prop gốc. Trường bị bỏ qua dùng prop gốc, không kế thừa từ breakpoint khác.

<VirtualCarousel
  :items="products"
  :slides-per-view="1"
  :responsive="[
    { breakpoint: 640, slidesPerView: 2, gap: 12 },
    { breakpoint: 1024, slidesPerView: 3, slidesToScroll: 2, gap: 16 },
  ]"
>
  <template #default="{ item }"><ProductCard :product="item" /></template>
</VirtualCarousel>

Slots

Events

API qua ref

Điều khiển bàn phím

Các phím sau hoạt động khi viewport có focus:

Smooth scroll ở khoảng cách xa tự chuyển thành tức thời để không lộ khoảng trống virtualized.

Ví dụ autoplay

<script setup lang="ts">
import { ref } from 'vue'
import { VirtualCarousel, type VirtualCarouselExpose } from 'vue-virtual-flow'

const carousel = ref<VirtualCarouselExpose>()
const products = ref(loadProducts())
</script>

<template>
  <VirtualCarousel
    ref="carousel"
    :items="products"
    :slides-per-view="3"
    :autoplay="true"
    :autoplay-delay="3000"
    :autoplay-loop="true"
    :pause-on-hover="true"
  >
    <template #default="{ item }">
      <ProductCard :product="item" />
    </template>
  </VirtualCarousel>

  <button @click="carousel?.stopAutoplay()">Tạm dừng</button>
  <button @click="carousel?.startAutoplay()">Tiếp tục</button>
</template>

SkeletonLoader

SkeletonLoader hiển thị khối giữ chỗ với hiệu ứng shimmer. Có thể dùng độc lập hoặc trong slot loading của danh sách. Component luôn hiển thị khi được mount; dùng v-if để điều khiển khi dùng độc lập, hoặc để prop loading của danh sách điều khiển slot.

Ví dụ

Import stylesheet của thư viện một lần như bên dưới hoặc tại entry point của ứng dụng. Đặt loading thành false khi request dữ liệu hoàn tất.

<script setup lang="ts">
import { ref } from 'vue'
import { SkeletonLoader } from 'vue-virtual-flow'
import 'vue-virtual-flow/style.css'

const loading = ref(true)
</script>

<template>
  <SkeletonLoader
    v-if="loading"
    width="100%"
    :height="120"
    aria-label="Đang tải nội dung…"
  />
  <p v-else>Nội dung đã sẵn sàng.</p>
</template>

Props

<SkeletonLoader variant="circle" :width="48" :height="48" />
<SkeletonLoader variant="rectangle" :height="180" />
<SkeletonLoader width="60%" :height="20" :animated="false" />

Hiệu ứng tự dừng khi người dùng bật tùy chọn giảm chuyển động. Khi ghép nhiều skeleton trang trí cùng một thông báo loading chung, truyền aria-hidden="true" cho từng skeleton để tránh lặp nhãn với trình đọc màn hình.

Slots, events và API qua ref

Thao tác

Dùng trong slot loading

Import SkeletonLoader cùng với VirtualList. Với state items và loading hiện có, thay thông báo loading bằng skeleton:

<VirtualList :items="items" :loading="loading" :loading-item-size="64">
  <template #default="{ item }"><FeedCard :item="item" /></template>
  <template #loading>
    <SkeletonLoader :height="40" aria-label="Đang tải trang tiếp theo…" />
  </template>
</VirtualList>

Tùy chỉnh giao diện

Đặt các biến CSS sau trên skeleton hoặc phần tử cha:

<SkeletonLoader
  :height="80"
  style="--skeleton-background: #334155; --skeleton-highlight: #475569; --skeleton-radius: 12px"
/>

Cách dùng chung

Chiều cao viewport

<div class="list-container">
  <VirtualList :items="items" height="fill">
    <template #default="{ item }"><ResultRow :item="item" /></template>
  </VirtualList>
</div>

.list-container {
  height: 100%;
  min-height: 0;
}

Key ổn định cho item

<VirtualList :items="users" item-key="uuid" />

<VirtualList
  :items="rows"
  :item-key="(row) => `${row.accountId}:${row.sequence}`"
/>

Key duy nhất và ổn định rất quan trọng khi thêm, xóa, thêm vào đầu hoặc sắp xếp lại dữ liệu. Key cũng gắn kết quả đo chiều cao với đúng item.

Tải thêm dữ liệu

<script setup lang="ts">
import { computed, ref } from 'vue'

const items = ref(loadFirstPage())
const loading = ref(false)
const hasMore = computed(() => items.value.length < 1_000)

async function loadMore() {
  if (loading.value || !hasMore.value) return
  loading.value = true
  items.value.push(...(await fetchNextPage()))
  loading.value = false
}
</script>

<template>
  <VirtualList
    :items="items"
    :has-more="hasMore"
    :loading="loading"
    :load-more-threshold="400"
    @load-more="loadMore"
  >
    <template #default="{ item }"><FeedCard :item="item" /></template>
    <template #loading>Đang tải trang tiếp theo…</template>
  </VirtualList>
</template>

Kéo để làm mới

<VirtualList
  :items="items"
  pull-to-refresh
  :refreshing="refreshing"
  :pull-refresh-threshold="72"
  @refresh="refreshFirstPage"
>
  <template #default="{ item }"><FeedCard :item="item" /></template>
  <template #refresh="{ progress, refreshing: busy }">
    {{ busy ? 'Đang làm mới…' : progress >= 1 ? 'Thả để làm mới' : 'Kéo xuống' }}
  </template>
</VirtualList>

Các type được export

import type {
  ChatVirtualScrollExpose,
  ChatVirtualScrollProps,
  DynamicVirtualScrollProps,
  ItemKey,
  ResponsiveBreakpoint,
  ScrollAlignment,
  ShortMediaFeedChangeEvent,
  ShortMediaFeedExpose,
  ShortMediaFeedProps,
  SkeletonLoaderProps,
  VirtualCarouselChangeEvent,
  VirtualCarouselExpose,
  VirtualCarouselProps,
  VirtualListExpose,
  VirtualListProps,
  VirtualScrollEvent,
  VirtualScrollExpose,
  VirtualScrollProps,
  WindowDynamicVirtualScrollProps,
  WindowGirdVirtualScrollProps,
} from 'vue-virtual-flow'

Phát triển và phát hành

bun install
bunx playwright install chromium firefox webkit
bun run dev
bun run check

Playground có các demo riêng cho chiều cao cố định, chiều cao động, cuộn theo cửa sổ, chat, load-more, short-media và carousel. Trước khi publish, hãy chạy thêm npm pack --dry-run. Sau đó commit release, chạy npm publish --access public, rồi tạo và push Git tag tương ứng.

Đóng góp

Mọi issue và pull request đều được chào đón. Vui lòng đọc CONTRIBUTING.md trước khi gửi thay đổi.

Giấy phép

MIT