❤
npm
Sign UpSign In

web-component-js

1.2.8 • Public • Published

Web Component JS

A javascript library for very simply adding data driven web components to a HTML page, by defining your own domain specific, HTML language via templates.

Recent Releases

Version 1.2.8 (Stable?) August 23rd 2019

Version 1.2.7 (Buggy) December 4th 2015

Version 1.2.6 (Stable) October 6th 2015

Version 1.2.5 (Stable) July 11th 2015

Version 1.2.4 (Stable, supports loading of its own dependencies) July 6th 2015

Version 1.2.0 (Seems stable, old style depdendency errors) 30th June 2015

Dependencies

  • jQuery - for remote calls to server to provide components with data
  • Handlebars - for "minimal templating on steroids"

What it can do

Web Component is a javascript library that can convert custom HTML tags, like in this example...

Web Component Data Loading Example Source

... into rendered content, using client side JavaScript, and template definitions:

Web Component Data Loading Example

Online Demos

Tools

Web Component JS Composer - with Live Editor and JS Packager:

The composer is a great way to play around with new templates and view the results in the live window. It also packs up your script, template and style tags into a JS packaged format which you can distribute via CDN or include by reference into local web pages.

Sample Data

Some example JSON data to help with the examples:

Using Web Component JS

  1. Copy script tags for Web Component JS into the <head></head> of your HTML page
  2. Define a <template for="your-custom-element"></template> tag
  3. Insert your custom tags into the page
  4. Load the page in a web browser to see your custom tags render

A complete example to get you started:

<!DOCTYPE html>
<html>
<head>
  <title>Web Component Examples - Index</title>
  <script src="https://cdn.jsdelivr.net/gh/connected-web/web-component-js@1.2.8/lib/web-component.js"></script> 
 
  <style for="page">
    body { padding: 20px; font-family: sans-serif; }
  </style> 
 
</head>
<body>
  <github-repo user="Markavian" repo="web-component"></github-repo>
  <github-repo user="johnbeech" repo="product-monitor"></github-repo>
 
  <template for="github-repo">
    <h2>Repository</h2>
    <li>
      <a href="https://github.com/{{user}}/{{repo}}/">
        <b>{{user}}</b>/<b>{{repo}}</b>
      </a>
    </li>
  </template>
</body>
</html>

Beyond this simple example, Web Component can be used for auto-loading data via jQuery AJAX calls, and re-rendering other components defined by your page template based on these events.

Projects using Web Component

Local development setup

npm install http-server -g
http-server

Then open http://localhost:8080 in a web-browser of your choice.

Edits can be made to lib/web-component.js directly, and you can use the HTML files in tests/ as harnesses for various situations. Preferred browser for debugging is Chrome.

Local tests

To run tests against the web-component-js compiler, use:

npm test

This will run a series of compilation tests that convert sample components into a compiled format, based on a dependency resolution template, and then diff them against an expected output.

Web Component Wiki

Please see the wiki for documentation and examples on using the Web Component library and extending custom components with your own javascript.

Readme

Keywords

Package Sidebar

Install

npm i web-component-js

Repository

github.com/connected-web/web-component-js

Homepage

github.com/connected-web/web-component-js#readme

Weekly Downloads

6

Version

1.2.8

License

ISC

Unpacked Size

38.6 kB

Total Files

9

Last publish

Collaborators

  • johnbeech
  • markavian
Try on RunKit
Report malware