@lasso/marko-taglib

A taglib to use Marko with Lasso

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@lasso/marko-taglib
9132.0.56 months ago5 years agoMinified + gzip package size for @lasso/marko-taglib in KB

Popular Searches

Readme

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
- [`<lasso-page>`](#lasso-page)
- [`<lasso-head>`](#lasso-head)
- [`<lasso-body>`](#lasso-body)
- [`<lasso-img>`](#lasso-img)
- [`<lasso-resource>`](#lasso-resource)
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">