Typescript plugin for working better with styled-components react-loadable and loadable-components.

Young joking
Nov 2 · 2 min read

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:

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;
`,
];

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')],
});

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade