class Button extends Nullstack {

  render({ children }: NullstackClientContext) {
    const hasChildren = children.filter(Boolean).length > 0 // <-- children is always an array at this point

    return <button>{hasChildren ? children : 'Default Text'}</button>
  }

}

interface ButtonWithChildrenProps {
  children: JSX.Element // <-- this component must have children
}

class ButtonWithChildren extends Nullstack<ButtonWithChildrenProps> {

  render({ children }: NullstackClientContext) {
    return <button>{children}</button>
  }

}

class ComponentWithStyles extends Nullstack {

  testVariable = false

  render() {
    return [
      <button class={this.testVariable && 'class-a'}>Button A</button>,
      <button class={[this.testVariable && 'class-a']}>Button B</button>,
      <button style={this.testVariable && 'style-a'}>Button C</button>,
      <button style={[this.testVariable && 'style-a']}>Button D</button>,
    ]
  }

}