wanilla
v0.0.4
Published
🍦 A 2kB JQuery like Wrapper around Vanilla JavaScript.
Downloads
12
Readme
Video
Watch an introduction of the Include Tag of Wanilla on YouTube.
About
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.
Import Library
<!-- 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'Usage
- 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().
Simple Example
// 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')
})Chaining Example
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')Include Example
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>SSR
You can easily pre-render all your HTML files using the generate-static-site package.
More
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 fiveserver project, I will probably add the website to wanilla.fiveserver.org.
Maybe check wanilla.fiveserver.org from time to time.