Rollup.js / ES6 support

[Mevrael]

Hi @Elfet

Found the link to this project on hashnode. After reading README looks like I've found 1st real js template engine with ES6 support and benchmarks and which not sucks much. Followed you on twitter, can you DM @Mevrael your facebook/messenger, skype, VK or any other profile with chat so we could talk.

Since we can't simply import x from template.nojs we need to use some tools to compile template files into JS. I have found webpack examples on your website, are there any plugins to use it with rollupjs right now? What do you think about rollup vs webpack?

[antonmedv]

Hi, we can add rollup support too, i can create a repo for it and add you as maintainer if can implement it.

[alex-kinokon]

Hi. I have implemented a skeleton here. Pull requests are welcome.

[alex-kinokon]

Rollup.js utilizes the ES6 module syntax for static analysis and tree shaking purposes, and requires a wrapper to use CommonJS modules. Do you mind producing ES6 output and use a lightweight transpiler like buble for ES6 output?

[Mevrael]

@Elfet could you make an ES6 version of monkberry and CLI? It would make integration with rollup and ES6 projects much easier.

You don't need to use any transpilers for Rollup js if all what are you going to use is import/export, for rest ES6 syntax you need babel or something.

Some questions about monkberry:

1. is there any option I could use one template (table row) to render all rows in big tables at once and not rendering each row one by one?
2. Is there any way to render one template in tree view from data as adjacency list?
3. Can you make templates not from JS but from HTML itself, especially from <template> or at least <div id="template" hidden>...</div>. In other words how easy it could be to use Monkberry as template engine with this, for example, https://bunnyjs.com/examples/datatable/

[alex-kinokon]

@Mevrael I have implemented what you want in pull request #10. You are welcome to take a look.

[antonmedv]

1. is there any option I could use one template (table row) to render all rows in big tables at once and not rendering each row one by one?

What do you mean by rendering all at once?

1. Is there any way to render one template in tree view from data as adjacency list?

Can you provide some example of what you want?

1. Can you make templates not from JS but from HTML itself, especially from template?

Yes, you can. Take a look at monkberry/standalone, but true power on Monkberry is precompilation :)

[Mevrael]

@Elfet

1

What do you mean by rendering all at once?

Instead of

Monkberry.render(Template, document.body);
Monkberry.render(Template, document.body);
Monkberry.render(Template, document.body);
...
Monkberry.render(Template, document.body);
Monkberry.render(Template, document.body);
Monkberry.render(Template, document.body);

Something like

Monkberry.renderAll(Template, document.body);

using documentFragment

2

Can you provide some example of what you want?

For example, you have template for comment

<comment>
  <img src="{{ photo }}">
  <div class="comment-message">{{ message }}</div>
  <answers>{{ answers }}</answers>
</comment>

you have object of data as AL:

const comments = {
  {
    id: 1,
    parent_id: null,
    photo: 'user1.png',
    message: 'Hello, world',
  },
  {
    id: 2,
    parent_id: 1,
    photo: 'user2.png',
    message: 'Hello, world2',
  },
  {
    id: 3,
    parent_id: null,
    photo: 'user3.png',
    message: 'Hello, world 3',
  },
  {
    id: 4,
    parent_id: 2,
    photo: 'user4.png',
    message: 'Hello, world 4',
  },
...
}

And you want to render into {{ answers }} same template using comments where parent_id = this comment's id. In example above you should have:

comment 1
-- comment 2
---- comment 4
comment 3

Probably better solution would be to just use a data in NoSQL/tree format already since it's not template's job to transform AL into tree and 3rd party lib could be used for that. I can provide you my code to transform AL into tree if you want, it would made nested templating much easier.

3

Yes, you can. Take a look at monkberry/standalone, but true power on Monkberry is precompilation :)

Templating and view sources in modern front-end is a main problem and there are many ways doing it. Classical way and W3C standartized way is also using <template> when server or some 3rd party component returns template in HTML already.

More flexibile you are, more use cases you cover, more general, popular and usable your project will be.

Is it really necessary to have a standalone version in another repo? It would be much simplier for everyone to npm install monkberry and import HTMLParser from monkberry (or smth), otherwise too much small dependencies and huge list in packages.json again is not good.

-

It is much easier to talk using PMs, messengers not forums/GitHub issues. Can you add me on facebook, or twitter, or skype, same username. I would like to offer even more.