Vue becoming too hacky: Generic props adding too much complexity & API proposal

[0x00A1FA]

Hello,

I have a concern that Vue is becoming too hacky to be enjoyable in the long run. React has had generic props for so long that it's grown on me to convert over to React.

I think we should switch over to TSX and just be done with the outdated <template> syntax.

Consider the following TSX component in Qwik:

import { component$ } from '@builder.io/qwik';

type Model = Record<string, unknown>;

type Props<
  TModel extends Model,
  TModelKey extends keyof TModel = keyof TModel,
  TModelValue extends TModel[TModelKey] = TModel[TModelKey]
> = {
  model: TModel;
  keys: TModelKey[];
  values: TModelValue[];
};

export default component$(<TModel extends Model>(props: Props<TModel>) => {
  return (
    <div>
      <pre>{JSON.stringify(props.model)}</pre>

      <pre>{JSON.stringify(props.keys)}</pre>

      <pre>{JSON.stringify(props.values)}</pre>
    </div>
  );
});

Usage:

import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
import GenericComponent from '~/components/generic-component/generic-component';

export default component$(() => {
  const baz = { foo: 'bar', baz: 'bazz' } as const;

  return (
      <GenericComponent
        model={baz}
        keys={['foo']}
        values={[baz.foo, 'baz']}
      />
  );
});

Check out this StackBlitz fork of Qwik City to see the amazing inference.

Time to switch to TSX?

[johnsoncodehk]

Please post your feedback on vuejs/core#7963. This repo only focuses on tooling implementation and does not concern design.