{"id":14990441,"url":"https://github.com/vjai/tiny","last_synced_at":"2025-07-25T04:09:19.377Z","repository":{"id":46763802,"uuid":"385224698","full_name":"VJAI/tiny","owner":"VJAI","description":"A tiny library simplifies building web components using decorators","archived":false,"fork":false,"pushed_at":"2021-11-25T15:02:34.000Z","size":2354,"stargazers_count":1,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T15:11:15.455Z","etag":null,"topics":["component","library","ui","ui-components","webcomponent"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/VJAI.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":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2021-07-12T11:31:18.000Z","updated_at":"2022-03-11T08:58:36.000Z","dependencies_parsed_at":"2022-09-10T20:00:49.758Z","dependency_job_id":null,"html_url":"https://github.com/VJAI/tiny","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VJAI%2Ftiny","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VJAI%2Ftiny/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VJAI%2Ftiny/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VJAI%2Ftiny/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VJAI","download_url":"https://codeload.github.com/VJAI/tiny/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249000718,"owners_count":21196345,"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","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":["component","library","ui","ui-components","webcomponent"],"created_at":"2024-09-24T14:20:08.959Z","updated_at":"2025-04-15T03:29:18.429Z","avatar_url":"https://github.com/VJAI.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/VJAI/tiny/blob/main/tiny.png\" style=\"width: 200px\" /\u003e\n\u003c/p\u003e\n\n# ƚιɳყ\n\nA tiny library (~20kb minified) simplifies building web components using a base class and small set of decorators.\n\n## Installation\n\n```shell\nnpm i @tinyweb/core --save\n```\n\n## Example\n\nA simple todo app.\n\n```js\nimport { TinyElement, ElementChanges, element, query, handle, input } from '@tinyweb/core';\n\n@element(\n  'todo-app',\n  `\u003cdiv class=\"container\"\u003e\n    \u003cform\u003e\n      \u003cinput name=\"todo\" placeholder=\"New Todo\" /\u003e\n      \u003cbutton type=\"submit\"\u003eAdd\u003c/button\u003e\n    \u003c/form\u003e\n    \u003cdiv class=\"list\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e`\n)\nclass TodoApp extends TinyElement {\n  \n  @query('.list')\n  todosContainer: HTMLDivElement;\n\n  @query('input')\n  input: HTMLInputElement;\n\n  @handle('submit', 'form')\n  onSubmit(evt: Event) {\n    evt.preventDefault();\n    \n    if (!this.input.value) {\n      return;\n    }\n\n    const todo = this.create('todo-item', {\n      props: {\n        item: this.input.value\n      }\n    });\n\n    this.addChildren([todo], this.todosContainer);\n    this.input.value = '';\n  }\n}\n\n@element(\n  'todo-item',\n  `\u003cdiv\u003e\n    \u003cspan class=\"text\"\u003e\u003c/span\u003e\n    \u003cbutton type=\"button\" style=\"font-size:10px\" class=\"delete\"\u003e❌\u003c/button\u003e\n  \u003c/div\u003e`\n)\nclass Todo extends TinyElement {\n  \n  @input(true)\n  item: string;\n\n  @query('.text')\n  spanEl: HTMLSpanElement;\n\n  @query('.delete')\n  deleteEl: HTMLButtonElement;\n\n  onChanges(changes: ElementChanges) {\n    if (changes.has('item')) {\n      this.updateHtml(this.item, this.spanEl);\n    }\n  }\n\n  @handle('click', '.delete')\n  onDelete(evt: Event) {\n    evt.preventDefault();\n    this.remove();\n  }\n}\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  const board = document.createElement('todo-app');\n  document.body.appendChild(board);\n});\n```\n\n## API\n\n### Decorators\n\n#### `element(name: string, tpl: string, shadow: boolean = false)` decorator\nDecorator that helps to register a class as custom web element. \u003cbr\u003e\u003cbr\u003e\n\n#### `input(attribute = false, dataType = AttributeValueDataType.STRING)` decorator\nDecorator that marks the applied property as an input.\nThe supported values of `AttributeValueDataType` are `STRING`, `NUMBER` and `BOOLEAN`.\u003cbr\u003e\u003cbr\u003e\n\n#### `query(selector: string, parent?: string)` decorator\nDecorator that helps to query and return the first matched DOM element on accessing the applied property. \u003cbr\u003e\u003cbr\u003e\n\n#### `queryAll(selector: string, parent?: string)` decorator\nDecorator that helps to query and returns all matched DOM elements on accessing the applied property. \u003cbr\u003e\u003cbr\u003e\n\n#### `handle(eventName: string, element: string = 'self', all = false)` decorator\nDecorator that helps to bind a DOM event with a function.\nThe default value of element is \"self\" and you can pass any valid child element selector to it. \u003cbr\u003e\u003cbr\u003e\n\n### `TinyElement` (Base Class)\n\nContains methods to perform DOM operations.\n\n#### `create\u003cT extends HTMLElement\u003e(name: string, options: TinyElementCreateOptions): T`\nCreate new element and returns it. \nThe `TinyElementCreateOptions` interface looks like below,\n\n```ts\ninterface TinyElementCreateOptions {\n  /**\n   * Element id.\n   */\n  id?: string;\n\n  /**\n   * CSS class(es).\n   */\n  cls?: string | Array\u003cstring\u003e;\n\n  /**\n   * Properties.\n   */\n  props?: KeyValue;\n\n  /**\n   * DOM attributes.\n   */\n  attrs?: KeyValue;\n\n  /**\n   * Styles.\n   */\n  styles?: KeyValue;\n\n  /**\n   * Events.\n   */\n  events?: EventMap;\n\n  /**\n   * Parent element.\n   */\n  parent?: string | TinyElement | HTMLElement;\n\n  /**\n   * Inner HTML.\n   */\n  html?: string;\n\n  /**\n   * Children.\n   */\n  children?: Array\u003c{ name: string; options: TinyElementCreateOptions }\u003e;\n}\n```\n\n#### `$\u003cT extends HTMLElement\u003e(selector: string, el: UIElement = this): T`\nQueries and returns the element that matches the passed CSS selector. \n`UIElement` is a composite type and it can be `string`, `TinyElement` or `HTMLElement`. \u003cbr\u003e\u003cbr\u003e\n\n#### `$$\u003cT extends HTMLElement\u003e(selector: string, el: UIElement = this): NodeListOf\u003cT\u003e`\nQueries and returns the elements that matches the passed CSS selector. \u003cbr\u003e\u003cbr\u003e\n\n#### `hasClass(cls: string, element: UIElement = this): boolean`\nReturns `true` if the element has the passed CSS class name. \u003cbr\u003e\u003cbr\u003e\n\n#### `addClass(classes: string | Array\u003cstring\u003e, el: UIElement = this): TinyElement`\nAdds single or multiple classes. \u003cbr\u003e\u003cbr\u003e\n\n#### `removeClass(classes: string | Array\u003cstring\u003e, el: UIElement = this): TinyElement`\nRemoves single or multiple classes. \u003cbr\u003e\u003cbr\u003e\n\n#### `clearClasses(el: UIElement = this): TinyElement`\nClear all classes. \u003cbr\u003e\u003cbr\u003e\n\n#### `toggleClass(cls: string | Array\u003cstring\u003e, el: UIElement = this, state?: boolean): TinyElement`\nToggles source css classes with the target. \u003cbr\u003e\u003cbr\u003e\n\n#### `replaceClass(sourceCls: string | Array\u003cstring\u003e, targetCls: string | Array\u003cstring\u003e, element: UIElement = this): TinyElement`\nReplaces source css classes with the target css classes. \u003cbr\u003e\u003cbr\u003e\n\n#### `getAttr(name: string, el: UIElement = this): string`\nReturns the attribute value of the element. \u003cbr\u003e\u003cbr\u003e\n\n#### `setAttr(obj: KeyValue, el: UIElement = this): TinyElement`\nSets attributes for element from the passed object. \nThe `KeyValue` interface refers an object structure and it looks as below,\n\n```ts\ninterface KeyValue {\n  [key: string]: any;\n}\n```\n\n#### `removeAttr(attrs: string | Array\u003cstring\u003e, el: UIElement = this): TinyElement`\nRemoves the passed attributes from the element. \u003cbr\u003e\u003cbr\u003e\n\n#### `getData(name: string, el: UIElement = this): string`\nReturns the value of the data attribute. \u003cbr\u003e\u003cbr\u003e\n\n#### `setData(obj: KeyValue, el: UIElement = this): string`\nSets object of data attributes. \u003cbr\u003e\u003cbr\u003e\n\n#### `getStyle(name: string, el: UIElement = this): string`\nReturns the passed style's value. \u003cbr\u003e\u003cbr\u003e\n\n#### `hasStyle(style: string, element: UIElement = this): boolean`\nReturns `true` if the element has the passed style. \u003cbr\u003e\u003cbr\u003e\n\n#### `addStyle(styles: object, el: UIElement = this): TinyElement`\nAdd passed styles. \u003cbr\u003e\u003cbr\u003e\n\n#### `clearStyles(el: UIElement = this): TinyElement`\nClears the passed styles. \u003cbr\u003e\u003cbr\u003e\n\n#### `removeStyles(styles: string | Array\u003cstring\u003e, el: UIElement = this): TinyElement`\nRemoves the passed style(s). \u003cbr\u003e\u003cbr\u003e\n\n#### `getChild(index: number, parent = this): HTMLElement`\nReturns the child from the passed index. \u003cbr\u003e\u003cbr\u003e\n\n#### `addChildren(children: HTMLElement | Array\u003cHTMLElement\u003e | HTMLCollection | Array\u003cDocumentFragment\u003e, parent = this): TinyElement`\nInserts the passed elements as children. \u003cbr\u003e\u003cbr\u003e\n\n#### `removeChildren(el: UIElement = this): TinyElement`\nRemoves all the children. \u003cbr\u003e\u003cbr\u003e\n\n#### `updateHtml(html: string, el: UIElement = this): TinyElement`\nUpdates html of the element. \u003cbr\u003e\u003cbr\u003e\n\n#### `show(el: UIElement = this): TinyElement`\nShows the element. \u003cbr\u003e\u003cbr\u003e\n\n#### `hide(el: UIElement = this): TinyElement`\nHides the element. \u003cbr\u003e\u003cbr\u003e\n\n#### `enable(element: UIElement = this, enable = true): TinyElement`\nEnables / disables component based on passed flag. \u003cbr\u003e\u003cbr\u003e\n\n#### `on\u003cK extends keyof HTMLElementEventMap\u003e(eventName: string, handler: EventHandler\u003cK\u003e, el: UIElement = this): TinyElement`\nSubscribes to the event. \nThe `EventHandler` type refers a DOM event handler and it looks as below,\n\n```ts\ntype EventHandler\u003cK extends keyof HTMLElementEventMap\u003e = (this: HTMLElement, ev: HTMLElementEventMap[K]) =\u003e any;\n```\n\n#### `off\u003cK extends keyof HTMLElementEventMap\u003e(eventName: string, handler: EventHandler\u003cK\u003e, el: UIElement = this): TinyElement`\nUn-subscribes from the event. \u003cbr\u003e\u003cbr\u003e\n\n#### `onConnected()`\nInvoked after the element is connected to DOM (life-cycle hook).\u003cbr\u003e\u003cbr\u003e\n\n#### `onDisconnected()`\nInvoked after the element is dis-connected to DOM (life-cycle hook).\u003cbr\u003e\u003cbr\u003e\n\n#### `onChanges(changes: ElementChanges)`\nCalled initially and whenever there is a change in inputs (life-cycle hook).\nThe `ElementChanges` type looks as below,\n\n```ts\ntype ElementChanges = Map\u003cstring, { oldValue: any; newValue: any }\u003e;\n```\n\n## License\n\nMIT\n\n## Contact\n\nvijay#dot#prideparrot#at#gmail.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvjai%2Ftiny","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvjai%2Ftiny","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvjai%2Ftiny/lists"}