Improvement: if else in atrribute

Can we have if else in attribute. like this :
a( className=if(foo===bar) foo else bar @if=${} // also string interpolation like github.com/pugjs/babel-plugin-trans )

Also an inline if and tagged literal template would be great (like babel-plugin-transform-react-pug)

@phmngocnghia
It seems to be possible in the way listed below.
Please let me know if you think about something else.

div
  a(className='{foo === bar ? foo : bar}')
  a.foo(@if='foo === bar')
  a.bar(@if='foo !== bar')

import React from 'react';

export default function (params = {}) {
  const { bar, foo } = params;
  return (
    <div>
      <a className={foo === bar ? foo : bar} />
      {(foo === bar) && (
      <a className="foo" />
      )}
      {(foo !== bar) && (
      <a className="bar" />
      )}
    </div>
  );
}

This seem good enough for me. Btw i have new suggestion too. Inline function. People too lazy for make function for event so they often put anoynomous function in event props (pug is preprocessor for lazier ):

div
    a(onClick={() => {
      this.setState({foo: 'pug-as-jsx loader is awesome'})
    }})

transpiled into :

<div>
    <a onClick={() => {
        this.setState({foo: 'pug-as-jsx loader is awesome'})
    }}
<div>,

Do you have any recommend for IDE or plugin that support fully highligh syntax, auto complete for pug-jsx ? Also please consider implement inline template pugblah having call transpile function every time create new component make it less flexible.

You can use inline functions inside quotation marks as shown below.

div
  a(onClick='{() => { this.setState({foo: "single lime"}) }}')
  a(onClick='{() => { \
    this.setState({foo: "multi line"}) \
  }}')

import React from 'react';

export default function () {
  return (
    <div>
      <a onClick={() => { this.setState({foo: 'single lime'}) }} />
      <a onClick={() => { this.setState({foo: 'multi line'}) }} />
    </div>
  );
}

@phmngocnghia
I prefer vscode because it is lightweight and has a lot of extensions.

And I did not understand the question below. Can I provide more details or provide an example?

Also please consider implement inline template pugblah having call transpile function every time create new component make it less flexible.

I mean an ability to return inline pug template in the render function instead have to create or reference to a .pug file. Beside that, everything work perfectly for me.

const CodePen = ({dataSlug}) => `
  div.mb-4
    p.codepen(
      data-height='400',
      data-theme-id='dark',
      data-slug-hash=dataSlug,
      data-default-tab='result',
      data-user='PhmNgocNghia',
      data-embed-version='2',
      data-preview='true'
    )
    
Export Default CodePen

@phmngocnghia
pug-as-jsx-loader supports inline pug templates in js files.
Use it as shown below.

PS. We have found and fixed a bug in testing our example. Please use version 1.0.51
(There was a bug that should have at least two lines above the inline pug template.)

const CodePen = ({dataSlug}) => pug` 
  div.mb-4 
    p.codepen( 
      data-height='{400}', 
      data-theme-id='dark', 
      data-slug-hash='{dataSlug}', 
      data-default-tab='result', 
      data-user='PhmNgocNghia', 
      data-embed-version='{2}', 
      data-preview='{true}' 
    )`;

export default CodePen;

const CodePen = ({dataSlug}) => (
   <div className="mb-4">
     <p
       className="codepen"
       data-default-tab="result"
       data-embed-version={2}
       data-height={400}
       data-preview={true}
       data-slug-hash={dataSlug}
       data-theme-id="dark"
       data-user="PhmNgocNghia"
     />
   </div>
);

export default CodePen;

I have added a test case for your example. thank.

pug-as-jsx-loader/test/inline-pug-templates.js

Lines 73 to 101 in 2ff3605

    
           `const CodePen = ({dataSlug}) => pug\` 
        
             div.mb-4 
        
               p.codepen( 
        
                 data-height='{400}', 
        
                 data-theme-id='dark', 
        
                 data-slug-hash='{dataSlug}', 
        
                 data-default-tab='result', 
        
                 data-user='PhmNgocNghia', 
        
                 data-embed-version='{2}', 
        
                 data-preview='{true}' 
        
               )\`; 
        
           export default CodePen;`, 
        
           `const CodePen = ({dataSlug}) => ( 
        
             <div className="mb-4"> 
        
               <p 
        
                 className="codepen" 
        
                 data-default-tab="result" 
        
                 data-embed-version={2} 
        
                 data-height={400} 
        
                 data-preview={true} 
        
                 data-slug-hash={dataSlug} 
        
                 data-theme-id="dark" 
        
                 data-user="PhmNgocNghia" 
        
               /> 
        
             </div> 
        
           ); 
        
           export default CodePen;`],

	`const CodePen = ({dataSlug}) => pug\`
	div.mb-4
	p.codepen(
	data-height='{400}',
	data-theme-id='dark',
	data-slug-hash='{dataSlug}',
	data-default-tab='result',
	data-user='PhmNgocNghia',
	data-embed-version='{2}',
	data-preview='{true}'
	)\`;

	export default CodePen;`,
	`const CodePen = ({dataSlug}) => (
	<div className="mb-4">
	<p
	className="codepen"
	data-default-tab="result"
	data-embed-version={2}
	data-height={400}
	data-preview={true}
	data-slug-hash={dataSlug}
	data-theme-id="dark"
	data-user="PhmNgocNghia"
	/>
	</div>
	);

	export default CodePen;`],