https://github.com/lasso-js/lasso-inline-slots
Lasso plugin to force specific slots to be inline
https://github.com/lasso-js/lasso-inline-slots
Last synced: 4 months ago
JSON representation
Lasso plugin to force specific slots to be inline
- Host: GitHub
- URL: https://github.com/lasso-js/lasso-inline-slots
- Owner: lasso-js
- Created: 2016-05-11T00:39:07.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-05-11T00:45:53.000Z (over 9 years ago)
- Last Synced: 2025-04-19T06:57:27.066Z (7 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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 `` tag or an inline `<style>` tag.
# Installation
```bash
npm install lasso-inline-slots --save
```
# Usage
Configure Lasso to use this
```javascript
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:_
```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:_
```xml
<!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:
```html
<!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');
Inline Slots Demo
console.log('bar');