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.
Table of Contents
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-taglibExample 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:
- name (string) - The name of the page (used to determine the name of output page bundles). Defaults to the name of the parent directory if not provided.
- cache-key (string) - The cache key that should be used to cache the lassoed page. Defaults to the template path. NOTE: The set of enabled flags are always appended to the cache key.
- package-path (string) - The relative path to the the JSON file that declares the top-level page dependencies.
- package-paths (Array) - Similar to
package-paths, but an Array of paths. - lasso (expression) - A reference to a
Lassoinstance. Defaults to the default page lasso (i.e.require('lasso').getDefaultLasso()) - data (expression) - Optional data to copy into the
lassoContext.dataobject. - dependencies (expression) - An array of dependencies to lasso.
- flags (expression) - An array of flags to enable during optimization
- timeout (integer) - The maximum time to allow for the optimization to complete before throwing an error
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:
- src - The relative path to the image resource
- * - All other attributes will pass through to the
<img>tag
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:
- path - The relative path to the resource to bundle
- var - The name of the local variable to introduce
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">