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?

[philibe]

Matter of taste. I've never liked to mix Html tags and code, i.e. view and control.

Maybe to propose tsx ability but not to leave the templates.

[softxiaohui]

yes ,that is good style

[softxiaohui]

again,reply

[mbokil]

I think that is the beauty with Vue you can use templates or JSX. Leaves it up to the user to choose. There is not a chance templates would be dropped.

[Shyam-Chen]

You forgot <style lang="scss" scoped>.

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

import styles from './HelloWorld.scss?inline';
 
export default component$(() => {
  useStylesScoped$(styles);
  
  return <div class="container">Hello, World!</div>;
});