S
SolidJS•3y ago
foxpro 🐍

Updating rendered element in HMR?

I'm still working on stack routing and what I need is different transitions between different views. The problem is: if I use rendered element inside <For> loop: 
<AdvancedRouterContext.Provider value={ctx}>
   <For each={ctx.store.graph}>{item => item.element}</For>
</AdvancedRouterContext.Provider>
<AdvancedRouterContext.Provider value={ctx}>
   <For each={ctx.store.graph}>{item => item.element}</For>
</AdvancedRouterContext.Provider>
It never updates element if HMR occurs. This is how I render components to elements: 
 async function onMatch(
  def: Placeholder,
  match: ReturnType<ReturnType<typeof useMatch>>,
  prevMatch: typeof match
 ) {
  // <...>
  const els = children(() => (
     <AdvancedRouterContext.Provider value={{ ...ctx, match }}>
        <def.component />
     </AdvancedRouterContext.Provider>
  ))
  const promise = new Promise<HTMLElement>(res => {
     createComputed(() => {
        const el = els.toArray()[0]
        if (el === undefined) return
        res(el as HTMLElement)
     })
  })
  const element = await promise
  view = {
     stackable: def.stackable,
     next: null,
     parent: store.top,
     path: match.path,
     element
  }
  batch(() => {
     store.graph.push(view as View)
     store.top = view
  })
  // <...>
 }
 async function onMatch(
  def: Placeholder,
  match: ReturnType<ReturnType<typeof useMatch>>,
  prevMatch: typeof match
 ) {
  // <...>
  const els = children(() => (
     <AdvancedRouterContext.Provider value={{ ...ctx, match }}>
        <def.component />
     </AdvancedRouterContext.Provider>
  ))
  const promise = new Promise<HTMLElement>(res => {
     createComputed(() => {
        const el = els.toArray()[0]
        if (el === undefined) return
        res(el as HTMLElement)
     })
  })
  const element = await promise
  view = {
     stackable: def.stackable,
     next: null,
     parent: store.top,
     path: match.path,
     element
  }
  batch(() => {
     store.graph.push(view as View)
     store.top = view
  })
  // <...>
 }
Is it possible to handle HMR update and re-render elements? I kinda solved it by adding component inside view and rendering it in <For> and then catching via <Ref> and promise, but this solution adds complexity only for sake of HMR.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?