Html-maker — удобная и простая генерация html с помощью coffeescript

[kuser]

Джва года ждал такую либу, батя грит малаца, хорошо зделоли.

[Stalker_RED]

htmlString = htmlmake ->
  @div "wrapper", ->
    @h1 "Привет, Хабр!"

А почему в случае с дивом строка стала классом, а в случае h1 содержимым тега? В чем разница?

[extempl]

Я так понимаю, если был передан коллбэк, то строка определяется как класс, если нет — то тег «простой» и она определяется как контент.

[lxkuz]

Я посчитал, что атрибут class является самым востребованным, поэтому в случае, если есть второй параметр (строка или коллбэк) и первый параметр является строкой, то будем считать, что это класс создаваемого элемента. Подробнее про варианты использования можно подсмотреть в тестах . Первый параметр считаем контентом элемента, если второго параметра нет.

[impwx]

Если библиотека основывается на таких допущениях, то имхо читать и поддерживать такой код ничуть не легче, чем $("<div>...</div>").

[lxkuz]

Вам никто не мешает писать более строго:

  htmlString = htmlmake ->
    @div class: "wrapper", ->
      @h1 {}, "Привет, Хабр!"

Вложенную структуру так все-равно удобнее читать, чем $("..."). ИМХО, опять же.

[impwx]

Если требуется кусок HTML больше чем на 2-3 строчки, есть резон вынести его в отдельный файл и скормить шаблонизатору. Плюсы — не мешаем логику с разметкой и пользуемся работающим autocomplete.

[lxkuz]

Согласен. Применение этой библиотеки имеет смысл только когда в готовом js компоненте неожиданно потребовалось добавить совсем немного html. Ну и плюс к этому она весит 40кб в минимизированном виде. Так что добавим еще тех, кто пишет мобильные версии сайтов.

[impwx]

она весит 40кб в минимизированном виде

Сначала подумал, что у вас опечатка, но проверил в репозитории — так и есть. Вы где-то нахимичили, потому что это безумно много. Для сравнения, Mustache в минифицированном виде весит 9 кб, а Underscore целиком, включая шаблонизатор — 16 кб. И вот еще интересная таблица с размерами.

[lxkuz]

Какой ужас! А ведь Underscore просто монстр в сравнении с моей скромной функцией) Спасибо за замечание, будем худеть!

[discopalevo]

билдфайл шедевральный, с каждым билдом min версия будет становиться в 2 раза больше.

[lxkuz]

Спасибо за наводку! Исправлено. Итоговый размер: 4кб

[UnknownHero]

«Когда внедрять js-шаблонизатор ради генерации несложного набора html элементов слишком дорого...»

Даже не знаю, что дороже.

[whunter]

<div class='hello-class'>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </div>

Вы пропустили

@a href: "http://google.com", "underworld!"  
<a href="http://google.com">underworld!</a>

[lxkuz]

исправил, благодарю

[piumosso]

А чем реакт вам не угодил?) Имхо какая-то фигня)

[lxkuz]

Очевидно, не все проекты заказчиков написаны на реакте)

[piumosso]

Очевидно)

[piumosso]

Реакт просто вспомнился похожим стилем описания (виртуального) дома

[nmakarov]

Лет пять назад я такое писал для PHP, тогда было актуально. А сейчас — ReactJS в руки и вперед. Вот, к примеру:

    var name = 'Хабр';
    var html = (
        <div className="wrapper">
            <h1>Привет, {name}</h1>
        </div>
    );

а потом это все прогнать через jsx и всё. Или, все равно же проект собирать придется, так что можно webpack заюзать, у него соответствующий loader имеется.

[Louter]

От чего библиотека выиграет в функционале, но может проиграть в размере:
1) «регистрация» тегов. У вас по-умолчанию мало тегов («div», «ul», «li», «form», «input», «select», «option», «i», «a», «h1», «h2», «h3», «h4», «span»)
2) data разбор (чтобы далее можно было работать проще) и сразу callback-и чтобы можно было задавать
3) приведите примеры с циклами и условиями (вроде всё очевидно, но ощущение, что чего-то не хватает)
4) документацию, а то совсем не очевидно можно ли передавать null как первый аргумет, какие ошибки могут быть отброшены в каких случаях

Оценка поверхностная, если что уже есть тогда тестов добавьте)

[lxkuz]

Спасибо Вам за отзыв!
1) согласен, я расширил список тегов. Кроме этого, можно использовать функцию tag для создания любого тега. Интерфейс тот же, только первым параметром идет название тега:

htmlmake ->
  @tag "car", "bmw x6"

Результат:

<car>bmw x6</car>

2) Насколько я понял, имеется ввиду такой интерфейс:

htmlmake ->
  @span data: {hello: "world"}

Ожидаемый результат:

<span data-hello='world'></span>

Все верно? Тогда я не понял вторую часть «сразу callback-и чтобы можно было задавать», прошу привести пример.
3, 4) Согласен. Сейчас о всем функционале пока что только по тестам и можно судить.

[Louter]

1) не помешало бы возможность конфигурировать (т.е. первый аргумент htmlmake не функция, а параметры)
2) про дату да, а про коллбеки:

->
  @span  
    click: (el, evt) -> ...
    blur:  (el, evt) -> ...

Чтобы объекты не только создавались на лету, но и обработчики событий сразу привязывались к элементам.

[lxkuz]

Понятно. На мой взгляд в данном случае профита не много, объясню почему:
когда мы будем писать обработчики событий, в них нам все равно потребуется работать с дом деревом. В итоге это рискует вылиться и правда в какой-то недо-React) Ведь мое дерево не является виртуальным и не будет автоматически перестраиваться при изменении переменных. Это значит, что прийдется или селектить необходимые элементы и что-то в них менять (за что боролись на то и напоролись), либо вызывать полную перерисовку дерева (это некрасиво).