首页 发现 帮助
注册 登录
oleg
/
spruce
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Merge pull request #78 from ryangjchandler/feature/persistence-drivers

feature: persistence drivers
Ryan Chandler 4 年之前
父节点
bd4d3fa015 705774c706
当前提交
0c98e07b76
共有 10 个文件被更改，包括 56 次插入 和 4 次删除
合并视图 显示文件统计
  1. 0 0
      dist/spruce.js
  2. 0 0
      dist/spruce.js.map
  3. 0 0
      dist/spruce.module.js
  4. 0 0
      dist/spruce.module.js.map
  5. 0 0
      dist/spruce.umd.js
  6. 0 0
      dist/spruce.umd.js.map
  7. 20 2
      src/index.js
  8. 21 0
      tests/cypress/fixtures/persistence/drivers.html
  9. 14 1
      tests/cypress/integration/persistence.spec.js
  10. 1 1
      tests/cypress/integration/watchers.spec.js

文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.js


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.js.map


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.module.js


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.module.js.map


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.umd.js


文件差异内容过多而无法显示
+ 0 - 0
dist/spruce.umd.js.map


+ 20 - 2
src/index.js
查看文件 

@@ -4,6 +4,8 @@ import { createObservable } from './observable'
 
 const Spruce = {
 
 const Spruce = {
 
     stores: {},
 
     stores: {},
 
 
 
+    persistenceDriver: window.localStorage,
 
+
 
     persisted: [],
 
     persisted: [],
 
 
 
     subscribers: [],
 
     subscribers: [],
 
@@ -95,13 +97,13 @@ const Spruce = {
 
     },
 
     },
 
 
 
     retrieveFromLocalStorage(name, methods = {}) {
 
     retrieveFromLocalStorage(name, methods = {}) {
 
-        const storage = JSON.parse(window.localStorage.getItem(`__spruce:${name}`))
 
+        const storage = JSON.parse(this.persistenceDriver.getItem(`__spruce:${name}`))
 
 
 
         return storage ? Object.assign(methods, storage) : null
 
         return storage ? Object.assign(methods, storage) : null
 
     },
 
     },
 
 
 
     updateLocalStorage(name) {
 
     updateLocalStorage(name) {
 
-        window.localStorage.setItem(`__spruce:${name}`, JSON.stringify(this.store(name)))
 
+        this.persistenceDriver.setItem(`__spruce:${name}`, JSON.stringify(this.store(name)))
 
     },
 
     },
 
 
 
     watch(name, callback) {
 
     watch(name, callback) {
 
@@ -134,6 +136,22 @@ const Spruce = {
 
                     return comparison[part]
 
                     return comparison[part]
 
                 }, stores)
 
                 }, stores)
 
             })
 
             })
 
+    },
 
+
 
+    persistUsing(driver) {
 
+        if (this.persisted.length > 0) {
 
+            console.warn('[Spruce] You have already initialised a persisted store. Changing the driver may cause issues.')
 
+        }
 
+
 
+        if (typeof driver.getItem !== 'function') {
 
+            throw new Error('[Spruce] The persistence driver must have a `getItem(key)` method.')
 
+        }
 
+
 
+        if (typeof driver.setItem !== 'function') {
 
+            throw new Error('[Spruce] The persistence driver must have a `setItem(key, value)` method.')
 
+        }
 
+
 
+        this.persistenceDriver = driver
 
     }
 
     }
 
 }
 
 }

+ 21 - 0
tests/cypress/fixtures/persistence/drivers.html
查看文件 

@@ -0,0 +1,21 @@
 
+<html>
 
+    <head>
 
+        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
 
+    </head>
 
+    <body>
 
+        <div x-data>
 
+            <p x-text="$store.persisted.foo"></p>
 
+            <button @click="$store.persisted.foo = 'car'"></button>
 
+        </div>
 
+
 
+        <script src="/dist/spruce.umd.js"></script>
 
+
 
+        <script>
 
+            Spruce.persistUsing(window.sessionStorage)
 
+            
+            Spruce.store('persisted', {
 
+                foo: 'bar'
 
+            }, true)
 
+        </script>
 
+    </body>
 
+</html>

+ 14 - 1
tests/cypress/integration/persistence.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-/* global describe, it, cy */
 
+/// <reference types="cypress" />
 
 
 
 describe('persisted stores', () => {
 
 describe('persisted stores', () => {
 
     it('should not fail when persisted store is initialised', () => {
 
     it('should not fail when persisted store is initialised', () => {
 
@@ -20,6 +20,19 @@ describe('persisted stores', () => {
 
         cy.get('p').should('have.text', 'car')
 
         cy.get('p').should('have.text', 'car')
 
     })
 
     })
 
 
 
+    it('should persist data between visits using a custom driver', () => {
 
+        cy.visit('/tests/cypress/fixtures/persistence/check-persisted.html')
 
+
 
+        cy.get('p').should('have.text', 'bar')
 
+
 
+        cy.get('button').click()
 
+        cy.get('p').should('have.text', 'car')
 
+
 
+        cy.reload()
 
+
 
+        cy.get('p').should('have.text', 'car')
 
+    })
 
+
 
     it('should be able to call store methods when persisted', () => {
 
     it('should be able to call store methods when persisted', () => {
 
         cy.visit('/tests/cypress/fixtures/persistence/store-methods.html')
 
         cy.visit('/tests/cypress/fixtures/persistence/store-methods.html')

+ 1 - 1
tests/cypress/integration/watchers.spec.js
查看文件 

@@ -1,4 +1,4 @@
 
-/* global describe, it, cy */
 
+/// <reference types="cypress" />
 
 
 
 describe('watchers', () => {
 
 describe('watchers', () => {
 
     it('can watch for changes on a store', () => {
 
     it('can watch for changes on a store', () => {

部分文件因为文件数量过多而无法显示