UNPKG

5.09 kBMarkdownView Raw
1Lasso.js Taglib for Marko
2==========================
3
4The [Lasso.js](README.md) 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.
5
6<!-- START doctoc generated TOC please keep comment here to allow auto update -->
7<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
8# Table of Contents
9
10- [Example](#example)
11- [Tags](#tags)
12 - [`<lasso-page>`](#lasso-page)
13 - [`<lasso-head>`](#lasso-head)
14 - [`<lasso-body>`](#lasso-body)
15 - [`<lasso-img>`](#lasso-img)
16 - [`<lasso-resource>`](#lasso-resource)
17
18<!-- END doctoc generated TOC please keep comment here to allow auto update -->
19
20# Installation
21
22In order to automatically detect and compile required `*.marko` templates we
23will need to install the [lasso-marko](https://github.com/lasso-js/lasso-marko)
24plugin and [lasso-marko-taglib](https://github.com/lasso-js/lasso-marko-taglib)
25taglib using the following commands:
26
27```bash
28npm install lasso-marko
29npm install @lasso/marko-taglib
30```
31
32# Example Template
33
34```html
35<lasso-page name="my-page" package-path="./browser.json"/>
36
37<!doctype html>
38<html lang="en">
39 <head>
40 <meta charset="UTF-8">
41 <title>Test Page</title>
42 <lasso-head/>
43 </head>
44 <body>
45 <h1>Test Page</h1>
46 <lasso-body/>
47 </body>
48</html>
49```
50
51Output HTML will be similar to the following:
52
53```html
54<!doctype html>
55<html lang="en">
56 <head>
57 <meta charset="UTF-8">
58 <title>Test Page</title>
59 <link rel="stylesheet" type="text/css" href="/static/my-page-85e3288e.css">
60 </head>
61 <body>
62 <h1>Test Page</h1>
63 <script type="text/javascript" src="/static/bundle1-6df28666.js"></script>
64 <script type="text/javascript" src="/static/bundle2-132d1091.js"></script>
65 <script type="text/javascript" src="/static/my-page-1de22b65.js"></script>
66 </body>
67</html>
68```
69
70# Tags
71
72## `<lasso-page>`
73
74Lassoes 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.
75
76Supported attributes:
77
78- __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.
79- __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.
80- __package-path__ (string) - The relative path to the the JSON file that declares the top-level page dependencies.
81- __package-paths__ (Array) - Similar to `package-paths`, but an Array of paths.
82- __lasso__ (expression) - A reference to a `Lasso` instance. Defaults to the default page lasso (i.e. `require('lasso').getDefaultLasso()`)
83- __data__ (expression) - Optional data to copy into the `lassoContext.data` object.
84- __dependencies__ (expression) - An array of dependencies to lasso.
85- __flags__ (expression) - An array of flags to enable during optimization
86- __timeout__ (integer) - The maximum time to allow for the optimization to complete before throwing an error
87
88Examples:
89
90_With a path to an `browser.json` file:_
91
92```html
93<lasso-page package-path="./browser.json"/>
94```
95
96_With an explicit page name flags:_
97
98```html
99<lasso-page name="home" package-path="./browser.json"/>
100```
101
102_With enabled flags:_
103
104```html
105<lasso-page package-path="./browser.json" flags="['foo', 'bar']"/>
106```
107
108_With dependencies:_
109
110```html
111<lasso-page dependencies="['foo.js', 'bar.css']"/>
112```
113
114## `<lasso-head>`
115
116The head slot that is used as the marker for inserting CSS `<link>` tags in the head section of the HTML page.
117
118## `<lasso-body>`
119
120The body slot that is used as the marker for inserting JavaScript `<script>` tags in the body section of the HTML page.
121
122## `<lasso-img>`
123
124Lassoes an image resource and renders an `<img>` tag with the `src` attribute set to the resulting URL of the bundled image resource.
125
126Supported attributes:
127
128- __src__ - The relative path to the image resource
129- __*__ - All other attributes will pass through to the `<img>` tag
130
131Example:
132
133```html
134<lasso-img src="./foo.png" width="32" height="32" class="foo">
135```
136
137The output will be similar to the following:
138
139```html
140<img src="/static/foo-1b4c0db.png" width="32" height="32" class="foo">
141```
142
143## `<lasso-resource>`
144
145Lassoes an arbitrary resource and introduces a local variable that can be used to inject the resulting resource URL into the page.
146
147Supported attributes:
148
149- __path__ - The relative path to the resource to bundle
150- __var__ - The name of the local variable to introduce
151
152Example:
153
154```html
155<lasso-resource path="./favicon.ico" var="favicon"/>
156<link rel="shortcut icon" href=favicon.url>
157```
158
159The output will be similar to the following:
160
161```html
162<link rel="shortcut icon" href="/static/favicon-c3deb101.ico">
163```