This framework was created back in the very earliest of days for web-components support. It is no longer needed and I feel, much like other frameworks of the day like React, is overly complex with too much boilerplate. This is good for a historical view on work I have done, but not so useful for production in todays world where webcomponents are natively supported by all major browsers with a total of 95-97% global support of all installed and used webbrowsers.
Awesome ES6 compliant web componants for use in your app or website.
Tested and working on :
Firefox >=45 supports evrything needed with the included ./bower_components/document-register-element/build/document-register-element.js.
IE Edge Array.prototype.includes polyfill is build into awesome.js
install awesome-webcomponents via bower for your project by running bower install awesome-webcomponents don't forget to run bower update on occasion to get the latest version!
awesome-webcomponents on github.io
See the DBAD license in your language or our licence.md file.
- Fork the repo
- Do awesome stuff!
- Submit a Pull Request
- Feel Awesome!
These are the documents generated from the code. It has a lot of detailed info.
- Make sure you have bower installed
npm install -g bower - install or update awesome-webcomponents
bower install awesome-webcomponentsor update if already installedbower update - set up your html as below for a hello world
- see the full hello world tutorial
<html>
<head>
<meta charset="utf-8">
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<title>awesome.js hello world</title>
<!--
include awesome before trying to use anything that needs awesome
-->
<script type='application/javascript' src='./awesome.js'></script>
<!--
include awesome components you want to use in this HTML file
-->
<script type='application/javascript'>
awesome.requireScript(`${awesome.path}components/dialog/awesome-dialog.js`);
</script>
</head>
<body>
<!--
add desired component to page
-->
<awesome-dialog
data-title='Hello World'
>
<template>
<h1>Hello World</h1>
</template>
</awesome-dialog>
</body>
</html>
- start with the component boilerplate
- customize it and give it a special name
'use strict';
awesome.requireCSS(`${awesome.path}components/_a_boilerplate/awesome-boilerplate.css`);
awesome.requireCSS(`${awesome.path}stores/_a_boilerplate/boilerplate.js`);
(
function(){
const defaults={
something:'Boilerplate'
}
const component=new AwesomeComponent;
component.tagName='awesome-boilerplate-example';
component.extends='BaseComponent';
component.create=function createAwesomeDialog() {
const store=awesome.store.boilerplate.state;
return class AwesomeBoilerPlateExample extends awesome.component.BaseComponent{
createdCallback(){
super.createdCallback();
this.mergeDataset(this,defaults);
this.classList.add(AwesomeBoilerPlateExample.elementTagName);
this.careAbout(
//will care if this attribute is updated and rerender, otherwise it will ignore the attr change.
'data-something'
);
this.localize(
//this is a key in the language file so it will auto localize
'login',
this.dataset.something
);
this.innerHTML=`
<p>${this.dataset.something}</p>
<p>store.state.boilerplate=${store.boilerplate}</p>
<div>${this.content.content}</div>
<p>localized login</p>
<!-- preserve content template so it isn't lost on re-render -->
${this.content.template}
`;
}
}
}
component.init();
}
)();