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.
Check out official framework docs below
Feature currently available
- Web components & Custom elements
- Directives (if & loop)
- Binder (Binding between DOM & Object)
- Router
- Events
Web components
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>Directives
Display data to DOM with ease.
if
if directive, remove/display DOM via binder scope. know more
loop
loop directive, display array of object in DOM via binder scope wih array property. know more
Binder
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
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>Events
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>Contributors
Example
Copyrights
(c) 2020, Haribalaji Raviprakash