4 ms·
const EditableList = ui.component({ render: ({ props }) => { return ` <ul> ${each(Object.keys(props).filter((p) => p.startsW
by spankalee 3y ago
const EditableList = ui.component({
render: ({ props }) => {
return `
<ul>
${each(Object.keys(props).filter((p) => p.startsWith('list-item-')), (p) =>
`<li>${props[p]}</li>`
)}
</ul>
`;
},
});
// Usage:
${component(EditableList, {
['list-item-0']: 'First item on the list',
['list-item-1']: 'Second item on the list',
['list-item-2']: 'Third item on the list',
['list-item-3']: 'Fourth item on the list',
['list-item-4']: 'Fifth item on the list',
})}
edit: used each(), which doesn't change the point that you can make a bad component API in any framework.
- rglover 3y agohttps://github.com/cheatcode/joystick#each-and-e https://github.com/cheatcode/joystick#each-and-e
- rglover 3y agoRe: your edit, that's not a bad component API, that's bad JavaScript (intentionally written by the author, in this case).
- spankalee 3y agoThis is exactly my point. The MDN element is bad (the component has a bad API), and made bad by the component author, not the web components APIs.
- rglover 3y agoWhich highlights that there is a lack of clear prescription around how to handle a list in a component at the (Web Components) API level. Contrast that with what I linked from my own framework where there's zero uncertainty as to how to handle a list.