This is a TypeScript transformer that improves development experience of styled-components
.
The main purpose is to provide compile-time information of creates styled components, such as names of these components, for the run-time, allowing to operate with proper names of such the components.
The plugin was mostly inspired by great Babel's plugin babel-plugin-styled-components
and partially provides similar functionality for TypeScript users.
The following command adds the packages to the project as a development-time dependency:
yarn add typescript-plugin-styled-components --dev
This section describes how to integrate the plugin into the build/bundling process driven by Webpack and its TypeScript loader awesome-typescript-loader.
In the webpack.config.js
file in the section where awesome-typescript-loader is configured as a loader:
// 1. import default from the plugin module
var createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
// 2. create a transformer;
// the factory additionally accepts an options object which described below
var styledComponentsTransformer = createStyledComponentsTransformer();
// 3. add getCustomTransformer method to the loader config
var config = {
...
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
... // other loader's options
getCustomTransformers: () => ({ before: [transformer] })
}
}
]
}
...
};
function createTransformer(options?: Partial<Options>): TransformerFactory<SourceFile>;
A factory that creates an instance of a TypeScript transformer (which is a factory itself).
It allows to optionally pass options that allow to tweak transformer's behavior. See Options
for details.
interface Options {
getDisplayName(filename: string, bindingName: string | undefined): string | undefined;
}
This method is used to determine component display name from filename and its binding name.
filename
is the file name, relative to the project base directory, of the file where the styled component defined.
bindingName
is the name that is used in the source code to bind the component. It can be null
if the component was not bound or assigned.
Default strategy is to use bindingName
if it's defined and use inference algorithm from filename
otherwise.
Sample:
function getStyledComponentDisplay(filename, bindingName) {
return bindingName || makePascalCase(filename);
}
Note Technically,
typescript-plugin-styled-components
is not a TypeScript plugin, since it is only exposed as a TypeScript transformer.