refactor: Improve type safe of chrome storage (#182)

* refactor: Improve type safe of chrome storage

* Refactor

Author: int128

src/Bookmarks/model.ts

@@ -1,5 +1,8 @@
 export type BookmarkFolderID = string
 
+export const isBookmarkFolderIDArray = (value: unknown): value is readonly BookmarkFolderID[] =>
+  Array.isArray(value) && value.every((item) => typeof item === 'string')
+
 export type BookmarkFolder = {
   readonly id: BookmarkFolderID
   readonly depth: number

src/Bookmarks/repository.ts

@@ -1,4 +1,4 @@
-import { Bookmark, BookmarkFolder, BookmarkFolderID, FolderCollapse, Position } from './model'
+import { Bookmark, BookmarkFolder, BookmarkFolderID, FolderCollapse, Position, isBookmarkFolderIDArray } from './model'
 import { useEffect, useState } from 'react'
 import { useChromeStorage } from '../infrastructure/chromeStorage'
 
@@ -82,11 +82,7 @@ export const useFolderCollapse = (): readonly [FolderCollapse, (newSet: FolderCo
     areaName: 'sync',
     key: 'v3.collapsedBookmarkFolderIDs',
     initialValue: [],
-    assertType: (value: unknown) => {
-      if (!Array.isArray(value)) {
-        throw new Error('value is not array')
-      }
-    },
+    isType: isBookmarkFolderIDArray,
   })
   return [new FolderCollapse(ids), (newSet: FolderCollapse) => setIDs(newSet.serialize())]
 }

src/ShortcutKey/repository.ts

@@ -6,11 +6,7 @@ export const useShortcutMap = (): readonly [ShortcutMap, (newMap: ShortcutMap) =
     areaName: 'sync',
     key: 'v3.shortcutKeyMap',
     initialValue: [],
-    assertType: (value: unknown) => {
-      if (!Array.isArray(value)) {
-        throw new Error('value is not array')
-      }
-    },
+    isType: (value): value is [string, string][] => Array.isArray(value),
   })
   return [new ShortcutMap(entries), (newMap: ShortcutMap) => setEntries(newMap.serialize())]
 }

src/Themes/model.ts

@@ -1,5 +1,8 @@
 export const allColorSchemes = ['auto', 'light', 'dark'] as const
 export type ColorScheme = typeof allColorSchemes[number]
+export const isColorScheme = (value: unknown): value is ColorScheme =>
+  allColorSchemes.some((colorScheme) => value === colorScheme)
 
 export const allThemes = ['standard', 'solarized'] as const
 export type Theme = typeof allThemes[number]
+export const isTheme = (value: unknown): value is Theme => allThemes.some((theme) => value === theme)

src/Themes/repository.ts

@@ -1,26 +1,18 @@
-import { ColorScheme, Theme } from './model'
+import { ColorScheme, Theme, isColorScheme, isTheme } from './model'
 import { useChromeStorage } from '../infrastructure/chromeStorage'
 
 export const useSelectedTheme = (initialValue: Theme) =>
   useChromeStorage<Theme>({
     areaName: 'sync',
     key: 'v3.selectedTheme',
     initialValue,
-    assertType: (value: unknown) => {
-      if (typeof value !== 'string') {
-        throw new Error('value is not string')
-      }
-    },
+    isType: isTheme,
   })
 
 export const useSelectedColorScheme = (initialValue: ColorScheme) =>
   useChromeStorage<ColorScheme>({
     areaName: 'sync',
     key: 'v3.selectedColorScheme',
     initialValue,
-    assertType: (value: unknown) => {
-      if (typeof value !== 'string') {
-        throw new Error('value is not string')
-      }
-    },
+    isType: isColorScheme,
   })

src/Toggles/model.test.ts

@@ -0,0 +1,13 @@
+import { defaultToggles, isToggles } from './model'
+
+describe('isToggles', () => {
+  test('non-object is not Toggles', () => {
+    expect(isToggles(1)).toBe(false)
+  })
+  test('empty object is not Toggles', () => {
+    expect(isToggles({})).toBe(false)
+  })
+  test('defaultToggles is Toggles', () => {
+    expect(isToggles(defaultToggles)).toBe(true)
+  })
+})

src/Toggles/model.ts

@@ -1,9 +1,27 @@
+type PropertyValidator<T> = Record<keyof T, (prop: unknown) => boolean>
+
+const validateObject = <T extends object>(o: unknown, validator: PropertyValidator<T>): o is T =>
+  typeof o === 'object' &&
+  o !== null &&
+  // object has all keys of T
+  Object.keys(validator).every((key) => Object.hasOwn(o, key)) &&
+  // all properties of object are valid
+  Object.entries(o).every(([key, prop]) => key in validator && validator[key as keyof T](prop))
+
 export type Toggles = {
   readonly topSites: boolean
   readonly bookmarks: boolean
   readonly indent: boolean
 }
 
+const togglesValidator: PropertyValidator<Toggles> = {
+  topSites: (prop) => typeof prop === 'boolean',
+  bookmarks: (prop) => typeof prop === 'boolean',
+  indent: (prop) => typeof prop === 'boolean',
+}
+
+export const isToggles = (o: unknown): o is Toggles => validateObject(o, togglesValidator)
+
 export const defaultToggles: Toggles = {
   bookmarks: true,
   topSites: true,

src/Toggles/repository.ts

@@ -1,14 +1,10 @@
-import { Toggles, defaultToggles } from './model'
+import { Toggles, defaultToggles, isToggles } from './model'
 import { useChromeStorage } from '../infrastructure/chromeStorage'
 
 export const useToggles = () =>
   useChromeStorage<Toggles>({
     areaName: 'sync',
     key: 'v3.toggles',
     initialValue: defaultToggles,
-    assertType: (value: unknown) => {
-      if (typeof value !== 'object' || value === null) {
-        throw new Error('value is not object')
-      }
-    },
+    isType: isToggles,
   })

src/infrastructure/chromeStorage.ts

@@ -4,7 +4,7 @@ type Spec<T> = {
   areaName: chrome.storage.AreaName
   key: string
   initialValue: T
-  assertType: (value: unknown) => asserts value is T
+  isType: (value: unknown) => value is T
 }
 
 export const useChromeStorage = <T>(spec: Spec<T>): readonly [T, (newValue: T) => void] => {
@@ -39,8 +39,11 @@ const initialLoad = <T>(spec: Spec<T>, setStoredValue: (newValue: T) => void) =>
         setStoredValue(spec.initialValue)
         return
       }
-      spec.assertType(value)
-      setStoredValue(value)
+      if (spec.isType(value)) {
+        setStoredValue(value)
+        return
+      }
+      console.warn(`unknown type of storage.${spec.areaName}.${spec.key}`, value)
     })
     .catch((e) => console.error(e))
 }
@@ -56,8 +59,11 @@ const subscribeChange = <T>(spec: Spec<T>, setStoredValue: (newValue: T) => void
       setStoredValue(spec.initialValue)
       return
     }
-    spec.assertType(newValue)
-    setStoredValue(newValue)
+    if (spec.isType(newValue)) {
+      setStoredValue(newValue)
+      return
+    }
+    console.warn(`unknown type of storage.${spec.areaName}.${spec.key}`, newValue)
   }
   area.onChanged.addListener(listener)
   return () => area.onChanged.removeListener(listener)