Closed Qsppl closed 11 months ago
Here you have fixed example from the codepen:
import { define, html, Model, store } from "https://esm.sh/hybrids@8.2.5"
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}
`)}
`}
`,
})
The store guards simplifies (but they might work differently than in other systems, so this at first can confuse) access to the model:
store.ready()
is only truthy when the model is resolved (sync or promise) and has no errorsstore.error()
is only truthy when the model is resolved (sync or promise) and get/set storage functions throw an errorstore.pending()
is only truthy when the model resolves at the moment - it can be already ready
or not ready
- it depends if you fetch model for the first time, or later (for example cache expires, or you invalidate it by store.clear()
function)If you want to display some information when the model is resolved (regardless if it is fine or not) you must use both guards: store.ready() || store.error()
. However, then you have to protect access to model properties in nested code, as they might not be accessible.
I made as less as possible changes to your code to make it work, but guards could be set a little bit differently for the clarity:
// comment map fn html
${store.error(comment) && html`comment error: ${store.error(comment)}`}
${store.ready(comment) && html`comment body: ${comment.body}`}
thank you, now I understand.
Example https://codepen.io/qsppl/pen/PoVyQvK?editors=0010
Defender works if you use synchronous storage.
I can't find in the documentation why this happens.
https://hybrids.js.org/#/store/usage?id=storeerror
When I return an error as in the documentation, the component stops working.
And the render function returns nothing.