werty1001 / bempug Goto Github PK

Pug / Jade have little bug — extra line break pretty if block in mixin contain only text or inline tags, because tagCanInline function in core not work for it. I open issue, but don't know when the bug will be fixed.

My solution, trim problem tags after compile. Without trim and after fix.

With gulp:

gulp.src( 'dev/*.pug' )
  .pipe( pug() )
  .pipe( gulp.dest( function(file) {

    let html = file.contents.toString();

    let selfClosing = ['img','input','hr','br','wbr','source','area','col','colgroup','meta','link'];

    html = html.replace( /(<[A-Z][A-Z0-9]*\b[^>]*>)([^<>]*)(<\/[A-Z][A-Z0-9]*>)/gi, function(str, start, content, end) {

      let tag = start.replace( /<|>/gi, '' ).split( ' ' )[0];

      return start + ( ( selfClosing.indexOf( tag ) === -1 ) ? content.trim() : content ) + end;

    });

    file.contents = new Buffer( html );

    return 'build/app';

}));

Hello, please forgive me if this is not the right platform for requesting an additional feature. Please let me know if there is a better way and I will correct it.

Bempug has been powerful to use, but it seems to be missing something which could be useful: Custom attributes. As of right now, it seems they cannot be included with a bempug mixin.

In my use case, I am using Vue (although I'm sure this could apply to any number of frameworks).

As a small example, you could give a custom src attribute to an img with a colon prefixing the attribute, like so: <img :src="myData.myVariable" />. The presence of the colon tells Vue to evaluate the contents of the attribute's quotes as JS expression.

In react, you might use const element = <img src={myData.myVariable}> </img>; where JSX evaluates the content of the curly braces much like Vue would in the previous example.

If a bempug user wishes to create an HTML tag with a custom attribute of any kind, including a reactive one such as in a framework, how could they do so?

Thank you.