thi-ng / umbrella

⛱ Broadly scoped ecosystem & mono-repository of 198 TypeScript projects (and ~175 examples) for general purpose, functional, data driven development
https://thi.ng
Apache License 2.0
3.31k stars 144 forks source link

[rdom] Uncaught (in promise) TypeError: can't access property "forEach", this.items is undefined #476

Closed bit-app-3000 closed 1 month ago

bit-app-3000 commented 1 month ago

after replace layout (page) with $list

Uncaught (in promise) TypeError: can't access property "forEach", this.items is undefined

debugger

 async unmount() {

>>  this.items.forEach(e => e.unmount()),

    this.$remove(),
    this.el = void 0,
    this.items = void 0,
    this.prev = void 0
  }
postspectacular commented 1 month ago

@bit-app-3000 could you please post a more complete (but minimal) example of your code? The only thing I can gather from the above is that unmount() seems to be called a second time, but that shouldn't happen at all... So without any more context, it's impossible to say what's going wrong here... thanks!

bit-app-3000 commented 1 month ago

ctx spa application with router


// Layout map Components collections

const toAttr = (t, a) => a || {}
const toTag = x => Components[x] || x
const Children = x => Array.isArray(x) ? Layout(x) : x
const Layout = ([t, a, ...b]) => [toTag(t), toAttr(t, a), ...b.map(Children)]

// App flow

const seed = {  layout: ['PreLoader'] }

const app$ = defAtom(seed)
const layout$ = fromView(app$, { path: 'layout', tx: Layout })

onload = () => $replace(layout$).mount(root)

// change Route  =  app$.resetIn('layout', ...pageLayout)

// components 

const Menu = x => {

 let { data$, id } = x

return $list(
    syncRAF(data$),
    'menu',
    {
      id,
      onanimationstart: start(x),
      onanimationcancel: cancel(x),
      onanimationend: end(x)
    },
    Item,
    (a, b) => a.label === b.label
  )
}

const slot = x => {

  const { value, id, status, data$, label } = x

  return [
    'drop-down',
    {
      onpointerdown: toggle(x),
    },
   label ,
    status === 'hidden'
      ? null
      : Menu(x)
  ]
}

const DropDown = seed => ['control', {}, $replace(useSlot(seed, slot))]

// Example Page Layout 

export const Dashboard = () =>
  [
    'main', {},
    [
      'header', {},
      ['h1', {}, 'Dashboard'],
      [
        'nav', {},
        ['a', { href: '/profile' }, 'Profile']
      ]
    ],
    [
      'section', {},
      DropDown({
        id: 'x1',
        status: 'hidden',
        data$
      })
    ]
  ]

I hope it helps

bit-app-3000 commented 1 month ago

thank you the problem was on my side

wrongly processed state with subscription

[rdom] is awesome!