How to use getDisplayName with ttypescript compiler

[mcroba]

Hi,

How can I configure my tsconfig.json to define the getDisplayName function in order to compile with ttypescript?

{
    "compilerOptions": {
        "plugins": [
            {
                "transform": "typescript-plugin-styled-components",
                "type": "config",

                // other typescript-plugin-styled-components options can be added here
                "getDisplayName": ???
                "minify": true,
                "ssr": true
            }
        ]
    }
}

Thank you in advance for your help

[Igorbek]

Hi @mcroba, ttypescript allows you to refer to a local js/ts file with your custom plugin, so that you configure it using all the power of the language, like this:

./plugins/styled-components.ts

import createTransformer from '../../src'

export default function createMyTransformer(options: Parameters<typeof createTransformer>[0]) {
    return createTransformer({
        ...options, // this allows to pass options from tsconfig
        getDisplayName: (filename, binding) => `${filename}_${binding}` // your logic for display name
        // other options if needed
    })
}

./tsconfig.json

{
    "compilerOptions": {
        "plugins": [
            {
                "transform": "./plugins/styled-components.ts",
                "type": "config",

                "minify": true,
                "ssr": true
            }
        ]
    }
}