https://github.com/8eecf0d2/jagwah

🐱 Small web application framework for HyperHTML
https://github.com/8eecf0d2/jagwah

framework hyperhtml lightweight typescript

Last synced: 11 months ago
JSON representation

🐱 Small web application framework for HyperHTML

• Host: GitHub
• URL: https://github.com/8eecf0d2/jagwah
• Owner: 8eecf0d2
• License: isc
• Created: 2018-06-27T01:11:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-04T14:58:10.000Z (about 7 years ago)
• Last Synced: 2025-03-01T17:49:12.147Z (12 months ago)
• Topics: framework, hyperhtml, lightweight, typescript
• Language: TypeScript
• Homepage:
• Size: 225 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# Jagwah

[![Travis CI badge](https://travis-ci.org/8eecf0d2/jagwah.svg?branch=master)](https://travis-ci.org/8eecf0d2/jagwah)

[![Codeclimate maintainability](https://img.shields.io/codeclimate/maintainability-percentage/8eecf0d2/jagwah.svg)](https://codeclimate.com/github/8eecf0d2/jagwah)

[![Greenkeeper badge](https://badges.greenkeeper.io/8eecf0d2/jagwah.svg)](https://greenkeeper.io/)

[![Bundlephobia minified badge](https://img.shields.io/bundlephobia/min/jagwah.svg)](https://bundlephobia.com/result?p=jagwah@latest)

[![Bundlephobia minified zipped badge](https://img.shields.io/bundlephobia/minzip/jagwah.svg)](https://bundlephobia.com/result?p=jagwah@latest)

Jagwah (pronounced [/dʒægwæh/](https://itinerarium.github.io/phoneme-synthesis/)) is a tiny web application framework built with [hyperHtml](https://github.com/WebReflection/hyperHtml) & [Typescript](https://github.com/Microsoft/TypeScript).

### Getting Started

Install with yarn or npm​

```bash

yarn add jagwah

```

Import and start using

```ts

import { Jagwah } from 'jagwah';

​

const jagwah = new Jagwah({

  providers: [ ... ],

  templates: [ ... ]

});

jagwah.start();

```

### [Documentation](https://github.com/8eecf0d2/jagwah/wiki)

All of the documentation can be found in [the github wiki](https://github.com/8eecf0d2/jagwah/wiki), it's not perfectly up to date with the latest changes but provides a good overview. Organizing and validating documentation is the focus of minor release [`0.1.0`](https://github.com/8eecf0d2/jagwah/projects/4).

All examples are stored in the [`examples` branch](https://github.com/8eecf0d2/jagwah/tree/examples)

### Overview

Jagwah wraps around hyperHtml to provide a simple API for building web applications with Routes, Templates, Dependency Injection and a few other things. It's intended for use with Typescript but works equally as well with Javascript, not abstracting too far away from core language features.

### Example

Below is a really simple example of jagwah, it uses a single Template without Providers or Routes.

`main.ts`

```ts

import { Jagwah, Selector } from 'jagwah';

​

const jagwah = new Jagwah();

​

@Selector('#hello-world')

class HelloWorldTemplate {

  constructor() {}

  public render(render: Jagwah.Template.render) {

    return render`

      
Hello World

    `;

  }

}

​

jagwah.Template(HelloWorldTemplate);

​

jagwah.update();

```


`main.js` (javascript alternative)

```ts

import { Jagwah } from 'jagwah';

​

const jagwah = new Jagwah();

​

function HelloWorldTemplate() {}

HelloWorldTemplate.$selector = '#hello-world';

HelloWorldTemplate.prototype.render(render) {

  return render`

    
Hello World

  `;

}

​

jagwah.Template(HelloWorldTemplate);

​

jagwah.update();

```


`index.html`

```html

  


```

`result.png`

![hello world with jagwah](https://i.imgur.com/Yu7GYaK.png)

### Credits

All of the really hard work was done by [WebReflection](https://github.com/WebReflection) and the contributors of [hyperHtml](https://github.com/WebReflection/hyperHtml/graphs/contributors).