Gimmickry NPM | npm.io

Gimmickry

Gimmick: a function adapts UI/UX for a user according to his/her attributes.

motivation

To provide user-adaptive UI/UX conveniently.

user-driven view rendering
stateful user attributes
small and encapsulated view component

architecture

usage

import {App, UserAttr, ViewComponent} from "gimmickry";

interface UserProfileSchema{
  name : sting;
  age : number;
}

class UserProfile extends UserAttr<UserProfileSchema>{
  id:string = "profile";
  value:UserProfileSchema = { name : "", age : 0 };
  init(){
    //get value from somewhere like API, cookie, etc.
    this.set({
      name : "taro",
      age : 20
    });
  }
}

interface UserSchema{
  profile:UserProfileSchema
}

class RenderHTML extends ViewComponent{
  id:string = "render-html";
  render(user:UserSchema){
    document.querySelector("#user-profile").innerHTML = `
      <div>name : ${user.proile.name}</div>
      <div>age : ${user.proile.age}</div>
    `;
  }
}

const app = new App();
app.user.use(new UserProfile());
app.view.use(new RenderHTML());

try example

clone this repo

$ git clone https://github.com/YoshiyukiKato/gimmickry.git

install packages

$ cd gimmickry
$ npm install

run dev server

$ npm run server

And then, please visit http://localhost:9000 to see some simple examples. Those examples' source are in example/src directory.

API

App

App(mode)

mode(optional)
- "dev"|"prod" (default is "dev").
- the dev mode exports following methods to global scope
  - app.user.setAttrs => window.__import_user_attrs_value__
  - app.user.import => window.__import_user_attr__
  - app.view.import => window.__import_view_component__

const app = new App(mode);

app.user

An instance of User class.

app.view

An instance of View class.

User

User.use(userAttr)

params :

userAttr : UserAttr

User.import(attrName, attrValue, attrInitFunction)

params :

attrName : string
attrValue : any
attrInitFunction : () => any

User.setAttrs(attrs)

params :

attrs : any

return : boolean

UserAttr

interface UserProfileSchema{
  id : sting;
  age : number;
}

class UserProfile extends UserAttr<UserProfileSchema>{
  id:string = "profile";
  value:UserProfileSchema = { name : "", age : 0 };
  init(){
    //get value from somewhere like API, cookie, etc.
    this.set({
      name : "taro",
      age : 20
    });
  }
}

UserAttr.init()

View

View.use(viewComponent)

params :

viewComponent : ViewComponent

View.useFilter(viewFilter)

params :

viewFilter : ViewFilter

View.import(componentId, renderFunction)

params :

componentId : string
renderFunction : (userAttrs) => any
- userAttrs : any

ViewComponent

interface UserSchema{
  profile:UserProfileSchema
}

class RenderHTML extends ViewComponent{
  id:string = "render-html";
  render(user:UserSchema){
    document.querySelector("#user-profile").innerHTML = `
      <div>name : ${user.proile.name}</div>
      <div>age : ${user.proile.age}</div>
    `;
  }
}

ViewComponent.render(userAttrs)

params :

userAttrs : any

ViewFilter

interface UserSchema{
  profile:UserProfileSchema
}

class Only20s extends ViewFilter{
  componentId:"my-component";
  validate(userAttrs:UserSchema, componentId:string){
    const age = userAttrs["profile"].age;
    if(!age) return false;
    return 20 <= age && age < 30;
  }
}