webpack-preprocessor-pug-tsx
v0.7.9
Published
A code preprocessor for Webpack
Downloads
26
Maintainers
Readme
webpack-preprocessor-pug-tsx
Bring the awesome "pug in typescript" to the Webpack, and more.
Tik Tok
Try using pug inside TypeScript.
Installation
yarn add -D webpack-preprocessor-pug-tsx \
babel-plugin-transform-jsx-classname-components \
babel-plugin-transform-react-pug \
@babel/plugin-transform-react-jsx \
babel-loader
or
npm install -D webpack-preprocessor-pug-tsx \
babel-plugin-transform-jsx-classname-components \
babel-plugin-transform-react-pug \
@babel/plugin-transform-react-jsx \
babel-loader
Configuration
- .babelrc
{
"presets": ["..."],
"plugins": [
[
"transform-jsx-classname-components",
{
"objects": ["React"]
}
],
"transform-react-pug",
"@babel/transform-react-jsx"
]
}
- webpack.config.js | next.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.tsx$/,
use: [
'babel-loader',
{
loader: 'webpack-preprocessor-pug-tsx',
options: {},
},
],
},
],
},
};
- types.d.ts
/**
* pug
*/
declare const pug: any;
- tsconfig.json
{
"compilerOptions": {
...
},
"include": [
...
"types.d.ts", // inclue types.d.ts
"**/*.tsx" // and include all tsx
]
}
- .eslintrc
{
"globals": {
"pug" : true
}
}
Options
includes
type:
string[]
default:
['jsx', 'React']
Variable that must be included among imported libs.
replace
type:
{[key: string]: string}
default:
{'jsx': '/** @jsx jsx */ jsx'}
When you need to transform the variable declared in includes.
// In webpack config...
{
loader: 'webpack-preprocessor-pug-tsx',
options: {
replace: {
jsx: '/** @jsx jsx */ jsx',
},
},
},
start
> type: string[]
>
> default: ['pug`', 'css`', ' `[^;,]', '\\(`']
Specifies the starting string of the element containing the backtick. Expressed as a regular expression string.
- pug` is the starting string of pug.
- css` is the starting string for emotion css.
- `[^;] is the starting string for template strings.
Basic Process
Edit the document as follows:
import { jsx, css } from '@emotion/core';
import Button from './my/Button';
import ButtonGroup from './my/ButtonGroup';
...
return pug`
div(css=[fullscreen, darkLayer])
div(css=[fullscreen, whiteBoxWrapper])
div(css=whiteBoxWrapper)
h3 Confirm
p 정말로 삭제하시 겠습니까?
ButtonGroup
Button cancel
Button ok
`;
...
The following code...
/** @jsx jsx */ jsx;
Button;
ButtonGroup;
import { jsx, css } from '@emotion/core';
import Button from './my/Button';
import ButtonGroup from './my/ButtonGroup';
...
return pug`
div(css=[fullscreen, darkLayer])
div(css=[fullscreen, whiteBoxWrapper])
div(css=whiteBoxWrapper)
h3 Confirm
p 정말로 삭제하시 겠습니까?
ButtonGroup
Button cancel
Button ok
`;
...
React-native, Expo
metro.config.js
const { getDefaultConfig } = require('metro-config');
const { setOptions } = require('webpack-preprocessor-pug-tsx');
setOptions({
start: ['gql`'],
});
module.exports = (async () => {
const {
resolver: { sourceExts },
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve('webpack-preprocessor-pug-tsx'),
},
resolver: {
sourceExts: [...sourceExts, 'tsx'],
},
};
})();
Caveats
The starting element of the backtick-wrapped phrase should be added to the start of options.
The following code may not work as expected:
const Button = styled.button`
color: turquoise;
`;
render pug`
Button This my button component.
`;
So, you need to add the following to the start of options.
{
loader: 'webpack-preprocessor-pug-tsx',
options: {
start: ['button`'],
},
},
There is no need to include /** @jsx jsx */
in the document.
The following code is added automatically.
before
import { jsx, css } from '@emotion/core';
after
/** @jsx jsx */ jsx;
import { jsx, css } from '@emotion/core';
Sample Project
git clone [email protected]:pruge/storybook-tutorial.git
yarn
yarn storybook
Lisense
MIT License