Support through below platforms:
It is a front-end javascript bundle which you can import in your client project.
To use this as library try below command:
npm install @creamie/core
If you don't want to create project manually, we'll recommend you to install creamie-cli globally. Read more to access auto-project generation CLI tool.
- Web components & Custom elements
- Directives (if & loop)
- Binder (Binding between DOM & Object)
- Router
- Events
We have used common web component elements to achieve custom element which is convenient with callbacks.
Example:
appConfig.js:
export default {
template: `app.html`,
style: `app.css`,
tag: 'app',
isShadowDom: false,
shadowMode: 'open',
binder: 'data',
boot: {
'app.html': `<div class="text-center">App component working!</div>`,
'app.css': `.text-center { text-align: center; }`
}
}App.js:
import Creamie from '@creamie/core';
import AppConfig from './appConfig.js';
class App extends Creamie {
constructor() {
super(AppConfig);
}
/**
* create your methods below
*/
}
window.customElements.define(AppConfig.tag, App);index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>App</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script module='type' src='./App.js'></script>
</head>
<body>
<app></app>
</body>
</html>Display data to DOM with ease.
if directive, remove/display DOM via binder scope. know more
loop directive, display array of object in DOM via binder scope wih array property. know more
Binder will make the data sync between a HTMLElement and Object. know more
Example:
In your component html try will below code:
<input type="text" data="name" placeholder="Type anything">
<div data="name">Previous data!</div>
<button id="change">Change</button>App.js:
import Creamie from '@creamie/core';
import AppConfig from './appConfig.js';
class App extends Creamie {
constructor() {
super(AppConfig);
let _this = this;
change.onclick = function() {
_this.data.name = 'Data changed!';
}
}
/**
* create your methods below
*/
}
window.customElements.define(AppConfig.tag, App);Router will replace the particular component on a route placeholder without refreshing the page. know more
Example:
App.js:
import Creamie from '@creamie/core';
import AppConfig from './appConfig.js';
import Router from '@creamie/core/router.js';
import Home from './home.js';
import Tab from './tab.js';
class App extends Creamie {
constructor() {
super(AppConfig);
let router = new Router('route-app', {
'/home' : Home,
'/tab/{tabId}' : Tab
});
router.init();
// To route in js
// router.navigateTo('/tab');
// console.log(router.params.tabId);
}
/**
* create your methods below
*/
}
window.customElements.define(AppConfig.tag, App);index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>App</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script module='type' src='./App.js'></script>
</head>
<body>
<a route-to="/home">Home</a>
<a route-to="/tab/{tabId}">Tab</a>
<route-app></route-app>
</body>
</html>Event listeners based on event delegation methodology. know more
Example:
App.js:
import Creamie from '@creamie/core';
import AppConfig from './appConfig.js';
class App extends Creamie {
constructor() {
super(AppConfig);
this.events.init({
execute: function (target, e) {
console.log(target, e);
alert('Execute method fired!');
}
});
}
/**
* create your methods below
*/
}
window.customElements.define(AppConfig.tag, App);index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>App</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script module='type' src='./App.js'></script>
</head>
<body>
<button e="click:execute"></button>
</body>
</html>(c) 2020, Haribalaji Raviprakash
