4 ms·
You could do the same weird attributes thing with props in React. Does that make React's design equally poor? I don't know how you can prevent bad component de
by spankalee 3y ago
You could do the same weird attributes thing with props in React. Does that make React's design equally poor?
I don't know how you can prevent bad component designs like this.
- rglover 3y agohttps://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.