fix: remove a lot of type annotation hint inside the templates

packages/cli/frameworks/angular/template/src/angular.main.ts

@@ -0,0 +1,21 @@
+// Polyfills
+import 'core-js/features/reflect';
+import 'zone.js/dist/zone';
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './angular.module';
+
+const ENVs = {
+  NODE_ENV: '$$NODE_ENV$$',
+};
+if (ENVs.NODE_ENV === 'production') {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .then(() => {})
+  .catch(() => {})
+  .finally(() => {});

packages/cli/frameworks/angular/template/src/components/app/component.angular.ts

@@ -1,8 +1,8 @@
 import { ApplicationRef, Component } from '@angular/core';
 
 import { RouterService } from '../../services/router/service';
-import { AppController } from './controller';
 import { Filters } from '../../shares/filters';
+import { AppController, ResolvedRoute } from './controller';
 
 @Component({
   selector: 'app',
@@ -19,13 +19,13 @@ import { Filters } from '../../shares/filters';
 })
 export class AppComponent extends AppController {
   public filters = Filters;
-  public resolvedRoute: any = {
+  public resolvedRoute: ResolvedRoute = {
     url: 'series',
   };
 
   public constructor(appRef: ApplicationRef) {
     super();
-    RouterService.subscribe((route: any, params: any, query: any) => {
+    RouterService.subscribe((route: { url: string }, params: { id: number }, query: unknown) => {
       this.resolvedRoute = {
         params,
         query,

packages/cli/frameworks/angular/template/src/components/series/edit/component.angular.ts

@@ -1,24 +1,26 @@
 import { Component, Input, OnChanges } from '@angular/core';
+import { GenericComponent } from '@leanup/lib/components/generic';
 
+import { ResolvedRoute } from '../../app/controller';
 import { EditSerieController } from './controller';
 
 @Component({
   selector: 'edit-serie',
   template: `
-    <form (ngSubmit)="$ctrl.onSubmit()">
+    <form (ngSubmit)="ctrl.onSubmit()">
       <h5>Edit a existing measuring serie</h5>
-      <editor-serie [editorForm]="$ctrl.editorForm"></editor-serie>
+      <editor-serie [editorForm]="ctrl.editorForm"></editor-serie>
       <button class="btn btn-primary" type="submit" id="submit">Edit</button>
-      <button class="btn btn-secondary" type="reset" id="cancel" (click)="$ctrl.onCancel()">Abbrechen</button>
-      <button class="btn btn-danger" id="delete" type="button" (click)="$ctrl.onDelete()">Delete</button>
+      <button class="btn btn-secondary" type="reset" id="cancel" (click)="ctrl.onCancel()">Abbrechen</button>
+      <button class="btn btn-danger" id="delete" type="button" (click)="ctrl.onDelete()">Delete</button>
     </form>
   `,
 })
-export class EditSerieComponent implements OnChanges {
-  public $ctrl: EditSerieController = new EditSerieController(null);
-  @Input() public resolvedRoute: any;
+export class EditSerieComponent implements OnChanges, GenericComponent {
+  public ctrl: EditSerieController = new EditSerieController(0);
+  @Input() public resolvedRoute: ResolvedRoute;
 
-  public ngOnChanges() {
-    this.$ctrl.changeMeasuredSerie(this.resolvedRoute.params.id);
+  public ngOnChanges(): void {
+    this.ctrl.changeMeasuredSerie(this.resolvedRoute.params.id);
   }
 }

packages/cli/frameworks/angular/template/src/main.ts

@@ -1,17 +1 @@
-// Polyfills
-import 'core-js/features/reflect';
-import 'zone.js/dist/zone';
-
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './angular.module';
-
-const ENVs = {
-  NODE_ENV: '$$NODE_ENV$$',
-};
-if (ENVs.NODE_ENV === 'production') {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule);
+import './angular.main';

packages/cli/frameworks/angularjs/package.json

@@ -45,6 +45,7 @@
   },
   "devDependencies": {
     "@leanup/cli": "^1.1.0-rc.102",
+    "@types/angular": "^1.7.3",
     "@types/node": "^14.11.1",
     "typescript": "^4.0.2"
   },

packages/cli/frameworks/angularjs/template/src/angularjs.main.ts

@@ -0,0 +1,27 @@
+import './angularjs.module';
+import './components/app/component.angularjs';
+import './components/input/component.angularjs';
+import './components/series/create/component.angularjs';
+import './components/series/edit/component.angularjs';
+import './components/series/editor/component.angularjs';
+import './components/series/list/component.angularjs';
+
+import * as angular from 'angular';
+
+import { DI } from '@leanup/lib/helpers/injector';
+
+import { APP_HTML_ELEMENT } from './shares/constant';
+
+DI.register('Framework', {
+  ...require('angular/package.json'),
+  name: 'AngularJS',
+});
+require('./shares/register');
+require('./shares/routing');
+
+const htmlDivElement: HTMLDivElement | null = document.querySelector('div#angularjs');
+if (htmlDivElement instanceof HTMLDivElement) {
+  htmlDivElement.style.display = 'inline';
+  htmlDivElement.appendChild(APP_HTML_ELEMENT);
+  angular.bootstrap(htmlDivElement, ['app']);
+}

packages/cli/frameworks/angularjs/template/src/angularjs.module.ts

@@ -1,3 +1,3 @@
 import * as angular from 'angular';
 
-export const ANGULARJS_MODULE = angular.module('app', []);
+export const ANGULARJS_MODULE: angular.IModule = angular.module('app', []);

packages/cli/frameworks/angularjs/template/src/components/app/component.angularjs.ts

@@ -1,18 +1,18 @@
 import { ANGULARJS_MODULE } from '../../angularjs.module';
 import { RouterService } from '../../services/router/service';
-import { AppController } from './controller';
+import { AppController, ResolvedRoute } from './controller';
 
 ANGULARJS_MODULE.component('app', {
   controller: [
     '$scope',
     class extends AppController {
-      public resolvedRoute: any = {
+      public resolvedRoute: ResolvedRoute = {
         url: 'series',
       };
 
-      public constructor($scope: any) {
+      public constructor($scope: { $apply: Function }) {
         super();
-        RouterService.subscribe((route: any, params: any, query: any) => {
+        RouterService.subscribe((route: { url: string }, params: { id: number }, query: unknown) => {
           this.resolvedRoute = {
             params,
             query,

packages/cli/frameworks/angularjs/template/src/components/series/edit/component.angularjs.ts

@@ -1,12 +1,13 @@
 import { ANGULARJS_MODULE } from '../../../angularjs.module';
+import { ResolvedRoute } from '../../app/controller';
 import { EditSerieController } from './controller';
 
 ANGULARJS_MODULE.component('editSerie', {
   bindings: {
     resolvedRoute: '<',
   },
   controller: class extends EditSerieController {
-    public resolvedRoute: any;
+    public resolvedRoute: ResolvedRoute;
 
     public $onChanges() {
       this.changeMeasuredSerie(this.resolvedRoute.params.id);

packages/cli/frameworks/angularjs/template/src/components/series/list/component.angularjs.ts

@@ -3,10 +3,12 @@ import { ListSerieController } from './controller';
 
 ANGULARJS_MODULE.component('listSerie', {
   controller: class extends ListSerieController {
-    public constructor($scope) {
+    public constructor($scope: { $apply: Function }) {
       super();
       this.renderView = () => {
-        setTimeout($scope.$apply.bind(this));
+        setTimeout(() => {
+          $scope.$apply();
+        }, 0);
       };
     }
   },

packages/cli/frameworks/angularjs/template/src/main.ts

@@ -1,25 +1 @@
-import './angularjs.module';
-import './components/app/component.angularjs';
-import './components/input/component.angularjs';
-import './components/series/create/component.angularjs';
-import './components/series/edit/component.angularjs';
-import './components/series/editor/component.angularjs';
-import './components/series/list/component.angularjs';
-
-import * as angular from 'angular';
-
-import { DI } from '@leanup/lib/helpers/injector';
-
-import { APP_HTML_ELEMENT } from './shares/constant';
-
-DI.register('Framework', {
-  ...require('angular/package.json'),
-  name: 'AngularJS',
-});
-require('./shares/register');
-require('./shares/routing');
-
-const htmlDivElement: HTMLDivElement | null = document.querySelector('div#angularjs');
-htmlDivElement.style.display = 'inline';
-htmlDivElement.appendChild(APP_HTML_ELEMENT);
-angular.bootstrap(htmlDivElement, ['app']);
+import './angularjs.main';

packages/cli/frameworks/aurelia/template/src/aurelia.main.ts

@@ -0,0 +1,36 @@
+import { bootstrap } from 'aurelia-bootstrapper';
+import { Aurelia } from 'aurelia-framework';
+import { PLATFORM } from 'aurelia-pal';
+
+import { DI } from '@leanup/lib/helpers/injector';
+
+DI.register('Framework', {
+  ...require('aurelia-framework/package.json'),
+  name: 'Aurelia',
+});
+require('./shares/register');
+require('./shares/routing');
+
+export function configure(aurelia: Aurelia): void {
+  const htmlDivElement: HTMLDivElement | null = document.querySelector('div#aurelia');
+  if (htmlDivElement instanceof HTMLDivElement) {
+    htmlDivElement.style.display = 'inline';
+    aurelia.use.standardConfiguration().developmentLogging();
+    aurelia
+      .start()
+      .then(() => {
+        aurelia
+          .setRoot(PLATFORM.moduleName('components/app/component.aurelia'), htmlDivElement)
+          .then(() => {})
+          .catch(() => {})
+          .finally(() => {});
+      })
+      .catch(() => {})
+      .finally(() => {});
+  }
+}
+
+bootstrap(configure)
+  .then(() => {})
+  .catch(() => {})
+  .finally(() => {});

packages/cli/frameworks/aurelia/template/src/components/app/component.aurelia.ts

@@ -1,14 +1,14 @@
 import { RouterService } from '../../services/router/service';
-import { AppController } from './controller';
+import { AppController, ResolvedRoute } from './controller';
 
 export class App extends AppController {
-  public resolvedRoute: any = {
+  public resolvedRoute: ResolvedRoute = {
     url: 'series',
   };
 
   constructor() {
     super();
-    RouterService.subscribe((route: any, params: any, query: any) => {
+    RouterService.subscribe((route: { url: string }, params: { id: number }, query: unknown) => {
       this.resolvedRoute = {
         params,
         query,

packages/cli/frameworks/aurelia/template/src/components/series/edit/component.aurelia.ts

@@ -1,11 +1,12 @@
 import { bindable, bindingMode } from 'aurelia-framework';
 
+import { ResolvedRoute } from '../../app/controller';
 import { EditSerieController } from '../edit/controller';
 
 export class EditSerie extends EditSerieController {
-  @bindable({ defaultBindingMode: bindingMode.twoWay }) public resolvedRoute;
+  @bindable({ defaultBindingMode: bindingMode.twoWay }) public resolvedRoute: ResolvedRoute;
 
-  public bind() {
+  public bind(): void {
     this.changeMeasuredSerie(this.resolvedRoute.params.id);
   }
 }

packages/cli/frameworks/aurelia/template/src/main.ts

@@ -1,23 +1 @@
-import { bootstrap } from 'aurelia-bootstrapper';
-import { Aurelia } from 'aurelia-framework';
-import { PLATFORM } from 'aurelia-pal';
-
-import { DI } from '@leanup/lib/helpers/injector';
-
-DI.register('Framework', {
-  ...require('aurelia-framework/package.json'),
-  name: 'Aurelia',
-});
-require('./shares/register');
-require('./shares/routing');
-
-export function configure(aurelia: Aurelia) {
-  const htmlDivElement: HTMLDivElement | null = document.querySelector('div#aurelia');
-  htmlDivElement.style.display = 'inline';
-  aurelia.use.standardConfiguration().developmentLogging();
-  aurelia.start().then(() => {
-    aurelia.setRoot(PLATFORM.moduleName('components/app/component.aurelia'), htmlDivElement);
-  });
-}
-
-bootstrap(configure);
+import './aurelia.main';

packages/cli/frameworks/inferno/template/src/components/app/component.inferno.tsx

@@ -1,19 +1,25 @@
+import { createRef } from 'inferno';
+
+import { GenericComponent } from '@leanup/lib/components/generic';
+import { InvernoComponent } from '@leanup/lib/components/inferno';
+
 import { RouterService } from '../../services/router/service';
-import { InfernoComponent } from '../component.inferno';
+import { Filters } from '../../shares/filters';
 import { CreateSerieComponent } from '../series/create/component.inferno';
 import { EditSerieComponent } from '../series/edit/component.inferno';
 import { ListSerieComponent } from '../series/list/component.inferno';
-import { AppController, Props } from './controller';
-import { Filters } from '../../shares/filters';
+import { AppController, ResolvedRoute } from './controller';
 
-export class AppComponent extends InfernoComponent<Props, unknown> {
-  private resolvedRoute: any = {
+export class AppComponent extends InvernoComponent<unknown, AppController> implements GenericComponent {
+  public ctrl: AppController = new AppController();
+  private resolvedRoute: ResolvedRoute = {
     url: 'series',
   };
+  public ref = createRef();
 
-  public constructor(props: Props) {
+  public constructor(props: unknown) {
     super(props, new AppController());
-    RouterService.subscribe((route: any, params: any, query: any) => {
+    RouterService.subscribe((route: { url: string }, params: { id: number }, query: unknown) => {
       this.resolvedRoute = {
         params,
         query,
@@ -23,19 +29,29 @@ export class AppComponent extends InfernoComponent<Props, unknown> {
     });
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <div id="app">
         <h4>
-          {this.$ctrl.framework.name} v{this.$ctrl.framework.version}
+          {this.ctrl.framework.name} v{this.ctrl.framework.version}
         </h4>
-        <small>{this.$ctrl.finishedRendering} ms upcomming time</small>
+        <small>{this.ctrl.finishedRendering} ms upcomming time</small>
         {this.resolvedRoute.url === 'series' && <ListSerieComponent />}
         {this.resolvedRoute.url === 'series/create' && <CreateSerieComponent />}
         {this.resolvedRoute.url === 'series/:id/edit' && <EditSerieComponent resolvedRoute={this.resolvedRoute} />}
         <small>
-          Used filters: {Filters.date(this.$ctrl.dummies.date)} | {Filters.currency(this.$ctrl.dummies.price)} €
+          Used filters: {Filters.date(this.ctrl.dummies.date)} |{Filters.currency(this.ctrl.dummies.price)} €
         </small>
+        {/* <hr />
+        <div style="border: 1px solid; max-width: 350px; background: #ddd">
+          <p>
+            In this box we study the usage of <a href="https://material.io/">Google Material Design</a> as capsulated
+            multiframework components.
+          </p>
+          <ButtonComponent></ButtonComponent>
+          <SliderComponent></SliderComponent>
+          <TextFieldComponent></TextFieldComponent>
+        </div> */}
       </div>
     );
   }