Is it possible to load marko-widget with systemjs?

[duongphuhiep]

I cannot find a way to do require('marko-widget') on the client-side with systemjs

Can you please make a small example to show

1. How to load a widget using a cjs loader (such as systemjs). It means:
   Node is used only to compile template files, but the pre-compiled marko-widgets should be loaded and mout to a html _on the client side_ with the systemjs loader.

2. How to use lasso-cli or systemjs bundle in this case?

Thank you

[patrick-steele-idem]

Hi @duongphuhiep, it is almost always best to generate JavaScript and CSS bundles on the server-side. Tools that run in the browser (such as SystemJS) have incomplete information since they don't have access to the server-side file system (hence the heavy need for configuration). Therefore, the SystemJS module loader does not have access to the directory tree, package.json files and it can only load modules as it finds out they are needed (extremely slow... even with HTTP2).

With that said, Marko Widgets (and Marko) were designed to work perfectly with a CommonJS module bundler. I put together a new sample app that I hope you find helpful:

https://github.com/marko-js-samples/marko-widgets-lasso

That app is meant to show how easy it is to use Lasso.js to bundle up the required JavaScript and CSS files needed by the UI components on a page. I hope you find that sample helpful.

If you have any questions or feedback please share. Thanks!

[duongphuhiep]

Thank you for the quick reply.

So marko is a server-side template engines. (the rendering must happen on the server-side, and the HTML is sent over the network)

In my scenario, I want to download the template once, then different json data is sent over the network to be rendered by the browser. In this case, Does a client-side template engines fit more than Marko? or do you have any suggestion?

Thanks again

[patrick-steele-idem]

Hi @duongphuhiep, Marko is both a server-side and client-side templating engine. You can absolutely send over compiled Marko template files to the browser and render templates in the browser. In fact, in the sample app that I linked to we are using Marko to rerender the number-spinner UI component in the browser every time the internal state of that UI component changes. If you take a look at the Source tab in your web browser you should see the following file:

http://localhost:8080/static/src/components/number-spinner/template.marko.js

That file will have the source code for the compiled template that is used to do rendering in the browser. If you add a breakpoint to that file in your browser you will see that it is being called whenever you click on the "plus" or "minus" buttons.

Lasso.js is automatically compiling the required Marko template files and sending them to the browser (there is no extra build step).

I hope that answers your question, but please let me know if you would like more details.