[question] Any idea on how to use with preact?

[douggr]

Hello! Well, this is awkward.

This is funny, because if I load the transpiled file instead, it works like a charm.

Options:

use: ['babel-loader', 'pug-as-jsx-loader?transpiledFile=true'],

Output

✖ ERROR ./src/routes/profile/index.pug
Module build failed: SyntaxError: Unexpected token (6:4)

  4 |   const { count, style, user } = __params;
  5 |   return (
> 6 |     <div class={style.profile}>
    |     ^
  7 |       <h1>Profile: {user}</h1>
  8 |       <p>This is the user profile for a user named {user}.</p>
  9 |       <p>

index.pug

div(class='{style.profile}')
  h1 Profile: {user}
  p
    button(onClick="{this.increment}") Click Me

  p Clicked {count} times.

index.js

import { h, Component } from 'preact';
import style from './style';
import template from './index.pug'; // <= error here
// import template from './index.pug.transpiled.jsx'; // here it just works

export default class Profile extends Component {
	state = {
		time: Date.now(),
		count: 0
	};

	// update the current time
	updateTime = () => {
		this.setState({ time: Date.now() });
	};

	increment = () => {
		this.setState({ count: this.state.count+1 });
	};

	// gets called when this route is navigated to
	componentDidMount() {
		// start a timer for the clock:
		this.timer = setInterval(this.updateTime, 1000);
	}

	// gets called just before navigating away from the route
	componentWillUnmount() {
		clearInterval(this.timer);
	}

	// Note: `user` comes from the URL, courtesy of our router
	render({ user }, { time, count }) {
		return template.call(this, {
			count,
			style,
			user,
		});
	}
}

Transpiled file:

import React from 'react';

export default function(__params = {}) {
  const { count, style, user } = __params;
  return (
    <div class={style.profile}>
      <h1>Profile: {user}</h1>
      <p>This is the user profile for a user named {user}.</p>
      <p>
        <button onClick={this.increment}>Click Me</button>
      </p>
      <p>Clicked {count} times.</p>
    </div>
  );
}


//  /* USAGE EXAMPLE */
//  // jsx
//  import template from './index.pug';
//  
//  class Sample extends React.Component {
//    render() {
//      const { count, style, user } = this;
//  
//      return template.call(this, {
//        // variables
//        count,
//        style,
//        user,
//      });
//    }
//  }
//  
//  /* // USAGE EXAMPLE */

[douggr]

Hacking a bit further, I think that is something wrong with preactjs-templates/default. Not sure though.

I was able to get it up and running with preactjs-templates/typescript. Since this is a new and small project, I will give it a try. BUT(!), if you have any clue about the original post, please let me know ;)

Cheers.

P.S.: Great transformer! I loved the __macro thingie :)

[bluewings]

@douggr
I have added an example for preactjs-templates/default below.
https://github.com/bluewings/pug-as-jsx-loader/tree/master/examples/preact-default

In preact.config.js, you need to set babel preset for the .pug file.
and npm install babel-preset-react --save-dev

pug-as-jsx-loader/examples/preact-default/preact.config.js

Lines 12 to 26 in b74ad07

	config.module.loaders.push({
	test: /\.pug$/,
	use: [{
	loader: 'babel-loader',
	options: {
	presets: ['react']
	}
	}, {
	loader: 'pug-as-jsx-loader',
	options: {
	autoUpdateJsFile: true,
	transpiledFile: true
	}
	}]
	});

If you are using Babel 7 or higher, try the options below

  loader: require.resolve('babel-loader'),
  options: {
    presets: ['@babel/preset-env', '@babel/preset-react'],
  },

Enjoy using the following Pug template!, Thank you!
https://github.com/bluewings/pug-as-jsx-loader/tree/b74ad079b8fd8c80d1ad487203c14834b1591a77/examples/preact-default/src/routes/home