Comments (2)
@Gooseware
You can use pug-as-jsx-loader
.
The loader supports inline templates and can store the pug files separately.
And if you use create-react-app, you can use pug-as-jsx-loader
with cra-rewired
without npm run eject
.
https://github.com/bluewings/cra-rewired/tree/master/examples/pug-as-jsx-loader
App.pug
.App
header.App-header
img.App-logo(src='{logo}', alt='logo')
p
| Edit
code src/App.js
| and save to reload.
a.App-link(href='https://reactjs.org', target='_blank', rel='noopener noreferrer')
| Learn React
App.js
import template from './App.pug';
class App extends Component {
render() {
return template({
// variables
logo,
});
}
}
from babel-plugin-transform-react-pug.
This is not currently supported. It would require an update to https://github.com/pugjs/babel-plugin-transform-react-pug/blob/master/src/index.js to handle a call to pug.compileFile
by resolving the file name, reading the file, then running a slight variation on:
const ast = parsePug(src);
const context = Context.create(this.file, path, interpolationRef);
const transformed = ast.nodes.map(node => visitExpression(node, context));
const expression = transformed.length === 1 ? transformed[0] : t.arrayExpression(transformed);
context.variablesToDeclare.forEach(id => {
path.scope.push({kind: 'let', id});
});
path.replaceWith(expression);
This is not trivial, and not on my current road map, but if someone wants to take a stab at it, I'll do my best to review the pull request.
from babel-plugin-transform-react-pug.
Related Issues (20)
- `class` property was broken, like pug`div( class="container" )` HOT 14
- Case fall through doesn't work HOT 1
- Can't change "React.Fragment" output — Babel's transform react-jsx plugin doesn't honor the "pragmaFrag" option
- create-react-app integration instructions are out of date HOT 3
- How to get around "Unescaped, buffered code is not supported in react-pug" HOT 1
- pug-as-jsx-loader is not good, but their readme looks better HOT 3
- Integration with Ionic React Typescript HOT 1
- start server with errors HOT 5
- Problems in Webstorm HOT 3
- Next js, TypeError: Cannot read property 'Fragment' of undefined HOT 2
- special characters in class names -- i.e. tailwindcss HOT 2
- not support tsx? HOT 3
- Couldn't you just use webpack
- Is it possible to use webpack's rawloader to feed this plugin template files as strings?
- Doesn't work with webpack, ts-loader, babel with `tsconfig.json > target: "es5"` configuration.
- prop spreading (support attribute blocks) HOT 2
- Support tsx
- SWC plugin HOT 3
- support for esbuild?
- Proposal: typescript react-pug plugin HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-transform-react-pug.