/bananaquit

Bananaquit is a small and simple component framework for apps using TypeScript.

Primary LanguageTypeScript

forthebadge forthebadge npm

Bananaquit is a small and simple component framework for apps using TypeScript.

Table of contents

Install

Install bananaquit using npm:

npm install bananaquitjs

Getting started

Create a main.ts and index.html file. This will be the entry point of your application. Open the index.html file and reference the main.ts file:

<html>
    <head>
        <title>Hello World</title>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="main.ts"></script>
    </body>
</html>

Inside the main.ts file import the Bootstrapper, create a component array and finally bootstrap the application with your components:

import { Bootstrapper } from 'bananaquitjs/core';

const appComponents = []
new Bootstrapper().bootstrapApp(appComponents);

Components

To create a new component create a new .ts file (e.g. login.component.ts) in your project. Open it and create a new class e.g. LoginComponent. (We recommended to end your component class names with "Component" for a better overview as the application grows).

Decorate the class with the @Component decorator from bananquitjs/core. There set the selector and the template you want your component to use.

import { Component } from 'bananaquitjs/core';

@Component({
    selector: 'hello-world-component',
    template: `<div>Hello world</div>`,
})
export class HelloWorldComponent {

}

You can also use an external template file instead of declaring it inline inside the component. First create a html file e.g. login.component.html inside the same folder. Then replace the template string with the required file.

...
@Component({
    ...
    template: require('./hello-world.component.html'),
})
...

All that's left is to introduce your components to bananquit. Open the main.ts file we created at the beginning and add your new component to the components array.

...
import { HelloWorldComponent } from './app/hello-world/hello-world.component'

const appComponents = [
  HelloWorldComponent
]
...

Finally add the selector inside the index.html and you are ready to go.

<body>
  ...
  <hello-world-component></hello-world-component>
  ...
</body>

Data Binding

...
@Component({
    selector: 'hello-world-component',
    template: `<div>Hello {myVar}</div>`,
})
export class HelloWorldComponent {
    public myVar = 'world';
    ...
}

Data Inputs

test.component.ts

...
@Component({
    selector: 'hello-world-component',
    template: `<div>{firstWord} {secondWord}</div>`,
})
...

index.html

<body>
  ...
  <hello-world-component firstWord="Hello" secondWord="world"></hello-world-component>
  ...
</body>

Output:

<body>
  ...
  <hello-world-component firstWord="Hello" secondWord="world">
      <div>Hello world</div>
  </hello-world-component>
  ...
</body>

Listeners

bq-click

Counter example:

...
@Component({
    selector: 'counter',
    template: `
        <div>
            <p>Current count: {counter}</p>
            <button bq-click="count()">Increase count</button>
        </div>
    `,
})
export class CounterComponent {
    public counter = 0;

    count() {
        this.counter = this.counter + 1;
        console.log('Counter increased to =>', this.counter);
    }
}

Lifecycles

Lifecycle Description Usage
OnInit Called after component initialization. Implement the OnInit interface and place your code inside onInit()
AfterRender Called after the component was rendered into the DOM. Implement the AfterRender interface and place your code inside afterRender()
OnChanges Called after every change on the page. Implement the OnChanges interface and place your code inside onChanges().
Use onChanges(changes) to work with the BasicChanges object.

TODO

  • Implement virtual-dom or morphdom
  • Lifecycle Hooks
  • Maybe a cli to create components, etc.