andsala / svelte-persistent-store Goto Github PK

Hi,

Since the release of 0.1.4 it seems that this component is not compatible with SSR/Universal rendering (with sapper) any longer.
A reference to window.localStorage is generated in the server.js causing an error as the window object doesn't exist server side.

Rolling back to 0.1.3 fix the issue.

Trying to import with:
import { writable } from 'svelte-persistent-store/local';
causes error:
Module not found: Error: Can't resolve 'svelte-persistent-store/local'

Looking in node_modules the code is inside "svelte-persistent-store/dist" directory
imported correctly with:
import { writable } from 'svelte-persistent-store/dist/local';

Hi.

Thanks for this great project!

So, when use it the project in a Sapper application, the builder emits the following warning:

Could not find a declaration file for module 'svelte-persistent-store'. '~/node_modules/svelte-persistent-store/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/svelte-persistent-store` if it exists or add a new declaration (.d.ts) file containing `declare module 'svelte-persistent-store';`ts(7016)

So, it would be nice to provide an index.d.ts for the svelte-persistent-store project.

cheers

I installed the svelte-persistent-store library, and got error while importing writable from svelte-persistent-store/dist/local

theme.svelte

<script lang="ts" context="module">
  import { setContext } from 'svelte'
  import { writable as persist } from 'svelte-persistent-store/dist/local'
  import type { Writable } from 'svelte/store'

  export type Theme = 'light' | 'dark'
  export type ThemeContext = Writable<Theme>

  const theme = 'light'

  setContext('theme', persist('theme', theme))
</script>

<slot />

Problem

When compiling my Sapper application with sapper dev, I get the following error.

✗ server
Could not find a declaration file for module 'svelte-persistent-store'. 'C:/Users/Ethan/Documents/GitHub/multicade.online/node_modules/svelte-persistent-store/dist/index.d.ts' implicitly has an 'any' type.
  Try `npm install @types/svelte-persistent-store` if it exists or add a new declaration (.d.ts) file containing `declare module 'svelte-persistent-store';`
d a new declaration (.d.ts) file containing `declare module 'svelte-persistent-store';`

1 import { session } from "svelte-persistent-store";
                          ~~~~~~~~~~~~~~~~~~~~~~~~~

✗ client
'session' is not exported by node_modules\svelte-persistent-store\dist\index.mjs, imported by src\stores\user.ts
1: import { session } from "svelte-persistent-store";

Suggested Solution

When publishing the package to NPM, make sure that the type declarations file is present.

Is it possible to use both session and local storage together?

Greets,

I'd like to make a PR or just get this module updated for better exports in package.json. This will remove several warnings from Node and Svelte. I can make a PR, but didn't want it to be sitting there for a while. Of course this is an easy update too for the maintainer.

Regards...

  "exports": {
    "./*": "./dist/*",
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./local": {
      "import": "./dist/local.mjs",
      "require": "./dist/local.js"
    },
    "./session": {
      "import": "./dist/session.mjs",
      "require": "./dist/session.js"
    },
    "./package.json": "./package.json"
  },

There's a package on github called svelte-writable-derived which allows one to make a derived store to which you can also write.

I would love to have both of these packages combined. For now I'm doing it myself, but it would be nice if this package would just include it.

I wonder if you could shed some light a question I have.

The common use case I see for persistence is writable stores ... so they will "pick up where you last left off" on an app restart, etc.

However I fail to see the need for a persistent derived store. Because a derived store is by definition a filter (of sorts) layered on other dependent store(s), it seems to me that you would want your persistence to come from the dependent store(s) rather than the derived store itself. Can you provide a use case for a persistent derived store?

I suppose I have a similar question on readable stores, although it may make more since to glean an initial readable persistent value.

Thanks for your time and your product.

Hey, sorry to bear bad news again - I think something went wrong with the build for release 0.1.5. For example, this is dist/chunk.PHCGGE36.js (npm):

"use strict";Object.defineProperty(exports, "__esModule", {value: true});

var _chunkFDWZTHUBjs = require('./chunk.FDWZTHUB.js');

// src/local.ts
const g = _chunkFDWZTHUBjs.generator.call(void 0, window.localStorage);
const readable = g.readable;
const writable = g.writable;
const derived = g.derived;
const get = g.get;






exports.readable = readable; exports.writable = writable; exports.derived = derived; exports.get = get;

The recent SSR fix is not in there, and the hashes in the file names suggest that this is the same code as 0.1.4 (npm).

Could you do a new release for this?

I'm getting this error using snowpack

Dependency Install Error: Package "svelte-persistent-store/dist/local" not found. Have you installed it?

Package was installed correctly with npm.
Any ideas?

In sveltejs/svelte#6750, there is a proposed change to the StartStopNotifier type of Svelte stores, which will be a breaking change for anyone creating custom stores. See the PR for details, but the short version is that if that PR is accepted and merged into Svelte, you'll need to add an update parameter to the StartStopNotifier callback type, as follows:

diff --git a/src/runtime/store/index.ts b/src/runtime/store/index.ts
index e947fa074..afd4ccabd 100644
--- a/src/runtime/store/index.ts
+++ b/src/runtime/store/index.ts
@@ -13,7 +13,7 @@ export type Updater<T> = (value: T) => T;
 type Invalidator<T> = (value?: T) => void;
 
 /** Start and stop notification callbacks. */
-export type StartStopNotifier<T> = (set: Subscriber<T>) => Unsubscriber | void;
+export type StartStopNotifier<T> = (set: Subscriber<T>, update: (fn: Updater<T>) => void) => Unsubscriber | void;
 
 /** Readable interface for subscribing. */
 export interface Readable<T> {

In your repo, the affected code appears to be in src/generator.ts.

If you have any comments about the proposed breaking change, please come leave a comment on the Svelte PR to let me know whether it would make your life easier or harder.

It seems that null does not survive a roundtrip, probably due to not using x: string | null.

See here: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

This makes sense right? Since the store is synced with localStorage, it should be bound both ways right? I'd suggest to implement this both for the readable and for the writable store.

I'd like to save data in local storage unless that data is NaN or undefined. Is there a way to do that?

I realise this might be a Svelte rather than a svelte-persistent-store question

Upgrading a some dependencies in a svelte app where this persistent store was working. I haven't pinned down the precise culprit, my hunch/guess is rollup-plugin-node-resolve

  "devDependencies": {
    "cypress": "^6.2.0",
    "npm-run-all": "^4.1.5", -> (removed)
    "rollup": "^2.23.1" -> "rollup": "^2.35.1",
    "rollup-plugin-commonjs": "^10.1.0", -> "@rollup/plugin-commonjs": "^17.0.0",
    "rollup-plugin-node-resolve": "^5.2.0", -> "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^1.3.0", -> "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^5.2.3", -> "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^6.1.0", -> "rollup-plugin-terser": "^7.0.0",
    "sirv-cli": "^1.0.8", -> "sirv-cli": "^1.0.10",
    "svelte": "^3.29.4" -> "svelte": "^3.31.0"
  },

but for some reason I was getting an error at startup.

bundles src/main.ts → public/build/bundle.js...
[!] Error: Could not load /path/to/project/node_modules/svelte-persistent-store/dist/dist/local (imported by src/store.js): ENOENT: no such file or directory, open '/path/to/project/node_modules/svelte-persistent-store/dist/dist/local'

I was able to solve by changing my import from

import { writable } from 'svelte-persistent-store/dist/local';

to

import { writable } from 'svelte-persistent-store/local.js';