3 ms·
https://github.com/cheatcode/joystick#writing-a-component https://github.com/cheatcode/joystick#writing-a-component
by rglover 3y ago
https://github.com/cheatcode/joystick#writing-a-component https://github.com/cheatcode/joystick#writing-a-component
- spankalee 3y agoconst 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.