Typescript plugin for working better with styled-components react-loadable and loadable-components.
All three components provide the babel plugin to support js compilation, but none of them provide TypeScript related plugins. Although we can compile TypeScript with babel, there is no strict type checking. Therefore, in order to work better with TypeScript. I wrote the TypeScript transformers corresponding to these three components, which are used to complete the tasks completed by the corresponding babel components in the TypeScript compilation environment. They are:
- For styled-components: typescript-styled-components-plugin.
helps you to transform code from:
export const CastProps = [
styled.div<Props>`
display: block;
background: ${() => 'black'};
color: white;
`,
styled(Base)<Props>`
display: block;
background: ${() => 'black'};
color: white;
`,
];to:
export const CastProps = [
styled.div.withConfig({
componentId: 'sc-2mrASk-6',
displayName: 'CastProps',
})`
display: block;
background: ${() => 'black'};
color: white;
`,
styled(Base).withConfig({
componentId: 'sc-2mrASk-7',
displayName: 'CastProps',
})`
display: block;
background: ${() => 'black'};
color: white;
`,
];- For react-loadable: typescript-react-loadable-plugin.
helps you to transform code from:
import React from 'react';
import Loadable from 'react-loadable';
export const LazyFoo = Loadable({
loader: () => import('./input/Foo'),
loading: () => <span>Loading...</span>,
});to:
import React from 'react';
import Loadable from 'react-loadable';
export const LazyFoo = Loadable({
loading: () => React.createElement('span', null, 'Loading...'),
loader: () => import('./input/Foo'),
modules: ['./input/Foo'],
webpack: () => [require.resolveWeak('./input/Foo')],
});- For loadable-components: typescript-loadable-components-plugin.
helps you to transform code from:
import loadable from '@loadable/component';
export const LazyFoo = loadable(() => import('./input/AsyncDefaultComponent'));to:
import loadable from 'loadable-components';
export const LazyFoo = loadable({
chunkName() {
return 'input-AsyncDefaultComponent';
},
isReady(props) {
return (
typeof __webpack_modules__ !== 'undefined' &&
Boolean(__webpack_modules__[this.resolve(props)])
);
},
requireAsync: () =>
import(
/* "webpackChunkName":"input-AsyncDefaultComponent" */ './input/AsyncDefaultComponent'
),
requireSync(props) {
return typeof '__webpack_require__' !== 'undefined'
? __webpack_require__(this.resolve(props))
: eval('module.require')(this.resolve(props));
},
resolve() {
if (require.resolveWeak)
return require.resolveWeak(
/* "webpackChunkName":"input-AsyncDefaultComponent" */ './input/AsyncDefaultComponent',
);
else
return eval('require.resolve')(
/* "webpackChunkName":"input-AsyncDefaultComponent" */ './input/AsyncDefaultComponent',
);
},
});Install
You can use npm or yarn to install any one or more of them in your project:
npm i -D typescript-styled-components-plugin
yarn add -D typescript-styled-components-plugin
# ...Usage
All the there packages work with ttypescript or webpack
with ttypescript, you just need to add the package name to plugins in your tsconfig.json:
{
"compilerOptions": {
"plugins": [
{
// the package name here
"transform": "typescript-styled-components-plugin",
// other options follow
}
]
}
}with webpack, you just need to add customTransformer for your loader:
import createStyledComponentsTransformer from 'typescript-styled-components-plugin';
export default {
// ...
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader', // or awesome-typescript-loader
options: {
getCustomTransformers: (program) => ({
before: [
createStyledComponentsTransformer(program, {
setComponentId: true,
setDisplayName: true,
minify: true,
}),
],
}),
},
},
],
},
};You can get more detailed documentation for the packages at the project’s GitHub homepage.