{"id":18894112,"url":"https://github.com/serkansipahi/app-decorators","last_synced_at":"2025-04-15T00:31:55.799Z","repository":{"id":57141220,"uuid":"45488980","full_name":"SerkanSipahi/app-decorators","owner":"SerkanSipahi","description":"Collection of JavaScript decorators (ES7) for building fast, scalable, performant web apps","archived":false,"fork":false,"pushed_at":"2018-06-11T21:32:38.000Z","size":1147,"stargazers_count":18,"open_issues_count":25,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T13:48:31.218Z","etag":null,"topics":["compiler","decorators","es6","es7","javascript","performance"],"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/SerkanSipahi.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-11-03T19:04:43.000Z","updated_at":"2023-03-18T07:45:12.000Z","dependencies_parsed_at":"2022-09-05T01:20:48.820Z","dependency_job_id":null,"html_url":"https://github.com/SerkanSipahi/app-decorators","commit_stats":null,"previous_names":[],"tags_count":128,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SerkanSipahi%2Fapp-decorators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SerkanSipahi%2Fapp-decorators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SerkanSipahi%2Fapp-decorators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SerkanSipahi%2Fapp-decorators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SerkanSipahi","download_url":"https://codeload.github.com/SerkanSipahi/app-decorators/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248984392,"owners_count":21193740,"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":["compiler","decorators","es6","es7","javascript","performance"],"created_at":"2024-11-08T08:18:06.789Z","updated_at":"2025-04-15T00:31:54.826Z","avatar_url":"https://github.com/SerkanSipahi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## app-decorates (Beta)\n\n#### Quickstart with app-decorators-cli\n```sh\n# For Mac\nnpm install appdec-cli-osx --global\n\n# For Windows\nnpm install appdec-cli-win --global\n\n# For Linux\nnpm install appdec-cli-linux --global\n\n# then\nappdec create --name mymodule\nappdec run --name mymodule --watch --server\n```\n\nSee [`app-decorators-cli`](https://github.com/SerkanSipahi/app-decorators-cli)(Beta)\n\n---\n\n#### Why app-decorators?\n- compiler first [AOT-Compiler](https://en.wikipedia.org/wiki/Ahead-of-time_compilation), do computation at compile time and not at runtime\n- write less, do more\n- and more (coming soon)\n\n#### Runtime package\n\n| Package | Version | Dependencies | DevDependencies |\n|--------|-------|------------|------------|\n| [`app-decorators`](https://github.com/SerkanSipahi/app-decorators) | [![npm](https://img.shields.io/npm/v/app-decorators.svg?maxAge=2592000)](https://www.npmjs.com/package/app-decorators) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg)](https://david-dm.org/SerkanSipahi/app-decorators) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?type=dev)](https://david-dm.org/SerkanSipahi/app-decorators?type=dev) |\n\n#### Core compiler packages\n\n| Package | Version | Dependencies | DevDependencies |\n|--------|-------|------------|------------|\n| [`app-decorators-component`](/packages/babel-plugin-app-decorators-component) | [![npm](https://img.shields.io/npm/v/babel-plugin-app-decorators-component.svg?maxAge=2592000)](https://www.npmjs.com/package/babel-plugin-app-decorators-component) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-plugin-app-decorators-component)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-component) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-plugin-app-decorators-component\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-component\u0026type=dev) |\n| [`app-decorators-view-precompile`](/packages/babel-plugin-app-decorators-view-precompile) | [![npm](https://img.shields.io/npm/v/babel-plugin-app-decorators-view-precompile.svg?maxAge=2592000)](https://www.npmjs.com/package/babel-plugin-app-decorators-view-precompile) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-plugin-app-decorators-view-precompile)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-view-precompile) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-plugin-app-decorators-view-precompile\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-view-precompile\u0026type=dev) |\n| [`app-decorators-style-precompile`](/packages/babel-plugin-app-decorators-style-precompile) | [![npm](https://img.shields.io/npm/v/babel-plugin-app-decorators-style-precompile.svg?maxAge=2592000)](https://www.npmjs.com/package/babel-plugin-app-decorators-style-precompile) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-plugin-app-decorators-style-precompile)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-style-precompile) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-plugin-app-decorators-style-precompile\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-style-precompile\u0026type=dev) |\n| [`app-decorators-component-register`](/packages/babel-plugin-app-decorators-component-register) | [![npm](https://img.shields.io/npm/v/babel-plugin-app-decorators-component-register.svg?maxAge=2592000)](https://www.npmjs.com/package/babel-plugin-app-decorators-component-register) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-plugin-app-decorators-component-register)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-component-register) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-plugin-app-decorators-component-register\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-component-register\u0026type=dev) |\n| [`postcss-parse-atrule-events`](/packages/postcss-parse-atrule-events) | [![npm](https://img.shields.io/npm/v/postcss-parse-atrule-events.svg?maxAge=2592000)](https://www.npmjs.com/package/postcss-parse-atrule-events) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/postcss-parse-atrule-events)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/postcss-parse-atrule-events) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/postcss-parse-atrule-events\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/postcss-parse-atrule-events\u0026type=dev) |\n| [`preset-app-decorators`](/packages/babel-preset-app-decorators) | [![npm](https://img.shields.io/npm/v/babel-preset-app-decorators.svg?maxAge=2592000)](https://www.npmjs.com/package/babel-preset-app-decorators) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-preset-app-decorators)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-preset-app-decorators) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/babel-preset-app-decorators\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-preset-app-decorators\u0026type=dev) |\n\n#### Command line tools (Cli) for Mac, Linux or Windows\n\n| Package | Version | Dependencies | DevDependencies |\n|--------|-------|------------|------------|\n| [`appdec-cli-osx`](https://github.com/SerkanSipahi/app-decorators-cli) | [![npm](https://img.shields.io/npm/v/appdec-cli-osx.svg?maxAge=2592000)](https://www.npmjs.com/package/appdec-cli-osx) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators-cli.svg?path=bin/osx)](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/osx) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators-cli.svg?path=bin/osx\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/osx\u0026type=dev) |\n| [`appdec-cli-win`](https://github.com/SerkanSipahi/app-decorators-cli) | [![npm](https://img.shields.io/npm/v/appdec-cli-win.svg?maxAge=2592000)](https://www.npmjs.com/package/appdec-cli-win) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators-cli.svg?path=bin/win)](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/win) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators-cli.svg?path=bin/win\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/win\u0026type=dev) |\n| [`appdec-cli-linux`](https://github.com/SerkanSipahi/app-decorators-cli) | [![npm](https://img.shields.io/npm/v/appdec-cli-linux.svg?maxAge=2592000)](https://www.npmjs.com/package/appdec-cli-linux) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators-cli.svg?path=bin/linux)](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/linux) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators-cli.svg?path=bin/linux\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/linux\u0026type=dev) |\n\n#### Todomvc\n\n| Package | Version | Dependencies | DevDependencies |\n|--------|-------|------------|------------|\n| [`app-decorators-todomvc`](/packages/app-decorators-todomvc) | [![npm](https://img.shields.io/npm/v/app-decorators-todomvc.svg?maxAge=2592000)](https://www.npmjs.com/package/app-decorators-todomvc) | [![Dependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/app-decorators-todomvc)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/app-decorators-todomvc) | [![DevDependency Status](https://david-dm.org/SerkanSipahi/app-decorators.svg?path=packages/app-decorators-todomvc\u0026type=dev)](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/app-decorators-todomvc\u0026type=dev) |\n\n---\n\n#### Simple example\n\n##### Item.js\n```js\nimport { component, view, on, action, style } from 'app-decorators';\n\n@style(`\n    /** These atrule (@) events will be loaded asynchronous (non blocking) **/\n    \n    /** will be loaded on load event **/\n    @on load {\n        @fetch path/to/on/load.css;\n    }\n    \n    /** will be loaded when clicked .up class **/\n    @on click .up {\n        @fetch path/to/on/click/up.css;\n    }\n\n    /** will be loaded when url changed **/\n    @action hello/my/friend.html {\n        @fetch path/to/on/some/route/action.css;\n    }\n\n    /** critical path (inline css will appear immediately) **/\n    my-box div {\n        width: 100px;\n        height: 100px;\n    }\n`)\n@view(`\n    \u003ch3\u003e{{head}}\u003c/h3\u003e\n    \u003cdiv class=\"count\"\u003e{{count}}\u003c/div\u003e\n    \u003cdiv\u003e\n        \u003cspan class=\"up\"\u003e + \u003c/span\u003e\n        \u003cspan class=\"down\"\u003e - \u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        \u003ca href=\"?state=reset\"\u003eclear count\u003c/a\u003e\n        \u003ca href=\"?state=destroy\"\u003edestroy\u003c/a\u003e\n        \u003ca href=\"hello/my/friend.html\"\u003edestroy\u003c/a\u003e\n    \u003c/div\u003e\n`)\n@component({\n    name: 'my-box'\n})\nclass Item {\n\n    @view.bind count = 0;\n    \n    @on('click .up') onClickUp() {\n        ++this.count\n    }\n    \n    @on('click .down') onClickUp() {\n        --this.count\n    }\n    \n    @action('?state={{type}}') onUrlStateChanged({ params }){\n        \n        let { type } = params;\n        if(type === 'reset'){\n            this.count = 0;   \n        }\n        // remove it self\n        else if(type === 'destroy') {\n            this.parentNode.removeChild(this);\n        }\n    }\n}\n\nexport {\n    Item\n}\n```\n\n#### app.js\n```js\n\nlet item = Item.create({\n    head: 'Some description'\n});\n\ndocument.body.appendChild(item);\n```\n\n#### Result in Markup\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003ctitle\u003emy com-item\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003ccom-item\u003e\n            \u003c!-- for fast rendering, style will be appended onLoad --\u003e\n            \u003cstyle\u003e\n                my-box h3 {\n                    font-size: 14px;\n                }\n                my-box div {\n                    border: 1px solid gray;\n                }\n            \u003c/style\u003e\n            \u003ch3\u003eSome description\u003c/h3\u003e\n            \u003cdiv class=\"count\"\u003e0\u003c/div\u003e\n            \u003c!-- on click .up or .down it will increment/decrement .count --\u003e\n            \u003cdiv\u003e\n                \u003cspan class=\"up\"\u003e + \u003c/span\u003e\n                \u003cspan class=\"down\"\u003e - \u003c/span\u003e\n            \u003c/div\u003e  \n            \u003cdiv\u003e\n                \u003ca href=\"?state=reset\"\u003eclear count\u003c/a\u003e\n                \u003ca href=\"?state=destroy\"\u003edestroy\u003c/a\u003e\n            \u003c/div\u003e\n        \u003c/com-item\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Its also possible to put `\u003ccom-item\u003e\u003c/com-item\u003e` direct in the dom like:\n```html\n\u003cbody\u003e\n    \u003c!-- It will render, see above (result in markup) --\u003e\n    \u003ccom-item\u003e\u003c/com-item\u003e\n\u003c/body\u003e\n```\n\n## Browser Support\n\n| Tables                      | Version                         |\n| --------------------------- |:-------------------------------:|\n| Chrome                      | latest stable                   |\n| Edge                        | latest stable                   |\n| Firefox                     | latest stable                   |\n| Opera                       | latest stable                   |\n| Safari MacOS                | \u003e=  9                           |\n| IE                          | \u003e= 11                           |\n| --------------------------- | ------------------------------- |\n| iOS Safari                  | \u003e= 10.0.0                       |\n| iOS Chrome                  | \u003e= 58.0.0                       |\n| iOS Firefox                 | \u003e= 55.0.0                       |\n| --------------------------- | ------------------------------- |\n| Android Chrome              | \u003e= 58.0.0                       |\n| Android Firefox             | \u003e= 55.0.0                       |\n\n## Documentation\n\n##### Decorators\n* [@component](./docs/decorators/component.md)\n* [@view](./docs/decorators/view.md)\n* [@on](./docs/decorators/on.md)\n* [@action](./docs/decorators/action.md)\n* [@style](./docs/decorators/style.md)\n\n##### Libraries\n* [Router](./docs/libs/router.md)\n* [Customelement](./docs/libs/customelement.md)\n* [Eventhandler](./docs/libs/eventhandler.md)\n* [View](./docs/libs/view.md)\n* [Stylesheet](./docs/libs/stylesheet.md)\n\n## Tests and Contributors guidelines\n```\n// init\nnpm install --global lerna\n\n// install and test packages\nmake lerna-bootstrap\nmake lerna-test\n\n// install and compile for browser tests\nmake install\nmake compile // required for node css fixture server\nmake test // and run this in separate window\n```\n\n## Contributors guidelines (currently internal info)\nbuild new binary on new version \n\n## Contributors guidelines (currently internal info)\n```\n// init\nnpm install --global lerna\n\n// lerna-bootstrap for packages\nlerna bootstrap -- --no-package-lock\n\n// or make install for acceptance tests\ncd packages/app-decorators\njspm install\ncd ../..\nmake prepare-compile // ignore the :4000 error\nmake gulp-compile\n\n// browser test\nmake test\n\n// packages test\nmake lerna-test\n\n// clean packages\nmake lerna-clean\nmake clean\ngit checkout packages/app-decorators/package.json\ngit checkout jspm.config.js\n\n// when publish\n- *1 update in package.json version\n- update babel-preset-app-decorators to same in *1\n- packages/app-decorators-todomvc update preset\n\n```\n\napp-decorators and its [packages](https://github.com/SerkanSipahi/app-decorators/tree/master/packages) are distributed as a [monorepo](https://github.com/babel/babel/blob/master/doc/design/monorepo.md).\n\n## (c) 2015 - 2018 Serkan Sipahi\nApp-Decorators may be freely distributed under the [MIT license](https://github.com/SerkanSipahi/app-decorators/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserkansipahi%2Fapp-decorators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserkansipahi%2Fapp-decorators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserkansipahi%2Fapp-decorators/lists"}