https://github.com/marpple/ttl-pug

ES6 tagged template literals like Pug
https://github.com/marpple/ttl-pug

Last synced: 4 days ago
JSON representation

ES6 tagged template literals like Pug

• Host: GitHub
• URL: https://github.com/marpple/ttl-pug
• Owner: marpple
• License: mit
• Archived: true
• Created: 2018-01-26T03:48:38.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-30T09:15:27.000Z (over 5 years ago)
• Last Synced: 2024-08-01T19:46:58.757Z (3 months ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 20
• Watchers: 6
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ttl-pug

ES6 tagged template literals like Pug

## Getting Started

### 1. plain

```javascript

import pug, {html, escape, unescape, map, scat, el, elpug, elhtml} from '/ttl-pug/ttl-pug.js';

const links = [

  { name: 'MARPPLE', url: 'https://marpple.com', is_app: true },

  { name: 'abym', url: 'https://abym.co.kr', is_app: true },

  { name: 'blog', url: 'https://marpple.github.io' },

  { name: 'GitHub', url: 'https://github.com/marpple' }

];

let demo1 = document.createElement('div');

demo1.setAttribute('id', 'demo1');

demo1.innerHTML = `

  
1: Link

  


    ${links.map(link =>

      `
${link.name}
`

    ).join('')}

  

`;

document.querySelector('#content').appendChild(demo1);

```


```html



  
1: Link

  


    
MARPPLE

    
abym

    
blog

    
GitHub

  



```


### 2. with html

```javascript

let demo2 = document.createElement('div');

demo2.setAttribute('id', 'demo2');

demo2.innerHTML = html`

  
2: Link

  


    ${links.map(link =>

      `
${link.name}
`

    )}

  

`;

document.querySelector('#content').appendChild(demo2);

```


```html



  
2: Link

  


    
MARPPLE

    
abym

    
blog

    
GitHub

  



```


### 3. html, el

```javascript

var str = html`

  


    
3: Link

    


      ${links.map(link =>

        `
${link.name}
`

      )}

    

  

`;

var element = el(str);

document.querySelector('#content').appendChild(element);

```


```html



  
3: Link

  


    
MARPPLE

    
abym

    
blog

    
GitHub

  



```


### 4. elhtml

```javascript

document

  .querySelector('#content')

  .appendChild(elhtml`

    


      
4: Link

      


        ${links.map(link =>

          `
${link.name}
`

        )}

      

    

  `);

```


```html



  
4: Link

  


    
MARPPLE

    
abym

    
blog

    
GitHub

  



```


### 5. pug, el

```javascript

var str = pug`

  #demo5

    h1 5: Link

    ul.list

      ${links.map(link => pug`

        li

          a[href="${link.url}"] ${link.name}`

      )}

`;

var element = el(str);

document.querySelector('#content').appendChild(element);

```

```html



5: Link

  


    
MARPPLE

    
abym

    
blog

    
GitHub

  



```


### 6. elpug

```javascript

document

  .querySelector('#content')

  .appendChild(elpug`

    #demo6

      h1 6: Link

      ul.list

        ${links

          .filter(link => link.is_app)

          .map(link => pug`

            li

              a[href="${link.url}"] ${link.name}`

        )}

  `);

```

```html



6: Link

  


    
MARPPLE

    
abym

  



```


### 7. elpug, map(support array, array-like, Object, Set, Map, typeof list[Symbol.iterator] == 'function')

```javascript

var links2 = new Set(links);

document

  .querySelector('#content')

  .appendChild(elpug`

    #demo7

      h1 7: Link

      ul.list

        ${map(links2, link => pug`

          li

            a[href="${link.url}"] ${link.name}`

        )}

  `);

```

```html



7: Link

  


    
MARPPLE

    
abym

    
blog

    
GitHub

  



```


### 8. plain, el, scat(support array, array-like, Object, Set, Map, typeof list[Symbol.iterator] == 'function')

```javascript

var links3 = {

  MARPPLE: { name: 'MARPPLE', url: 'https://marpple.com', is_app: true },

  abym: { name: 'abym', url: 'https://abym.co.kr', is_app: true },

  blog: { name: 'blog', url: 'https://marpple.github.io' },

  GitHub: { name: 'GitHub', url: 'https://github.com/marpple' }

};

document

  .querySelector('#content')

  .appendChild(el(`

    


      
8: Link

      


        ${scat(links3, link =>

          `
${link.name}
`

        )}

      

    

  `));

```


```html



  
8: Link

  


    
MARPPLE

    
abym

    
blog

    
GitHub

  



```


### 9. escape, unescape

```javascript

var str = '
hi
';

document

  .querySelector('#content')

  .appendChild(el(`

    


      
9: escape, unescape

      
${escape(str)}

      
${unescape(escape(str))}

    

  `));

```


```html



  
9: escape, unescape

  
<ul class="test"><li>hi</li></ul>

  


    


      
hi

    

  



```