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
; ;app.user.usenew UserProfile;app.view.usenew 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 scopeapp.user.setAttrs
=>window.__import_user_attrs_value__
app.user.import
=>window.__import_user_attr__
app.view.import
=>window.__import_view_component__
;
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
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
ViewComponent.render(userAttrs)
params :
- userAttrs : any
ViewFilter
ViewFilter.validate(userAttrs, componentId)
params :
- userAttrs : any
- componentId : string
LICENSE
MIT