D0Z Posts - Answer Overflow

D0Z

•Created by D0Z on 5/7/2024 in #support

Issues with peer dependencies found

Hello, I'm trying tu use SolidStart with Vite 5 but I'm encountering the following error

 WARN  Issues with peer dependencies found
apps/d0z
└─┬ @solidjs/start 1.0.0-rc.1
  └─┬ vite-plugin-inspect 0.7.33
    └── ✕ unmet peer vite@"^3.1.0 || ^4.0.0": found 5.2.11

 WARN  Issues with peer dependencies found
apps/d0z
└─┬ @solidjs/start 1.0.0-rc.1
  └─┬ vite-plugin-inspect 0.7.33
    └── ✕ unmet peer vite@"^3.1.0 || ^4.0.0": found 5.2.11

I'm using [email protected]

1 replies

SSolidJS

•Created by D0Z on 7/16/2023 in #support

Nested ErrorBoundary not used

Heya, I'm trying to wrap my head around handling errors with createResource and SolidJS router... The issue iss that I have two ErrorBoundaries and only the higher one catch the error instead of the one close to the function emitting the error. So I have the following configuration: App (Containing the Higher ErrorBoundary)

const App = (): JSX.Element => {
  return (
    <Suspense>
      <I18nProvider>
        <ProjectProvider>
          <Router>
            <ErrorBoundary fallback={(e) => <>{e.message}</>}>
              <Routes>
                <Route path="/" component={MainLayout}>
                  <Route path="/" component={Home} />
                  <Route
                    path="/projects"
                    data={useFindAllProject}
                    component={ProjectsLayout}
                  >
                    <Route path="/" component={Projects} />
                    <Route path="/:projectId" component={Project} />
                  </Route>
                  <Route path="/*" component={E404} />
                </Route>
              </Routes>
            </ErrorBoundary>
          </Router>
        </ProjectProvider>
      </I18nProvider>
    </Suspense>
  )
}

const App = (): JSX.Element => {
  return (
    <Suspense>
      <I18nProvider>
        <ProjectProvider>
          <Router>
            <ErrorBoundary fallback={(e) => <>{e.message}</>}>
              <Routes>
                <Route path="/" component={MainLayout}>
                  <Route path="/" component={Home} />
                  <Route
                    path="/projects"
                    data={useFindAllProject}
                    component={ProjectsLayout}
                  >
                    <Route path="/" component={Projects} />
                    <Route path="/:projectId" component={Project} />
                  </Route>
                  <Route path="/*" component={E404} />
                </Route>
              </Routes>
            </ErrorBoundary>
          </Router>
        </ProjectProvider>
      </I18nProvider>
    </Suspense>
  )
}

MainLayout (containing the nested ErrorBoundary)

const MainLayout = () => {
  return (
    <div class={styles.main_layout}>
      <Header />
      <div class={styles.content}>
        <ErrorBoundary fallback={(e) => <>{e.message}</>}>
          <Outlet />
        </ErrorBoundary>
      </div>
      <Footer />
    </div>
  )
}

const MainLayout = () => {
  return (
    <div class={styles.main_layout}>
      <Header />
      <div class={styles.content}>
        <ErrorBoundary fallback={(e) => <>{e.message}</>}>
          <Outlet />
        </ErrorBoundary>
      </div>
      <Footer />
    </div>
  )
}

useFindAllProject (The source of the error for example a 404 not found Error)

const useFindAllProject = () => {
  const { setAllProject } = useProjectActions()

  const [projects] = createResource(async () => {
    const url =
      (window._env.API_URL || 'http://localhost/4000/v0') + '/projects'

    const res = await axios.get(url)

    setAllProject(res.data)
    return res.data
  })
  return projects
}

const useFindAllProject = () => {
  const { setAllProject } = useProjectActions()

  const [projects] = createResource(async () => {
    const url =
      (window._env.API_URL || 'http://localhost/4000/v0') + '/projects'

    const res = await axios.get(url)

    setAllProject(res.data)
    return res.data
  })
  return projects
}

12 replies

SSolidJS

•Created by D0Z on 1/24/2023 in #support

Argument of type 'string' is not assignable to parameter of type 'never'.

12 replies

SSolidJS

•Created by D0Z on 1/17/2023 in #support

updating nested object not triggering update

Heya I'm fairly new to SolidJS (You might have already seen some of my previous post of me strugglin' :D) I'm trying to update the state of a nested object in a store but it doesn't seem to trigger an update on my component. here is the method I use to update (it's declared in a context provider) I'm not sure if I'm using produce well

const setOneFeature: ContextState[1]['setOneFeature'] = async (feature) => {
    const layerIndex = state.layers.findIndex(
      (item) => item && item.id === feature.layer
    )
    if (layerIndex === -1) {
      throw new Error('layer is undefined 💩')
    }
    setState(
      'layers',
      layerIndex,
      'features',
      produce((features) => {
        if (!features) {
          features = [feature]
        } else {
          const prevFeature = features.find((item) => item.id === feature.id)
          if (prevFeature) {
            _.merge(prevFeature, feature)
          } else {
            features.push(feature)
          }
        }
      })
    )
  }

const setOneFeature: ContextState[1]['setOneFeature'] = async (feature) => {
    const layerIndex = state.layers.findIndex(
      (item) => item && item.id === feature.layer
    )
    if (layerIndex === -1) {
      throw new Error('layer is undefined 💩')
    }
    setState(
      'layers',
      layerIndex,
      'features',
      produce((features) => {
        if (!features) {
          features = [feature]
        } else {
          const prevFeature = features.find((item) => item.id === feature.id)
          if (prevFeature) {
            _.merge(prevFeature, feature)
          } else {
            features.push(feature)
          }
        }
      })
    )
  }

19 replies

SSolidJS

•Created by D0Z on 1/6/2023 in #support

Argument of type 'StoreState' is not assignable to parameter of type 'PartStoreState, layers'

Am I dumb ? I think so... the error occur in setOne method declaration

/**
 * Store type
 */
type StoreState = {
  readonly layers: Layer[]
}

/**
 * Context type
 */
type ContextState = [
  state: StoreState,
  actions: {
    /**
     * Set all layers
     * @param layers
     */
    setAll?: (layers: Layer[]) => Promise<void>
    /**
     * Set one layer
     * @param layer
     */
    setOne?: (layer: Layer) => Promise<void>
    /**
     * Remove a layer
     * @param id - the id of the layer to remove
     */
    remove?: (id: string) => Promise<void>
  }
]

/**
 * Initial state of the store
 */
const initialState = {
  layers: []
}

/**
 * Context
 */
const LayerContext = createContext<ContextState>([initialState, {}])

/**
 * Provider
 */
export const LayerProvider: ParentComponent = (props) => {
  const [state, setState] = createStore<StoreState>(initialState)

  const setAll: ContextState[1]['setAll'] = async (layers) => {
    setState('layers', layers)
  }

  const setOne: ContextState[1]['setOne'] = async (layer) => {
    setState(
      (state) => state.id === layer.id,
      produce((layers) => layer)
    )
    console.error('Not Implemented')
  }

  const remove: ContextState[1]['remove'] = async () => {
    setState('layers', [])
  }

  return (
    <LayerContext.Provider value={[state, { setAll, setOne, remove }]}>
      {props.children}
    </LayerContext.Provider>
  )
}

const useLayer = () => useContext(LayerContext)

export default useLayer

/**
 * Store type
 */
type StoreState = {
  readonly layers: Layer[]
}

/**
 * Context type
 */
type ContextState = [
  state: StoreState,
  actions: {
    /**
     * Set all layers
     * @param layers
     */
    setAll?: (layers: Layer[]) => Promise<void>
    /**
     * Set one layer
     * @param layer
     */
    setOne?: (layer: Layer) => Promise<void>
    /**
     * Remove a layer
     * @param id - the id of the layer to remove
     */
    remove?: (id: string) => Promise<void>
  }
]

/**
 * Initial state of the store
 */
const initialState = {
  layers: []
}

/**
 * Context
 */
const LayerContext = createContext<ContextState>([initialState, {}])

/**
 * Provider
 */
export const LayerProvider: ParentComponent = (props) => {
  const [state, setState] = createStore<StoreState>(initialState)

  const setAll: ContextState[1]['setAll'] = async (layers) => {
    setState('layers', layers)
  }

  const setOne: ContextState[1]['setOne'] = async (layer) => {
    setState(
      (state) => state.id === layer.id,
      produce((layers) => layer)
    )
    console.error('Not Implemented')
  }

  const remove: ContextState[1]['remove'] = async () => {
    setState('layers', [])
  }

  return (
    <LayerContext.Provider value={[state, { setAll, setOne, remove }]}>
      {props.children}
    </LayerContext.Provider>
  )
}

const useLayer = () => useContext(LayerContext)

export default useLayer

6 replies

SSolidJS

•Created by D0Z on 12/19/2022 in #support

Type 'StoreState | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.

I'm trying to setup a simple context provider plz help 😦

import { createContext, ParentComponent, useContext } from 'solid-js'
import { createStore } from 'solid-js/store'

import { io, ManagerOptions, Socket, SocketOptions } from 'socket.io-client'

/**
 * Store type
 */
type StoreState = [
  { socket: boolean | Socket },
  {
    set?: (
      url: string,
      options: Partial<ManagerOptions & SocketOptions>
    ) => void
  }
]

/**
 * Initial state of the store
 */
const initialState = {
  socket: false
}

/**
 * Context
 */
const SocketIoContext = createContext<StoreState>()

/**
 * Socket provider
 */
export const SocketIoProvider: ParentComponent = (props) => {
  const [state, setState] = createStore<StoreState[0]>(initialState)

  const store: StoreState = [
    state,
    {
      set: (
        url = window._env ? window._env.SOCKET_URL : 'http://localhost/4000',
        options: Partial<ManagerOptions & SocketOptions>
      ) => {
        setState('socket', io(url, options))
      }
    }
  ]

  return (
    <SocketIoContext.Provider value={store}>
      {props.children}
    </SocketIoContext.Provider>
  )
}

const useSocketIo = () => useContext(SocketIoContext)

export default useSocketIo

import { createContext, ParentComponent, useContext } from 'solid-js'
import { createStore } from 'solid-js/store'

import { io, ManagerOptions, Socket, SocketOptions } from 'socket.io-client'

/**
 * Store type
 */
type StoreState = [
  { socket: boolean | Socket },
  {
    set?: (
      url: string,
      options: Partial<ManagerOptions & SocketOptions>
    ) => void
  }
]

/**
 * Initial state of the store
 */
const initialState = {
  socket: false
}

/**
 * Context
 */
const SocketIoContext = createContext<StoreState>()

/**
 * Socket provider
 */
export const SocketIoProvider: ParentComponent = (props) => {
  const [state, setState] = createStore<StoreState[0]>(initialState)

  const store: StoreState = [
    state,
    {
      set: (
        url = window._env ? window._env.SOCKET_URL : 'http://localhost/4000',
        options: Partial<ManagerOptions & SocketOptions>
      ) => {
        setState('socket', io(url, options))
      }
    }
  ]

  return (
    <SocketIoContext.Provider value={store}>
      {props.children}
    </SocketIoContext.Provider>
  )
}

const useSocketIo = () => useContext(SocketIoContext)

export default useSocketIo

and use it in a component

const Space = () => {
  const [socket, { set }] = useSocketIo()
  return <>{socket}BRUH</>
}

const Space = () => {
  const [socket, { set }] = useSocketIo()
  return <>{socket}BRUH</>
}

but const [socket, { set }] = useSocketIo() gives me an error

40 replies

Gaming

Programming