snuggsi ツ - Easy Web Components in ~1kiloByte

All you need is a browser and basic knowledge of HTML & Javascript to be productive!

"Performance is the art of avoiding work" - #FreeJewelry 💍 💎

Why ?

1. You prefer convention over configuration

2. Because You (probably) don't need a Javascript Framework

3. Web Components ARE ready for production

   & Custom Elements v1 has full support for every modern browser including Internet Explorer 11+ / Edge

Easy Installation

No need for Node.js, Webpack, Babel, or Gulp.

snuggsiツ works in production or in a plain 'ol HTML file!

Simply place the following script within your webpage:

<!-- http(s): protocol required to run locally -->
<script nomodule src=//unpkg.com/snuggsi></script>

Et Voila (that's it!) ツ

See ECMAScript Module Imports for <script type=module> support!

Browser Support

Feature	IE11+	Edge*	Chrome*	Firefox*	Safari 9+*	Chrome Android*	Mobile Safari*
Custom Elements	✅	✅	✅	✅	✅	✅	✅
Templates	✅	✅	✅	✅	✅	✅	✅
HTML Imports	✅	✅	✅	✅	✅	✅	✅
Shadow Dom			✅	✅

*Indicates the current version of the browser

The webcomponentsjs polyfills are intended to work in the latest versions of browsers.

Place the <script name=polyfill … > below before snuggsiツ for evergreen cross-browser support.

<!-- snuggsiツ (modern) -->
<script nomodule src=//unpkg.com/snuggsi></script>

<!-- webcomponents polyfill -->
<script
  name=polyfill
  src=//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js>
</script>

⚠️ Warning ⚠️ snuggsiツ (classic) will back support to Internet Explorer 11+.

We shall provide our best effort to support IE 11+ through EOL

Please read Microsoft Internet Explorer end-of-life announcement for further details.

Quick Tour

Element

Play Hello World Demo

The following is a snippet from examples/hello-word

See examples for more details

<hello-world>
 Hello {planet}
</hello-world>

<script src=https://unpkg.com/snuggsi></script>
<script defer>

// Element Definition -----------------------------

Element `hello-world`

// Class Description ------------------------------

(class extends HTMLElement {

  onclick ()
    // "automagic" event registration
    { alert (this.textContent) }

  get planet ()
    // "automagic" token binding
    { return 'world 🌎' }
})

</script>

Template

<template> to appendable DocumentFragment.

We have a <template> in the DOM and need to:

1. Bind a context (or Javascript object) to the template
2. Append rendered template to the document.

• If context is an object bind a single <template>.
• If context is a collection (i.e. Array) bind a tandem collection of <template>s.

3. or use default <template> from within an HTML Import.

See MDN <template> for more details

<template> With Object Context

<section id=lead></section>

<template name=developer>
  <!-- `{name}` will bind to `context` property `name` -->
  <h1>{name}</h1>
</template>

<script src=//unpkg.com/snuggsi></script>
<script>

const
  template = Template `developer`
, context  = { name: 'That Beast' }

template.bind (context)

</script>

Resulting HTML

<section id='lead'>
  <h1>That Beast</h1>
</section>

<template> With Array Context

<ul>
  <template name=item>
    <li>Hello {name}!</li>
  </template>
</ul>

<script src=//unpkg.com/snuggsi></script>
<script>

// when context is a collection
const
  template = Template `item`
, context  = [ {name: 'DevPunk'}, {name: 'Snuggsi'} ]

// internal template render for each item in context
template.bind (context)

</script>

Resulting HTML

<ul>
  <!-- invisible -->
  <template name=item>
    <li>Hello {name}!</li>
  </template>

  <li>Hello DevPunk!</li>
  <li>Hello Snuggsi!</li>
</ul>

<template> Defaults (HTML Custom Element Import)

Master Document foo-bar.html

<template onclick=onfoo>
  <h1>foo-bar custom element</h1>

  <slot name=content>Some Default Content</slot>

  <ul>
  <template name=bat>
    <li>Item {#} - Value {self}
  </template>
  </ul>

</template>

<script>

Element `foo-bar`

(class extends HTMLElement {

  onfoo (event) { alert `Registered on foo-bar` }

  get bat ()
    { return ['football', 'soccer', 'baseball'] }
})

</script>

Import Document index.html

<script src=//unpkg.com/snuggsi></script>

<link rel=import name=foo-bar href=foo-bar.html>

<!-- <foo-bar onclick=onfoo></foo-bar> -->
<foo-bar>
  <p slot=content>The quick brown fox jumped over the lazy dog
</foo-bar>

<!-- After import

<foo-bar onclick=onfoo>
  <h1>foo-bar custom element</h1>

  <p slot=content>The quick brown fox jumped over the lazy dog

  <ul>
    <li>Item 0 - Value football
    <li>Item 1 - Value soccer
    <li>Item 2 - Value baseball
  </ul>
</foo-bar>

-->

Build Process

Snuggsi is able to use modern compression algorithms to create bundles as small as ~1500 OCTETS (or one 1500byte Ethernet packet frame)

Read More