feat: add web-types for autocomplete (#30)

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
  - name: Cache Node.js modules
  uses: actions/cache@v2
  with:
- path: ~/.npm 
+ path: ~/.npm
  key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
  restore-keys: |
  ${{ runner.OS }}-node-
@@ -31,4 +31,4 @@ jobs:
  uses: coverallsapp/github-action@master
  with:
  github-token: ${{ secrets.GITHUB_TOKEN }}
- path-to-lcov: ./coverage/common/lcov.info
+ path-to-lcov: ./coverage/ng-event-plugins/lcov.info

package.json

@@ -98,6 +98,7 @@
  "tslint": "~5.15.0",
  "typescript": "~3.8.3"
  },
+ "web-types": "./projects/ng-event-plugins/web-types.json",
  "husky": {
  "hooks": {
  "pre-commit": "lint-staged && npm run typecheck"

projects/demo/package.json

@@ -22,6 +22,7 @@
  "rxjs": "~6.6.3",
  "zone.js": "~0.10.2"
  },
+ "web-types": "../ng-event-plugins/web-types.json",
  "devDependencies": {
  "@angular-devkit/architect": "0.1100.4",
  "@angular-devkit/build-angular": "0.1100.4",

projects/ng-event-plugins/ng-package.json

@@ -1,6 +1,7 @@
 {
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ng-event-plugins",
+ "assets": ["web-types.json"],
  "lib": {
  "entryFile": "src/public-api.ts"
  }

projects/ng-event-plugins/package.json

@@ -26,5 +26,6 @@
  "authors": ["Alex Inkin <[email protected]>", "Roman Sedov <[email protected]>"],
  "repository": "https:/TinkoffCreditSystems/ng-event-plugins",
  "bugs": "https:/TinkoffCreditSystems/ng-event-plugins/issues",
- "homepage": "https:/TinkoffCreditSystems/ng-event-plugins#README"
+ "homepage": "https:/TinkoffCreditSystems/ng-event-plugins#README",
+ "web-types": "./web-types.json"
 }

projects/ng-event-plugins/src/decorators/should-call.ts

@@ -2,31 +2,34 @@ import {NgZone} from '@angular/core';
 import {Predicate} from '../types/predicate';
 
 /**
- * TODO: This will not be needed in Angular 10
- * when libraries are allowed to use Ivy renderer and markDirty becomes stable API
+ * TODO: This will not be needed when markDirty becomes stable API
  */
 export function shouldCall<T>(predicate: Predicate<T>): MethodDecorator {
  return (_, key, desc: PropertyDescriptor) => {
  const {value} = desc;
 
- desc.value = function() {
- const zone = arguments[0] as NgZone;
+ desc.value = function (this: T, ...args: any[]) {
+ const zone = arguments[0];
 
- Object.defineProperty(this, key, {
- value(this: T, ...args: any[]) {
- if (predicate.apply(this, args)) {
- zone.run(() => {
- value.apply(this, args);
- });
- }
- },
- });
+ if (zone instanceof NgZone) {
+ Object.defineProperty(this, key, {
+ value(this: T, ...args: any[]) {
+ if (predicate.apply(this, args)) {
+ zone.run(() => {
+ value.apply(this, args);
+ });
+ }
+ },
+ });
+ } else if (predicate.apply(this, args)) {
+ value.apply(this, args);
+ }
  };
  };
 }
 
 /**
- * TODO: Use this in Angular 10
+ * TODO: Use this after markDirty becomes public API
  */
 // export function shouldCall<T extends object>(predicate: Predicate<T>): MethodDecorator {
 // return (_: Object, _key: string | symbol, desc: PropertyDescriptor) => {

projects/ng-event-plugins/src/plugins/bind.plugin.ts

@@ -12,7 +12,7 @@ export class BindEventPlugin extends AbstractEventPlugin {
  element: HTMLElement & Record<string, Observable<unknown>>,
  event: string,
  ): Function {
- element[event] = element[event] ?? EMPTY;
+ element[event] = element[event] || EMPTY;
 
  const method = this.getMethod(element, event);
  const zone$ = this.manager.getZone().onStable;

projects/ng-event-plugins/src/test/test.spec.ts

@@ -7,10 +7,11 @@ import {
  Inject,
 } from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {By} from '@angular/platform-browser';
-import {BehaviorSubject} from 'rxjs';
+import {By, EventManager} from '@angular/platform-browser';
+import {BehaviorSubject, identity} from 'rxjs';
 import {shouldCall} from '../decorators/should-call';
 import {EventPluginsModule} from '../module';
+import {BindEventPlugin} from '../plugins/bind.plugin';
 import {asCallable} from '../utils/as-callable';
 
 describe('EventManagers', () => {
@@ -209,4 +210,41 @@ describe('EventManagers', () => {
  false,
  );
  });
+
+ it('bind plugin doesnt crash if observable is missing', () => {
+ const bind = new BindEventPlugin();
+ const element: any = document.createElement('div');
+
+ bind.manager = TestBed.inject(EventManager);
+
+ expect(() => bind.addEventListener(element, 'test')).not.toThrow();
+ });
+
+ describe('shouldCall does not crash without zone', () => {
+ class Test {
+ flag = false;
+
+ @shouldCall(identity)
+ test(flag: boolean) {
+ this.flag = flag;
+ }
+ }
+
+ it('and calls the method', () => {
+ const test = new Test();
+
+ test.test(true);
+
+ expect(test.flag).toBe(true);
+ });
+
+ it('and doesnt call the method', () => {
+ const test = new Test();
+
+ test.flag = true;
+ test.test(false);
+
+ expect(test.flag).toBe(true);
+ });
+ });
 });

projects/ng-event-plugins/web-types.json

@@ -0,0 +1,58 @@
+{
+ "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/v2-preview/web-types.json",
+ "name": "ng-event-plugins",
+ "framework": "angular",
+ "version": "1.0.0",
+ "description-markup": "markdown",
+ "contributions": {
+ "js": {
+ "ng-custom-events": [
+ {
+ "name": "Custom modifiers for declarative events handling",
+ "priority": "normal",
+ "pattern": {
+ "template": [
+ {
+ "items": {
+ "path": "/js/events",
+ "includeVirtual": false
+ }
+ },
+ {
+ "items": "ng-event-plugins-modifiers",
+ "template": [".", "#...", "#item:modifiers"],
+ "priority": "high",
+ "repeat": true,
+ "unique": true,
+ "required": false
+ }
+ ]
+ },
+ "ng-event-plugins-modifiers": [
+ {
+ "name": "capture"
+ },
+ {
+ "name": "once"
+ },
+ {
+ "name": "passive"
+ },
+ {
+ "name": "prevent"
+ },
+ {
+ "name": "self"
+ },
+ {
+ "name": "silent"
+ },
+ {
+ "name": "stop"
+ }
+ ]
+ }
+ ]
+ }
+ }
+}