{"id":13455800,"url":"https://github.com/pruge/pug-tsx","last_synced_at":"2025-03-24T09:30:41.500Z","repository":{"id":42714507,"uuid":"276251109","full_name":"pruge/pug-tsx","owner":"pruge","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-07T04:47:38.000Z","size":516,"stargazers_count":2,"open_issues_count":5,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-18T07:56:19.662Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pruge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-01T01:52:11.000Z","updated_at":"2022-08-12T16:46:13.000Z","dependencies_parsed_at":"2023-02-06T12:15:26.980Z","dependency_job_id":null,"html_url":"https://github.com/pruge/pug-tsx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pruge%2Fpug-tsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pruge%2Fpug-tsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pruge%2Fpug-tsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pruge%2Fpug-tsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pruge","download_url":"https://codeload.github.com/pruge/pug-tsx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245243130,"owners_count":20583566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T08:01:11.356Z","updated_at":"2025-03-24T09:30:41.142Z","avatar_url":"https://github.com/pruge.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# webpack-preprocessor-pug-tsx\n\n[![Version][version-badge]][npm]\n[![Node][node-badge]][node]\n[![License][license-badge]][license]\n\n\u003c!-- ![Downloads][download-badge] --\u003e\n\n\u003c!-- [![Build Status][travis-badge]][travis] --\u003e\n\nBring the awesome \"pug in typescript\" to the Webpack, and more.\n\n- [Tik Tok](#tik-tok)\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Options](#options)\n  - [`includes`](#includes)\n  - [`replace`](#replace)\n  - [`start`](#start)\n- [Basic Process](#basic-process)\n- [React-native, Expo](#react-native-expo)\n- [Caveats](#caveats)\n  - [The starting element of the backtick-wrapped phrase should be added to the start of options.](#the-starting-element-of-the-backtick-wrapped-phrase-should-be-added-to-the-start-of-options)\n  - [There is no need to include `/** @jsx jsx */` in the document.](#there-is-no-need-to-include--jsx-jsx--in-the-document)\n- [Sample Project](#sample-project)\n- [Lisense](#lisense)\n\n## Tik Tok\n\n\u003e Try using pug inside TypeScript.\n\n## Installation\n\n```bash\nyarn add webpack-preprocessor-pug-tsx -D\n```\n\nor\n\n```bash\nnpm install webpack-preprocessor-pug-tsx -D\n```\n\n## Configuration\n\n```javascript\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.(ts|tsx)$/,\n        use: [\n          'babel-loader',\n          {\n            loader: 'webpack-preprocessor-pug-tsx',\n            options: {},\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Options\n\n### `includes`\n\n\u003e type: `string[]`\n\u003e\n\u003e default: `['jsx', 'React']`\n\nVariable that must be included among imported libs.\n\n### `replace`\n\n\u003e type: `{[key: string]: string}`\n\u003e\n\u003e default: `{'jsx': '/** @jsx jsx */ jsx'}`\n\nWhen you need to transform the variable declared in includes.\n\n```javascript\n// In webpack config...\n\n{\n  loader: 'webpack-preprocessor-pug-tsx',\n  options: {\n    replace: {\n      jsx: '/** @jsx jsx */ jsx',\n    },\n  },\n},\n```\n\n### `start`\n\n```\n\u003e type: string[]\n\u003e\n\u003e default: ['pug`', 'css`', ' `[^;,]', '\\\\(`']\n```\n\nSpecifies the starting string of the element containing the backtick.\nExpressed as a regular expression string.\n\n```\n- pug` is the starting string of pug.\n- css` is the starting string for emotion css.\n-  `[^;] is the starting string for template strings.\n```\n\n## Basic Process\n\nEdit the document as follows:\n\n```javascript\nimport { jsx, css } from '@emotion/core';\nimport Button from './my/Button';\nimport ButtonGroup from './my/ButtonGroup';\n\n...\n\nreturn pug`\n  div(css=[fullscreen, darkLayer])\n  div(css=[fullscreen, whiteBoxWrapper])\n    div(css=whiteBoxWrapper)\n      h3 Confirm\n      p 정말로 삭제하시 겠습니까?\n      ButtonGroup\n        Button cancel\n        Button ok\n`;\n\n...\n```\n\nThe following code...\n\n```javascript\n/** @jsx jsx */ jsx;\nButton;\nButtonGroup;\nimport { jsx, css } from '@emotion/core';\nimport Button from './my/Button';\nimport ButtonGroup from './my/ButtonGroup';\n\n...\n\nreturn pug`\n  div(css=[fullscreen, darkLayer])\n  div(css=[fullscreen, whiteBoxWrapper])\n    div(css=whiteBoxWrapper)\n      h3 Confirm\n      p 정말로 삭제하시 겠습니까?\n      ButtonGroup\n        Button cancel\n        Button ok\n`;\n\n...\n\n```\n\n## React-native, Expo\n\n- `metro.config.js`\n\n```javascript\nconst { getDefaultConfig } = require('metro-config');\nconst { setOptions } = require('webpack-preprocessor-pug-tsx');\n\nsetOptions({\n  start: ['gql`'],\n});\n\nmodule.exports = (async () =\u003e {\n  const {\n    resolver: { sourceExts },\n  } = await getDefaultConfig();\n  return {\n    transformer: {\n      babelTransformerPath: require.resolve('webpack-preprocessor-pug-tsx'),\n    },\n    resolver: {\n      sourceExts: [...sourceExts, 'tsx'],\n    },\n  };\n})();\n```\n\n## Caveats\n\n### The starting element of the backtick-wrapped phrase should be added to the start of options.\n\nThe following code may not work as expected:\n\n```javascript\nconst Button = styled.button`\n  color: turquoise;\n`;\n\nrender pug`\n  Button This my button component.\n`;\n```\n\nSo, you need to add the following to the start of options.\n\n```javascript\n{\n  loader: 'webpack-preprocessor-pug-tsx',\n  options: {\n    start: ['button`'],\n  },\n},\n```\n\n### There is no need to include `/** @jsx jsx */` in the document.\n\nThe following code is added automatically.\n\nbefore\n\n```javascript\nimport { jsx, css } from '@emotion/core';\n```\n\nafter\n\n```javascript\n/** @jsx jsx */ jsx;\nimport { jsx, css } from '@emotion/core';\n```\n\n## Sample Project\n\n```bash\ngit clone git@github.com:pruge/storybook-tutorial.git\nyarn\nyarn storybook\n```\n\n## Lisense\n\nMIT License\n\n[version-badge]: https://img.shields.io/npm/v/webpack-preprocessor-loader.svg\n[npm]: https://www.npmjs.com/package/webpack-preprocessor-loader\n[node-badge]: https://img.shields.io/node/v/webpack-preprocessor-loader.svg\n[node]: https://nodejs.org\n[download-badge]: https://img.shields.io/npm/dt/webpack-preprocessor-loader.svg\n[license]: LICENSE\n[license-badge]: https://img.shields.io/npm/l/webpack-preprocessor-loader.svg\n[travis-badge]: https://travis-ci.org/afterwind-io/preprocessor-loader.svg?branch=master\n[travis]: https://travis-ci.org/afterwind-io/preprocessor-loader\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpruge%2Fpug-tsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpruge%2Fpug-tsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpruge%2Fpug-tsx/lists"}