Require a pug template
Gooseware opened this issue · 2 comments
Hi,
I am wondering if it would be possible to require a pug template. Using a tagged string literal is great but I would love to keep the templates separate. Unfortunately I don't know if I am able to convert a string into a string literal or if there is a global pug function which I can use on a string that I require in using raw-loader in webpack.
Thank you for any assistance on this.
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.
@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,
});
}
}