<q-dialog v-model='PromptName'/>

converts to:

q-dialog(v-model="'PromptName'")

which is not liked:
VueCompilerError: v-model value must be a valid JavaScript member expression.

To my mind it's valid javascript and node doesn't mind but it is a bit odd.

It only seems to happen with v-model (maybe all v- attributes).

After running npm run build and let Apache serve the /dist directory, I get an error:

Data from html2pug_params: null main.0884b0900bc2a131845f.js:1:235143
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

And this is probably where it borks:

if(this._bodyFormData)throw new Error("could not read FormData body as text")
return Promise.resolve(this._bodyText)},n.formData && (this.formData=function(){return this.text().then(v)}),this.json=function(){return this.text().then(JSON.parse)},this}u.prototype.append=function(e,t){e=a(e),t=l(t)
var r=this.map[e]

And this is how I got there:

npm run build
cd dist
search JSON.parse > ../x.x
cd ..
cat x.x | tr '};' '}\n;' | less

BTW: when running in node, on some port, all is good.
Also when doing reverse proxy in Apacha, all is good.

When convert empty value attribute
the converted pug text will miss quote

should be

Thanks

Changing any setting won't affect output on Firefox, Safari works fine.

There are currently a few issues that prevent this tool from accurately converting templates from popular UI frameworks like Material-UI, Blueprint, Vuetify, etc.

[ 1 ]

Word case is not preserved. This results in invalid element & variable names since these names are eventually consumed by JavaScript, where their usage is case-sensitive.

[ 2 ]

Self-closing tags break the hierarchy. Tags that should be siblings of self-closing tags are rendered as children instead.

[ 3 ]

Tag attributes that are delimited for interpolation in JavaScript are converted to multiple string attributes, apparently being split by spaces. Altering this might conflict with the HTML spec, so it would be best implemented as an option like Preserve Javascript Interpolation that defaults to false.

An example of the behavior when set to true would be that

<div foo={bar ? bar : baz}/>

renders as

div(foo="{bar ? bar : baz}")

instead of

div(foo="{bar", ?="", bar="", :="", baz}="")

Example

<Navbar>
  <NavbarGroup align={alignRight ? Alignment.RIGHT : Alignment.LEFT}>
    <NavbarHeading>Blueprint</NavbarHeading>
    <NavbarDivider/>
    <Button className={Classes.MINIMAL} icon="home" text="Home"/>
    <NavbarDivider/>
    <Button className={Classes.MINIMAL} icon="document" text="Files"/>
  </NavbarGroup>
</Navbar>

is rendered as

navbar
  navbargroup(align="{alignRight", ?="", alignment.right="", :="", alignment.left}="")
    navbarheading Blueprint
    navbardivider
      button(classname="{Classes.MINIMAL}", icon="home", text="Home")
        navbardivider
          button(classname="{Classes.MINIMAL}", icon="document", text="Files")

but should be rendered as

Navbar
  NavbarGroup(align="{alignRight ? Alignment.RIGHT : Alignment.LEFT}")
    NavbarHeading Blueprint
    NavbarDivider
    Button(className="{Classes.MINIMAL}", icon="home", text="Home")
    NavbarDivider
    Button(className="{Classes.MINIMAL}", icon="document", text="Files")

Wrong conversion when class has underscore

Example:

<div class="block__element"></div>

converted to

div(class="block__element")

Expected conversion to:

.block__element

The current html2pug plugin https://marketplace.visualstudio.com/items?itemName=dbalas.vscode-html2pug#review-details doesn't produce good pug. In that if you create a vue3 + quasar default page the pug code created from it changes the actual meaning. However your converter based on I guess xhtml2pug preserves the layout.

I guess for extra bonus points this could be plugged into Volar as a PR? in that source he uses html2pug which is some years old...

Hi!

first of all: thank you for your very helpful tool! Highly appreciated!

I only switched to pug yesterday (coming from ejs, all in a webpack context), but so far I am very happy with it. I only observe one thing that I would like to mention, and maybe you find a moment to share your opinion on that.

I use html pre-processors mainly to develop an initial webpage layout that will later be implemented in a CMS (TYPO3, the templates there are called "Fluid templates"). That means I have to rebuild the templates again in the CMS, which is ok by me, since lots of things are simply copy and paste.
Now, with pug however, that changes a bit, especially when in comes to classes and using tailwind. When converting html to pug, html2pug extracts css in dot notation, except where it encounters tailwindcss specials like md:w-1/2 or similar. Then the converter creates a class attribute, which is great.

But eventually I end up with 2 ways of css notation in the new pug file, which look like this, e.g.:

.gallery-unit.relative.inline-block.bg-gray-100.ml-2.whitespace-normal.align-top.h-60.rounded.shadow-simple.transition-shadow.duration-300(class='w-2/3 sm:w-1/2 md:w-1/3 lg:w-1/4 md:ml-6 lg:ml-8 lg:h-72 hover:shadow-simpleHover')

It would be way simpler to have everything in the class attribute like this:

.(class='gallery-unit relative inline-block bg-gray-100 ml-2 whitespace-normal align-top h-60 rounded shadow-simple transition-shadow duration-300 w-2/3 sm:w-1/2 md:w-1/3 lg:w-1/4 md:ml-6 lg:ml-8 lg:h-72 hover:shadow-simpleHover')

That would make it easier to copy classes over to another template system, and, IMO, it is also easier to read in the editor.

I wonder if it would be possible to have a configuration option available? E.g.:

Inline all CSS

Would love to know your opinion about that! Thank you!

As the title says, when I paste a snippet that has also include statements, those are prepended by a pipe. Is that on purpose?

Hello.. I love https://html2pug.now.sh/

I used to develop Angular Apps and it's case sensitive.
Can we have an option to keep uppercase letters in code? The PUG is always being in lowercase mode.
Thanks!

• Tabs/Spaces
• Encode html chars

This input:

<pre><code>Test</code></pre>

results in:

pre.
  

With frontend frameworks like vue I like to place my attributes before the classes as they're far more important visually to process than the classes.

Example:

<div v-if="loading" @click="doSomething() :key="index" v-for="(x, index) in myArray" class="padding-left padding-top margin-right text-center text-white background-black">

The above div gets translated to:

.padding-left.padding-top.margin-right.text-center.text-white.background-black(v-if="loading" @click="doSomething() :key=" index" v-for="(x, index) in myArray")

Which means all of the important aspects of that line (the attributes) overflow in my IDE so I have to scroll horizontally to see what this div actually does. I'd much rather have the following:

div(v-if="loading" @click="doSomething() :key=" index" v-for="(x, index) in myArray").padding-left.padding-top.margin-right.text-center.text-white.background-black

I end up manually adjusting the output to the above, but it'd be cool to have a toggle so it can do this automatically. I know it's not very "puggish" to use the div tag when classes are available and you can omit it, but I prefer always having attributes before classes for maximum readability with frontend frameworks.

Thanks for your tool, super helpful!

You can reproduce with this sample (vue.js):

<q-btn icon="event" round color="primary">
      <q-popup-proxy @before-show="updateProxy" cover transition-show="scale" transition-hide="scale">
        <q-date v-model="proxyDate">
          <div class="row items-center justify-end q-gutter-sm">
            <q-btn label="Cancel" color="primary" flat v-close-popup />
            <q-btn label="OK" color="primary" flat @click="save" v-close-popup />
          </div>
        </q-date>
      </q-popup-proxy>
 </q-btn>

The expected output would be:

  q-popup-proxy(@before-show="updateProxy" cover transition-show="scale" transition-hide="scale")
   q-date(v-model="proxyDate")
     .row.items-center.justify-end.q-gutter-sm
       q-btn(label="Cancel" color="primary" flat v-close-popup)
       q-btn(label="OK" color="primary" flat @click="save" v-close-popup)

But because the inner q-btn elements have self-closing tags your interpreted assumed everything below is a child and you get the following with the 2nd q-btn becoming a child of the first, the effect gets worse if I drop an entire page of code with various self-closing tags.

q-btn(icon="event" round color="primary")
  q-popup-proxy(@before-show="updateProxy" cover transition-show="scale" transition-hide="scale")
    q-date(v-model="proxyDate")
      .row.items-center.justify-end.q-gutter-sm
        q-btn(label="Cancel" color="primary" flat v-close-popup)
          q-btn(label="OK" color="primary" flat @click="save" v-close-popup)

Thanks appreciate your tool!