feat(playground): components list (#1106)

Closes #1077

package.json

@@ -19,7 +19,8 @@
     "gulp": "gulp",
     "firebase": "firebase",
     "conventional-changelog": "conventional-changelog",
-    "start": "run-p \"ng -- serve {@}\" \"gulp -- watch:gen:playground-modules\" -- ",
+    "prestart": "run-s build:schematics gen:playground",
+    "start": "run-p \"ng -- serve {@}\" \"gulp -- watch:gen:playground\" -- ",
     "start:prod": "npm run start -- --prod --aot",
     "start:wp": "npm run start:prod -- playground-wp",
     "docs:parse": "gulp docs",
@@ -71,7 +72,9 @@
     "publish": "./scripts/publish.sh",
     "cli:firefox-fix": "rimraf node_modules/@angular-devkit/build-angular/node_modules/uglify-es && rimraf node_modules/@angular-devkit/build-angular/node_modules/uglifyjs-webpack-plugin",
     "postinstall": "npm run cli:firefox-fix",
-    "gen:playground-module": "ng g .:playground-module"
+    "gen:playground": "ng g .:playground",
+    "gen:playground-module": "ng g .:playground-module",
+    "gen:playground-components": "ng g .:playground-components"
   },
   "keywords": [
     "angular",

schematics/collection.json

@@ -6,9 +6,17 @@
       "factory": "./new-component/index#newComponent",
       "schema": "./new-component/schema.json"
     },
+    "playground": {
+      "description": "A schematic to call other playground schematics in order.",
+      "factory": "./playground/index#generatePlayground"
+    },
     "playground-module": {
       "description": "A schematic to add all playground components to a given module.",
       "factory": "./playground-module/index#playgroundModule"
+    },
+    "playground-components": {
+      "description": "A schematic to generate routes array for the app.",
+      "factory": "./playground-components/index#playgroundComponents"
     }
   }
 }

schematics/playground-components/index.ts

@@ -0,0 +1,173 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import * as ts from 'typescript';
+import { dirname, join, normalize, Path, PathFragment } from '@angular-devkit/core';
+import { DirEntry, SchematicsException, Tree, Rule } from '@angular-devkit/schematics';
+import { getSourceFile } from '@angular/cdk/schematics';
+import {
+  addTrailingCommas,
+  applyReplaceChange,
+  findDeclarationByIdentifier,
+  findRoutesArray,
+  getPlaygroundRootDir,
+  getRouteChildren,
+  getRouteComponent,
+  getRouteLazyModule,
+  getRoutePath,
+  getRoutesFromArray,
+  isComponentRoute,
+  isLazyRoute,
+  isRoutingModule,
+  lazyRoutePathToFilePath,
+  removePropsQuotes,
+  singleQuotes,
+  splitClassName,
+  trimQuotes,
+} from '../utils';
+
+const COMPONENTS_LIST_FILE_PATH = normalize('/src/app/playground-components.ts');
+const COMPONENTS_VARIABLE_NAME = 'PLAYGROUND_COMPONENTS';
+
+interface ComponentLink {
+  path: string;
+  name?: string;
+  component?: string;
+  link?: any[] | string;
+  children?: ComponentLink[];
+}
+
+export function playgroundComponents(): Rule {
+  return generateComponentsList;
+}
+
+function generateComponentsList(tree: Tree): void {
+  const componentsListFile = getSourceFile(tree, COMPONENTS_LIST_FILE_PATH);
+  const componentsListArray = getComponentsListArray(componentsListFile);
+  const routes = removeRoutesWithoutPath(findRoutesInDir(tree, getPlaygroundRootDir(tree)));
+  updateComponentsFile(tree, componentsListFile, componentsListArray, routes);
+}
+
+function getComponentsListArray(fileSource: ts.SourceFile): ts.ArrayLiteralExpression {
+  const listDeclaration = findDeclarationByIdentifier(fileSource, COMPONENTS_VARIABLE_NAME);
+  if (!listDeclaration) {
+    throw new SchematicsException(`Error in ${COMPONENTS_LIST_FILE_PATH}. Can't find components list variable.`);
+  }
+  const initializer = (listDeclaration as ts.VariableDeclaration).initializer;
+  if (!initializer || initializer.kind !== ts.SyntaxKind.ArrayLiteralExpression) {
+    throw new SchematicsException(`Error in ${COMPONENTS_LIST_FILE_PATH}. List should be initialized with array.`);
+  }
+
+  return initializer as ts.ArrayLiteralExpression;
+}
+
+function findRoutesInDir(tree: Tree, dir: DirEntry): ComponentLink[] {
+  const routingModuleFile = dir.subfiles.find(isRoutingModule);
+  if (routingModuleFile) {
+    const routingModulePath = join(dir.path, routingModuleFile);
+    const routes = getRoutesFromArray(findRoutesArray(tree, routingModulePath));
+    return parseRoutes(tree, dir, routes);
+  }
+  return [];
+}
+
+function parseRoutes(tree: Tree, dir: DirEntry, routeEntries: ts.ObjectLiteralExpression[]): ComponentLink[] {
+  const foundRoutes: ComponentLink[] = [];
+  const routesWithPath = routeEntries
+    .filter(r => r.properties.length > 0)
+    .filter(r => !!getRoutePath(r))
+    .filter(r => isLazyRoute(r) || isComponentRoute(r));
+
+  for (const route of routesWithPath) {
+    const component = getComponentRoute(route);
+    const routeChildren = getChildRoutes(tree, dir, route);
+    const lazyChildren = getLazyModuleRoutes(tree, dir, route);
+    const children = routeChildren.concat(lazyChildren);
+    const routePath = trimQuotes((getRoutePath(route) as ts.PropertyAssignment).initializer.getText());
+    foundRoutes.push({ path: routePath, component, children });
+  }
+
+  return foundRoutes;
+}
+
+function getComponentRoute(route: ts.ObjectLiteralExpression): string | undefined {
+  const componentProp = getRouteComponent(route);
+  if (componentProp) {
+    return componentProp.initializer.getText();
+  }
+}
+
+function getChildRoutes(
+  tree: Tree,
+  routingModuleDir: DirEntry,
+  route: ts.ObjectLiteralExpression,
+): ComponentLink[] {
+  const childrenProp = getRouteChildren(route);
+  if (childrenProp) {
+    return parseRoutes(tree, routingModuleDir, getRoutesFromArray(childrenProp));
+  }
+  return [];
+}
+
+function getLazyModuleRoutes(
+  tree: Tree,
+  routingModuleDir: DirEntry,
+  route: ts.ObjectLiteralExpression,
+): ComponentLink[] {
+  const lazyModule = getRouteLazyModule(route);
+  if (lazyModule) {
+    const lazyModulePath = lazyModule && trimQuotes(lazyModule.initializer.getText());
+    const moduleDirPath = dirname(lazyRoutePathToFilePath(lazyModulePath) as Path) as PathFragment;
+    return findRoutesInDir(tree, routingModuleDir.dir(moduleDirPath));
+  }
+  return [];
+}
+
+function removeRoutesWithoutPath(routes: ComponentLink[], startPath: string = ''): ComponentLink[] {
+  const routesWithPath: ComponentLink[] = [];
+
+  for (const { path, component, children } of routes) {
+    const fullPath = path ? startPath + '/' + path : startPath;
+    let routeChildren;
+    if (children) {
+      routeChildren = removeRoutesWithoutPath(children, fullPath);
+    }
+
+    const toAdd: ComponentLink[] = [];
+    if (path) {
+      const link = component ? fullPath : undefined;
+      const name = component ? splitClassName(component) : undefined;
+      const childRoutes = routeChildren && routeChildren.length ? routeChildren : undefined;
+      toAdd.push({ path, link, component, name, children: childRoutes });
+    } else if (routeChildren) {
+      toAdd.push(...routeChildren);
+    }
+
+    routesWithPath.push(...toAdd);
+  }
+
+  return routesWithPath;
+}
+
+function updateComponentsFile(
+  tree: Tree,
+  componentsListFile: ts.SourceFile,
+  list: ts.ArrayLiteralExpression,
+  routes: ComponentLink[],
+) {
+  const pos = list.getFullStart();
+  const endPos = pos + list.getFullText().length;
+  const oldText = componentsListFile.getFullText().slice(pos, endPos);
+  const newText = generateRoutesString(routes);
+
+  applyReplaceChange(tree, COMPONENTS_LIST_FILE_PATH, { pos, oldText, newText });
+}
+
+function generateRoutesString(routes: ComponentLink[]): string {
+  const jsonRoutes = JSON.stringify(routes, null, 2);
+
+  return ` ${addTrailingCommas(removePropsQuotes(singleQuotes(jsonRoutes)))}`;
+}

schematics/playground-components/schema.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "playground-components",
+  "type": "object",
+  "properties": {
+  }
+}

schematics/playground/index.ts

@@ -0,0 +1,8 @@
+import { Rule, chain, schematic } from '@angular-devkit/schematics';
+
+export function generatePlayground(): Rule {
+  return chain([
+    schematic('playground-module', {}),
+    schematic('playground-components', {}),
+  ]);
+}

schematics/playground/schema.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "playground",
+  "type": "object"
+}

schematics/utils/index.ts

@@ -10,3 +10,4 @@ export * from './playground';
 export * from './path';
 export * from './routing';
 export * from './change';
+export * from './strings';

schematics/utils/path.ts

@@ -5,7 +5,7 @@
  */
 
 import { parse } from 'path';
-import { NormalizedSep, Path, relative, dirname, join, normalize, basename } from '@angular-devkit/core';
+import { NormalizedSep, Path, relative, dirname, join, normalize, basename, PathFragment } from '@angular-devkit/core';
 
 export function removeExtension(filePath: Path): string {
   return parse(filePath).name;
@@ -39,3 +39,9 @@ export function importPath(from: Path, to: Path): string {
 
   return generateCurrentDirImport(join(relativePath, basename(to)));
 }
+
+export function lazyRoutePathToFilePath(lazyRoutePath: string): string {
+  const path = lazyRoutePath.slice(0, lazyRoutePath.indexOf('#'));
+
+  return path + '.ts' as PathFragment;
+}

schematics/utils/routing.ts

@@ -383,3 +383,11 @@ export function rootRoutePredicate(modulePath: Path): RoutePredicate {
 
   return (route: ts.ObjectLiteralExpression) => lazyModulePredicate(lazyModulePath, route);
 }
+
+export function isLazyRoute(route: ts.ObjectLiteralExpression): boolean {
+  return !!getRouteLazyModule(route);
+}
+
+export function isComponentRoute(route: ts.ObjectLiteralExpression): boolean {
+  return !!getRouteComponent(route);
+}

schematics/utils/strings.ts

@@ -0,0 +1,49 @@
+const QUOTES = [ `'`, `"`, '`' ];
+
+export function trimQuotes(stringLiteral: string): string {
+  if (stringLiteral.length === 0) {
+    return stringLiteral;
+  }
+
+  let resultingString = stringLiteral;
+
+  if (QUOTES.includes(resultingString[0])) {
+    resultingString = resultingString.slice(1);
+  }
+  if (QUOTES.includes(resultingString[resultingString.length - 1])) {
+    resultingString = resultingString.slice(0, resultingString.length - 1);
+  }
+
+  return resultingString;
+}
+
+const COMPONENT_SUFFIX = 'Component';
+
+/**
+ * Splits string in words by capital letters. Also removes 'Component' suffix.
+ */
+export function splitClassName(className: string): string {
+  const withoutSuffix = className.endsWith(COMPONENT_SUFFIX)
+    ? className.replace(COMPONENT_SUFFIX, '')
+    : className;
+
+  return withoutSuffix.replace(/([a-z])([A-Z])/g, '$1 $2');
+}
+
+export function singleQuotes(json: string) {
+  return json.replace(/\"/gm, `'`);
+}
+
+export function addTrailingCommas(json: string): string {
+  let withCommas = json.replace(/(['}\]])$/gm, '$1,');
+
+  if (withCommas.endsWith(',')) {
+    withCommas = withCommas.slice(0, withCommas.length - 1);
+  }
+
+  return withCommas;
+}
+
+export function removePropsQuotes(json: string): string {
+  return json.replace(/^(\s*)['"](\S+)['"]:/gm, '$1$2:');
+}

scripts/gulp/gulpfile.ts

@@ -5,6 +5,6 @@ import './tasks/bundle/bundle';
 import './tasks/docs/docs';
 import './tasks/copy-sources';
 import './tasks/bump-versions';
-import './tasks/playground/playground';
+import './tasks/playground/playground-schematic';
 
 task('default', ['copy-sources']);

scripts/gulp/tasks/playground/playground.ts → scripts/gulp/tasks/playground/playground-schematic.ts

@@ -4,17 +4,26 @@ import { watch } from 'chokidar';
 import { PLAYGROUND_ROOT } from '../config';
 
 const PG_GLOB = PLAYGROUND_ROOT + '**/*.ts';
+const DEBOUNCE_TIME = 3000;
+
+function debounce(callback, delay: number = DEBOUNCE_TIME) {
+  let timeoutId;
+  return function debounced() {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(callback, delay);
+  }
+}
 
 function startWatch() {
-  const watcher = watch(PG_GLOB, { awaitWriteFinish: true, ignoreInitial: true });
-  const cb = stopWatchRunSchematic.bind(null, watcher);
-  watcher.on('add', cb);
-  watcher.on('change', cb);
+  const watcher = watch(PG_GLOB, { ignoreInitial: true });
+  const debouncedSchematic = debounce(() => stopWatchRunSchematic(watcher));
+  watcher.on('add', debouncedSchematic);
+  watcher.on('change', debouncedSchematic);
 }
 
 function stopWatchRunSchematic(watcher) {
   watcher.close();
-  exec('npm run gen:playground-module', logAndRestart);
+  exec('npm run gen:playground', logAndRestart);
 }
 
 function logAndRestart(error: Error, stdout: string, stderr: string): void {
@@ -31,4 +40,4 @@ function logAndRestart(error: Error, stdout: string, stderr: string): void {
   startWatch();
 }
 
-task('watch:gen:playground-modules', startWatch);
+task('watch:gen:playground', startWatch);