subframe7536 Posts - Answer Overflow

subframe7536

Explore posts from servers

•Created by subframe7536 on 9/25/2023 in #support

how to better understand `createDeferred`?

The doc says idle, what is the difference between requestIdleCallback and this? Should it be considerred as reactive version of requestIdleCallback? Moreover, after searching across gh and discord channels, there is few examples to show how to use createDeferred correctly. Is there any best-practice or learning resource about it?

2 replies

SSolidJS

•Created by subframe7536 on 9/1/2023 in #support

Recommended way to track the setter of a signal?

Currently, my solution involves wrapping the setter with a function. Playground: https://playground.solidjs.com/anonymous/cae5fd4e-3505-42f3-84a2-af62cc5b2d91 I am aware of createEffect(on(...)), but it may be excessive to create multiple effects solely for target signals. With that in mind, what would be the recommended method in this case?

4 replies

SSolidJS

•Created by subframe7536 on 4/30/2023 in #support

how to`createStore` and using `createEffect` to persist without warning

I want to create a function to persist the store to the localstorage, everything works, but it warns that computations created outside a createRoot or render will never be disposed. I have tried to move createEffect outside onMounted, but it even warn twice. Additionally, moving onMounted inside provider makes persist break. No help using ChatGPT🥲. Does anyone know how to solve it? here is my code

export function persistStore< T extends object = {}, R extends ActionReturn = {}>(
  name: string,
  options: StoreOption<T, R>,
): [provider: ParentComponent, useStore: () => BaseStore<T, R>] {
  const { action, state, persist: persistOption } = options
  const initalState = typeof state === 'function' ? state() : state
  const [store, setStore] = createStore<T>(initalState, { name })

  const ctxData = { store, ...action(setStore) }
  const ctx = createContext(ctxData, { name: `ctx_${name}` })
  const option = normalizePersistOption(name, persistOption)
  onMount(() => {
    if (!option) {
      return
    }
    const { debug, key, serializer: { deserialize, serialize }, storage } = option
    const stored = storage.getItem(key)
    try {
      if (stored) {
        setStore(deserialize(stored))
        debug && console.log(`[$store - ${key}]: read from persisted, value: ${stored}`)
      } else {
        storage.setItem(option.key, serialize(store))
        debug && console.log(`[$store - ${key}]: no persisted data, initialize`)
      }
    } catch (e) {
      debug && console.error(`[$store - ${key}]: ${e}`)
    }
    createEffect(on(() => deepTrack(store), () => {
      debug && console.log(`[$store - ${key}]: update to ${JSON.stringify(store)}`)
      storage.setItem(option.key, serialize(unwrap(store)))
    }))
  })
  return [
    (props: ParentProps): JSX.Element =>
      createComponent(ctx.Provider, {
        value: ctxData,
        get children() {
          return props.children
        },
      }),
    () => useContext(ctx),
  ]
}

export function persistStore< T extends object = {}, R extends ActionReturn = {}>(
  name: string,
  options: StoreOption<T, R>,
): [provider: ParentComponent, useStore: () => BaseStore<T, R>] {
  const { action, state, persist: persistOption } = options
  const initalState = typeof state === 'function' ? state() : state
  const [store, setStore] = createStore<T>(initalState, { name })

  const ctxData = { store, ...action(setStore) }
  const ctx = createContext(ctxData, { name: `ctx_${name}` })
  const option = normalizePersistOption(name, persistOption)
  onMount(() => {
    if (!option) {
      return
    }
    const { debug, key, serializer: { deserialize, serialize }, storage } = option
    const stored = storage.getItem(key)
    try {
      if (stored) {
        setStore(deserialize(stored))
        debug && console.log(`[$store - ${key}]: read from persisted, value: ${stored}`)
      } else {
        storage.setItem(option.key, serialize(store))
        debug && console.log(`[$store - ${key}]: no persisted data, initialize`)
      }
    } catch (e) {
      debug && console.error(`[$store - ${key}]: ${e}`)
    }
    createEffect(on(() => deepTrack(store), () => {
      debug && console.log(`[$store - ${key}]: update to ${JSON.stringify(store)}`)
      storage.setItem(option.key, serialize(unwrap(store)))
    }))
  })
  return [
    (props: ParentProps): JSX.Element =>
      createComponent(ctx.Provider, {
        value: ctxData,
        get children() {
          return props.children
        },
      }),
    () => useContext(ctx),
  ]
}

2 replies

SSolidJS

•Created by subframe7536 on 4/25/2023 in #support

TypeError when using `createResource` in vitest

I'm new to Solidjs, and I'm learing how to test functions in vitest, it cause the error TypeError: Cannot read properties of undefined (reading 'id'), does anyone know how to solve it? there is no solution when asking ChatGPT🥲

describe('test createResource', () => {
  test('res', async () => {
    const [num, setNum] = createSignal(1)
    const fetchUser = async (id: number) => id + 1
    const [foo, { mutate, refetch }] = createResource(num, fetchUser)
    console.log(foo.loading)
  })
})

describe('test createResource', () => {
  test('res', async () => {
    const [num, setNum] = createSignal(1)
    const fetchUser = async (id: number) => id + 1
    const [foo, { mutate, refetch }] = createResource(num, fetchUser)
    console.log(foo.loading)
  })
})

my packages

"devDependencies": {
    "@solidjs/testing-library": "^0.7.0",
    "happy-dom": "^9.9.2",
    "solid-js": "^1.7.3",
    "typescript": "5.0.4",
    "vite": "^4.3.1",
    "vitest": "^0.30.1"
  },

"devDependencies": {
    "@solidjs/testing-library": "^0.7.0",
    "happy-dom": "^9.9.2",
    "solid-js": "^1.7.3",
    "typescript": "5.0.4",
    "vite": "^4.3.1",
    "vitest": "^0.30.1"
  },

14 replies

Gaming

Programming