Watch an introduction of the Include Tag of Wanilla on YouTube.
wanilla adds super power to your HTMLElements. Each element wrapped with wanilla will still remain a HTMLElement, but has some cool and easy to use new features.
wanilla also provides a easy way to include other HTML files. You can, for example, easily include your menu or footer as external files.
<!-- Get Wanilla from jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/wanilla/bundle/wanilla.min.js"></script>
<!-- Get Wanilla from UNPKG -->
<script src="https://unpkg.com/wanilla/bundle/wanilla.min.js"></script>// Get Wanilla from NPM
> npm i wanilla
// include W as default
import W from 'wanilla'
// include the types (if you use typescript)
import { WElement, WInputElement, WBase } from 'wanilla'- If 2 or more parameters are given to
W(), it will create a new HTMLElement. - If only one parameter is given to
W(), it will querySelect the first matching element. - To get an array of matching HTMLElements, use
W.all().
// use the library after page load
window.addEventListener('load', () => {
// create <h1 id="title" class="big" >The Title</h1>
const h1 = W('h1', { id: 'title', class: 'big' }, 'The Title')
// get the body element
const body = W('body')
// append h1 to body
body.appendChild(h1)
// same as
h1.appendTo(body)
// change color
h1.css.set('color', 'red')
})The script below transforms this:
<div id="container"></div>Into this:
<div id="container">
<h2 style="border: 2px solid yellow; padding: 8px 16px;">
<span style="color: red;">first span</span><span style="color: lightblue;">second span</span>
</h2>
</div>// script.js
W('#container')
.set.HTML('<h2><span>first span</span><span>second span</span></h2>')
.get.firstChild()
.css.set('border', '2px yellow solid')
.css.set('padding', '8px 16px')
.get.firstChild()
.css.set('color', 'red')
.get.nextSibling()
.css.set('color', 'lightblue')wanilla can easily include other HTML files.
<!-- index.html -->
<body>
<include-html src="/feature.html" title="some title">placeholder...</include-html>
</body>
<script>
window.addEventListener('load', () => {
W.autoInclude()
})
</script>
<!-- feature.html -->
<div>
<h2>Some dynamic {TITLE}</h2>
<p>Hello from feature component</p>
</div>
<!-- after rendering, your index.html page looks like this -->
<body>
<div>
<h2>Some dynamic some title</h2>
<p>Hello from feature component</p>
</div>
</body>The feature.html page could even include a CSS file which will automatically be added to the DOM.
<!-- feature.html with its own css file -->
<include-css src="/feature.css"></include-css>
<div id="feature">
<h2>Some dynamic {TITLE}</h2>
<p>Hello from feature component</p>
</div>You can easily pre-render all your HTML files using the generate-static-site package.
There are of course a lot more things you can do, which will be documented soon.
Actually, instead of writing better documentation, I believe, I will rather create a website with some examples. And since this project is part of the licht project, I will probably add it there.