plain-purple

Configuring arrow-function style for route file auto generated code

In a monorepo I'm working in, we have the following react eslint rule set to enforce arrow-function style for react function components (https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md). When Tanstack router's auto code generation generates route file content, there's many things that can be configured looking at the configuration and the source code for the config: https://tanstack.com/router/latest/docs/framework/react/routing/installation-with-vite#configuration Is there an existing configuration to set for this? I couldn't find any. There is a customScaffolding configuration which I assume could be used for this, but I'd prefer not to muck around with the default template for a small thing as such. Would it be possible to include this as a config option for the generated code?

declare const tanstackRouter: (options?: Partial<{
    target: "react" | "solid";
    routeFileIgnorePrefix: string;
    routesDirectory: string;
    quoteStyle: "single" | "double";
    semicolons: boolean;
    disableLogging: boolean;
    routeTreeFileHeader: string[];
    indexToken: string;
    routeToken: string;
    generatedRouteTree: string;
    disableTypes: boolean;
    addExtensions: boolean;
    enableRouteTreeFormatting: boolean;
    routeTreeFileFooter: string[];
    tmpDir: string;
    enableRouteGeneration?: boolean | undefined;
    codeSplittingOptions?: import('./core/config.js').CodeSplittingOptions | undefined;
    virtualRouteConfig?: string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
    routeFilePrefix?: string | undefined;
    routeFileIgnorePattern?: string | undefined;
    pathParamsAllowedCharacters?: (";" | ":" | "@" | "&" | "=" | "+" | "$" | ",")[] | undefined;
    verboseFileRoutes?: boolean | undefined;
    autoCodeSplitting?: boolean | undefined;
    customScaffolding?: {
        routeTemplate?: string | undefined;
        lazyRouteTemplate?: string | undefined;
    } | undefined;
    experimental?: {
        enableCodeSplitting?: boolean | undefined;
    } | undefined;
    plugins?: import('@tanstack/router-generator').GeneratorPlugin[] | undefined;
}> | undefined) => import('vite').Plugin<any> | import('vite').Plugin<any>[];

declare const tanstackRouter: (options?: Partial<{
    target: "react" | "solid";
    routeFileIgnorePrefix: string;
    routesDirectory: string;
    quoteStyle: "single" | "double";
    semicolons: boolean;
    disableLogging: boolean;
    routeTreeFileHeader: string[];
    indexToken: string;
    routeToken: string;
    generatedRouteTree: string;
    disableTypes: boolean;
    addExtensions: boolean;
    enableRouteTreeFormatting: boolean;
    routeTreeFileFooter: string[];
    tmpDir: string;
    enableRouteGeneration?: boolean | undefined;
    codeSplittingOptions?: import('./core/config.js').CodeSplittingOptions | undefined;
    virtualRouteConfig?: string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
    routeFilePrefix?: string | undefined;
    routeFileIgnorePattern?: string | undefined;
    pathParamsAllowedCharacters?: (";" | ":" | "@" | "&" | "=" | "+" | "$" | ",")[] | undefined;
    verboseFileRoutes?: boolean | undefined;
    autoCodeSplitting?: boolean | undefined;
    customScaffolding?: {
        routeTemplate?: string | undefined;
        lazyRouteTemplate?: string | undefined;
    } | undefined;
    experimental?: {
        enableCodeSplitting?: boolean | undefined;
    } | undefined;
    plugins?: import('@tanstack/router-generator').GeneratorPlugin[] | undefined;
}> | undefined) => import('vite').Plugin<any> | import('vite').Plugin<any>[];

Installation with Vite | TanStack Router React Docs

3 Replies

deep-jade•5w ago

Sounds like it would be easier for the developer to just change the function to be an arrow function ¯\_(ツ)_/¯

absent-sapphire•5w ago

I had the same problem, here's what I did:

const routeTemplate = `%%tsrImports%%

const RouteComponent = () => <div>route %%tsrPath%%</div>

%%tsrExportStart%%{ component: RouteComponent }%%tsrExportEnd%%`

// ... in your vite/whatever config:
tanstackRouter({ customScaffolding: { routeTemplate, lazyRouteTemplate: routeTemplate }})

const routeTemplate = `%%tsrImports%%

const RouteComponent = () => <div>route %%tsrPath%%</div>

%%tsrExportStart%%{ component: RouteComponent }%%tsrExportEnd%%`

// ... in your vite/whatever config:
tanstackRouter({ customScaffolding: { routeTemplate, lazyRouteTemplate: routeTemplate }})

Not too much fiddling for me, but I'd love an option for that as well This works fine though!

stormy-gold•5w ago

we are most likely not adding another option. instead, we will even reduce the options and improve custom scaffolding

Gaming

Programming

Configuring arrow-function style for route file auto generated code

Did you find this page helpful?