store.error() Guard does not work with enumerable Models loaded from asynchronous storage about hybrids HOT 2 CLOSED

import { define, html, Model, store } from "https://esm.sh/[email protected]"

const CommentStore = {
  id: true,
  body: '',
  [store.connect]: (id) => fetch(`https://jsonplaceholder.typicode.com/comments/${id}`).then(res => {
    if (!res.ok) throw Error(res.statusText);
    return res.json();
  }),
}

const usersSource = [{
  id: 0,
  name: 'lorem ipsum gamma',
  comments: [-1, 0, 1, 2],
}]

const UserStore = {
  id: true,
  name: '',
  comments: [CommentStore],
  [store.connect]: (id) => usersSource.find(item => item.id === Number(id)),
}

define({
  tag: 'comments-list',
  user: store(UserStore),
  render: ({ user }) => html`
    ${store.ready(user) && html`
    User ID ${user.id} ${user.name}
    <br>Comments:
    ${user.comments.map(comment => (store.ready(comment) || store.error(comment)) && html`
    <br><br>
    Comment ID ${comment.id} ${store.error(comment) && '[error]' || '[ok]'}<br>
    ${store.ready(comment) && comment.body}
    `)}
    `}
  `,
})

// comment map fn html
${store.error(comment) && html`comment error: ${store.error(comment)}`}
${store.ready(comment) && html`comment body: ${comment.body}`}