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
jmp13mo 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
SilentRhetoric13mo 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
Alex Lohr13mo 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
Alex Lohr13mo ago
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
Alex Lohr13mo ago
Update: just merged it. I really hope that simplifies things.
SilentRhetoric
SilentRhetoric13mo 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
Alex Lohr13mo ago
It should be released today. Okay, just triggered the release. It should be on npm in the next minutes.
Alex Lohr
Alex Lohr13mo ago
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
SilentRhetoric13mo 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
Alex Lohr13mo ago
Thanks. I'm glad you like it. It's the result of a hard lesson learned.
SilentRhetoric
SilentRhetoric13mo ago
and I could just type the signal to avoid any nulls
Want results from more Discord servers?
Add your server
More Posts