From f7b457da9ec3f25fbc2b803afb43430c39eabf85 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Thu, 25 Aug 2022 13:55:40 -0400 Subject: [PATCH] feat(*): upgrade to vue 2.7.x --- .all-contributorsrc | 22 +- .eslintrc.js | 4 +- .github/CODEOWNERS | 5 + .github/workflows/main.yml | 2 + README.md | 123 +- babel.config.js | 3 +- docs/.vitepress/style.css | 3 - docs/.vitepress/theme/index.css | 13 - docs/.vitepress/theme/index.ts | 6 - docs/{.vitepress => .vuepress}/config.js | 28 +- docs/{ => .vuepress}/public/logo_45.png | Bin docs/.vuepress/styles/index.styl | 5 + docs/.vuepress/styles/palette.styl | 1 + docs/features.md | 43 +- docs/guide/getting-started.md | 37 +- docs/index.md | 18 +- examples/axios-typescript-nuxt/README.md | 3 + examples/axios-typescript-nuxt/package.json | 2 +- examples/axios-typescript-nuxt/yarn.lock | 2592 ++- examples/basic/.gitignore | 23 - examples/basic/README.md | 23 +- examples/basic/babel.config.js | 5 - examples/basic/package.json | 44 +- examples/basic/public/favicon.ico | Bin 4286 -> 0 bytes examples/basic/public/index.html | 23 - examples/basic/src/App.vue | 18 +- examples/basic/src/Repos.vue | 35 +- examples/basic/src/assets/logo.png | Bin 6849 -> 0 bytes examples/basic/src/main.js | 9 +- examples/basic/yarn.lock | 8713 +--------- examples/pwa/README.md | 16 +- examples/pwa/package.json | 28 +- examples/pwa/src/App.vue | 14 +- .../src/components/{Todo.vue => TodoItem.vue} | 6 +- .../components/{Todos.vue => TodosList.vue} | 6 +- examples/pwa/src/main.js | 2 - examples/pwa/src/useTodos.js | 7 +- examples/pwa/yarn.lock | 9895 +++++------- examples/ssr-nuxt/README.md | 4 +- examples/ssr-nuxt/package.json | 1 + examples/ssr-nuxt/yarn.lock | 64 +- examples/vite-basic/.gitignore | 5 - examples/vite-basic/README.md | 17 - examples/vite-basic/index.html | 13 - examples/vite-basic/package.json | 19 - examples/vite-basic/public/favicon.ico | Bin 4286 -> 0 bytes examples/vite-basic/src/App.vue | 78 - examples/vite-basic/src/assets/logo.png | Bin 92383 -> 0 bytes examples/vite-basic/yarn.lock | 419 - examples/vite/App.vue | 29 + examples/vite/README.md | 15 + examples/vite/components/HelloWorld.vue | 38 + .../src/main.js => vite/index.html} | 3 + examples/vite/package.json | 17 + examples/{vite-basic => vite}/vite.config.js | 0 examples/vite/yarn.lock | 364 + netlify.toml | 5 + package.json | 81 +- src/shims-tsx.d.ts | 17 - src/shims-vue.d.ts | 4 - src/types.ts | 17 +- src/use-swrv.ts | 137 +- tests/cache.spec.tsx | 30 +- tests/fixtures/app.js | 29 - tests/ssr.spec.ts | 68 +- tests/test-compat-all.sh | 6 +- tests/test-compat.sh | 7 +- tests/use-swrv.spec.tsx | 851 +- tests/utils/compile-with-webpack.js | 32 - tests/utils/jest-timeout.ts | 0 tests/utils/tick.ts | 4 +- yarn.lock | 13468 +++++++++------- 72 files changed, 14492 insertions(+), 23127 deletions(-) create mode 100644 .github/CODEOWNERS delete mode 100644 docs/.vitepress/style.css delete mode 100644 docs/.vitepress/theme/index.css delete mode 100644 docs/.vitepress/theme/index.ts rename docs/{.vitepress => .vuepress}/config.js (66%) rename docs/{ => .vuepress}/public/logo_45.png (100%) create mode 100644 docs/.vuepress/styles/index.styl create mode 100644 docs/.vuepress/styles/palette.styl create mode 100644 examples/axios-typescript-nuxt/README.md delete mode 100644 examples/basic/.gitignore delete mode 100644 examples/basic/babel.config.js delete mode 100644 examples/basic/public/favicon.ico delete mode 100644 examples/basic/public/index.html delete mode 100644 examples/basic/src/assets/logo.png rename examples/pwa/src/components/{Todo.vue => TodoItem.vue} (72%) rename examples/pwa/src/components/{Todos.vue => TodosList.vue} (86%) delete mode 100644 examples/vite-basic/.gitignore delete mode 100644 examples/vite-basic/README.md delete mode 100644 examples/vite-basic/index.html delete mode 100644 examples/vite-basic/package.json delete mode 100644 examples/vite-basic/public/favicon.ico delete mode 100644 examples/vite-basic/src/App.vue delete mode 100644 examples/vite-basic/src/assets/logo.png delete mode 100644 examples/vite-basic/yarn.lock create mode 100644 examples/vite/App.vue create mode 100644 examples/vite/README.md create mode 100644 examples/vite/components/HelloWorld.vue rename examples/{vite-basic/src/main.js => vite/index.html} (62%) create mode 100644 examples/vite/package.json rename examples/{vite-basic => vite}/vite.config.js (100%) create mode 100644 examples/vite/yarn.lock create mode 100644 netlify.toml delete mode 100644 src/shims-tsx.d.ts delete mode 100644 src/shims-vue.d.ts mode change 100644 => 100755 tests/cache.spec.tsx delete mode 100644 tests/fixtures/app.js mode change 100644 => 100755 tests/use-swrv.spec.tsx delete mode 100644 tests/utils/compile-with-webpack.js mode change 100644 => 100755 tests/utils/jest-timeout.ts mode change 100644 => 100755 tests/utils/tick.ts 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