The lasso-marko plugin for Lasso.js will automatically compile all imported Marko templates during bundling. In addition, the
lasso-marko plugin will automatically bundle any template dependencies (including required CSS).
The sample ui-components-playground app demonstrates how to build a production-ready web application using Marko and Lasso.
npm install lasso-marko --save
Marko + Lasso
browser.json provides a simple way for declaring top-level page dependencies. For example:
Lasso.js will automatically bundle up transitive dependencies by building and walking a dependency graph.
When Lasso.js bundles up the code above it will automatically bundle up the required
If you are rendering the initial UI on the server then it is necessary to make sure that all UI components are bundled and sent to the browser so that UI components can be mounted in the browser. For example:
<lasso-page package-path="./browser.json" /><html lang="en"><head><meta charset="UTF-8"><title>Marko + Lasso</title><!-- CSS will be inserted here --><lasso-head/></head><body><!-- Top-level UI component: --><app/><!-- JS will be inserted here --><lasso-body/></body></html>
lasso-page package-path="./browser.json"html lang="en"headmeta charset="UTF-8"title -- Marko + Lasso// CSS will be inserted herelasso-headbody// Top-level UI component:app// JS will be inserted herelasso-body
Typically, adding the top-level UI component as a page dependency is all that is required:
browser-refresh is recommended in development for instant page refreshes and hot reloading of Marko templates, styles and other resources.
browser-refresh works well with Lasso and Marko and is very easy to use as a drop-in replacement for
Helpful? You can thank these awesome people! You can also edit this doc if you see any issues or want to improve it.