Table of Contents
Nitti is a TS framework for studies and personal use. Heavily inspired by Stephen Grider course and Minko Gechev, Marvin Frachet.
git clone https://github.com/arthurlch/nitii.git
Node 14 ~ Typescript 7 ~
- npm
npm install npm@latest -g
https://www.npmjs.com/package/niiti
Clone the repo
git clone https://github.com/arthurlch/nitii.git
Niiti is based on a View Model pattern.
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.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();
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 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])
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.
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',
};
}
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).
No contribution accepted.
Distributed under the MIT License. See LICENSE.txt
for more information.
Arthur - @twitter Project Link: https://github.com/arthurlch/nitii