lasso-inline-slots
This plugin allows you to designate certain slots as being "inline". That is, any JavaScript or CSS dependency targeted for a designated inline slot will be inlined into the page as an inline <script> tag or an inline <style> tag.
Installation
npm install lasso-inline-slots --saveUsage
Configure Lasso to use this
require('lasso').configure({
plugins: [
{
plugin: 'lasso-inline-slots',
config: {
inlineSlots: [
'my-inline-slot',
'another-inline-slot'
]
}
}
]
});A dependency can be targeted for a slot as shown below:
browser.json:
{
"dependencies": [
{
"path": "./foo.js",
"slot": "my-inline-slot"
},
{
"path": "./foo.css",
"slot": "my-inline-slot"
},
{
"path": "src/components/foo/browser.json",
"slot": "another-inline-slot"
}
]
}Finally, you will need to add those slots to your HTML template as shown below:
template.marko:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
<lasso-slot name="my-inline-slot"/>
</head>
<body>
<h1>Inline Slots Demo</h1>
<lasso-slot name="another-inline-slot"/>
</body>
</html>The final output might be similar to the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
<!-- BEGIN: my-inline-slot -->
<style>
.foo {
color: red;
}
</style>
<script>console.log('foo');</script>
<!-- END: my-inline-slot -->
</head>
<body>
<h1>Inline Slots Demo</h1>
<!-- BEGIN: another-inline-slot -->
<script>console.log('bar');</script>
<!-- END: another-inline-slot -->
</body>
</html>