Skip to content
snuggsi ツ - Easy Web Components in ~1kB
JavaScript HTML Shell CSS Ruby WebIDL TypeScript
Branch: master
Clone or download
1
Latest commit ae9b17f Aug 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add PR feature table note from babel Mar 14, 2018
.vscode Improve the workspace Dec 13, 2018
benchmarks Remove chart.js from benchmarks Mar 13, 2018
bin 🎵 🎵 Another (IF STATEMENT) bites the dust! 🎶 🎶 (pt. II) Aug 22, 2019
component Add connected callback Dec 29, 2018
configure Improve the workspace Dec 13, 2018
custom-element-registry Update CustomElementRegistry#upgrade references in README.md Dec 22, 2018
dist 💪 bump TRANSPILED distribution dist/snuggsi.js Jul 28, 2019
element Add stub test in Element/index.test Jun 4, 2019
event-target Migrate reflect and register to EventTarget Dec 21, 2018
examples Update example/index.html Dec 19, 2018
global-event-handlers Migrate reflect and register from GlobalEventHandlers Dec 21, 2018
html-element Fix parameter list Jun 4, 2019
html-link-element Rollback load disable Dec 18, 2018
html-script-element Fix bug in Markdown for html-script-element/README.md Jul 11, 2018
html-template-element Refactor rangeg selection Dec 26, 2018
idl Add ElementDefinitionOptions Nov 19, 2017
lib Bump version Jan 28, 2018
middleware Include snuggsi from node library Dec 19, 2018
mixins Convert to use test.ok method Dec 26, 2017
mutation-observer Update mutation observer Dec 26, 2017
parent-node Update Jul 22, 2018
polyfills Convert to underscore variable Dec 28, 2018
public Update browsersync Jul 23, 2019
resource Add DEFAULT_METHODS test Dec 26, 2018
resources Migrate test harnesses Nov 10, 2017
server Update serve port message to use emoji Dec 26, 2018
snippets Update browsersync script Jul 28, 2019
style Add whitespace Jul 23, 2019
test Update test/index.test Jul 27, 2019
token-list Remove extra node check from token-list Dec 21, 2018
watch Fix watch routine Dec 19, 2018
.gitignore Update .gitignore files Jul 25, 2019
.nowignore Update .nowignore Jul 26, 2019
.travis.yml Add proper execution routine for bin/snuggsi integrate Jul 14, 2019
Gemfile Remove comments from Gemfile Apr 20, 2017
LICENSE.txt Initial commit Dec 21, 2016
Procfile Setup Procfile web: script to npm start May 11, 2017
README.md Update Template documentation for Array of Objects Aug 19, 2019
animation.es Add polyfill for request animation frame Sep 14, 2017
browser-sync.js Update browsersync Jul 23, 2019
index.css Add typography to import Jul 23, 2019
index.css.example hgroup has fallen out of usage and no vendors implement. Dec 16, 2018
index.es Update fetch Jul 10, 2019
index.html Update to use browsersync.js Jul 23, 2019
index.html.example Add footer top of page link Dec 16, 2018
index.idl.sample Add index.idl.sample Nov 9, 2017
index.js 💪 bump ??? distribution index.js Jul 28, 2019
index.test Add currying Jul 27, 2019
now.json Update now.json Jul 23, 2019
package-lock.json 0.13.70 Aug 22, 2019
package.json 0.13.70 Aug 22, 2019
read.es Update read locaion Jul 10, 2019
sandbox.html Tets onload strategy Oct 19, 2017
snuggsi.gemspec Ruby commander used as dependency Oct 16, 2017
state.es Update formatting of state.es Apr 20, 2017
typography.css Migrate typography Jul 23, 2019

README.md

snuggsi ツ - Easy Web Components in ~1kiloByte

NPM monthly downloads Travis CI build Brotli size npm version dependency status license Pull requests welcome!

All you need is a browser and basic understanding of HTML, CSS, & Javascript classes to be productive!

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

Why ?

  1. You prefer to be D.R.Y. and build reusable web components on a gradual learning curve.

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

  3. You prefer convention over configuration & Web Components are ready for production

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

Easy Installation

Made with 💖 Vanilla JS™ No need to learn Node.js, Webpack, Babel, or Gulp. #UseThePlatform

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 src=//unpkg.com/snuggsi></script>

Et Voila (that's it!)

Browser Support

snuggsiツ provides a prolyfill for the following native web platform features:

Support IE11+ Edge* Chrome* Firefox* Safari 9+ Android* iOS Safari*
Templates
Custom Elements
Web Components
Slot Replacement

*Indicates the current version of the browser

⚠️ Warning ⚠️ 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

Custom Elements

Play Hello World Demo

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

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

// 👇 Definition -----------------------------

Element `hello-world`

// 👇 Description ------------------------------

(class extends HTMLElement {

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

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

</script>

Templates

The <template> is used to define custom element content for use within multiple elements.

Useful when we need to:

  1. Separate a custom element definition into a Web Component
  2. Bind a context to the template using An Array or POJO (Plain Ol' Javascript Object)
  3. Append rendered template to the document:
    • If context is an object bind a single <template>
    • If context is a collection (i.e. an Array) bind a sequential <template> DocumentFragment per item

<template> With Object Context

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

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

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

template.bind (context)

</script>

Rendered Result

<template name="developer">
<!-- invisible
  <h1>{name}</h1>
 -->
</template>

<h1>That Beast</h1><!-- template is used as head for tail insertion -->

<template> With Array of Objects Context

Each <template name> will be mapped over each context item within the array. When the array items are objects each property will map to a respective {token} of the same name.

Note: The # symbol is used to retrieve the collection's current index of iteration.

<ul>
  <template name=item>
    <li>Hello {name}! Your index # is {#}
  </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>

Rendered Result

<ul>
  <template name="item">
  <!-- invisible
    <li>Hello {name}! Your index # is {#}
  -->
  </template>

  <li>Hello DevPunk! Your number index # is 0</li>
  <li>Hello Snuggsi! Your number index # is 1</li>
</ul>

<template> With Scalar Array Context

Each <template name> will be mapped over each context item within the array. When the array items are scalar (i.e. strings, numbers, booleans) each item will map to a {self} helper token.

Note: The # symbol is used to retrieve the collection's current index of iteration.

<dl>
  <template name=recipe>
    <dt> Step {#}.
    <dd> {self}.

  </template>
</dl>

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

// when context is a collection of scalar variables (i.e. Strings)
const
  template = Template `recipe`
, context  = [
    "Preheat oven"
  , "Place pre-made cake in oven"
  , "Don't burn the cake"
  , "Nom Nom"
  ]

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

</script>

Rendered Result

<dl>
  <template name="recipe"> … </template>

  <dt> Step 1.</dt>
  <dd> Preheat oven.</dd>

  <dt> Step 2.</dt>
  <dd> Place pre-made cake in oven.</dd>

  <dt> Step 3.</dt>
  <dd> Don't burn the cake!</dd>

  <dt> Step 4.</dt>
  <dd> Nom Nom!</dd>

</dl>

Web Components

Component - a part or element of a larger whole.

snuggsiツ provides conventions around <link>able HTML resources when components grow in size and dependencies.

A snuggsiツ "Component" supports the following features:

  • Self Documenting.
  • Named <slot> composition & replacement.
  • Components written in pure HTML.
  • Usage of a component <link> requires no JavaScript😮.
  • A default <template> element used as a light DOM for custom element definitions.
  • Resource such as scripts, stylesheets, fonts, and other resources can be declared for use within master document via the <link> tag. (Learn More)

Master Document index.html

<!doctype html>

<title>Remote Component Example</title>

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

<link
  as=fetch
  id=foo-bar
  rel=preload
  href=foo-bar.html
>

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

Web Component 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>

Merged Document

<!doctype html>

<html>
  <head>
    <title>Remote Component Example</title>

    <link as="fetch" id="foo-bar" rel="preload" href="foo-bar.html">

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

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

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

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

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

    <script>

    Element `foo-bar`

    (class extends HTMLElement {

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

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

    </script>
  </body>
</html>

Further Learning

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

You can’t perform that action at this time.