Script design mode

Để hỗ trợ các cú pháp javascript tốt hơn cho template engine

Các hàm hỗ trợ

1. classNames giúp nối các class với nhau, xoá đi khoảng cách thừa, loại bỏ giá trị null, undefined

<script design-mode>
  import { classNames } from 'editor';
</script>

<div class="${classNames('xo-heading', disabled ? 'xo-heading--disabled' ? '')}">
  Element
</div>

2. map sử dụng để render dữ liệu mảng thay vì [].map(...).join('')

<script design-mode>
  import { map } from 'editor';

  const data = [
    { title: 'Title 1', description: 'Description 1' },
    { title: 'Title 2', description: 'Description 2' }
  ]
</script>

<div>
  ${map(data, item => {
    return `
      <div>
        <h2>${item.title}</h2>
        <div>${item.description}</div>
      </div>
    `
  })}
</div>

3. hash hàm băm 1 chuỗi

<script design-mode>
  // Đây là các hàm được hỗ trợ
  import { hash } from 'editor';

  const id = hash('Hash thử chuỗi này');

  console.log(id); // 903333265
</script>

...

4. objectParse giúp parse 1 string object (không phải json) sang object thay vì JSON.parse()

<script design-mode>
  import { objectParse } from 'editor';

  const strData = `
    [
      { title: 'Title 1', description: 'Description 1' },
      { title: 'Title 2', description: 'Description 2' }
    ]
  `;
  const data = objectParse(strData);
</script>

<div>
  ${map(data, item => {
    return `
      <div>
        <h2>${item.title}</h2>
        <div>${item.description}</div>
      </div>
    `
  })}
</div>

5. renderAction ...

<script design-mode>
  import { renderAction } from 'editor';
</script>

6. renderAttribute ...

<script design-mode>
  import { renderAttribute } from 'editor';
</script>

7. renderVisibility ...

<script design-mode>
  import { renderVisibility } from 'editor';
</script>

8. setAttrBoolean hàm này giúp render ra attribute hoặc xoá dựa vào giá trị boolean

<script design-mode>
  import { setAttrBoolean } from 'editor';
  
  const active = true;
  const activeAttr = setAttrBoolean('xo-active', active);
</script>

<div ${activeAttr}>
  Element
</div>

// Sẽ được in ra như sau:
// <div xo-active>
//   Element
// </div>