web-component-js

v1.2.8

Published

2 years ago

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.

Downloads

0High
0Medium
0Low

johnbeech

markavian

html5 javascript webcomponents

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

https://cdn.jsdelivr.net/gh/connected-web/[email protected]/lib/web-component.js

Version 1.2.7 (Buggy) December 4th 2015

https://cdn.rawgit.com/connected-web/web-component-js/1.2.7/lib/web-component.js

Version 1.2.6 (Stable) October 6th 2015

https://cdn.rawgit.com/connected-web/web-component-js/1.2.6/lib/web-component.js

Version 1.2.5 (Stable) July 11th 2015

https://cdn.rawgit.com/connected-web/web-component-js/1.2.5/lib/web-component.js

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

https://cdn.rawgit.com/connected-web/web-component-js/1.2.4/lib/web-component.js

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

https://cdn.rawgit.com/connected-web/web-component-js/1.2.0/lib/web-component.js

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...

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

Online Demos

index.html : Web Component JS - Index of Examples

Tools

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

tools/composer.html Web Component Composer for Creating File Includes

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:

data/credits.json : Github Credits
data/geoNames.json : Geo Names
data/monitorStatus.json : Monitor Status
data/navigation.json : Navigation for Examples

Using Web Component JS

Copy script tags for Web Component JS into the <head></head> of your HTML page
Define a <template for="your-custom-element"></template> tag
Insert your custom tags into the page
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/[email protected]/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

Product Monitor - for rendering pretty much everything client side.

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.

[Web Component API] (https://github.com/Markavian/web-component/wiki/Web-Component-API)