Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/serkansipahi/app-decorators
Collection of JavaScript decorators (ES7) for building fast, scalable, performant web apps
https://github.com/serkansipahi/app-decorators
compiler decorators es6 es7 javascript performance
Last synced: about 5 hours ago
JSON representation
Collection of JavaScript decorators (ES7) for building fast, scalable, performant web apps
- Host: GitHub
- URL: https://github.com/serkansipahi/app-decorators
- Owner: SerkanSipahi
- License: mit
- Created: 2015-11-03T19:04:43.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-06-11T21:32:38.000Z (over 6 years ago)
- Last Synced: 2024-10-29T10:45:44.570Z (10 days ago)
- Topics: compiler, decorators, es6, es7, javascript, performance
- Language: JavaScript
- Homepage:
- Size: 1.09 MB
- Stars: 18
- Watchers: 2
- Forks: 2
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## app-decorates (Beta)
#### Quickstart with app-decorators-cli
```sh
# For Mac
npm install appdec-cli-osx --global
# For Windows
npm install appdec-cli-win --global
# For Linux
npm install appdec-cli-linux --global
# then
appdec create --name mymodule
appdec run --name mymodule --watch --server
```
See [`app-decorators-cli`](https://github.com/SerkanSipahi/app-decorators-cli)(Beta)
---
#### Why app-decorators?
- compiler first [AOT-Compiler](https://en.wikipedia.org/wiki/Ahead-of-time_compilation), do computation at compile time and not at runtime
- write less, do more
- and more (coming soon)
#### Runtime package
| Package | Version | Dependencies | DevDependencies |
|--------|-------|------------|------------|
| [`app-decorators`](https://github.com/SerkanSipahi/app-decorators) | [](https://www.npmjs.com/package/app-decorators) | [](https://david-dm.org/SerkanSipahi/app-decorators) | [](https://david-dm.org/SerkanSipahi/app-decorators?type=dev) |
#### Core compiler packages
| Package | Version | Dependencies | DevDependencies |
|--------|-------|------------|------------|
| [`app-decorators-component`](/packages/babel-plugin-app-decorators-component) | [](https://www.npmjs.com/package/babel-plugin-app-decorators-component) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-component) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-component&type=dev) |
| [`app-decorators-view-precompile`](/packages/babel-plugin-app-decorators-view-precompile) | [](https://www.npmjs.com/package/babel-plugin-app-decorators-view-precompile) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-view-precompile) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-view-precompile&type=dev) |
| [`app-decorators-style-precompile`](/packages/babel-plugin-app-decorators-style-precompile) | [](https://www.npmjs.com/package/babel-plugin-app-decorators-style-precompile) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-style-precompile) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-style-precompile&type=dev) |
| [`app-decorators-component-register`](/packages/babel-plugin-app-decorators-component-register) | [](https://www.npmjs.com/package/babel-plugin-app-decorators-component-register) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-component-register) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-plugin-app-decorators-component-register&type=dev) |
| [`postcss-parse-atrule-events`](/packages/postcss-parse-atrule-events) | [](https://www.npmjs.com/package/postcss-parse-atrule-events) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/postcss-parse-atrule-events) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/postcss-parse-atrule-events&type=dev) |
| [`preset-app-decorators`](/packages/babel-preset-app-decorators) | [](https://www.npmjs.com/package/babel-preset-app-decorators) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-preset-app-decorators) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/babel-preset-app-decorators&type=dev) |
#### Command line tools (Cli) for Mac, Linux or Windows
| Package | Version | Dependencies | DevDependencies |
|--------|-------|------------|------------|
| [`appdec-cli-osx`](https://github.com/SerkanSipahi/app-decorators-cli) | [](https://www.npmjs.com/package/appdec-cli-osx) | [](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/osx) | [](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/osx&type=dev) |
| [`appdec-cli-win`](https://github.com/SerkanSipahi/app-decorators-cli) | [](https://www.npmjs.com/package/appdec-cli-win) | [](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/win) | [](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/win&type=dev) |
| [`appdec-cli-linux`](https://github.com/SerkanSipahi/app-decorators-cli) | [](https://www.npmjs.com/package/appdec-cli-linux) | [](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/linux) | [](https://david-dm.org/SerkanSipahi/app-decorators-cli?path=bin/linux&type=dev) |
#### Todomvc
| Package | Version | Dependencies | DevDependencies |
|--------|-------|------------|------------|
| [`app-decorators-todomvc`](/packages/app-decorators-todomvc) | [](https://www.npmjs.com/package/app-decorators-todomvc) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/app-decorators-todomvc) | [](https://david-dm.org/SerkanSipahi/app-decorators?path=packages/app-decorators-todomvc&type=dev) |
---
#### Simple example
##### Item.js
```js
import { component, view, on, action, style } from 'app-decorators';
@style(`
/** These atrule (@) events will be loaded asynchronous (non blocking) **/
/** will be loaded on load event **/
@on load {
@fetch path/to/on/load.css;
}
/** will be loaded when clicked .up class **/
@on click .up {
@fetch path/to/on/click/up.css;
}
/** will be loaded when url changed **/
@action hello/my/friend.html {
@fetch path/to/on/some/route/action.css;
}
/** critical path (inline css will appear immediately) **/
my-box div {
width: 100px;
height: 100px;
}
`)
@view(`
{{head}}
{{count}}
+
-
`)
@component({
name: 'my-box'
})
class Item {
@view.bind count = 0;
@on('click .up') onClickUp() {
++this.count
}
@on('click .down') onClickUp() {
--this.count
}
@action('?state={{type}}') onUrlStateChanged({ params }){
let { type } = params;
if(type === 'reset'){
this.count = 0;
}
// remove it self
else if(type === 'destroy') {
this.parentNode.removeChild(this);
}
}
}
export {
Item
}
```
#### app.js
```js
let item = Item.create({
head: 'Some description'
});
document.body.appendChild(item);
```
#### Result in Markup
```html
my com-item
my-box h3 {
font-size: 14px;
}
my-box div {
border: 1px solid gray;
}
Some description
0
+
-
```
#### Its also possible to put `` direct in the dom like:
```html
```
## Browser Support
| Tables | Version |
| --------------------------- |:-------------------------------:|
| Chrome | latest stable |
| Edge | latest stable |
| Firefox | latest stable |
| Opera | latest stable |
| Safari MacOS | >= 9 |
| IE | >= 11 |
| --------------------------- | ------------------------------- |
| iOS Safari | >= 10.0.0 |
| iOS Chrome | >= 58.0.0 |
| iOS Firefox | >= 55.0.0 |
| --------------------------- | ------------------------------- |
| Android Chrome | >= 58.0.0 |
| Android Firefox | >= 55.0.0 |
## Documentation
##### Decorators
* [@component](./docs/decorators/component.md)
* [@view](./docs/decorators/view.md)
* [@on](./docs/decorators/on.md)
* [@action](./docs/decorators/action.md)
* [@style](./docs/decorators/style.md)
##### Libraries
* [Router](./docs/libs/router.md)
* [Customelement](./docs/libs/customelement.md)
* [Eventhandler](./docs/libs/eventhandler.md)
* [View](./docs/libs/view.md)
* [Stylesheet](./docs/libs/stylesheet.md)
## Tests and Contributors guidelines
```
// init
npm install --global lerna
// install and test packages
make lerna-bootstrap
make lerna-test
// install and compile for browser tests
make install
make compile // required for node css fixture server
make test // and run this in separate window
```
## Contributors guidelines (currently internal info)
build new binary on new version
## Contributors guidelines (currently internal info)
```
// init
npm install --global lerna
// lerna-bootstrap for packages
lerna bootstrap -- --no-package-lock
// or make install for acceptance tests
cd packages/app-decorators
jspm install
cd ../..
make prepare-compile // ignore the :4000 error
make gulp-compile
// browser test
make test
// packages test
make lerna-test
// clean packages
make lerna-clean
make clean
git checkout packages/app-decorators/package.json
git checkout jspm.config.js
// when publish
- *1 update in package.json version
- update babel-preset-app-decorators to same in *1
- packages/app-decorators-todomvc update preset
```
app-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).
## (c) 2015 - 2018 Serkan Sipahi
App-Decorators may be freely distributed under the [MIT license](https://github.com/SerkanSipahi/app-decorators/blob/master/LICENSE).