bluewings / Pug As Jsx Loader
Licence: mit
Stars: ✭ 168
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Pug As Jsx Loader
Omil
📝Webpack loader for Omi.js React.js and Rax.js components 基于 Omi.js,React.js 和 Rax.js 单文件组件的webpack模块加载器
Stars: ✭ 140 (-16.67%)
Mutual labels: webpack, loader, jsx
Markdown Loader
markdown loader for webpack
Stars: ✭ 335 (+99.4%)
Mutual labels: webpack, webpack-loader, loader
Sass Loader
Compiles Sass to CSS
Stars: ✭ 3,718 (+2113.1%)
Mutual labels: webpack, webpack-loader, loader
Svgr
Transform SVGs into React components 🦁
Stars: ✭ 8,263 (+4818.45%)
Mutual labels: webpack, webpack-loader, loader
lsxc
Compile Livescript + Pug + React + SASS as a single component
Stars: ✭ 17 (-89.88%)
Mutual labels: jsx, pug, jade
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (+0.6%)
Mutual labels: jsx, pug, jade
Thread Loader
Runs the following loaders in a worker pool
Stars: ✭ 945 (+462.5%)
Mutual labels: webpack, webpack-loader, loader
Stylefmt Loader
Webpack-loader. Fixes stylelint issues automatically while bundling with Webpack.
Stars: ✭ 24 (-85.71%)
Mutual labels: webpack, webpack-loader, loader
Wasm Loader
✨ WASM webpack loader
Stars: ✭ 604 (+259.52%)
Mutual labels: webpack, webpack-loader, loader
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-37.5%)
Mutual labels: webpack, webpack-loader, loader
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+717.86%)
Mutual labels: webpack, pug, jade
Sass Vars Loader
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Stars: ✭ 112 (-33.33%)
Mutual labels: webpack, webpack-loader, loader
Svg Sprite Loader
Webpack loader for creating SVG sprites.
Stars: ✭ 1,822 (+984.52%)
Mutual labels: webpack, webpack-loader
Aot Loader
⚠️ [Deprecated] Ahead-of-Time Compiler for Webpack.
Stars: ✭ 121 (-27.98%)
Mutual labels: webpack, loader
Redux React Starter
DEPRECATED use the new https://github.com/didierfranc/react-webpack-4
Stars: ✭ 137 (-18.45%)
Mutual labels: webpack, jsx
X0
Document & develop React components without breaking a sweat
Stars: ✭ 1,706 (+915.48%)
Mutual labels: webpack, jsx
pug-as-jsx loader for webpack
Try it out here...
Installation
npm install pug-as-jsx-loader --save-dev
Usage
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.pug$/,
use: [ 'babel-loader', 'pug-as-jsx-loader' ]
}
]
}
}
pug | jade template (./file.pug)
div
h1 {period.start} ~ {period.end}
ul
li(@repeat='items as item')
i.ico(@if='item.icon', className='{"ico-" + item.icon}')
ItemDetail(item='{item}')
→ transpiled function
import React from 'react';
export default function (params = {}) {
const { items, period, ItemDetail } = params;
return (
<div>
<h1>
{period.start} ~ {period.end}
</h1>
<ul>
{items.map((item, i) =>
<li key={i}>
{(item.icon) && (
<i className={`ico ico-${item.icon}`} />
)}
<ItemDetail item={item} />
</li>
)}
</ul>
</div>
);
};
import pug template
import React from 'react';
import template from './file.pug'; // ← import pug template
import ItemDetail from './ItemDetail';
class Report extends React.Component {
render() {
const {
items,
period,
} = this.props;
return template.call(this, { // ← use transpiled function
// variables
items,
period,
// components
ItemDetail,
});
}
};
integration with Typescript
// react-app-env.d.ts
const React = require('react');
declare module '*.pug' {
const template: (params?: { [key: string]: any }) => React.ReactElement;
export = template;
}
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].