JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<textarea name="" id="pug" cols="100" rows="15">include ../vendor/bemto/bemto
include ../variables

block page_variables

doctype html
html(lang='ru')
  head
    include ../shared/head
    block head

  body
    +b.app
      +b.HEADER.header
        +e.container.container
          +e.title_subtitle
            +e.H1.title Производство и продажа <span class="nobr">детокс-программ</span>
            +e.subtitle Соки и смузи холодного отжима с доставкой по Москве и МО
          +e.logo
            +b.logo: +e.image.image(src=img('logo.png') alt='')
          +e.phone_order-info
            +e.phone.h-serif(href='tel:+74991109848') +7 (499) 110-98-48
            +e.order-info Заказы по телефону с 9:00 до 21:00, <span class="nobr">на сайте – круглосуточно</span>

      +b.MAIN.main
        +b.about
          +e.container.container
            .col-two-third
              +e.header
                +b.about-header
                  +e.H2.title Anti Age
                    +e.subtitle Новая летняя детокс-программа
                  +e.description Фантастическое омоложение за 3 дня!

            .col-one-third
              +e.gift
                +b.about-gift
                  +e.icon(src=ic('gift-white.png'))
                  +e.title В подарок
                  +e.subtitle курс по фейсфитнесу <br>и курс медитаций

          +e.container.container
            .col-two-third
              +e.program
                +b.about-program
                  +e.title Детокс-программа AntiAge
                  +e.description Разработана нашими специалистами специально для активных женщин, которые хотят чувствовать себя молодо и энергично и оставаться в тонусе, несмотря на стрессы и бешеный ритм жизни мегаполиса.
                  +e.list
                    -
                      var list = [
                        {image: pic('about/program1.jpg'), title: 'Детокс-программа <br>на основе соков и смузи на 3 дня', 'price': '7 470 р', link: v0, isGift: false},
                  ...

JavaScript

let bemto = pug.value

const RE_BLOCK = /^\s*?\+b./
const RE_ELEMENT = /^\s*?\+e./
const RE_BLOCK_OR_ELEMENT = /^\s*?\+b.|\+e./
const RE_NESTED_ELEMENT = /(\s*?)(\+b.*|\+e.*): (\+b.*|\+e.*)/
const RE_ATTRIBUTES = /\(.*\)/
const RE_CONTENT = /(\S)(\s|!=|:).*/

const expandBemto = bemto => {
	return bemto.replace(RE_NESTED_ELEMENT, '$1$2$1  $3')
}

const removeBemtoChunks = bemto => {
  const lines = bemto.split('\n')

	return lines.filter(line => {
  	return RE_BLOCK_OR_ELEMENT.test(line)
  }).map(line => {
  	return line
    	.replace(RE_ATTRIBUTES, '')
      .replace(RE_CONTENT, '$1')
  }).join('\n')
}

console.log(
	removeBemtoChunks(expandBemto(bemto))
)

/*
	TODO:
  - make expand recursively
  - make up the tree logic
  - write tests
*/