required bug / string|undefined -> boolean

[mrinc]

Ref:

typed-html/src/jsx/element-types.d.ts

Line 150 in 88a6a62

required?: string;

As this is a string|undefined, it denotes required or not defined as per html spec... but...
If you pass in undefined the following error occurs:

typed-html/src/elements.tsx

Line 66 in 88a6a62

return makeAttribute(escapeAttrNodeValue(value.toString()));

TypeError: Cannot read properties of undefined (reading 'toString')

2 step recommendation:

typed-html/src/jsx/element-types.d.ts

Line 150 in 88a6a62

required?: string;

From: required?: string;
To: required?: boolean;

• AND

typed-html/src/elements.tsx

Line 66 in 88a6a62

return makeAttribute(escapeAttrNodeValue(value.toString()));

From:

return makeAttribute(escapeAttrNodeValue(value.toString()));

To:

return makeAttribute(value !== undefined && value !== null && typeof value.toString === 'function' ? escapeAttrNodeValue(value.toString()) : '');

• OR

const attributeToString = (attributes: Attributes) => (name: string): string => {
    const value = attributes[name];
    const formattedName = toKebabCase(name);
    const makeAttribute = (value: string) => `${formattedName}="${value}"`;
    if (typeof value === 'undefined') {
        return '';
    }
    if (value instanceof Date) {
        return makeAttribute(value.toISOString());
    } else switch (typeof value) {
        case 'boolean':
            // https://www.w3.org/TR/2008/WD-html5-20080610/semantics.html#boolean
            if (value) {
                return formattedName;
            } else {
                return '';
            }
        default:
            return makeAttribute(escapeAttrNodeValue(value.toString()));
    }
};

Happy to push a PR for this, let me know.