SolidJS•12mo ago

Why is storageSignal possibly null?

I am having trouble understanding why TypeScript thinks that this storageSignal theme can be null:

const darkMode = document.documentElement.classList.contains("dark") ? "dark" : "light"
  
const [theme, setTheme] = createStorageSignal<"light" | "dark">("theme", darkMode, {
    api: localStorage,
  })

const darkMode = document.documentElement.classList.contains("dark") ? "dark" : "light"
  
const [theme, setTheme] = createStorageSignal<"light" | "dark">("theme", darkMode, {
    api: localStorage,
  })

I am setting the initial value to a ternary and explicitly typing the signal, but alas, TS says that theme can be "dark" | "light" | null. What am I missing here?

11 Replies

jmp•12mo ago

looks like it's part of the type signature of createStorageSignal.

export function createStorageSignal<T, O = {}>(
  key: string,
  initialValue?: T,
  props?: StorageSignalProps<T, Storage | StorageWithOptions<O>, O>,
): [accessor: Accessor<T | null>, setter: Setter<T | null>, refetch: () => void]

export function createStorageSignal<T, O = {}>(
  key: string,
  initialValue?: T,
  props?: StorageSignalProps<T, Storage | StorageWithOptions<O>, O>,
): [accessor: Accessor<T | null>, setter: Setter<T | null>, refetch: () => void]

It seems like the result can be null if the api doesn't exist:

api: an array of or a single localStorage-like storage API; default will be localStorage if it exists; an empty array or no API will not throw an error, but only ever get null and not actually persist anything

SilentRhetoric•12mo ago

Thank you! I guess the pop-up tooltip in VSCode didn’t show me the same view because I was trying to override the Accessor to only return T and never null I ended up making an adapter function to handle the null

Alex Lohr•12mo ago

The current version is closer to Storage than to solid. I intend to deprecate the whole API and instead add a makePersisted primitive that will persist signals and stores alike.

Alex Lohr•12mo ago

https://github.com/solidjs-community/solid-primitives/pull/458

GitHub

Storage rewrite by atk · Pull Request #458 · solidjs-community/soli...

The storage package was needlessly complex, large and led to frequent misunderstandings from developers who expected it to work like a store. I have learned from my mistakes and deprecated the old ...

Alex Lohr•12mo ago

Update: just merged it. I really hope that simplifies things.

SilentRhetoric•12mo ago

That appears to make things much simpler! Will this be released or do I need to pull it down another way? (If so, how?)

Alex Lohr•12mo ago

It should be released today. Okay, just triggered the release. It should be on npm in the next minutes.

Alex Lohr•12mo ago

At least once this action is complete: https://github.com/solidjs-community/solid-primitives/actions/runs/5445261864

GitHub

Version Packages (#467) · solidjs-community/solid-primitives@1c1f16e

A library of high-quality primitives that extend SolidJS reactivity. - Version Packages (#467) · solidjs-community/solid-primitives@1c1f16e

SilentRhetoric•12mo ago

@lexlohr This is brilliant... so much clearer and more intuitive

  const darkMode = document.documentElement.classList.contains("dark") ? "dark" : "light"
  const [theme, setTheme] = makePersisted(createSignal<"light" | "dark">(darkMode), {
    name: "theme",
  })

  const darkMode = document.documentElement.classList.contains("dark") ? "dark" : "light"
  const [theme, setTheme] = makePersisted(createSignal<"light" | "dark">(darkMode), {
    name: "theme",
  })

Alex Lohr•12mo ago

Thanks. I'm glad you like it. It's the result of a hard lesson learned.

SilentRhetoric•12mo ago

and I could just type the signal to avoid any nulls

Gaming

Programming

Why is storageSignal possibly null?