webpack-preprocessor-pug-tsx v0.7.9

webpack-preprocessor-pug-tsx

Bring the awesome "pug in typescript" to the Webpack, and more.

• Tik Tok
• Installation
• Configuration
• Options
  • includes
  • replace
  • start
• Basic Process
• React-native, Expo
• Caveats
  • The starting element of the backtick-wrapped phrase should be added to the start of options.
  • There is no need to include /** @jsx jsx */ in the document.
• Sample Project
• Lisense

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 git@github.com:pruge/storybook-tutorial.git
yarn
yarn storybook

Lisense

MIT License