From 7f22040a0c4b2e723f316e8635bba3691e25a8c0 Mon Sep 17 00:00:00 2001 From: Kaspars Date: Tue, 7 May 2024 10:44:58 +0200 Subject: [PATCH 1/7] use sessionStorage instead of localStorage --- website/src/user_pattern_utils.mjs | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs index 19cba84b..cf849d3a 100644 --- a/website/src/user_pattern_utils.mjs +++ b/website/src/user_pattern_utils.mjs @@ -1,5 +1,5 @@ import { atom } from 'nanostores'; -import { persistentAtom } from '@nanostores/persistent'; +import { persistentAtom, setPersistentEngine } from '@nanostores/persistent'; import { useStore } from '@nanostores/react'; import { logger } from '@strudel/core'; import { nanoid } from 'nanoid'; @@ -21,6 +21,10 @@ export const patternFilterName = { user: 'user', }; +if (typeof sessionStorage !== 'undefined') { + setPersistentEngine(sessionStorage); +} + export let $viewingPatternData = persistentAtom( 'viewingPatternData', { From b69b9c37cd7f380db11a05287478356beae28c4d Mon Sep 17 00:00:00 2001 From: Kaspars Date: Tue, 7 May 2024 11:01:02 +0200 Subject: [PATCH 2/7] fix events, add comment --- website/src/user_pattern_utils.mjs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs index cf849d3a..b0a19e6a 100644 --- a/website/src/user_pattern_utils.mjs +++ b/website/src/user_pattern_utils.mjs @@ -1,5 +1,5 @@ import { atom } from 'nanostores'; -import { persistentAtom, setPersistentEngine } from '@nanostores/persistent'; +import { persistentAtom, setPersistentEngine, windowPersistentEvents } from '@nanostores/persistent'; import { useStore } from '@nanostores/react'; import { logger } from '@strudel/core'; import { nanoid } from 'nanoid'; @@ -22,7 +22,10 @@ export const patternFilterName = { }; if (typeof sessionStorage !== 'undefined') { - setPersistentEngine(sessionStorage); + // NB: this switches storageEngine of all persistent atoms + // ideally we would switch the engine per atom + // (like in this abandoned pr: https://github.com/nanostores/persistent/pull/30) + setPersistentEngine(sessionStorage, windowPersistentEvents); } export let $viewingPatternData = persistentAtom( From 6249631a722da0222a689ae2e595d85371f0b7a5 Mon Sep 17 00:00:00 2001 From: Kaspars Date: Tue, 7 May 2024 11:40:09 +0200 Subject: [PATCH 3/7] implement sessionAtom function (same api as persistenAtom, just used sessionStorage instead of localStorage) --- website/src/user_pattern_utils.mjs | 60 ++++++++++++++++++++++++++---- 1 file changed, 52 insertions(+), 8 deletions(-) diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs index b0a19e6a..4ce1e7d9 100644 --- a/website/src/user_pattern_utils.mjs +++ b/website/src/user_pattern_utils.mjs @@ -1,5 +1,5 @@ -import { atom } from 'nanostores'; -import { persistentAtom, setPersistentEngine, windowPersistentEvents } from '@nanostores/persistent'; +import {atom, onMount} from 'nanostores'; +import { persistentAtom, windowPersistentEvents } from '@nanostores/persistent'; import { useStore } from '@nanostores/react'; import { logger } from '@strudel/core'; import { nanoid } from 'nanoid'; @@ -21,14 +21,58 @@ export const patternFilterName = { user: 'user', }; +export let sessionAtom = persistentAtom; + if (typeof sessionStorage !== 'undefined') { - // NB: this switches storageEngine of all persistent atoms - // ideally we would switch the engine per atom - // (like in this abandoned pr: https://github.com/nanostores/persistent/pull/30) - setPersistentEngine(sessionStorage, windowPersistentEvents); + const identity = a => a; + const eventsEngine = windowPersistentEvents; + sessionAtom = (name, initial = undefined, opts = {}) => { + let encode = opts.encode || identity + let decode = opts.decode || identity + + let store = atom(initial) + + let set = store.set + store.set = newValue => { + if (typeof newValue === 'undefined') { + delete sessionStorage[name] + } else { + sessionStorage[name] = encode(newValue) + } + set(newValue) + } + + function listener(e) { + if (e.key === name) { + if (e.newValue === null) { + set(undefined) + } else { + set(decode(e.newValue)) + } + } else if (!sessionStorage[name]) { + set(undefined) + } + } + + function restore() { + store.set(sessionStorage[name] ? decode(sessionStorage[name]) : initial) + } + + onMount(store, () => { + restore() + if (opts.listen !== false) { + eventsEngine.addEventListener(name, listener, restore) + return () => { + eventsEngine.removeEventListener(name, listener, restore) + } + } + }) + + return store + } } -export let $viewingPatternData = persistentAtom( +export let $viewingPatternData = sessionAtom( 'viewingPatternData', { id: '', @@ -75,7 +119,7 @@ export async function loadDBPatterns() { } // reason: https://github.com/tidalcycles/strudel/issues/857 -const $activePattern = persistentAtom('activePattern', '', { listen: false }); +const $activePattern = sessionAtom('activePattern', '', { listen: false }); export function setActivePattern(key) { $activePattern.set(key); From 6e6a2439c3bfa9f75a0406a3c4ae7febcaf1f9ce Mon Sep 17 00:00:00 2001 From: Kaspars Date: Tue, 7 May 2024 12:54:33 +0200 Subject: [PATCH 4/7] simplify implementation --- website/src/user_pattern_utils.mjs | 54 +++++++----------------------- 1 file changed, 13 insertions(+), 41 deletions(-) diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs index 4ce1e7d9..08e1ffc6 100644 --- a/website/src/user_pattern_utils.mjs +++ b/website/src/user_pattern_utils.mjs @@ -1,5 +1,5 @@ -import {atom, onMount} from 'nanostores'; -import { persistentAtom, windowPersistentEvents } from '@nanostores/persistent'; +import { atom, onMount } from 'nanostores'; +import { persistentAtom } from '@nanostores/persistent'; import { useStore } from '@nanostores/react'; import { logger } from '@strudel/core'; import { nanoid } from 'nanoid'; @@ -24,52 +24,24 @@ export const patternFilterName = { export let sessionAtom = persistentAtom; if (typeof sessionStorage !== 'undefined') { - const identity = a => a; - const eventsEngine = windowPersistentEvents; + const identity = (a) => a; sessionAtom = (name, initial = undefined, opts = {}) => { - let encode = opts.encode || identity - let decode = opts.decode || identity + let encode = opts.encode || identity; + let decode = opts.decode || identity; + if (opts.listen) console.error('sessionAtom does not support "listen" option'); - let store = atom(initial) + let store = atom(sessionStorage[name] ? decode(sessionStorage[name]) : initial); - let set = store.set - store.set = newValue => { + store.listen((newValue) => { if (typeof newValue === 'undefined') { - delete sessionStorage[name] + delete sessionStorage[name]; } else { - sessionStorage[name] = encode(newValue) + sessionStorage[name] = encode(newValue); } - set(newValue) - } + }); - function listener(e) { - if (e.key === name) { - if (e.newValue === null) { - set(undefined) - } else { - set(decode(e.newValue)) - } - } else if (!sessionStorage[name]) { - set(undefined) - } - } - - function restore() { - store.set(sessionStorage[name] ? decode(sessionStorage[name]) : initial) - } - - onMount(store, () => { - restore() - if (opts.listen !== false) { - eventsEngine.addEventListener(name, listener, restore) - return () => { - eventsEngine.removeEventListener(name, listener, restore) - } - } - }) - - return store - } + return store; + }; } export let $viewingPatternData = sessionAtom( From 5dc2ecd741619b91e470daa03e1ba9b47181fb08 Mon Sep 17 00:00:00 2001 From: Kaspars Date: Tue, 7 May 2024 12:55:52 +0200 Subject: [PATCH 5/7] cleanup --- website/src/user_pattern_utils.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs index 08e1ffc6..a76cf0e5 100644 --- a/website/src/user_pattern_utils.mjs +++ b/website/src/user_pattern_utils.mjs @@ -1,4 +1,4 @@ -import { atom, onMount } from 'nanostores'; +import { atom } from 'nanostores'; import { persistentAtom } from '@nanostores/persistent'; import { useStore } from '@nanostores/react'; import { logger } from '@strudel/core'; From 02ea4d111629c8be199ac09a9ed259c4f4e17cda Mon Sep 17 00:00:00 2001 From: Kaspars Date: Tue, 7 May 2024 14:52:06 +0200 Subject: [PATCH 6/7] bug fix --- website/src/user_pattern_utils.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs index a76cf0e5..9ab23fab 100644 --- a/website/src/user_pattern_utils.mjs +++ b/website/src/user_pattern_utils.mjs @@ -30,7 +30,7 @@ if (typeof sessionStorage !== 'undefined') { let decode = opts.decode || identity; if (opts.listen) console.error('sessionAtom does not support "listen" option'); - let store = atom(sessionStorage[name] ? decode(sessionStorage[name]) : initial); + let store = atom(typeof sessionStorage[name] !== 'undefined' ? decode(sessionStorage[name]) : initial); store.listen((newValue) => { if (typeof newValue === 'undefined') { From 33ebf08e81a1373b4b56fecae8ec716f7f296e20 Mon Sep 17 00:00:00 2001 From: Kaspars Date: Tue, 7 May 2024 15:20:59 +0200 Subject: [PATCH 7/7] simplify more --- website/src/user_pattern_utils.mjs | 52 +++++++++++------------------- 1 file changed, 19 insertions(+), 33 deletions(-) diff --git a/website/src/user_pattern_utils.mjs b/website/src/user_pattern_utils.mjs index 9ab23fab..ab2b5f35 100644 --- a/website/src/user_pattern_utils.mjs +++ b/website/src/user_pattern_utils.mjs @@ -21,39 +21,25 @@ export const patternFilterName = { user: 'user', }; -export let sessionAtom = persistentAtom; +const sessionAtom = (name, initial = undefined) => { + const storage = typeof sessionStorage !== 'undefined' ? sessionStorage : {}; + const store = atom(typeof storage[name] !== 'undefined' ? storage[name] : initial); + store.listen((newValue) => { + if (typeof newValue === 'undefined') { + delete storage[name]; + } else { + storage[name] = newValue; + } + }); + return store; +}; -if (typeof sessionStorage !== 'undefined') { - const identity = (a) => a; - sessionAtom = (name, initial = undefined, opts = {}) => { - let encode = opts.encode || identity; - let decode = opts.decode || identity; - if (opts.listen) console.error('sessionAtom does not support "listen" option'); - - let store = atom(typeof sessionStorage[name] !== 'undefined' ? decode(sessionStorage[name]) : initial); - - store.listen((newValue) => { - if (typeof newValue === 'undefined') { - delete sessionStorage[name]; - } else { - sessionStorage[name] = encode(newValue); - } - }); - - return store; - }; -} - -export let $viewingPatternData = sessionAtom( - 'viewingPatternData', - { - id: '', - code: '', - collection: collectionName.user, - created_at: Date.now(), - }, - { listen: false }, -); +export let $viewingPatternData = sessionAtom('viewingPatternData', { + id: '', + code: '', + collection: collectionName.user, + created_at: Date.now(), +}); export const getViewingPatternData = () => { return parseJSON($viewingPatternData.get()); @@ -91,7 +77,7 @@ export async function loadDBPatterns() { } // reason: https://github.com/tidalcycles/strudel/issues/857 -const $activePattern = sessionAtom('activePattern', '', { listen: false }); +const $activePattern = sessionAtom('activePattern', ''); export function setActivePattern(key) { $activePattern.set(key);