<commit_before><p align=center>
  <a href=https://npmjs.org/package/snuggsi>
    <img alt='NPM monthly downloads' src=https://img.shields.io/npm/dm/snuggsi.svg?style=flat>
  </a>

  <a href=https://www.npmjs.com/package/snuggsi>
    <img src=https://img.shields.io/npm/v/snuggsi.svg alt='npm version'>
  </a>

  <a href=https://david-dm.org/devpunks/snuggsi target=external>
    <img src=https://david-dm.org/devpunks/snuggsi/status.svg alt='dependency status'>
  </a>

  <a href=https://github.com/devpunks/snuggsi/blob/master/LICENSE.txt target=external>
    <img src=https://img.shields.io/npm/l/snuggsi.svg alt=license>
  </a>

  <a href='https://codecov.io/github/devpunks/snuggsi?branch=master' target=external>
    <img src=https://codecov.io/gh/devpunks/snuggsi/branch/master/graph/badge.svg alt='Coverage via Codecov'>
  </a>

  <img src=https://img.shields.io/badge/PRs-welcome-brightgreen.svg alt='Pull requests welcome!'>
</p>

<p align=center>
  <h1>snuggsi ツ - Easy Web Components in
    <a href=https://github.com/devpunks/snuggsi/tree/master/dist#readme>1Kb</a>
  </h1>

  <em>"Performance is the art of avoiding work" - #FreeJewelry :ring: :gem:<em>
</p>

## Why ?
  1. Because [You (probably) don't need a Javascript Framework](https://slack-files.com/T03JT4FC2-F151AAF7A-13fe6f98da)
  2. With *snuggsiツ* all you need is a browser and basic knowledge of HTML to be productive.
  3. Web Components ARE [ready for production](https://twitter.com/WebReflection/status/761316429559922688)
     &amp; [Custom Elements v1](https://www.w3.org/TR/custom-elements) has full
     [support for every modern browser including Internet Explorer 11+ / Edge](https://github.com/webcomponents/webcomponentsjs#browser-support)

## Easy Installation
Node.js, Webpack, Babel, or Gulp can be used but is not a requirement.

Simply place the following `<script>` anywhere in your webpage
```html
<script nomodule src=https://unpkg.com/snuggsi/snuggsi.js></script>
<script type=module src=https://unpkg.com/snuggsi/snuggsi.es></script>
```

Et Voila _(that's it!)_

See [ECMAScript Module Imorts](https://github.com/devpunks/snuggsi/wiki/Module-Imports)
for more details.


## Browser Support

  | Feature    | IE11+ | Edge* | Chrome* | Firefox* | Safari 9+* | Chrome Android* | Mobile Safari* |
  | ---------- |:-----:|:-----:|:-------:|:--------:|:----------:|:---------------:|:--------------:|
  | Custom Elements |✅ |✅ |✅ |✅ |✅ |✅ |✅ |
  | Templates |✅ |✅ |✅ |✅ |✅ |✅ |✅ |
  | HTML Imports |✅ |✅ |✅ |✅ |✅ |✅ |✅ |

  _\*Indicates the current version of the browser_

  The [webcomponentsjs](https://github.com/webcomponents/webcomponentsjs)
  polyfills are intended to work in the latest versions of evergreen browsers.
  
Just insert the following polyfill `<script>` *before* snuggsiツ for classic browser support.

```html
<!-- webcomponents polyfill -->
<script src=//unpkg.com/snuggsi/examples/webcomponents-hi-ce.js></script>

<!-- snuggsi (modern) -->
<script type=module src=https://unpkg.com/snuggsi/snuggsi.es></script>

<!-- snuggsi (classic) -->
<script nomodule src=https://unpkg.com/snuggsi/snuggsi.js></script>
```


# Quick Tour

## [Element](/elements/element.es)
The following is a snippet from [examples/hello-word.html](/examples/hello-world.html)
_See [examples](/examples) for more details._


Play [Hello World Demo](https://jsfiddle.net/ns3ckhxv)
``` html
<hello-world>
 Hello {planet}
</hello-world>

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

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

Element `hello-world`

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

(class extends HTMLElement {

  get planet ()
    // "automagic" token binding<commit_msg>Add (updated) link to Hello World Example<commit_after><p align=center>
  <a href=https://npmjs.org/package/snuggsi>
    <img alt='NPM monthly downloads' src=https://img.shields.io/npm/dm/snuggsi.svg?style=flat>
  </a>

  <a href=https://www.npmjs.com/package/snuggsi>
    <img src=https://img.shields.io/npm/v/snuggsi.svg alt='npm version'>
  </a>

  <a href=https://david-dm.org/devpunks/snuggsi target=external>
    <img src=https://david-dm.org/devpunks/snuggsi/status.svg alt='dependency status'>
  </a>

  <a href=https://github.com/devpunks/snuggsi/blob/master/LICENSE.txt target=external>
    <img src=https://img.shields.io/npm/l/snuggsi.svg alt=license>
  </a>

  <a href='https://codecov.io/github/devpunks/snuggsi?branch=master' target=external>
    <img src=https://codecov.io/gh/devpunks/snuggsi/branch/master/graph/badge.svg alt='Coverage via Codecov'>
  </a>

  <img src=https://img.shields.io/badge/PRs-welcome-brightgreen.svg alt='Pull requests welcome!'>
</p>

<p align=center>
  <h1>snuggsi ツ - Easy Web Components in
    <a href=https://github.com/devpunks/snuggsi/tree/master/dist#readme>1Kb</a>
  </h1>

  <em>"Performance is the art of avoiding work" - #FreeJewelry :ring: :gem:<em>
</p>

## Why ?
  1. Because [You (probably) don't need a Javascript Framework](https://slack-files.com/T03JT4FC2-F151AAF7A-13fe6f98da)
  2. With *snuggsiツ* all you need is a browser and basic knowledge of HTML to be productive.
  3. Web Components ARE [ready for production](https://twitter.com/WebReflection/status/761316429559922688)
     &amp; [Custom Elements v1](https://www.w3.org/TR/custom-elements) has full
     [support for every modern browser including Internet Explorer 11+ / Edge](https://github.com/webcomponents/webcomponentsjs#browser-support)

## Easy Installation
Node.js, Webpack, Babel, or Gulp can be used but is not a requirement.

Simply place the following `<script>` anywhere in your webpage
```html
<script nomodule src=https://unpkg.com/snuggsi/snuggsi.js></script>
<script type=module src=https://unpkg.com/snuggsi/snuggsi.es></script>
```

Et Voila _(that's it!)_

See [ECMAScript Module Imorts](https://github.com/devpunks/snuggsi/wiki/Module-Imports)
for more details.


## Browser Support

  | Feature    | IE11+ | Edge* | Chrome* | Firefox* | Safari 9+* | Chrome Android* | Mobile Safari* |
  | ---------- |:-----:|:-----:|:-------:|:--------:|:----------:|:---------------:|:--------------:|
  | Custom Elements |✅ |✅ |✅ |✅ |✅ |✅ |✅ |
  | Templates |✅ |✅ |✅ |✅ |✅ |✅ |✅ |
  | HTML Imports |✅ |✅ |✅ |✅ |✅ |✅ |✅ |

  _\*Indicates the current version of the browser_

  The [webcomponentsjs](https://github.com/webcomponents/webcomponentsjs)
  polyfills are intended to work in the latest versions of evergreen browsers.
  
Just insert the following polyfill `<script>` *before* snuggsiツ for classic browser support.

```html
<!-- webcomponents polyfill -->
<script src=//unpkg.com/snuggsi/examples/webcomponents-hi-ce.js></script>

<!-- snuggsi (modern) -->
<script type=module src=https://unpkg.com/snuggsi/snuggsi.es></script>

<!-- snuggsi (classic) -->
<script nomodule src=https://unpkg.com/snuggsi/snuggsi.js></script>
```


# Quick Tour

## [Element](/elements/element.es)
The following is a snippet from [examples/hello-word.html](/examples/hello-world.html)
_See [examples](/examples) for more details._


Play [Hello World Demo](https://jsfiddle.net/uq4457pd/)
``` html
<hello-world>
 Hello {planet}
</hello-world>

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

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

Element `hello-world`

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

(class extends HTMLElement {

  get planet ()
    // "automagic" token binding
{'fraction_non_alphanumeric': 0.197169937258043, 'fraction_numerical': 0.012414897877452943, 'mean_word_length': 3.4916067146282974, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 95, 'https://': 48, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3760777', 'n_tokens_mistral': 2826, 'n_tokens_neox': 2731, 'n_words': 587}