Wanilla NPM | npm.io

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.

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.

@everything-registry/sub-chunk-3112

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago