{"id":28442067,"url":"https://github.com/guseyn/page-unit","last_synced_at":"2025-08-11T14:51:31.214Z","repository":{"id":57134833,"uuid":"158373772","full_name":"Guseyn/page-unit","owner":"Guseyn","description":"Library for Page framework that provides Unit abstraction.","archived":false,"fork":false,"pushed_at":"2019-05-11T10:42:00.000Z","size":70,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-08T20:51:25.283Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Guseyn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-20T10:46:46.000Z","updated_at":"2019-05-11T10:42:02.000Z","dependencies_parsed_at":"2022-09-04T15:52:28.736Z","dependency_job_id":null,"html_url":"https://github.com/Guseyn/page-unit","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/Guseyn/page-unit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Guseyn%2Fpage-unit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Guseyn%2Fpage-unit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Guseyn%2Fpage-unit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Guseyn%2Fpage-unit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Guseyn","download_url":"https://codeload.github.com/Guseyn/page-unit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Guseyn%2Fpage-unit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269906375,"owners_count":24494329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-06T05:39:37.475Z","updated_at":"2025-08-11T14:51:31.175Z","avatar_url":"https://github.com/Guseyn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# page-unit\n\n[![NPM Version](https://img.shields.io/npm/v/@page-libs/unit.svg)](https://npmjs.org/package/@page-libs/unit)\n[![Build Status](https://travis-ci.org/Guseyn/page-unit.svg?branch=master)](https://travis-ci.org/Guseyn/page-unit)\n[![codecov](https://codecov.io/gh/Guseyn/page-unit/branch/master/graph/badge.svg)](https://codecov.io/gh/Guseyn/page-unit)\n\nLibrary for [Page](https://github.com/Guseyn/page) framework that provides Unit abstraction. It's based on the [Async Tree Pattern](https://github.com/Guseyn/async-tree-patern/blob/master/Async_Tree_Patern.pdf).\n\n## Install\n\n`npm install @page-libs/unit`\n\n## Run test\n\n`npm test`\n\n## Run build\n\n`npm run build`\n\nPackage is already built. So, for using in Page you just need to install it.\n\n## Unit\n\n### Unit implementation\n\n```js\nclass Unit {\n  constructor (elm) {\n    this.elm = elm\n    for (let propertyName of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {\n      if (this[propertyName] instanceof Function \u0026\u0026\n          this[propertyName] !== 'constructor' \u0026\u0026\n          propertyName.startsWith('on')) {\n        this.elm[propertyName] = this[propertyName].bind(this)\n      }\n    }\n  }\n\n  override (unit, methodName, method) {\n    unit.elm[methodName] = method.bind(this)\n  }\n}\n\n```\n\nEvery class that extends `Unit` has `override` method. It can be used for rebinding events from encapsulated elements to a custom events of Unit that encapsulates them. In the example below, when button is clicked, `onsubmit` is used instead of `onclick` event of the button.\n\n## Example\n\nLet's say we have html template(pseudocode):\n\n```html\n\u003cdiv id=\"user-form\"\u003e\n  \u003cinput id =\"name\"\u003e\n  \u003cinput id =\"password\"\u003e\n  \u003cbutton id=\"submit\"\u003eSign in\u003c/button\u003e\n\u003c/div\u003e\n```\n\n```js\nconst { Unit } = require('@page-libs/unit')\n\nclass UserForm extends Unit {\n  constructor (elm, nameUnit, passwordUnit, submitButtonUnit) {\n    super(elm)\n    this.nameUnit = nameUnit\n    this.passwordUnit = passwordUnit\n    this.submitButtonUnit = submitButtonUnit\n    // so when submit button is clicked, onsubmit event will be invoked\n    this.override(this.submitButtonUnit, 'onclick', this.onsubmit)\n  }\n\n  onsubmit () {\n    // ajaxRequest using nameUnit.value() and passwordUnit.value();\n  }\n}\n\n```\n\n```js\nconst { Unit } = require('@page-libs/unit')\n\nclass SubmitButton extends Unit {\n  constructor (elm) {\n    super(elm)\n  }\n\n  onclick () {\n    /* it can be defined, but it also can be\n         overridden with some other event(in that case this method would be ignored) */\n  }\n}\n\n```\n\n```js\nconst { Unit } = require('@page-libs/unit')\n\nclass NameInput extends Unit {\n  constructor (elm) {\n    super(elm)\n  }\n\n  value () {\n    return this.elm.value\n  }\n}\n\n```\n\n```js\nconst { Unit } = require('@page-libs/unit')\n\nclass PasswordInput extends Unit {\n  constructor (elm) {\n    super(elm)\n  }\n\n  value () {\n    return this.elm.value\n  }\n}\n\n```\n\nThen you can declare elements in the following style:\n\n```js\nnew UserForm(\n  document.getElementById('user-form'), \n  new NameInput(document.getElementById('name')),\n  new PasswordInput(document.getElementById('password')),\n  new SubmitButton(document.getElementById('submit'))\n)\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguseyn%2Fpage-unit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguseyn%2Fpage-unit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguseyn%2Fpage-unit/lists"}