Skip to content

lasso-js/lasso-marko-taglib

Repository files navigation

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-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:

  • 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 Lasso instance. Defaults to the default page lasso (i.e. require('lasso').getDefaultLasso())
  • data (expression) - Optional data to copy into the lassoContext.data object.
  • 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">