niiti v1.0.0

About The Project

Nitti is a TS framework for studies and personal use. Heavily inspired by Stephen Grider course and Minko Gechev, Marvin Frachet.

Built With

• Typescript

Getting Started

git clone https://github.com/arthurlch/nitii.git

Prerequisites

Node 14 ~ Typescript 7 ~

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/arthurlch/nitii.git

Usage

Niiti is based on a View Model pattern.

Model

Eventing

Eventing.ts contain basics event:

on.(eventName, callback)

user.on('change', () => {
  console.log('user change')
})

trigger(eventName)

trigger on.('change') wil trigger event defined above

user.trigger('change);

// 'user change'

ApiSync

ApiSync.ts contain all the Sync properties available.

fetch(id): Promise

let userId = 1;
user.fetch(userId);

// return axios.get(`${this.url}/${id}`)

save()

const user = New User({id: 1, name: 'user'});

user.on('save', () => {
  console.log(user)
});
user.save();

Attributes

Basic attributes to retrieve data and modify data.

get(target)

user = New User({id: 1, name: 'test'});
user.get('name');

// 'test'

set(updateTarget)

user = New User({id: 1, name: 'test'});

uset.set({name: 'newName'});

getAll()

user = New User({id: 1, name: 'test'});

user.getAll();

// shows User model Object with attributes etc

Collection

Collection objects provide a method of storing and retrieving items in memory based upon a key in a data structure that stores pairs of keys and values.

ex:

const myUrl = 'http://localhost:3000/users'
const collection = New Collection(myUrl);

collection.on('change', () => {
console.log(collection);
});

collection.fetch();

// Collection(events, attributes, models[array that contain all users or model])

User Model

Niiti provide default model 'Model.ts' which other model will inherit.

A user model is also provided

import { Model } from './Model';
import { Attributes } from './Attributes';
import { ApiSync } from './ApiSync';
import { Eventing } from './Eventing';
import { Collection } from './Collection';

// init and interface to customize your Model
export interface UserProps {
  id?: number;
  name?: string;
  age?: number;
}

// set your development/prod url.
const rootUrl = 'http://localhost:3000/users';

// init user class
export class User extends Model<UserProps> {
  static buildUser(attrs: UserProps): User {
    return new User(
      new Attributes<UserProps>(attrs),
      new Eventing(),
      new ApiSync<UserProps>(rootUrl)
    );
  }

  static buildUserCollection(): Collection<User, UserProps> {
    return new Collection<User, UserProps>(rootUrl, (json: UserProps) =>
      User.buildUser(json)
    );
  }

  // you customize the User model adding new functionnality here
  setRandomAge(): void {
    const age = Math.round(Math.random() * 100);
    this.set({ age });
  }
}

Using buildUser(data: json); You can build User model.
Reusing the buildUser func with a custom interface to create different model.

Views

A view is a callable which takes a request and returns a response. This can be more than just a function. These allow you to structure your views and reuse code by harnessing inheritance and mixins.

The particularity here is that we don't use a parser to parse the HTML so any html rendering will be done with backticks . ( HTML Parser might be in the roadmap).

Rendering is done with HTMLTemplateElement see the doc here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement

In the case of User model to render it, there is 3 sections. UserEdit that contain UserForm and UserShow and will render both files.

You can add new Views nesting it in UserEdit or you own view depending the model you want to render. ModelEdit || UserEdit is the class that wrap both UserShow and UserForm.

UserShow.ts

Shows model data.

export class UserShow extends View<User, UserProps> {
  template(): string {
    return `
      <div>
      // Your html here

      </div>
    `;
  }
}

UserShow will be rendered from UserEdit.

UserForm

UserForm is were you should render forms.

Event bindings happends in a eventsMapper. You can create custom events in the eventsMap()

eventsMap(): { [key: string]: () => void } {
    return {
      // your custom event here
      'click:.save-model': this.onSaveClick,
    };
}

onSaveClick(): types {
  // your code
};

UserEdit

Parent of UserForm and UserView.

Will render any file for User model. You need to define an intance of ModelForm and ModelShow inside the ModelEdit.

regionsMap(): { [key: string]: string } {
    return {
      // add custom class here
      userShow: '.user-show',
      userForm: '.user-form',
    };
  }

Roadmap

Yet there is no way to parse HTML and most of the HTML need to be nested in back-ticks which is very inconvenient.

HMTLParser() Can parse HTML to avoid manual nesting inside EditModel.

See the open issues for a full list of proposed features (and known issues).

Contributing

No contribution accepted.

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Arthur - @twitter Project Link: https://github.com/arthurlch/nitii

Acknowledgments

• Stephen Grider