Emmet: Convert HTML to abbreviation

[sergeche]

Create converter that will parse HTML block and convert it to expression (counter-“Expand Abbreviation”).

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[giannisg]

i've send an email to the creator/s but i'm reposting here, just to upvote the request:

---

Hi,

First of all, thanks for your great work, you've done a super job, i really admire the result.

A thought i had about your program:

Is it possible to do 'reverse coding'?

ie take the

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

and transform it to

container>.header+.body>.title{Title}+.text{Text}^.footer

??

Why? well, first of all, its easier to work with the second code, and then getting it back to normal. And, most importand, if possible to use a client side javascript - or even a server side code by volunteers to write, _directly_, in emmet code html pages.

Think of the impact that would make.

Well, its just a thought :)

Thanks again,

Have fun,
Giannis,
Athens, Greece, Europe, World.

---

So, thats that, upvoting the idea :+1: and hoping to see it done :)

[lcb931023]

Have my upvote! Imagine if we can code the pages in HTML, translate it to emmet, and then write php code that includes the emmet code which gets expanded into HTML dynamically.

[adam-lynch]

:hand: My drive-by two cents:

@icb931023 First I thought what you said sounds cool but really, what would be the benefit? Your PHP will have to deal with a shorter string representing your HTML sure but it will then have to do more work with it.

I guess wouldn't have to worry about typos as much (like a missing slash in a closing tag for example) since all tags will be generated for you, but you're working with expanded HTML I'm assuming (albeit starting with the concise syntax) so I'm not sure if that's a strong argument for it either. Or maybe I'm wrong in assuming you wouldn't work entirely in the concise / collapsed syntax.

I want to want this. I just can't see a convincing use case. It's not as obviously beneficial as CSS preprocessing for example.

It would be a different story if browsers / templating engines understood the Emmet syntax. That would be interesting!

[vabatta]

Mmm, is quite intresting to create a JS library to traduce it ;)

[adam-lynch]

Here's a start from the perspective of the client; Emmet's Mustache. Feel free to contribute.

@vabatta :)

[DanielRuf]

any updates?

[ericpeeters]

Would love this too. I use a styleguide page where I store all my elements, to manage this I have a giant JSON file using Emmet strings to represent the elements and I've created a JavaScript tool to spit them out on a page. But right now I have to convert them all by hand to keep this file up to date everytime something new is created. Would love a way to convert HTML to an Emmet string.

[metaColin]

_bump_

I would love to be able to convert HTML into emmet. It would be super useful for making a cheat sheet of code blocks I frequently use.

[Kcko]

Any change?

[sergeche]

@Kcko no updates. This feature has the lowest priority for me

[worc]

it'd be a nice feature. hierarchies are easy to read in the emmet/zen syntax and sometimes it's helpful to have a kind of rough-draft in the abbreviation when iterating an HTML fragment design.

[MarcoWilli]

Would be a great feature!
Imagine creating multiple blocks with *n feature and finding out later you need to change the block. Now you have to delete the blocks and rewrite the emmet code again. Going back, modifying just a part and then let it generate again would be much faster!

[sergeche]

@MarcoWilli Emmet has enough methods to quickly modify existing code:

• (Wrap with abbreviation)[http://docs.emmet.io/actions/wrap-with-abbreviation/]
• (Update tag)[http://emmet.io/blog/beta-v1-1/]

You should also note that if your repeated elements contain different content (as you described as “modify later”), the reverse abbreviation string won’t be that same as you used to generate code

[stevehomer]

Upvote from me. New to Emmet and it would be a fantastic way of improving my skills.

[chermed]

Really needed this feature, here is my case:

I receive some blocks like
<record class="main1 text"> <field name id="1">1</field> <field name id="2">2</field> <field name id="3">3</field> <field name id="4">4</field> </record>

So I want to generate more records using the first one, so now I try to reproduce abbreviation to get record abbrevaition and then I type someething like (record...)*10

Thanks

[sergeche]

@chermed ...or you can simply copy-paste the code snippet. Please note that the code you’ve provided is a very simple yet very rare use case. In most cases you’ll end up with something like record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+... abbreviation, which is not very useful

[kizzlebot]

We have a microservice that renders a Html string from a template + JSON object w/ data and responds to POST requests with the rendered html string. Having to send a huge HTML string in the HTTP response introduces a bottleneck our application flow.

If there is a way to take this rendered HTML and convert it to an Emmet abbreviation which is sent as response instead, it would remove our bottleneck as our response data size takes smaller number of bytes. The microservice that receives the response can then emmet-expand the abbreviation for rendering clientside.

[sergeche]

@kizzlebot it seems like a viable use case, but you should consider the following:

• Converting huge HTML into Emmet might also be a bottleneck, but on CPU side in this case
• Does output gzipping solves problem?
• Expanding Emmet on client-side means that it requires a special runtime for rendering. So, it seems like there’s no need in your microservice at all because you can send your own template and JSON data right to client and render it using your own runtime

[DanielRuf]

@kizzlebot why not Messagepack and / or Apache Avro?

[kizzlebot]

@sergeche to be more specific, "render" may be wrong the word to use. we use the html to create a PDF document via a microservice that only receives html payloads and converts it to PDF. Therefore, if it would be possible to go from html to Emmet abbreviation, the client receiving the emmet abbreviation should be able to simply expand it using the current Emmet npm module. We wouldn't need a runtime to render because the html doesn't get rendered on the clientside ever. We just need a compact payload to pass around over the wire.

[garyivy]

I would like to build out sample sites and convert them back to emmet snippets to make presentation typing quicker (and it the process demo emmet).

[DanielRuf]

Probably possible using Hyperscript / JSX and the AST.

[coldmow]

This does have a lot of potential.
The other day I was messing with HTML frameworks like Jade and HAML and I thought they were a great replacements for the unclear HTML syntax. But I couldn't get into them for my projects because it required just that extra installation and conversion. I always used Emmet which was almost as good (it only supports a little less and does not require installation).
But today when I was building a site template, I decided to use indentation while writing in Emmet and I came up with this:

.navbar>
  .logo+
  ul.menu_v>
    li.menu_itm*2+
    li.menu_item.dropd
  ^
  ul.menu_v>
    li.item_dd

This is a lot more readable than HTML.
And after looking at it, I thought, wouldn't it be great if Emmet supported indentation.
And after that I thought, what if there is a conversion tool that converts Emmet into HTML with indentation. That way it's a lot more fun to write and read through HTML.
I mean XML had JSON happen to it.
It's time for HTML to move on...

[DanielRuf]

You mean webcomponents, hyperscript, JSX and pug? Well, imho this is not very easy to read.

[DanielRuf]

Emmet is mostly used for quick prototyping and command completion / scaffolding eg in PhpStorm projects. So Emmet syntax is normally not stored in any projects, just the final html.