Allow constant exports doesn't work with objects.

[AaronPowell96]

I am looking to create some way where these constants would work. If I am able to say these are immutable with as const or if the plugin would be able to infer that simply by a full capitalisation of a variable that would be nice. If I write const MY_CONSTANT = {} I am telling you 'I will not mutate this, it is a constant'.

There should be no warning below?

[ArnaudBarre]

The issue is that you need also the React refresh runtime to skip that. I will probably add an option to the Vite React plugins to support Remix, and this option could be later used to support this kind of use case.

For now the safest way is to have a small file along the current file to export this constants

[DonnyVerduijn]

It seems, that this option also doesn't involve enums?

[ArnaudBarre]

Yeah TS enums are transpiled to JS objects so they are not "constants". I encourage you to use string based enums that are ignored because type only and aligned better with the current direction of TS to not add any runtime behaviour that is not defined in JS.

[GerroDen]

I agree, that it would be great to have this feature to allow enums as part of the prop definition to be exported without any issue. This seems a valid case to me.

export enum Type {
  a = "a",
  b = "b",
}

interface ComponentProps {
  type: Type;
}

export function TypeComponent({ type }: ComponentProps) {
  return <div>{type}</div>;
}

So I can use

<TypeComponent type={Type.a} />

[ArnaudBarre]

Using enum is really something that goes against the current trend of TS to be just a typechecker for JS. These kind of runtime features (enum, namespaces, parameters properties) where all added a long ago.

I strongly advised using string enums:

export Type  = "a" |  "b";

interface ComponentProps {
  type: Type;
}

export function TypeComponent({ type }: ComponentProps) {
  return <div>{type}</div>;
}

<TypeComponent type="a" />

[GerroDen]

In vanilla JS we would likely define a constant object with these string types as values just like an enum does. It's just a shorthand. So instead of enums we would like to define:

export Type = "a" | "b";
export componentType = {
  a: "a",
  b: "b".
} as const;

Which is equal to the output of string-based enums in TS.