{"id":21906644,"url":"https://github.com/enlight/polymer-ts-decorators","last_synced_at":"2026-04-19T10:35:44.878Z","repository":{"id":33808303,"uuid":"37503372","full_name":"enlight/polymer-ts-decorators","owner":"enlight","description":"TypeScript decorators for Polymer 1.0 that enable more concise definition of web components","archived":false,"fork":false,"pushed_at":"2016-02-07T16:43:41.000Z","size":133,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T07:29:36.003Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"scikit-image/scikit-image","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/enlight.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":"2015-06-16T02:31:38.000Z","updated_at":"2019-02-18T17:52:14.000Z","dependencies_parsed_at":"2022-06-27T11:05:10.224Z","dependency_job_id":null,"html_url":"https://github.com/enlight/polymer-ts-decorators","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/enlight/polymer-ts-decorators","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enlight%2Fpolymer-ts-decorators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enlight%2Fpolymer-ts-decorators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enlight%2Fpolymer-ts-decorators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enlight%2Fpolymer-ts-decorators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enlight","download_url":"https://codeload.github.com/enlight/polymer-ts-decorators/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enlight%2Fpolymer-ts-decorators/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32004041,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"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":"2024-11-28T16:53:59.234Z","updated_at":"2026-04-19T10:35:44.860Z","avatar_url":"https://github.com/enlight.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# polymer-ts-decorators\nTypeScript decorators for Polymer 1.0 that enable more concise definition of web components.\nThese decorators were originally inspired by an early version [PolymerTS](https://github.com/nippur72/PolymerTS)\nproject.\n\nPrerequisites\n=============\n\nTypeScript 1.5.0-beta or later.\n\nUsage\n=====\n\nThe following examples assume the module containing the decorators has been\nimported like so:\n```TypeScript\nimport * as pd from 'polymer-ts-decorators';\n```\n\n@is()\n---\nGenerates a class decorator that sets the `is` property on the class prototype.\nThe [`is`](https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#register-element)\nproperty is used to specify the HTML tag name for a custom element.\n\n```TypeScript\n@pd.is('my-element')\nclass MyElement {\n  ...\n}\n\nPolymer(MyElement.prototype);\n\n```\n\n@extend()\n-------\nGenerates a class decorator that sets the `extends` property on the class prototype.\nThe [`extends`](https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#type-extension)\nproperty is used to specify which native HTML element a custom element extends.\n\n```TypeScript\n@pd.is('my-element')\n@pd.extend('input')\nclass MyElement {\n  ...\n}\n\nPolymer(MyElement.prototype);\n```\n\n@property()\n---------\nGenerates a property decorator that adds a Polymer property definition to the\n[`properties`](https://www.polymer-project.org/1.0/docs/devguide/properties.html)\nproperty on the class prototype.\n\n```TypeScript\n@pd.is('my-element')\nclass MyElement {\n  @pd.property({\n    type: String,\n    value: 'user',\n    reflectToAttribute: true,\n    readOnly: false,\n    notify: true,\n    computed: 'computeUserName',\n    observer: 'userNameChanged'\n  })\n  userName: string;\n\n  computeUserName(): string {\n    ...\n  }\n\n  userNameChanged(newValue: string, oldValue: string) {\n    ...\n  }\n}\n\nPolymer(MyElement.prototype);\n```\n\n@behavior()\n---------\nGenerates a class decorator that adds a behavior prototype to the `behaviors` property on\nthe class prototype. The [`behaviors`](https://www.polymer-project.org/1.0/docs/devguide/behaviors.html)\nproperty is an array of prototypes that Polymer will merge into the class prototype.\n\n```TypeScript\nclass SwooshBehavior {\n  ...\n}\n\nclass SwishBehavior {\n  ...\n}\n\n@pd.is('my-element')\n@pd.behavior(SwooshBehavior.prototype)\n@pd.behavior(SwishBehavior)\nclass MyElement {\n  ...\n}\n\nPolymer(MyElement.prototype);\n```\n\n@behaviors()\n----------\nGenerates a class decorator that adds behavior prototypes to the `behaviors` property on the\nclass prototype. The [`behaviors`](https://www.polymer-project.org/1.0/docs/devguide/behaviors.html)\nproperty is an array of prototypes that Polymer will merge into the class\nprototype. If the decorator is applied multiple times to the same class the\nobservers are merged into a single array.\n\n```TypeScript\n@pd.is('my-element')\n@pd.behaviors([SwishBehavior.prototype, SwooshBehavior])\nclass MyElement {\n  ...\n}\n\nPolymer(MyElement.prototype);\n```\n\n@observers()\n----------\nGenerates a class decorator that creates an `observers` property on the class prototype.\nThe [`observers`](https://www.polymer-project.org/1.0/docs/devguide/properties.html#multi-property-observers)\nproperty is an array of names of functions that observe changes to a set of properties,\nsub-properties, or array properties. If the decorator is applied multiple times to\nthe same class the observers are merged into a single array.\n\n```TypeScript\n@pd.is('my-element')\n@pd.observers(['observeA(propA)', 'observeB(propB)'])\n@pd.observers(['observeAB(propA,propB)', 'observeCD(propC,propD)'])\nclass MyElement {\n  observeA(propA): void {\n    ...\n  }\n  observeB(propB): void {\n    ...\n  }\n  observeAB(propA, propB): void {\n    ...\n  }\n  observeCD(propC, propD): void {\n    ...\n  }\n}\n\nPolymer(MyElement.prototype);\n```\n\n@listener()\n---------\nGenerates a method decorator that creates a mapping between an event name and a method\nthat will be used to handle that event, the mapping is stored in the\n[`listeners`](https://www.polymer-project.org/1.0/docs/devguide/events.html#event-listeners)\nproperty on the class prototype.\n\n```TypeScript\n@pd.is('my-element')\nclass MyElement {\n  @pd.listener('tap')\n  regularTap(e: Event) {\n    ...\n  }\n  @pd.listener('special.tap')\n  specialTap(e: Event) {\n    ...\n  }\n}\n\nPolymer(MyElement.prototype);\n```\n\n@listeners()\n----------\nGenerates a class decorator that creates a `listeners` property on the class prototype.\nThe [`listeners`](https://www.polymer-project.org/1.0/docs/devguide/events.html#event-listeners)\nproperty is an object whose keys and values correspond to event names and event handlers.\nIf the decorator is applied multiple times to the same class the event handler\nmappings are merged into a single object.\n\n```TypeScript\n@pd.is('my-element')\n@pd.listeners({\n  'tap': 'regularTap',\n  'special.tap', 'specialTap'\n})\n@pd.listeners({\n  'up': 'buttonUp',\n  'down': 'buttonDown'\n})\nclass MyElement {\n  regularTap(e: Event) {\n    ...\n  }\n  specialTap(e: Event) {\n    ...\n  }\n  buttonUp(e: Event) {\n    ...\n  }\n  buttonDown(e: Event) {\n    ...\n  }\n}\n\nPolymer(MyElement.prototype);\n```\n\n@hostAttributes()\n---------------\nGenerates a class decorator that creates a `hostAttributes` property on the class prototype.\nThe [`hostAttributes`](https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#host-attributes)\nproperty is an object whose keys and values correspond to attribute names and values.\nIf the decorator is applied multiple times to the same class the attribute definitions are merged into a single object. Polymer will set these HTML\nattributes on the element when it is created.\n\n```TypeScript\n@pd.is('my-element')\n@pd.hostAttributes({\n  role: 'button',\n  'aria-disabled': true\n})\n@pd.hostAttributes({\n  tabindex: 0\n})\nclass MyElement {\n  ...\n}\n\nPolymer(MyElement.prototype);\n```\n\nDevelopment\n===========\n\nYou'll need `grunt-cli` installed globally, if it isn't already you can install it like so:\n```\nnpm install -g grunt-cli\n```\n\nNext, install all the development dependencies via NPM:\n```\nnpm install\n```\n\nThen to build the source:\n```\ngrunt build\n```\n\nTo run the tests:\n```\ngrunt run-tests\n```\n\nTo build and immediately run the tests:\n```\ngrunt test\n```\n\nLicense\n=======\n\nThis library is licensed under the MIT license. See [LICENSE](LICENSE) file for full terms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenlight%2Fpolymer-ts-decorators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenlight%2Fpolymer-ts-decorators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenlight%2Fpolymer-ts-decorators/lists"}