Urushi has been made with creators in mind to create web components. By expressing web components in one class, Web application can be easily created. Users are able to use web components as one class based on the definition of HTML, CSS, functions in JavaScript set by creator.
Urushi provides web components as object-oriented class. Therefore, all web components in HTML exist as instances. Attributes and methods are integrated in instances to make large-scale development possible.
Urushi provides the required HTML Template and JavaScript class mechanism to create web components. Web components can be used easily by defining the configuration file of Template engine.
GITHUB
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link href="./urushi/material/style/material.css" rel="stylesheet">
<script src="./config/requireConfig.js"></script>
<script src="./lib/js/require.js" data-main="./main"></script>
</head>
<body>
<div data-urushi-type="panel" data-urushi-options='{"header" : "Header title"}'>
<button data-urushi-type="button">CLICK ME</button>
</div>
</body>
</html>
By adding data-urushi-type attribute to tags, instance can be automatically created by Template engine. Users can define the constructor arguments of data-urushi-options in json format.
// main.js
require.config(requireConfig);
require(['templateEngine', 'templateConfig'], function (templateEngine, templateConfig) {
templateEngine.renderDocument(document.body, templateConfig);
});
In order to start the Template engine, please create main.js and index.html in the same folder. All data-urushi-type specified HTML tags will be replaced with Urushi web components.
Microsoft Internet Explorer, Google Chrome and Mozzila Firefox are supported. Web components for Tablet devices will be added in the future updates. Therefore Android and Apple Safari will be supported in the near future.