Feature - Ignore null or undefined for the rest parameters

[iongion]

I am trying this pattern, could the rest: ChildDom[] allow undefined or null, more like rest: (ChildDom|undefined|null)[]

export const Button = (props?: ButtonProps) => {
  const componentClasses = classNames(
    Classes.BUTTON,
    props?.active ? Classes.ACTIVE : null,
    props?.minimal ? Classes.MINIMAL : null,
    props?.outlined ? Classes.OUTLINED : null,
    props?.fill ? Classes.FILL : null,
    props?.small ? Classes.SMALL : null,
    props?.alignText ? AlignmentClassMap[props?.alignText] : null,
    props?.intent ? IntentClassMap[props?.intent] : null
  );
  const createText = () => {
    if (props?.text) {
      return span({ class: Classes.BUTTON_TEXT }, props.text);
    }
  };
  const createIcon = (icon?: IconName) => {
    if (icon) {
      return Icon({ icon });
    }
  };
  return button({ class: componentClasses }, createText(), createIcon());
};
Button.displayName = `${DISPLAYNAME_PREFIX}.Button`;

Otherwise I have to do this which is a bit uglier

export const Button = (props?: ButtonProps) => {
  const componentClasses = classNames(
    Classes.BUTTON,
    props?.active ? Classes.ACTIVE : null,
    props?.minimal ? Classes.MINIMAL : null,
    props?.outlined ? Classes.OUTLINED : null,
    props?.fill ? Classes.FILL : null,
    props?.small ? Classes.SMALL : null,
    props?.alignText ? AlignmentClassMap[props?.alignText] : null,
    props?.intent ? IntentClassMap[props?.intent] : null
  );
  const children: ChildDom[] = [];
  if (props?.text) {
    children.push(span({ class: Classes.BUTTON_TEXT }, props.text));
  }
  if (props?.icon) {
    children.push(Icon({ icon: props?.icon }));
  }
  return button({ class: componentClasses }, ...children);
};
Button.displayName = `${DISPLAYNAME_PREFIX}.Button`;

Sometimes components might return nothing due to logic inside so it would be useful to ignore undefined or null

[Tao-VanJS]

In your use case, I think you can simply return [] to indicate no node shall be inserted to the parent DOM node.

Specifically your program can work as you intended if you simply change it to:

  const createText = () => {
    if (props?.text) {
      return span({ class: Classes.BUTTON_TEXT }, props.text);
    }
    return [];
  };
  const createIcon = (icon?: IconName) => {
    if (icon) {
      return Icon({ icon });
    }
    return [];
  };

This is the reason I'm hesitating to add null or undefined support for ChildDom[], cuz it feels unnecessary at this point.

[iongion]

Thanks, toying around with it, needs some mind games from react / solidjs

Check this

https://stackblitz.com/edit/vitejs-vite-kc1gr9?file=src%2Fmain.ts

• Maybe a vite-vanjs-svg-plugin would be able to exist one day and transform svgs to vanjs code
• Looking for a way to handle custom props that are bound to state vars, in my case the counter not working due to improper binding to the counter state var.

Anyway, this is an awesome achievement and brings back web with all included from 20 y ago 👯

[Tao-VanJS]

Thank you so much for putting together a demo with the great integration! This definitely provide confidence to people who are looking into bringing VanJS into other ecosystems.

[Tao-VanJS]

Reopening this issue as we might want to address it in future releases. See also #40.