[🐞] Issue with IntrinsicElements and no children

[tzdesign]

Which component is affected?

Qwik Runtime

Describe the bug

Hi there,

we experience an issue with typescript types and can't solve it.

We have polymorphic components with dangerouslySetInnerHTML and no children.

In Version 0.102

With children and no dangerouslySetInnerHTML it is fine, with dangerouslySetInnerHTML only it breaks:

import type { QwikIntrinsicElements } from '@builder.io/qwik';
import { component$, useStylesScoped$ } from '@builder.io/qwik';

export default component$(
  <C extends keyof QwikIntrinsicElements>(props: VeryFunCompnent<C>) => {
    const { as: propAs, text, ...rest } = props;
    const Component = (propAs ?? 'div') as string;
    return <Component dangerouslySetInnerHTML={makeMePretty(text)} {...rest} />;
  }
);

export type VeryFunCompnent<C extends keyof QwikIntrinsicElements = 'button'> =
  QwikIntrinsicElements[C] & {
    text: string;
    as?: C;
  };

export function makeMePretty(text: string): string {
  return text.replace(/\n/g, '<br>\n');
}

In Version 0.103

Even the polymorphic component with children breaks

import type { QwikIntrinsicElements } from '@builder.io/qwik';
import { component$, Slot, useStylesScoped$ } from '@builder.io/qwik';

export default component$(
  <C extends keyof QwikIntrinsicElements>(props: ButtonProps<C>) => {
    const { color = 'primary', as: propAs, ...rest } = props;
    const Component = (propAs ?? 'button') as string;
    return (
      <Component class={['button', color]} {...rest}>
        <Slot name="start" />
        <div class="label">
          <Slot />
        </div>
        <Slot name="end" />
      </Component>
    );
  }
);

export type ButtonProps<C extends keyof QwikIntrinsicElements = 'button'> =
  QwikIntrinsicElements[C] & {
    as?: C;
    color?: ButtonColor;
  };

export type ButtonColor =
  | 'primary'
  | 'secondary'
  | 'positive'
  | 'notice'
  | 'inherit';

Reproduction

https://stackblitz.com/edit/qwik-starter-qads2x?file=src%2Fcomponents%2FVeryFunComponent.tsx

Steps to reproduce

Just run it on stackblitz in preview and it will fail.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm

Additional Information

This started in Version 0.100 and continued.

Is there a better way to do polymorphism without casting to string?

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-qads2x (Open reproduction)

[gioboa]

is it solved with the latest version of Qwik?

[tzdesign]

@gioboa wasn't able to check it yet. Will take a look in the next days. From what I know of quick, it should be fixed.

[wmertens]

@tzdesign note that this is now documented at https://qwik.dev/docs/components/overview/#polymorphic-components so hopefully everything works as expected

[tzdesign]

@wmertens @gioboa removed {null} and everything works. PropsOf is the shit, thanks @wmertens 🔥