JS HAML

import jsHaml from '@dinoreic/haml';
// or CommonJS: const jsHaml = require('@dinoreic/haml');

// Define your template
const template = `
.container
  %h1= title

  %button onclick="alert('clicked!')" disabled={{ !canClick }}
    Click me

  %div class="foo-{{ 2 + 3 }}" data-count="{{ items.length }}-items"
    Mixed expressions in attributes

  - if items.length > 0
    %ul
      - for item, index in items
        %li class="item-{{ index + 1 }}"
          %span.index= index + 1
          %smpan.mx-3 —
          %span.item= item
  - else
    %p No items found
`;

// Compile template to render function
const render = jsHaml.compile(template);

// Render with context
const html = render({
  title: 'My Demo App',
  canClick: true,
  items: ['Apple', 'Banana', 'Cherry', 'Date']
});

console.log(html);

import jsHaml from '@dinoreic/haml';

const blogTemplate = `
%article.blog-post
  %header.post-header
    %h1.post-title= post.title
    %div.post-meta
      %span.author By {{ post.author }}
      %time.published datetime={{ post.date }} {{ formatDate(post.date) }}
      - if post.tags && post.tags.length > 0
        %div.tags
          - for tag in post.tags
            %span.tag data-tag={{ tag }}= tag

  %div.post-content
    - for paragraph in post.paragraphs
      - if paragraph.type === 'text'
        %p= paragraph.content
      - else if paragraph.type === 'quote'
        %blockquote.quote
          %p= paragraph.content
          - if paragraph.author
            %cite= paragraph.author
      - else if paragraph.type === 'code'
        %pre
          %code class={{ paragraph.language }}= paragraph.content

  %footer.post-footer
    - if post.likes > 0
      %div.likes
        %span.like-icon ❤️
        %span.like-count= post.likes
    - if comments && comments.length > 0
      %section.comments
        %h3 Comments ({{ comments.length }})
        - for comment in comments
          %div.comment
            %strong.comment-author= comment.author
            %p.comment-text= comment.text
    - else
      %p.no-comments No comments yet
`;

const render = jsHaml.compile(blogTemplate);

const html = render({
  post: {
    title: "Getting Started with JS HAML",
    author: "Jane Developer",
    date: "2023-12-01",
    tags: ["javascript", "templates", "haml"],
    likes: 42,
    paragraphs: [
      { type: 'text', content: 'HAML is a great way to write clean templates.' },
      { type: 'quote', content: 'Code is poetry.', author: 'Anonymous' },
      { type: 'code', content: 'const x = 5;', language: 'javascript' }
    ]
  },
  comments: [
    { author: 'Bob', text: 'Great tutorial!' },
    { author: 'Alice', text: 'Very helpful, thanks!' }
  ],
  formatDate: (date) => new Date(date).toLocaleDateString()
});

console.log(html);