@coolon/angular-ui-powerups 0.0.23 → 0.0.25

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### 0.0.25 (2019-09-09)

package/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  name: 'angular-ui-powerups',
+  preset: '../../jest.config.js',
+  coverageDirectory: '../../coverage/libs/angular-ui-powerups',
+  snapshotSerializers: [
+    'jest-preset-angular/AngularSnapshotSerializer.js',
+    'jest-preset-angular/HTMLCommentSerializer.js'
+  ]
+};

package/ng-package.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/angular-ui-powerups",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "whitelistedNonPeerDependencies": [
+    "ts-morph",
+    "@typescript-plus/fast-memoize-decorator",
+    "@coolon/typescript-utilities",
+    "json5"
+  ]
+}

package/package.json

@@ -1,13 +1,21 @@
 {
   "name": "@coolon/angular-ui-powerups",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "schematics": "./schematics/collection.json",
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p tsconfig.schematics.json",
+    "copy:schemas": "rsync -av -R schematics/*/schema.json ../../dist/libs/angular-ui-powerups/",
+    "copy:files": "rsync -av -R schematics/*/templates/** ../../dist/libs/angular-ui-powerups/",
+    "copy:collection": "shx cp schematics/collection.json ../../dist/libs/angular-ui-powerups/schematics/collection.json",
+    "copy:styles": "rsync -av -R styles/* ../../dist/libs/angular-ui-powerups",
+    "postbuild": "npm run copy:schemas && npm run copy:files && npm run copy:collection && npm run copy:styles",
+    "release": "standard-version && git push --follow-tags origin master && npm publish"
+  },
   "dependencies": {
     "ts-morph": "^3.1.3",
     "@typescript-plus/fast-memoize-decorator": "^0.1.0",
     "@coolon/typescript-utilities": "^2.0.0",
-    "json5": "^2.1.0",
-    "tslib": "^1.9.0"
+    "json5": "^2.1.0"
   },
   "peerDependencies": {
     "@angular/common": "^8.1.1",
@@ -17,15 +25,5 @@
     "@angular/cdk": "^8.1.3",
     "@coolon/pectin": ">=1.14.22",
     "resize-observer-polyfill": "^1.5.1"
-  },
-  "main": "bundles/coolon-angular-ui-powerups.umd.js",
-  "module": "fesm5/coolon-angular-ui-powerups.js",
-  "es2015": "fesm2015/coolon-angular-ui-powerups.js",
-  "esm5": "esm5/coolon-angular-ui-powerups.js",
-  "esm2015": "esm2015/coolon-angular-ui-powerups.js",
-  "fesm5": "fesm5/coolon-angular-ui-powerups.js",
-  "fesm2015": "fesm2015/coolon-angular-ui-powerups.js",
-  "typings": "coolon-angular-ui-powerups.d.ts",
-  "metadata": "coolon-angular-ui-powerups.metadata.json",
-  "sideEffects": false
+  }
 }

package/schematics/ng-add/index.ts

@@ -0,0 +1,10 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+
+// Just return the tree
+export function ngAdd(_options: any): Rule {
+  return (tree: Tree, _context: SchematicContext) => {
+    _context.addTask(new NodePackageInstallTask());
+    return tree;
+  };
+}

package/schematics/place-routes/index.ts

@@ -0,0 +1,152 @@
+import { experimental, strings } from '@angular-devkit/core';
+import {
+  apply,
+  applyTemplates,
+  FileEntry,
+  forEach,
+  mergeWith,
+  Rule,
+  SchematicContext,
+  Tree,
+  url,
+  move
+} from '@angular-devkit/schematics';
+import { scanForRouteEntryPoints } from '@angular/compiler-cli/src/ngtsc/routing/src/lazy';
+import { fileExists } from '@nrwl/workspace/src/utils/fileutils';
+import * as JSON5 from 'json5';
+import { ClassDeclaration, Project } from 'ts-morph';
+import { PlaceDef } from './place-def';
+import { Schema } from './schema';
+
+const PLACE_ANNOTATION = /@Place\({([^})]*)}\)/m;
+
+export function generateRoutes(options: Schema): Rule {
+
+  return (tree: Tree, context: SchematicContext) => {
+
+    const workspaceConfig = tree.read('/angular.json');
+    if (!workspaceConfig) {
+      throw new Error('Could not find Angular workspace configuration');
+    }
+
+    // convert workspace to string
+    const workspaceContent = workspaceConfig.toString();
+
+    // parse workspace string into JSON object
+    const workspace: experimental.workspace.WorkspaceSchema = JSON.parse(workspaceContent);
+
+    if (!options.project) {
+      options.project = workspace.defaultProject;
+    }
+
+    const projectName = options.project as string;
+    const project = workspace.projects[projectName];
+    const config = loadConfig(project, tree, context);
+    const placeDefs = extractPlaces(project, options, tree, context);
+    const projectType = project.projectType === 'application' ? 'app' : 'lib';
+
+    const files = apply(
+      url('./templates'),
+      [
+        applyTemplates({
+          ...options,
+          placeDefs,
+          config,
+          ...strings
+        }),
+        move(`${project.sourceRoot}/${projectType}`),
+        // @see https://github.com/angular/angular-cli/issues/11337#issuecomment-448259549
+        forEach((fileEntry: FileEntry) => {
+          if (tree.exists(fileEntry.path)) {
+            tree.overwrite(fileEntry.path, fileEntry.content);
+          }
+          return fileEntry;
+        })
+      ]);
+
+    return mergeWith(files);
+  };
+
+}
+
+
+
+// function applyWithOverwrite(source: Source, rules: Rule[]): Rule {
+//   return (tree: Tree, _context: SchematicContext) => {
+//     const rule = mergeWith(
+//       apply(source, [
+//         ...rules,
+//         forEach((fileEntry) => {
+//           if (tree.exists(fileEntry.path)) {
+//             tree.overwrite(fileEntry.path, fileEntry.content);
+//             return null;
+//           }
+//           return fileEntry;
+//         })
+//       ])
+//     );
+//
+//     return rule(tree, _context);
+//   };
+// }
+
+function createProject(project: any, context: SchematicContext) {
+  const tsConfigPath = project.architect.build.options.tsConfig;
+  context.logger.info(`loading tsConfig from -> ${tsConfigPath}`);
+  try {
+    return new Project({
+      tsConfigFilePath: `./${tsConfigPath}`
+    });
+  } catch (error) {
+    context.logger.fatal(`Failed to load typescript project form: ${project.root} You probably need to specify the --project option?`);
+  }
+}
+
+function loadConfig(project: any, tree: Tree, context: SchematicContext) {
+  context.logger.info(`loading places config from -> ${project.root}/places.json (or places.json5)`);
+  const fileEntry = tree.get(`${project.root}/places.json5`) || tree.get(`${project.root}/places.json5`);
+  if (!fileEntry) {
+    throw new Error(`Unable to find config file at '${project.root}/places.json' or '${project.root}/places.json5'`);
+  }
+  const config = JSON5.parse(fileEntry.content.toString('utf-8'));
+  return config;
+}
+
+function extractPlaces(project: any, schema: Schema, tree: Tree, context: SchematicContext): PlaceDef[] {
+  const projectType = project.projectType === 'application' ? 'app' : 'lib';
+  const projectRoot = `${project.root}`;
+  const sourceRoot = `${project.sourceRoot}/${projectType}`;
+  const importPrefix = `./${sourceRoot}`;
+  const tsProject = createProject(project, context);
+  const placeDefs: PlaceDef[] = [];
+  context.logger.info(`Scanning sources in -> ${sourceRoot}`);
+  tree.getDir(sourceRoot).visit(filePath => {
+    if (!filePath.endsWith('.ts')) {
+      return;
+    }
+
+    const content = tree.read(filePath);
+    if (!content) {
+      return;
+    }
+    const sourceText = content.toString('utf-8');
+
+    if (sourceText.match(PLACE_ANNOTATION)) {
+
+      const sourceFile = tsProject.getSourceFileOrThrow(`./${filePath}`);
+
+      sourceFile.getClasses().forEach((classDecl: ClassDeclaration) => {
+
+        PlaceDef.scan(classDecl, context).onMatch(result => {
+          // context.logger.info(`filePath=${filePath}`);
+          const moduleImportPath = `./${filePath.substr(importPrefix.length, filePath.length - importPrefix.length - '.ts'.length)}`;
+          const definition = result.createDefinition(moduleImportPath);
+          context.logger.info(`${moduleImportPath} -> ${classDecl.getName()}(route: /${definition.fullPath})`);
+          placeDefs.push(definition);
+        });
+      });
+    }
+  });
+
+  return placeDefs;
+}

package/schematics/place-routes/place-def.ts

@@ -0,0 +1,93 @@
+import { SchematicContext } from '@angular-devkit/schematics';
+import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
+import { ClassDeclaration } from 'ts-morph';
+import { Scanner } from './scanner';
+
+export class PlaceDef {
+
+
+  constructor(
+    readonly importPath: string,
+    readonly componentClass: string,
+    readonly properties: PlaceDef.Options,
+    readonly routeDef: PlaceDef.Parameter,
+    readonly queryParameters: PlaceDef.Parameter[]
+  ) {
+    // console.log({ properties, routeDef });
+  }
+
+  @Memoize()
+  get path() {
+    return this.stripEnclosingQuotes(this.properties.path);
+  }
+
+  @Memoize()
+  get routeIdentifier() {
+    return this.routeDef ? this.stripEnclosingQuotes(this.routeDef.parameterName) : null;
+  }
+
+  get fullPath() {
+    return !!this.routeIdentifier ?
+      `${this.path}/:${this.routeIdentifier}` :
+      this.path;
+  }
+
+  @Memoize()
+  get placeName() {
+    return this.componentClass.replace(/Component$/, "")
+  }
+
+  get order() {
+    return this.properties.order
+  }
+
+  @Memoize()
+  get activateGuardNames() {
+    const activateGuards = [];
+    if (this.authenticate) {
+      activateGuards.push('AuthGuard');
+    }
+    if (this.requiresRouteGuard()) {
+      activateGuards.push('PlaceRouteGuard');
+    }
+    return activateGuards;
+  }
+
+  private requiresRouteGuard() {
+    return this.routeIdentifier || this.queryParameters.length > 0;
+  }
+
+  @Memoize()
+  get routeModelName() {
+    return this.routeDef ? this.stripEnclosingQuotes(this.routeDef.modelName) : null;
+  }
+
+  get authenticate() {
+    return this.properties.authenticate === 'true';
+  }
+
+  stripEnclosingQuotes(value: string): string {
+    const cooked = value.replace(/(^["'])|(["']$)/g, '');
+    // console.log({ raw: value, cooked: cooked });
+    return cooked;
+  }
+}
+
+export namespace PlaceDef {
+
+  export interface Options {
+    title: string;
+    path: string;
+    order: number;
+    authenticate: string;
+  }
+
+  export interface Parameter {
+    parameterName: string;
+    modelName: string;
+  }
+
+  export function scan(classDecl: ClassDeclaration, context: SchematicContext): Scanner {
+    return new Scanner(classDecl, context);
+  }
+}

package/schematics/place-routes/scanner.ts

@@ -0,0 +1,145 @@
+import { SchematicContext } from '@angular-devkit/schematics';
+import {
+  ClassDeclaration,
+  Decorator,
+  Node,
+  ObjectLiteralExpression,
+  PropertyAssignmentStructure,
+  PropertyDeclaration,
+  SyntaxKind
+} from 'ts-morph';
+import { PlaceDef } from './place-def';
+
+function isDecoratorNode(node: Node, name: string): node is Decorator {
+  return node.getKind() === SyntaxKind.Decorator && node.getText().startsWith(`${name}(`); // NOTE: I'm only supporting the @Decorator(...) style of usage (i.e. decorator factories).
+}
+
+export class Scanner {
+
+  private placeAnnotation: Decorator;
+
+  constructor(private readonly classDecl: ClassDeclaration, readonly context: SchematicContext) {
+    classDecl.forEachChild((node) => {
+      if (isDecoratorNode(node, '@Place')) {
+        this.placeAnnotation = node as Decorator;
+        // stop iterating when the node is a class declaration
+        return true;
+      }
+    });
+  }
+
+  isPlace() {
+    return !!this.placeAnnotation;
+  }
+
+  onMatch(callback: (scan: Scanner) => void) {
+    if (this.isPlace()) {
+      callback(this);
+    }
+  }
+
+  createDefinition(moduleImportPath: string): PlaceDef {
+    this.getRouteIdParameter();
+    return new PlaceDef(moduleImportPath,
+      this.classDecl.getName(),
+      this.getPlaceOptions(),
+      this.getRouteIdParameter(),
+      this.getQueryParameters()
+    );
+  }
+
+  protected getPlaceOptions(): PlaceDef.Options {
+    // const args = this.placeAnnotation.getArguments();
+    // if (args.length !== 1) {
+    //   console.error('@Place() accepts a single Options argument. got', args);
+    // }
+    return Scanner.getOptionsArg(this.placeAnnotation, {
+      title: '',
+      path: '',
+      order: -1,
+      authenticate: 'true'
+    }, {
+      position: 0,
+      required: true
+    });
+  }
+
+  protected getRouteIdParameter(): PlaceDef.Parameter {
+    const routeProperties = this.getDecoratedProperties('@RouteId');
+    if (routeProperties.length === 1) {
+      const route = routeProperties[0];
+      const routeOptions = Scanner.getOptionsArg(route.decorator, { as: 'id' }, {
+        position: 1,
+        required: false
+      });
+      return {
+        modelName: route.property.getName(),
+        parameterName: routeOptions.as
+      };
+    } else if (routeProperties.length > 1) {
+      this.context.logger.error(`There an only be one @RouteId(), got ${routeProperties.length}`);
+    }
+    return null;
+  }
+
+  protected getQueryParameters(): PlaceDef.Parameter[] {
+    return this.getDecoratedProperties('@QueryParameter')
+      .map(p => {
+        const options = Scanner.getOptionsArg(p.decorator, { as: p.property.getName() }, {
+          position: 1,
+          required: false
+        });
+        return {
+          modelName: p.property.getName(),
+          parameterName: options.as
+        };
+      });
+  }
+
+  protected getDecoratedProperties(annotation: string): { decorator: Decorator, property: PropertyDeclaration }[] {
+    return this.classDecl.getProperties().map(p => {
+      let result: { decorator: Decorator, property: PropertyDeclaration } = null;
+      p.forEachChild((child) => {
+        if (isDecoratorNode(child, annotation)) {
+          result = {
+            decorator: child,
+            property: p
+          };
+          // stop traversal
+          return true;
+        }
+      });
+      return result;
+    }).filter(r => !!r);
+  }
+
+}
+
+export namespace Scanner {
+
+  export function getObjectLiteralArgument(annotation: Decorator, position: number): ObjectLiteralExpression {
+    const args = annotation.getArguments();
+    if (args.length > position && args[position] instanceof ObjectLiteralExpression) {
+      return args[position] as ObjectLiteralExpression;
+    }
+    return null;
+  }
+
+  export function getOptionsArg<T extends {}>(annotation: Decorator, defaults: T, options: { position: number, required: boolean } = {
+    position: 0,
+    required: true
+  }): T {
+    const objectLiteralArgument = getObjectLiteralArgument(annotation, options.position);
+    if (!objectLiteralArgument) {
+      if (options.required) {
+        console.error(`expected object literal arg at position ${options.position}`, { expectedType: defaults });
+      }
+      return defaults;
+    } else {
+      return objectLiteralArgument.getProperties().reduce((result, p) => {
+        const structure = p.getStructure() as PropertyAssignmentStructure;
+        return { ...result, [structure.name]: structure.initializer as string };
+      }, { ...defaults });
+    }
+  }
+}

package/schematics/place-routes/schema.ts

@@ -0,0 +1,7 @@
+export interface Schema {
+  project: string;
+  authGuard: {
+    className: string;
+    moduleImport: string;
+  }
+}

package/src/lib/angular-ui-powerups.module.spec.ts

@@ -0,0 +1,14 @@
+import { async, TestBed } from '@angular/core/testing';
+import { AngularUiPowerupsModule } from './angular-ui-powerups.module';
+
+describe('AngularUiPowerupsModule', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [AngularUiPowerupsModule]
+    }).compileComponents();
+  }));
+
+  it('should create', () => {
+    expect(AngularUiPowerupsModule).toBeDefined();
+  });
+});

package/src/lib/angular-ui-powerups.module.ts

@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule, MatInputModule, MatSelectModule } from '@angular/material';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NumberInputComponent} from './components/forms/number-input/number-input.component';
+import { CommandDirective } from './directives/command.directive';
+import { FocusBindingDirective } from './directives/focus-binding.directive';
+import { StringInputComponent } from './components/forms/string-input/string-input.component';
+import { PasswordInputComponent } from './components/forms/password-input/password-input.component';
+import { SelectInputComponent } from './components/forms/select-input/select-input.component';
+import { InteractionModule } from './interaction/interaction.module';
+import { PlaceModule } from './place/place.module';
+
+@NgModule({
+  declarations: [
+    CommandDirective,
+    FocusBindingDirective,
+    NumberInputComponent,
+    StringInputComponent,
+    PasswordInputComponent,
+    SelectInputComponent,
+  ],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    PlaceModule,
+    InteractionModule
+  ],
+  exports: [
+    CommandDirective,
+    FocusBindingDirective,
+    NumberInputComponent,
+    StringInputComponent,
+    PasswordInputComponent,
+    SelectInputComponent,
+    InteractionModule,
+    PlaceModule,
+  ]
+
+})
+export class AngularUiPowerupsModule {
+}

package/{lib/animations/index.d.ts → src/lib/animations/index.ts}

@@ -1,4 +1,5 @@
 /**
  * @file Automatically generated by barrelsby.
  */
+
 export * from "./slideDownAndUpAnimation";

package/src/lib/animations/slideDownAndUpAnimation.ts

@@ -0,0 +1,39 @@
+import { animate, AnimationStyleMetadata, style, transition, trigger } from '@angular/animations';
+import { OptionsHelper } from '@coolon/pectin';
+
+const defaultHiddenStyleDef = style({
+  opacity: 0,
+  'height': '0',
+  paddingTop: '0',
+  paddingBottom: '0'
+});
+
+export function slideDownAndUpAnimation(triggerName: string, options?: {
+  duration?: string;
+  hiddenStyleDef?: AnimationStyleMetadata;
+}) {
+  // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
+  const duration = OptionsHelper.get(options).getOptional('duration', '100ms');
+  const hiddenStyleDef = OptionsHelper.get(options).getOptional('hiddenStyleDef', defaultHiddenStyleDef);
+  return trigger(triggerName, [
+    transition(':enter', [hiddenStyleDef, animate('100ms')]),
+    transition(':leave', [animate('100ms', hiddenStyleDef)])
+  ]);
+}
+
+// export function slideOutLeftAnimation(triggerName: string, duration:string = "100ms") {
+//   return trigger(triggerName, [
+//     state('true', style(
+//       {
+//         'width': '*',
+//         'overflow': 'hidden',
+//         'opacity': '1'
+//       })),
+//     state('false', style({
+//       'width': '0px',
+//       'overflow': 'hidden',
+//       'opacity': '0'
+//     })),
+//     transition('* => *', [animate(duration)])
+//   ]);
+// }

package/src/lib/components/disposable-component.ts

@@ -0,0 +1,9 @@
+import {OnDestroy} from '@angular/core';
+import {GarbageCollector} from '@coolon/pectin';
+
+export class DisposableComponent extends GarbageCollector implements OnDestroy {
+
+    ngOnDestroy(): void {
+        this.dispose();
+    }
+}