Quote non-standard object keys

[morphsteve]

For example, imagine a content API that includes page meta data:

#[TypeScript]
class MetaData extends Data
{
    public function __construct(
        public string $title,
        public ?string $description,
        public ?string $robots,

        #[MapOutputName('og:image')]
        public ?string $ogImage,
    ) {
    }
}

Currently the generated types file will have a syntax error due to the : in og:image (and hence break type checking on any of the generated types). The desired output would have quotes around og:image:

export type MetaData = {
    title: string;
    description: string | null;
    robots: string | null;
    'og:image': string | null;
};

Why not simply use ogImage? In this case, convenience when using the result in Remix's meta function, e.g.:

export const meta: MetaFunction<typeof loader> = ({ data }) => {
    return data.page.meta;
};

As opposed to:

export const meta: MetaFunction<typeof loader> = ({ data }) => {
    return {
        title: data.page.meta.title,
        description: data.page.meta.description,
        robots: data.page.meta.robots,
        'og:image': data.page.meta.ogImage,
    };
};

Possible solutions would be to (1) simply quote all object keys or (2) detect whether the key is a non-standard identifier.

On (2), JS is apparently very lenient as to what constitutes a valid identifier, however a simple regex along the lines of `/^[$_a-zA-Z][$_a-zA-Z0-9]$/ would probably be good enough for the purposes.

Appreciate this is an edge case. Happy to PR but will need a pointer as to where to look in the source code.

[rubenvanassche]

Hi @morphsteve,

At the moment the writing out of TypeScript and especially identifiers happens in a lot of places. We have transformers in the package but I see you're using data so we also have a transformer over there.

You're welcome fixing this with the regex over here (https://github.com/spatie/laravel-data/blob/main/src/Support/TypeScriptTransformer/DataTypeScriptTransformer.php) with a Pr. This already should fix your case because you're using Laravel data.

As for the future, I'm completely overhauling typescript-transformer, probably the biggest release since it's conception. The plan is to make writing out identifiers a part of the package so the code you'll write for the data transformer will probably also be useful within the next version of typescript-transformer.

[morphsteve]

Thanks @rubenvanassche 😊 PR here: spatie/laravel-data#367

[rubenvanassche]

Thanks!