[React Wrappers] attributeMapping htmlFor

[pascalvos]

customElementReactWrapperPlugin

  attributeMapping: {
        'for': 'htmlFor',
  },

this would work if not that all keys are lowercase so htmlFor becomes htmlfor

if I manually do this

export const MyLabel = forwardRef(
  ({ level, htmlFor, id, className, style, slot, hidden, key, children, onClick }, forwardedRef) => {
    const ref = useRef(null);

    /** Attributes - run whenever an attr has changed */
    useAttribute(ref, "level", level);
    useAttribute(ref, "for", htmlFor);
    useAttribute(ref, "id", id);
    useAttribute(ref, "style", style);
    useAttribute(ref, "slot", slot);
    useAttribute(ref, "hidden", hidden);
    useAttribute(ref, "key", key);
    useAttribute(ref, "children", children);
    useAttribute(ref, "ref", ref);

    useImperativeHandle(forwardedRef, () => ({}));

    return React.createElement(
      MyLabelElement.customTag || "my-label",
      {
        ref,
        level,
        for: htmlFor,
        id,
        class: className,
        style,
        slot,
        hidden,
        key,
        children,
        ref,
        onClick,
      },
      children,
    );
  },
);

export interface MyLabelProps {
  /** Level the label, determines the text size. Highel level has smaller text. */
  level?: MyLabelElement["level"];

  /** Id of the input to which this label should be linked. */
  htmlFor?: MyLabelElement["htmlFor"];

now everything works as expected when I do this

<MyLabel htmlFor="textInput">textInput</UcLabel>
<TextInput name="textInput" id="textInput" />

[pascalvos]

nevermind i found out https://github.com/break-stuff/cem-tools/blob/main/tools/utilities/src/utilities.ts#L39 this works

    attributeMapping: {
        'for': 'html-for',
      },

I do think for and htmlFor might be a good candidate for in here
https://github.com/break-stuff/cem-tools/blob/main/packages/react-wrappers/src/global.ts

[break-stuff]

That's a really good idea! Thank you!

[break-stuff]

A fix for this has been deployed in release 1.2.0 (#67). Let me know if you run into any issues.

[pascalvos]

@break-stuff found a small oversight

var createEventName = (event) => `on${toPascalCase(event.name)}`;
var RESERVED_WORDS = [
... here the "for", attribute is still added so it will throw an error

cem-tools/packages/react-wrappers/src/utils.ts

Line 66 in ac6cd3c

"for",

[break-stuff]

Does your for attribute differ from the native HTML for attribute behavior?

[pascalvos]

well for in react doesn't work that only works with htmlFor https://legacy.reactjs.org/docs/dom-elements.html#htmlfor so there is this thing right react is all jsx so javascript so a for loop is not the same as for HTML attribute.
That is why it's reserved I see no way that that for loop could end up in the cem tools so I think... you can assume it is always an attribute
but I am not 100% sure I think for should be automatically mapped to htmlFor

[break-stuff]

Yeah, it should now, but it sounds like your custom element may also have a for attribute. Is that correct? If it is, is it different from the native for attribute?

[break-stuff]

You are correct. Because these components render in JSX, for attributes should always be mapped to something other than for. you can use the default htmlFor or you can create a custom mapping: for => _for.

[break-stuff]

I deployed a fix for this in 1.4.0. Let me know if you run into any issues.

[break-stuff]

Closing this for now. Let me know if anything comes up.