Giter VIP home page Giter VIP logo

helpful-decorators's Introduction

npm Build Status Commitizen friendly semantic-release Awesome

Helpful Decorators For Typescript Projects

Installation

npm install helpful-decorators
yarn add helpful-decorators

Usage

delay - Add setTimeout functionality to the method

import { delay } from 'helpful-decorators';

class Test {
 @delay(1000)
 method() {
   // ...
 }
}

debounce - Add debounce functionality to the method (options)

import { debounce } from 'helpful-decorators';

class Test {
 @debounce(1000, options)
 method() {
   // ...
 }
}

throttle - Add throttle functionality to the method (options)

import { throttle } from 'helpful-decorators';

class Test {
 @throttle(1000, options)
 method() {
   // ...
 }
}

once - Add once functionality to the method

import { once } from 'helpful-decorators';

class Test {
 @once
 method() {
   // This will run only once
 }
}

measure - measure time taken by a function to execute

import { measure } from 'helpful-decorators';

class Test {
 @measure
 doSomething() {
   // Call to doSomething took 0.35 milliseconds.
 }

 @measure
 async doSomethingHello(){
    // Call to doSomethingHello took 0.35 milliseconds. 
 }
}

Mixin - this pattern is used to achieve multiple inheritance

import { Mixin } from 'helpful-decorators';

@Mixin([Disposable, Activatable])
class Test {
}

memo - memoizes the result of the function

import { memo } from 'helpful-decorators';

class Test {
 
  @memo()
  method() {
    ...memoized
  }
}

bind - automatically bind methods to class instances

import { bind } from 'helpful-decorators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    document.body.addEventListener('click', this.onClick);
  }

  @bind
  onClick($event) {
    console.log($event);
  }
}

SortBy - sort an array by a specific property in individual elements or non-object items (By default, it sorts by type === 'string' and isDescending === true)

import { SortBy } from 'helpful-decorators';

class Test {
  
  @SortBy('name', {
    isDescending: false,
    type: 'string'
  })
  names = [ { name: 'b' }, { name: 'a' }, { name: 'c' } ];

  @SortBy('', {
    isDescending: true,
    type: 'date'
  })
  dates = [ '2020-06-17', '2020-06-16', '2020-06-20', '2020-06-10' ];

  @SortBy('', {
    isDescending: false,
    type: 'number'
  })
  numbers = [ 6, 3, 4, 1 ];
}

License

MIT

helpful-decorators's People

Contributors

daschtour avatar netanelbasal avatar ruowan avatar shaharkazaz avatar yuwu9145 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

helpful-decorators's Issues

Decorated method returns nothing

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Method decorated with @measure returns nothing. Haven't tested with other decorators.

Expected behavior

Returned value does not change

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/typescript-okyls9

@measure for async functions

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request

Current behavior

@measure only works for synchronous functions at the moment. Will be a nice addition to make it work for async functions as well.

Expected behavior

@measure should work for both sync and async functions.

Template literals in IE

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Application with helpful-decorators will not open on IE because browser does not support template literals which is used in measure function inside console.log().

Expected behavior

Application will open correctly.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-b7lgd7

Environment

helpful-decorators version: 2.0.5

Browser:

  • IE version 11

Debounce no longer passes arguments

I'm submitting a...


[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report 
[x] Feature request
[ ] Documentation issue or request

Current behavior

Adding debounce to a function with parameters, no longer forwards the arguments when the function is called.

example: https://stackblitz.com/edit/angular-fggoh2

@debounce(300)
  log(newVal){
    this.name = newVal; //newVal is always undefined.
  }

I think ln

should be
debounced.apply(this, arguments);

Expected behavior

@debounce(300)
  log(newVal){
    this.name = newVal; 
  }

newVal would be the value passed on the last call.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-fggoh2

What is the motivation / use case for changing the behavior?

Environment

Browser:

  • [x ] Chrome (desktop) version XX
  • Chrome (Android) version XX
  • Chrome (iOS) version XX
  • Firefox version XX
  • Safari (desktop) version XX
  • Safari (iOS) version XX
  • IE version XX
  • Edge version XX

Template strings in generated package "dist-web/index.js"

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request

The version I got from npm (2.0.5) contains a template string in the dist-web/index.js:

console.log(`Call to ${propertyKey} took ${(end - start).toFixed(2)} milliseconds.`);

I assume that is not correct, because the target in the tsconfig is "es5".

If I checkout the current master and build the package myself and the file dist-web/index.js contains

console.log("Call to ".concat(propertyKey, " took ").concat((end - start).toFixed(2), " milliseconds."));

Did I miss something? Or is the npm version too old?

Environment


helpful-decorators version: 2.0.5

 
For Tooling issues:
- Node version: 10.16.0
- Platform:  Linux

@timeout renamed to @delay or @future?

These look great. Haven't tried them out yet.

But when I first read @timeout, my initial intuition made me think of Promise.timeout() used in some promise libraries like bluebird. Since setTimeout has been around since the beginning of JavaScript, I'm not sure if it's appropriate to use @delay or @future. At least it would hint for something to execute in the future, or after a delay.

Just throwing this out there for consideration. Maybe I'm the odd one out.

Not intending to turn this "issue" into a feature request but it could be really cool to see some decorators that worked with async functions as well just like Bluebird's timeout/delay.

[FR] refactor to only import needed decorators-> lodash modules

I am using your module using webpack and i only want throttle.
But right now the way it is written , it will import all in my webpack build plus all lodash deps.
I think i can solve this by importing helpful-decorators/dist-src/throttle but then i get no typings.
Could you make it so that we can import helpful-decorators/throttle ?

That would be awesome!

Thanks

New decorators?

Hi @NetanelBasal ,

Thanks for sharing this repo and I found it is very cool and helpful.

Got one question: would you be open to new decorators contribution from pull requests?

Thanks.

Bind decorator expects 3 parameters

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Trying to use @bind decorator without any arguments results in "Expected 3 arguments but got 0" TypeScript error.

Expected behavior

@bind() decorator should work without any arguments.

Minimal reproduction of the problem with instructions

Try to use @bind() decorator in Angular 9 project.

Environment


helpful-decorators version: 2.0.6


Browser:
- [x] Chrome (desktop) version XX
 
For Tooling issues:
- Node version: 12
- Platform:  Windows

Others:
TypeScript: 3.8.3

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.