izolate / html2pug Goto Github PK

If I run html2pug -f (version 4.0.0) on:

<template>
  <child></child>
</template>

I get output:

template

Running the same input through html2jade or the online html2pug I get the expected:

template
  child

Is this a bug or something I am missing?

Is it possible to support XML input?

In the following example, *ngFor attribute is converted into *ngfor attribute in pug. I believe this is a mistake to force lowercase on conversion, and results in non-functional Angular code in this case.

INPUT:
echo "<div class="products" *ngFor="let product of products"/>" | html2pug -d -f

OUTPUT:
.products(*ngfor="let" product of products).

Additionally, the end dot is unnecessary as there is no further text.

Side note: I'd love to see "smarter" processing of when to use a dot at the end of the line. In practice, I use a dot at the end of the line seldomly, preferring the next line starting with pipe as it is typically only one line. Perhaps a pipe could be used when it is only one line, and a dot when it is multiple lines?

Thanks for your work on this!

I installed the most recent version of html2pug from npm (1.0.0) and used NodeJS v6.11.1.
When running html2pug -f <file>.html the following error is being thrown

module.exports = async (sourceHtml, opts = {}) => { ^ SyntaxError: Unexpected token ( at createScript (vm.js:56:10) at Object.runInThisContext (vm.js:97:10) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (/usr/lib/node_modules/html2pug/src/cli.js:6:18)

This error can also be reproduced on Windows 10 using NodeJs v6.10.3 and npm 3.10.10

input

<a href="index.html">
    <i class="fa fa-home"></i>
    首页
</a>

output

li
a(href='index.html')
i.fa.fa-home
|
首页

In some popular Vue component library like iView for instance. the tag is case sensitive.

<Button>Default</Button>

expected result should be

Button Default

instead of the lower case one

I run the command html2pug < inbox.html > test.pug and it shows this error

The entire contents under template tag are discarded.

REPL does not allow top-level Async Function. So the CLI code throws an error:

async function main ({ fragment, needsHelp, showVersion, tabs }) {
  const stdin = await getStdin()

  if (showVersion) {
    return console.log(version)
  }

  if (needsHelp || !stdin) {
    return console.log(help)
  }

  const pug = html2pug(stdin, { tabs, fragment })
  console.log(pug)
}

$ html2pug < src/template.html > src/template.pug
/home/demsking/.nvm/versions/node/v6.11.2/lib/node_modules/html2pug/src/cli.js:30
async function main ({ fragment, needsHelp, showVersion, tabs }) {
      ^^^^^^^^

SyntaxError: Unexpected token function
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)

& write some tests 🔔

Create the final release version and publish to NPM

Since jsdom is intended to emulate the DOM completely, it seems like a complete overkill for a library like this, which is only interested in the html. Maybe a library like cheerio or parse5 are better choices here?

Thanks for the tool, thought you may be interested in knowing that their is an issue with the canvas tag

Input

<div>
  <canvas id="canvas"></canvas>
  <p>where did this paragraph go</p>
</div>

Output

div
  canvas(style='')

trying to convert this:

<p>Строка</p>

and gets this:

p Строка

but expects this:

p Строка

<a href="javascript:window.alert('hello')">XX</a>
<a href='javascript:window.alert(&apos;hello&apos;)'>XX</a>

translates to

a(href='javascript:window.alert('hello')') XX
a(href='javascript:window.alert('hello')') XX

leads to

  > 1|     a(href='javascript:window.alert('hello')') XX
--------------------------------------------^
Syntax Error: Unexpected token

So I modify parser.js line 117 something like as follows:

            default:
                value = value.replace( /'/g, "'" );
                attributeList.push( `${name}!='${value}'` )
                break

"!=" in line 3 is significant

Input like this:

<script type="text/javascript">
	$(function() {
		var type = /person/.test(location.search) ? 'person' : 'company'
		centerInit({
			//					type: 'person'
			//					type: 'company'
			type: type,
		});
	});
</script>

will convent to

script(type='text/javascript') $(function() {
			var type = /person/.test(location.search) ? 'person' : 'company'
			centerInit({
				//					type: 'person'
				//					type: 'company'
				type: type,
			});
		});

While top two line are surposed to be

script(type='text/javascript').
     $(function() {

Note the dot . and new line must be there
Thanks

Sorry that this is not an issue.
I think this is a good project, but the disadvantage is it support in server side.
It's really good if you support online, I mean it can be bundled by webpack2, angular-cli... to work in client side.
Thanks.

Hello. I use vscode and prefer to use extension vscode-html2pug, based on your plugin.
In my env, I use double quotes in pug. It is possible to change preferable type of quotes?
Currently, I needed every time to manually replace single quotes, and it is hard to do(
Thanks!

Are you planning on adding support for pug conditionals in the future?
Since in my project I have to convert html templates into pug for storage and then reconvert them back to html for rendering it would be great to support pug conditionals in the html.

What are your thoughts?

Think about a option to not encode accents!

Thanks.

In your demo in npmjs.com you convert to !doctype html hit the official document said it should be doctype html

Why?

I did a script that auto generate pug snippets from html ones.
so i did a lot of conversion with this command html2pug < tmp.html > tmp.pug -f -t
and i saw some issues (blank lines and tabs)

i give you my script, and the data, maybe this question need to be reformulated

vs-quasarHTML_to_PUG.zip

I appear to be losing the space when I put links, strong etc. in line in a paragraph. Can someone help?

Source HTML

<p>This is my text. This word is <strong>bold</strong> and this <a href="http://gitbit.org">link</a> is here.</p>

Pug Output

html
	head
	body
		p
			| This is my text. This word is
			strong bold
			| and this
			a(href='http://gitbit.org') link
			| is here.

Command being run to convert

const pug = html2pug(html.value, { tabs: true })

[email protected]
[email protected]
npm -v = 6.0.0
node -v = 8.11.1

<span>&nbsp&nbspSome Text</span>

is converted to

span &nbsp&nbspSome Text

input:

<p>a<br>
b</p>

output:

p
  | a
  br
  |
b

Hi,
Please provide a toggle converter button between indentation types.
Thanks.

    <Page>
        <ActionBar>
            <GridLayout width="100%" columns="auto, *">
                <Label text="MENU" @tap="$refs.drawer.nativeView.showDrawer()" col="0"/>
                <Label class="title" text="Welcome to NativeScript-Vue!"  col="1"/>
            </GridLayout>
        </ActionBar>

        <RadSideDrawer ref="drawer">
            <StackLayout ~drawerContent backgroundColor="#ffffff">
                <Label class="drawer-header" text="Drawer"/>

                <Label class="drawer-item" text="Item 1"/>
                <Label class="drawer-item" text="Item 2"/>
                <Label class="drawer-item" text="Item 3"/>
            </StackLayout>

            <GridLayout ~mainContent columns="*" rows="*">
                <Label class="message" :text="msg" col="0" row="0"/>
            </GridLayout>
        </RadSideDrawer>
    </Page>

will output

page
  actionbar
    gridlayout(width='100%', columns='auto, *')
      label(text='MENU', @tap='$refs.drawer.nativeView.showDrawer()', col='0')
        label.title(text='Welcome to NativeScript-Vue!', col='1')
  radsidedrawer(ref='drawer')
    stacklayout(~drawercontent='', backgroundcolor='#ffffff')
      label.drawer-header(text='Drawer')
        label.drawer-item(text='Item 1')
          label.drawer-item(text='Item 2')
            label.drawer-item(text='Item 3')
    gridlayout(~maincontent='', columns='*', rows='*')
      label.message(:text='msg', col='0', row='0')

Errors to me

1. Tag names have been converted to lower case they should remain the same case as input.
2. Label inline tag for some reason has ended up indented.

This...

 <q-item
        class="rounded"
        v-for="item in items"
        :key="item.title + ':camp:' + item.id"
        bordered="bordered"
        :class="{ focus: item.id === focusId }"
        :clickable="!item.focus"
        @click="focusItem(item)"
      >

Get's transformed to this...

q-item.rounded(v-for='item in items' :key='item.title + \':camp:\' + item.id' bordered='bordered' :class='{ focus: item.id === focusId }' :clickable='!item.focus' @click='focusItem(item)')

Which is a mess that won't compile. It should be outputting this:

q-item.rounded(
     v-for="item in items",
     :key="item.title + ':camp:' + item.id",
     bordered="bordered",
     :class="{ focus: item.id === focusId }",
     :clickable="!item.focus",
     @click="focusItem(item)"
   )

Pug supports XML... and now supports the cdata filter.
Would it be difficult to implement this?

if i have a multiline html comment, the jade equivalent is invalid:

<body>
  <!--
i am a multiline comment
    indentation
should
       not matter at all
   -->

results in

body
  //
i am a multiline comment
    indentation
should
       not matter at all

• Create a help/man page
• Improve syntax
• Handle redirecting html2pug < example.html
• Use pretty colors 🌈 (maybe)

Hi,

Input

<i class="fa fa-check" *ngIf="todo.done"></i>

Result

i.fa.fa-check(*ngif='todo.done')

Expect

i.fa.fa-check(*ngIf='todo.done')

It should keep origin letters.

When I input:

<button>
  Hello
</button>
<button>
  World
</button>
<button>
  <script src="hello.js" async></script>
  <span class="bold">About Us</span>
</button>
<span>About Us</span>
<span>Contact Us</span>

html2pug generates:

button  Hello
|  
button  World
|  
button
  script(src='hello.js', async='')
  |  
  span.bold About Us
|  
span About Us
|  
span Contact Us

The empty lines with pipes are invalid and generate a compiler error. This was tested using the html2pug.com website.