fix(propfunctionprops): prevent 'undefined', 'null', 'never' conversion to PropFnInterface

[maiieul]

…on to PropFnInterface

fix #4946

Overview

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

Added a condition to PropFunctionProps to prevent it from transforming standalone undefined, null, never, into PropFnInterface<unknown[], unknown>.

This mostly fixes ts issues with tags and similar self-closing tags which have a children: undefined attribute mismatching the component$ children prop as explained in #4946, but it could also prevent issues with other props that are of the form prop: null or prop: never.

Examples and manual tests:

Let's define a sample object

type SampleObject = {
  numProp: number | undefined;
  strProp: string | null;
  boolProp: boolean | never;
  nullProp: null;
  undefinedProp: undefined;
  neverProp: never;
  anyProp: any;
  unknownProp: unknown;
  funcProp: (x: number, y: string) => boolean;
};

And apply the PropFunctionProps transforms to it

type TransformedSampleObject = PropFunctionProps<SampleObject>;

With the current version of PropFunctionProps

export type PropFunctionProps<PROPS extends {}> = {
  [K in keyof PROPS]: NonNullable<PROPS[K]> extends (...args: infer ARGS) => infer RET
    ? PropFnInterface<ARGS, Awaited<RET>>
    : PROPS[K];
};

TransformedSampleObject will become

type TransformedSampleObject = {
    numProp: number | undefined;
    strProp: string | null;
    boolProp: boolean | never;
    nullProp: PropFnInterface<unknown[], unknown>;
    undefinedProp: PropFnInterface<unknown[], unknown>;
    neverProp: PropFnInterface<unknown[], unknown>;
    anyProp: any;
    unknownProp: unknown;
    funcProp: PropFnInterface<[x: number, y: string], boolean>;
}

But with my proposed changes,

/** @public */
export type PropFunctionProps<PROPS extends {}> = {
  [K in keyof PROPS]: PROPS[K] extends null | undefined | never
    ? PROPS[K]
    : NonNullable<PROPS[K]> extends (...args: infer ARGS) => infer RET
    ? PropFnInterface<ARGS, Awaited<RET>>
    : PROPS[K];
};

it will be

type TransformedSampleObject = {
    numProp: number | undefined;
    strProp: string | null;
    boolProp: boolean | never;
    nullProp: null;
    undefinedProp: undefined;
    neverProp: never;
    anyProp: any;
    unknownProp: unknown;
    funcProp: PropFnInterface<[x: number, y: string], boolean>;
}

I have tested this with more complex types and only standalone undefined, null, never seem to be affected by this change. They will stay what they are instead of becoming PropFnInterface<unknown[], unknown>

Explanation

If my understanding is correct, @manucorporat added PropFunctionProps in #4088 to remove the need to use PropFunction for creating custom async events.

To do that, NonNullable seems to be required to attach PropFnInterface<ARGS, RET> to custom events, which I guess is required for the optimizer to turn the event into a lazy-loadable and importable symbol.

The problem is that NonNullable will also convert standalone undefined and null to never which is a subtype of all types and therefore passes the NonNullable<PROPS[K]> extends (...args: infer ARGS) => infer RET condition, thus transforming undefined, null, and never to PropFnInterface<unknown[], unknown>.

Use cases and why

• 1. One use case
• 2. Another use case

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	ff47022

[maiieul]

Actually changed the type def to

export type PropFunctionProps<PROPS extends {}> = {
  [K in keyof PROPS]: PROPS[K] extends undefined
    ? PROPS[K]
    : PROPS[K] extends ((...args: infer ARGS) => infer RET) | undefined
    ? PropFnInterface<ARGS, Awaited<RET>>
    : PROPS[K];
};

I now think NonNullable was used to apply the transformation even on optional props for custom events.

This new type definition will achieve the same purpose with a bit less code and potentially prevent bugs for some edge cases.

Examples

type SampleObject = {
  func?: (x: number, y: string) => boolean;
  nestedFunc?: (arg: { a: number; b: number }) => { result: boolean };
  null: null;
  undefined: undefined;
  never: never;
  str: string | null | undefined | never;
};

will be converted to

type TransformedSampleObject = {
    func?: PropFnInterface<[x: number, y: string], boolean> | undefined;
    nestedFunc?: PropFnInterface<[arg: {
        a: number;
        b: number;
    }], {
        result: boolean;
    }> | undefined;
    null: null;
    undefined: undefined;
    never: never;
    str: string | null | undefined | never;
 }

Which is what we want.

While with the current NonNullable version it would have produced

type TransformedSampleObject = {
    func?: PropFnInterface<[x: number, y: string], boolean> | undefined;
    nestedFunc?: PropFnInterface<[arg: {
       a: number;
       b: number;
   }], {
       result: boolean;
   }> | undefined;
   null: PropFnInterface<unknown[], unknown>;
   undefined: PropFnInterface<...>;
   never: PropFnInterface<...>;
   str: string | null | undefined | never;
}

How it works

If the type is standalone undefined, it remains undefined.

Otherwise, if the type is a function (even optional), it will transform the function to PropFnInterface<ARGS, Awaited>.

---

Would be great to get @manucorporat confirmation on this, since he is the one who wrote the code in the first place 😜

[mhevery]

I have added types tests, and they in 6a64b05, and they seem to be failing. Could you have a look?

[maiieul]

Hi Misko 👋,

Had a look at your tests.

They would have been failing as well with the previous version of PropFunctionProps.

So I refined your tests in the following way:

• I had to replace HTMLAttributes<HTMLInputElement> by InputHTMLAttributes<HTMLInputElement> to make them work. I believe this is the correct way to type input elements with the generated JSX.
• Removed Input0 test, as a component needs to be typed in order to prevent typescript from yelling when reusing the component with props as in <Input0 value="0" /> (here the value prop wasn't defined in the component definition).
• Added Input6 with QwikIntrinsicElements['input'].

The tests with this version pass but they would have failed with the previous version.