Home

Awesome

Lasso.js Taglib for Marko

The Lasso.js includes a taglib for Marko for easily injecting <script> and <link> tags into a page, as well as resource URLs for images and other types of front-end resources.

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

Table of Contents

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

Installation

In order to automatically detect and compile required *.marko templates we will need to install the lasso-marko plugin and lasso-marko-taglib taglib using the following commands:

npm install lasso-marko
npm install @lasso/marko-taglib

Example Template

<lasso-page name="my-page" package-path="./browser.json"/>

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test Page</title>
        <lasso-head/>
    </head>
    <body>
        <h1>Test Page</h1>
        <lasso-body/>
    </body>
</html>

Output HTML will be similar to the following:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test Page</title>
        <link rel="stylesheet" type="text/css" href="/static/my-page-85e3288e.css">
    </head>
    <body>
        <h1>Test Page</h1>
        <script type="text/javascript" src="/static/bundle1-6df28666.js"></script>
        <script type="text/javascript" src="/static/bundle2-132d1091.js"></script>
        <script type="text/javascript" src="/static/my-page-1de22b65.js"></script>
    </body>
</html>

Tags

<lasso-page>

Lassoes the page so that the resulting JavaScript and CSS resources can be injected into the output HTML. The <lasso-head> and <lasso-body> tags are used as insertion points. By default, all CSS <link> tags will be added to the <lasso-head> slot and all <script> tags will be added to the <lasso-body> slot.

Supported attributes:

Examples:

With a path to an browser.json file:

<lasso-page package-path="./browser.json"/>

With an explicit page name flags:

<lasso-page name="home" package-path="./browser.json"/>

With enabled flags:

<lasso-page package-path="./browser.json" flags="['foo', 'bar']"/>

With dependencies:

<lasso-page dependencies="['foo.js', 'bar.css']"/>

<lasso-head>

The head slot that is used as the marker for inserting CSS <link> tags in the head section of the HTML page.

<lasso-body>

The body slot that is used as the marker for inserting JavaScript <script> tags in the body section of the HTML page.

<lasso-img>

Lassoes an image resource and renders an <img> tag with the src attribute set to the resulting URL of the bundled image resource.

Supported attributes:

Example:

<lasso-img src="./foo.png" width="32" height="32" class="foo">

The output will be similar to the following:

<img src="/static/foo-1b4c0db.png" width="32" height="32" class="foo">

<lasso-resource>

Lassoes an arbitrary resource and introduces a local variable that can be used to inject the resulting resource URL into the page.

Supported attributes:

Example:

<lasso-resource path="./favicon.ico" var="favicon"/>
<link rel="shortcut icon" href=favicon.url>

The output will be similar to the following:

<link rel="shortcut icon" href="/static/favicon-c3deb101.ico">