diff --git a/.all-contributorsrc b/.all-contributorsrc index 21f7f9d..837a68c 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -49,24 +49,14 @@ ] }, { - "login": "NeoLSN", - "name": "Jason Yang/楊朝傑", - "avatar_url": "https://avatars1.githubusercontent.com/u/5782106?v=4", - "profile": "https://github.com/NeoLSN", + "login": "adamdehaven", + "name": "Adam DeHaven", + "avatar_url": "https://avatars.githubusercontent.com/u/2229946?v=4", + "profile": "https://www.adamdehaven.com", "contributions": [ - "bug", - "code" - ] - }, - { - "login": "axelhzf", - "name": "Axel Hernández Ferrera", - "avatar_url": "https://avatars1.githubusercontent.com/u/175627?v=4", - "profile": "http://axelhzf.com", - "contributions": [ - "bug", "code", - "example" + "doc", + "maintenance" ] } ], diff --git a/.eslintrc.js b/.eslintrc.js index f4e3abb..79d17c5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,7 +3,7 @@ module.exports = { env: { node: true }, - 'extends': [ + extends: [ 'plugin:vue/essential', '@vue/standard', '@vue/typescript' @@ -12,7 +12,7 @@ module.exports = { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'promise/param-names': 'off', - 'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 1 }], + 'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1 }], 'no-trailing-spaces': 'error', 'eol-last': 'error' }, diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 0000000..3f2e030 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,5 @@ +# CI settings +/.github/ @adamdehaven + +# Deployment settings +/netlify.toml @adamdehaven diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 68c63fa..3b23608 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -4,9 +4,11 @@ on: push: branches: - master + - next pull_request: branches: - master + - next jobs: test: diff --git a/README.md b/README.md index 6a4eccc..876dbc7 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -

+

swrv

@@ -6,16 +6,11 @@ ![build](https://github.com/Kong/swrv/workflows/build/badge.svg) [![](https://img.shields.io/npm/v/swrv.svg)](https://www.npmjs.com/package/swrv) -`swrv` (pronounced "swerve") is a library using the -[@vue/composition-api](https://github.com/vuejs/composition-api) for remote data -fetching. It is largely a port of [swr](https://github.com/zeit/swr). +`swrv` (pronounced "swerve") is a library using the [Vue Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) for remote data fetching. It is largely a port of [swr](https://github.com/zeit/swr). - [Documentation](https://docs-swrv.netlify.app/) -The name “SWR” is derived from stale-while-revalidate, a cache invalidation -strategy popularized by HTTP [RFC 5861](https://tools.ietf.org/html/rfc5861). -SWR first returns the data from cache (stale), then sends the fetch request -(revalidate), and finally comes with the up-to-date data again. +The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP [RFC 5861](https://tools.ietf.org/html/rfc5861). SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. Features: @@ -30,10 +25,8 @@ Features: - Customizable cache implementation - Error Retry - SSR support -- Vue 3 Support -With `swrv`, components will get a stream of data updates constantly and -automatically. Thus, the UI will be always fast and reactive. +With `swrv`, components will get a stream of data updates constantly and automatically. Thus, the UI will be always fast and reactive. ## Table of Contents @@ -55,8 +48,6 @@ automatically. Thus, the UI will be always fast and reactive. - [Error Handling](#error-handling) - [FAQ](#faq) - [How is swrv different from the swr react library](#how-is-swrv-different-from-the-swr-react-library) - - [Vue and Reactivity](#vue-and-reactivity) - - [Features](#features) - [Why does swrv make so many requests](#why-does-swrv-make-so-many-requests) - [How can I refetch swrv data to update it](#how-can-i-refetch-swrv-data-to-update-it) - [Contributors ✨](#contributors-) @@ -70,14 +61,12 @@ npm install swrv # yarn yarn add swrv -# pnpm +# pnpm pnpm add swrv ``` -If you want to try out Vue 3 support (beta), install the beta release and -check out the [Vite example](https://github.com/Kong/swrv/tree/next/examples/vite). -`swrv` code for Vue 3.0 exists on `next` branch. +If you want to try out Vue 3 support (beta), install the beta release and check out the [Vite example](https://github.com/Kong/swrv/tree/next/examples/vite). `swrv` code for Vue 3.0 exists on `next` branch. ```sh # npm @@ -86,7 +75,7 @@ npm install swrv@beta # yarn yarn add swrv@beta -# pnpm +# pnpm pnpm add swrv@beta ``` @@ -119,20 +108,11 @@ export default { ``` -In this example, `useSWRV` accepts a `key` and a `fetcher` function. `key` is a -unique identifier of the request, normally the URL of the API. And the fetcher -accepts key as its parameter and returns the data asynchronously. +In this example, `useSWRV` accepts a `key` and a `fetcher` function. `key` is a unique identifier of the request, normally the URL of the API. And the fetcher accepts key as its parameter and returns the data asynchronously. -`useSWRV` also returns 2 values: `data` and `error`. When the request (fetcher) -is not yet finished, data will be `undefined`. And when we get a response, it -sets `data` and `error` based on the result of fetcher and rerenders the -component. This is because `data` and `error` are Vue -[Refs](https://vue-composition-api-rfc.netlify.com/#detailed-design), and their -values will be set by the fetcher response. +`useSWRV` also returns 2 values: `data` and `error`. When the request (fetcher) is not yet finished, data will be `undefined`. And when we get a response, it sets `data` and `error` based on the result of fetcher and rerenders the component. This is because `data` and `error` are Vue [Refs](https://vuejs.org/guide/extras/composition-api-faq.html), and their values will be set by the fetcher response. -Note that fetcher can be any asynchronous function, so you can use your favorite -data-fetching library to handle that part. If ommitted, swrv uses the -[Fetch api](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). +Note that fetcher can be any asynchronous function, so you can use your favorite data-fetching library to handle that part. If ommitted, swrv uses the [Fetch api](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). ## Api @@ -179,9 +159,7 @@ See [Config Defaults](https://github.com/Kong/swrv/blob/1587416e59dad12f9261e289 ## Prefetching -Prefetching can be useful for when you anticipate user actions, like hovering -over a link. SWRV exposes the `mutate` function so that results can be stored in -the SWRV cache at a predetermined time. +Prefetching can be useful for when you anticipate user actions, like hovering over a link. SWRV exposes the `mutate` function so that results can be stored in the SWRV cache at a predetermined time. ```ts import { mutate } from 'swrv' @@ -198,9 +176,7 @@ function prefetch() { ## Dependent Fetching -swrv also allows you to fetch data that depends on other data. It ensures the -maximum possible parallelism (avoiding waterfalls), as well as serial fetching -when a piece of dynamic data is required for the next data fetch to happen. +swrv also allows you to fetch data that depends on other data. It ensures the maximum possible parallelism (avoiding waterfalls), as well as serial fetching when a piece of dynamic data is required for the next data fetch to happen. ```vue ``` -In this example, the Vue Hook `useSWRV` accepts a `key` and a `fetcher` -function. `key` is a unique identifier of the request, normally the URL of the -API. And the fetcher accepts key as its parameter and returns the data -asynchronously. - -`useSWRV` also returns 2 values: `data` and `error`. When the request (fetcher) -is not yet finished, data will be `undefined`. And when we get a response, it -sets `data` and `error` based on the result of fetcher and rerenders the -component. This is because `data` and `error` are Vue -[Refs](https://vue-composition-api-rfc.netlify.com/#detailed-design), and their -values will be set by the fetcher response. - -Note that fetcher can be any asynchronous function, so you can use your favorite -data-fetching library to handle that part. When omitted, swrv falls back to the -browser [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). +In this example, the Vue Hook `useSWRV` accepts a `key` and a `fetcher` function. `key` is a unique identifier of the request, normally the URL of the API. And the fetcher accepts key as its parameter and returns the data asynchronously. + +`useSWRV` also returns 2 values: `data` and `error`. When the request (fetcher) is not yet finished, data will be `undefined`. And when we get a response, it sets `data` and `error` based on the result of fetcher and rerenders the component. This is because `data` and `error` are Vue [Refs](https://vuejs.org/api/reactivity-core.html#ref), and their values will be set by the fetcher response. + +Note that fetcher can be any asynchronous function, so you can use your favorite data-fetching library to handle that part. When omitted, swrv falls back to the browser [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). diff --git a/docs/index.md b/docs/index.md index 406ed21..e7ae932 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,27 +2,23 @@ home: true heroText: swrv heroImage: /logo_45.png -tagline: Data fetching for Vue Composition Api +tagline: Data fetching for Vue via the Composition API actionText: Get Started → actionLink: /guide/getting-started features: - title: Feature-rich Data Fetching details: Transport and protocol agnostic data fetching, revalidation on focus, polling, in-flight de-duplication. -- title: Vue Composition Api +- title: Vue Composition API details: Start developing with power of Vue 3, using the reactivity system of - the Vue composition api. Supports both Vue 3 and @vue/composition-api + the Vue Composition API. - title: Stale-while-revalidate details: Uses cache to serve pages fast, while revalidating data sources producing an eventually consistent UI. -footer: Copyright © 2020-present Kong --- `swrv` (pronounced _"swerve"_) is a library for for data fetching. It is largely a port of [swr](https://github.com/vercel/swr). -The name “SWR” is derived from stale-while-revalidate, a cache invalidation -strategy popularized by HTTP RFC 5861. SWR first returns the data from cache -(stale), then sends the fetch request (revalidate), and finally comes with the -up-to-date data again. +The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. ```vue