JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 717
  • Score
    100M100P100Q112280F
  • License MIT

A taglib to use Marko with Lasso

Package Exports

  • @lasso/marko-taglib/taglib/body-tag
  • @lasso/marko-taglib/taglib/config-tag
  • @lasso/marko-taglib/taglib/head-tag

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lasso/marko-taglib) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

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