@creamie/core

0.1.7 • Public • Published

Creamie javascript framework which is purely based on web components lifecycle

Build Status Download GitHub issues CodeFactor Gitter

version License: MIT Open in Gitpod

Support through below platforms:

patreon

Buy me a coffee

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

https://creamie.io

Feature currently available

  1. Web components & Custom elements
  2. Directives (if & loop)
  3. Binder (Binding between DOM & Object)
  4. Router
  5. 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

Package Sidebar

Install

npm i @creamie/core

Weekly Downloads

0

Version

0.1.7

License

MIT

Unpacked Size

90.9 kB

Total Files

28

Last publish

Collaborators

  • haribalajiravi