examples(pwa) add localStorage adapter

Author: darrenjennings

.eslintignore

@@ -0,0 +1,2 @@
+dist
+esm

examples/pwa/package.json

@@ -8,10 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@vue/composition-api": "^0.4.0",
+    "@vue/composition-api": "1.0.0-beta.17",
     "core-js": "^3.6.4",
     "register-service-worker": "^1.6.2",
-    "swrv": "^0.1.1",
+    "swrv": "^0.8.2",
     "vue": "^2.6.11"
   },
   "devDependencies": {

examples/pwa/src/components/Todo.vue

@@ -1,33 +1,29 @@
 <template>
   <div>
     <div v-if="todo === undefined && !error">Loading...</div>
-    <div v-if="error">{{error}}</div>
     {{ todo }}
+    <div v-if="error">{{error}}</div>
   </div>
 </template>
 
 <script>
-import useSWRV from 'swrv'
+import { defineComponent } from '@vue/composition-api'
+import useTodos from '../useTodos'
 
-export default {
+export default defineComponent({
   props: {
     id: {
       type: Number,
       required: true
     }
   },
   setup ({ id }, { root }) {
-    const { data: todo, error } = useSWRV(`/todos/${id}`, path => root.$api(`${path}`), {
-      cache: root.$swrvCache
-    })
+    const { data, error } = useTodos(root, `/todos/${id}`)
 
     return {
-      todo,
+      todo: data,
       error
     }
   }
-}
+})
 </script>
-
-<style lang="scss" scoped>
-</style>

examples/pwa/src/components/Todos.vue

@@ -24,13 +24,12 @@
 </template>
 
 <script>
-import useSWRV from 'swrv'
+import { defineComponent } from '@vue/composition-api'
+import useTodos from '../useTodos'
 
-export default {
+export default defineComponent({
   setup (props, { root, emit }) {
-    const { data: todos, error } = useSWRV(`/todos`, path => root.$api(`${path}`), {
-      cache: root.$swrvCache
-    })
+    const { data: todos, error } = useTodos(root, `/todos`)
 
     function viewTodo (id) {
       emit('view', id)
@@ -42,7 +41,7 @@ export default {
       viewTodo
     }
   }
-}
+})
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

examples/pwa/src/localStorageCache.js

@@ -1,14 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import VueCompositionApi from '@vue/composition-api'
-import LocalStorageCache from './localStorageCache'
 import './registerServiceWorker'
 
 Vue.use(VueCompositionApi)
 Vue.config.productionTip = false
 
 Vue.prototype.$api = path => fetch(`https://jsonplaceholder.typicode.com${path}`).then(res => res.json())
-Vue.prototype.$swrvCache = new LocalStorageCache()
 
 new Vue({
   render: h => h(App)

examples/pwa/src/main.js

@@ -0,0 +1,14 @@
+import useSWRV from '../../../esm'
+import LocalStorageCache from '../../../esm/cache/adapters/localStorage'
+export default function useTodos (root, path) {
+  const { data, error } = useSWRV(path, path => root.$api(`${path}`), {
+    cache: new LocalStorageCache('swrv'),
+    shouldRetryOnError: false
+  })
+
+  return {
+    data,
+    error
+  }
+}
+

examples/pwa/src/useTodos.js

@@ -1097,12 +1097,12 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
-"@vue/composition-api@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.4.0.tgz#04e600106687de719d587c704296aa4a5b37ca28"
-  integrity sha512-8QxZK3BBbn29vIoiso+UthT6JUbeS0gPBWAxDUK2EComWNHluaGVWXC9fAnUG+L6PM+ApkFE2dOlv5Oi/o+cSQ==
+"@vue/composition-api@1.0.0-beta.17":
+  version "1.0.0-beta.17"
+  resolved "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-beta.17.tgz#63b65b3ed7cab649c53e4459fb0c5d3d1c545a96"
+  integrity sha512-TXa3162xQXeEoT8ar2aLPdSVGUy4phD8b3bytRORJQMvplQxi++QKXKAgYUTH0lwP0t0Dw2ddWtIyTTrOhta5w==
   dependencies:
-    tslib "^1.9.3"
+    tslib "^2.0.1"
 
 "@vue/preload-webpack-plugin@^1.1.0":
   version "1.1.1"
@@ -7668,11 +7668,16 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a"
   integrity sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ==
 
-tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.9.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
+tslib@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 [email protected]:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"