Require a pug template

[Gooseware]

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.

[ForbesLindesay]

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.

[bluewings]

@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,
    });
  }
}