devextreme-schematics 1.2.18 → 1.2.22

package/src/add-view/index.ts

@@ -0,0 +1,165 @@
+import {
+  Rule,
+  chain,
+  Tree,
+  SchematicsException,
+  externalSchematic
+} from '@angular-devkit/schematics';
+
+import {
+  findModuleFromOptions
+} from '@schematics/angular/utility/find-module';
+
+import {
+  insertItemToArray
+} from '../utility/change';
+
+import {
+  hasComponentInRoutes,
+  getRoute,
+  findRoutesInSource
+} from '../utility/routing';
+
+import { getSourceFile } from '../utility/source';
+
+import { strings, basename, normalize, dirname } from '@angular-devkit/core';
+
+import {
+  getProjectName,
+  getApplicationPath
+} from '../utility/project';
+import { humanize } from '../utility/string';
+
+function getPathToFile(host: Tree, projectName: string, moduleName: string) {
+  const rootPath = getApplicationPath(host, projectName);
+
+  try {
+    return findModuleFromOptions(host, { name: moduleName, path: rootPath, module: moduleName });
+  } catch (error) {
+    return;
+  }
+}
+
+function addViewToNavigation(options: any) {
+  return (host: Tree) => {
+    const navigationName = 'app-navigation';
+    const navigationFilePath = getPathToFile(host, options.project, navigationName);
+
+    if (!navigationFilePath) {
+      return;
+    }
+
+    const source = getSourceFile(host, navigationFilePath)!;
+    const pagePath = strings.dasherize(options.name);
+    const name = strings.dasherize(basename(normalize(options.name)));
+    const title = humanize(name);
+    const navigationItem = `  {
+    text: '${title}',
+    path: '/${pagePath}',
+    icon: '${options.icon}'
+  }`;
+
+    insertItemToArray(host, navigationFilePath, source, navigationItem, { location: 'end' });
+
+    return host;
+  };
+}
+
+function addRedirectRoute(host: Tree, routingModulePath: string, page: string) {
+  const source = getSourceFile(host, routingModulePath)!;
+  const content = source.getText();
+  if (content.match(/path:\s*'\*\*'/g)) {
+    return;
+  }
+
+  const routes = findRoutesInSource(source)!;
+  const redirectRoute = `  {
+    path: '**',
+    redirectTo: '${strings.dasherize(page)}'
+  }`;
+
+  insertItemToArray(host, routingModulePath, routes, redirectRoute, { location: 'end' });
+}
+
+export function addViewToRouting(options: any) {
+  return (host: Tree) => {
+    const routingModulePath = getPathToFile(host, options.project, options.module);
+
+    if (!routingModulePath) {
+      throw new SchematicsException('Specified module does not exist.');
+    }
+
+    addRedirectRoute(host, routingModulePath, options.name);
+
+    const source = getSourceFile(host, routingModulePath)!;
+    const routes = findRoutesInSource(source);
+
+    if (!routes) {
+      throw new SchematicsException('No routes found.');
+    }
+
+    if (!hasComponentInRoutes(routes, options.name)) {
+      const route = getRoute(options.name);
+      insertItemToArray(host, routingModulePath, routes, route);
+    }
+    return host;
+  };
+}
+
+function getPathForView(name: string) {
+  if (name.includes('/')) {
+    return name;
+  }
+  return 'pages/' + name;
+}
+
+function getModuleName(addRoute: boolean, moduleName: string) {
+  if (!moduleName && addRoute) {
+    return 'app-routing';
+  }
+  return moduleName;
+}
+
+function addContentToView(options: any) {
+  return (host: Tree) => {
+    const name = strings.dasherize(basename(normalize(options.name)));
+    const path = `${dirname(options.name)}/${name}`;
+    const title = humanize(name);
+    const componentPath = `/${getApplicationPath(host, options.project)}${path}/${name}.component.html`;
+    if (host.exists(componentPath)) {
+      host.overwrite(
+        componentPath,
+        `<h2 class="content-block">${title}</h2>
+<div class="content-block">
+    <div class="dx-card responsive-paddings">Put your content here</div>
+</div>
+`);
+    }
+    return host;
+  };
+}
+
+export default function(options: any): Rule {
+  return (host: Tree) => {
+    const addRoute = options.addRoute;
+    const project = getProjectName(host, options);
+    const module = getModuleName(addRoute, options.module);
+    const name = getPathForView(options.name);
+    const rules = [externalSchematic('@schematics/angular', 'component', {
+        name,
+        project,
+        module,
+        skipTests: options.skipTests,
+        inlineStyle: options.inlineStyle,
+        prefix: options.prefix
+      }),
+      addContentToView({ name, project })
+    ];
+
+    if (addRoute) {
+      rules.push(addViewToRouting({ name, project, module }));
+      rules.push(addViewToNavigation({ name, icon: options.icon, project }));
+    }
+    return chain(rules);
+  };
+}

package/src/add-view/index_spec.ts

@@ -0,0 +1,155 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { Schema as WorkspaceOptions } from '@schematics/angular/workspace/schema';
+import * as path from 'path';
+
+const collectionPath = path.join(__dirname, '../collection.json');
+
+describe('view', () => {
+  const appOptions: any = {
+    name: 'testApp',
+    projectRoot: '',
+    inlineStyle: false,
+    inlineTemplate: false,
+    routing: true,
+    style: 'css',
+    skipTests: false,
+    skipPackageJson: false
+  };
+
+  const workspaceOptions: WorkspaceOptions = {
+    name: 'workspace',
+    version: '6.0.0'
+  };
+
+  const componentOptions: any = {
+    name: 'test',
+    inlineStyle: false,
+    inlineTemplate: false,
+    changeDetection: 'Default',
+    styleext: 'css',
+    skipImport: true,
+    module: undefined,
+    export: false,
+    project: 'testApp'
+  };
+
+  const angularSchematicsCollection = require.resolve('../../node_modules/@schematics/angular/collection.json');
+  const schematicRunner = new SchematicTestRunner('@schematics/angular', angularSchematicsCollection);
+  let appTree: UnitTestTree;
+
+  beforeEach(async () => {
+    appTree = await schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
+    appTree = await schematicRunner.runSchematicAsync('application', appOptions, appTree).toPromise();
+  });
+
+  it('should create new view', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    let tree = await runner.runSchematicAsync('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree).toPromise();
+    tree = await runner.runSchematicAsync('add-view', componentOptions, appTree).toPromise();
+
+    expect(tree.files).toContain('/src/app/pages/test/test.component.ts');
+    expect(tree.files).toContain('/src/app/pages/test/test.component.html');
+
+    const content = tree.readContent('/src/app/pages/test/test.component.html');
+
+    expect(content).toMatch(/<h2 class="content-block">Test<\/h2>/);
+  });
+
+  it('should add view to default routing module', async () => {
+    const options = { ...componentOptions, addRoute: true };
+
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    let tree = await runner.runSchematicAsync('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree).toPromise();
+    tree = await runner.runSchematicAsync('add-view', options, tree).toPromise();
+    tree = await runner.runSchematicAsync('add-view', { ...options, name: 'test2' }, tree).toPromise();
+    const moduleContent = tree.readContent('/src/app/app-routing.module.ts');
+
+    expect(moduleContent).toContain(`const routes: Routes = [
+  {
+    path: 'pages/test2',
+    component: Test2Component,
+    canActivate: [ AuthGuardService ]
+  },
+  {
+    path: 'pages/test',
+    component: TestComponent,
+    canActivate: [ AuthGuardService ]
+  },
+  {
+    path: 'login-form',
+    component: LoginFormComponent,
+    canActivate: [ AuthGuardService ]
+  },
+  {
+    path: '**',
+    redirectTo: 'pages/test'
+  }
+];`);
+  });
+
+  it('should add view to other routing module', async () => {
+    const options = { ...componentOptions, addRoute: true, module: 'test/test-routing' };
+
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    let tree = await runner.runExternalSchematicAsync('@schematics/angular', 'module', {
+      name: 'test',
+      routing: true,
+      project: 'testApp'
+    }, appTree).toPromise();
+
+    tree = await runner.runSchematicAsync('add-layout', {
+      layout: 'side-nav-outer-toolbar',
+      project: 'testApp',
+      name: 'test'
+    }, tree).toPromise();
+    tree = await runner.runSchematicAsync('add-view', options, tree).toPromise();
+
+    const moduleContent = tree.readContent('/src/app/test/test-routing.module.ts');
+
+    expect(moduleContent).toMatch(/component: TestComponent/);
+    expect(moduleContent).toMatch(/path: 'pages\/test'/);
+    expect(moduleContent).toContain('canActivate: [ AuthGuardService ]');
+  });
+
+  it('should add view to navigation', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    let tree = await runner.runSchematicAsync('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree).toPromise();
+    tree = await runner.runSchematicAsync('add-view', componentOptions, tree).toPromise();
+
+    componentOptions.name = 'some test';
+    componentOptions.icon = 'home';
+    tree = await runner.runSchematicAsync('add-view', componentOptions, tree).toPromise();
+
+    const moduleContent = tree.readContent('/src/app/app-navigation.ts');
+
+    expect(moduleContent).toMatch(/text: 'Some Test'/);
+    expect(moduleContent).toMatch(/icon: 'home'/);
+    expect(moduleContent).toMatch(/text: 'Test'/);
+    expect(moduleContent).toMatch(/icon: 'folder'/);
+
+    expect(moduleContent).toContain(`navigation = [
+  {
+    text: 'Test',
+    path: '/pages/test',
+    icon: 'folder'
+  },
+  {
+    text: 'Some Test',
+    path: '/pages/some-test',
+    icon: 'home'
+  }
+];`);
+    const pageContent = tree.readContent('/src/app/pages/some-test/some-test.component.html');
+    expect(pageContent).toMatch(/<h2 class="content-block">Some Test<\/h2>/);
+  });
+
+  it('should create new view with path', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    componentOptions.name = 'folder/test';
+    let tree = await runner.runSchematicAsync('add-layout', { layout: 'side-nav-outer-toolbar' }, appTree).toPromise();
+    tree = await runner.runSchematicAsync('add-view', componentOptions, appTree).toPromise();
+
+    expect(tree.files).toContain('/src/app/folder/test/test.component.ts');
+    expect(tree.files).toContain('/src/app/folder/test/test.component.html');
+  });
+});

package/src/install/index.ts

@@ -0,0 +1,86 @@
+import {
+  Rule,
+  Tree,
+  SchematicContext,
+  chain
+} from '@angular-devkit/schematics';
+
+import { addStylesToApp } from '../utility/styles';
+
+import {
+  NodeDependencyType,
+  addPackageJsonDependency
+} from '@schematics/angular/utility/dependencies';
+
+import {
+  NodePackageInstallTask
+} from '@angular-devkit/schematics/tasks';
+
+import { latestVersions } from '../utility/latest-versions';
+import { modifyJSONFile } from '../utility/modify-json-file';
+
+export default function(options: any): Rule {
+  return chain([
+    (host: Tree) => addDevExtremeDependency(host, { dxversion: options.dxversion }),
+    (host: Tree) => addDevExtremeCSS(host, { project: options.project }),
+    (host: Tree) => reqisterJSZip(host),
+    (_, context: SchematicContext) => {
+      context.addTask(new NodePackageInstallTask());
+    }
+  ]);
+}
+
+function addDevExtremeDependency(host: Tree, options: any) {
+  addPackageJsonDependency(host, {
+    type: NodeDependencyType.Default,
+    name: 'devextreme',
+    version: options.dxversion || latestVersions['devextreme']
+  });
+  addPackageJsonDependency(host, {
+    type: NodeDependencyType.Default,
+    name: 'devextreme-angular',
+    version: options.dxversion || latestVersions['devextreme-angular']
+  });
+  addPackageJsonDependency(host, {
+    type: NodeDependencyType.Dev,
+    name: 'devextreme-cli',
+    version: latestVersions['devextreme-cli']
+  });
+  addPackageJsonDependency(host, {
+    type: NodeDependencyType.Dev,
+    name: 'devextreme-themebuilder',
+    version: options.dxversion || latestVersions['devextreme']
+  });
+
+  return host;
+}
+
+function addDevExtremeCSS(host: Tree, options: any) {
+  modifyJSONFile(host, './angular.json', config => {
+
+    return addStylesToApp(host, options.project, config);
+  });
+
+  return host;
+}
+
+function reqisterJSZip(host: Tree) {
+  modifyJSONFile(host, './tsconfig.app.json', config => {
+    const compilerOptions = config['compilerOptions'];
+    let paths = compilerOptions['paths'];
+
+    if (!paths) {
+      paths = {};
+    }
+
+    if (!paths['jszip']) {
+      paths['jszip'] = ['node_modules/jszip/dist/jszip.min.js'];
+    }
+
+    compilerOptions['paths'] = paths;
+
+    return config;
+  });
+
+  return host;
+}

package/src/install/index_spec.ts

@@ -0,0 +1,106 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { Schema as WorkspaceOptions } from '@schematics/angular/workspace/schema';
+import * as path from 'path';
+import { latestVersions } from '../utility/latest-versions';
+
+const collectionPath = path.join(__dirname, '../collection.json');
+
+describe('install', () => {
+  // TODO: Extract workspase preparing somewhere
+  const appOptions: any = {
+    name: 'testApp',
+    projectRoot: '',
+    inlineStyle: false,
+    inlineTemplate: false,
+    routing: true,
+    style: 'css',
+    skipTests: false,
+    skipPackageJson: false
+  };
+
+  const workspaceOptions: WorkspaceOptions = {
+    name: 'workspace',
+    // TODO: use angular latest-versions module
+    version: '6.0.0'
+  };
+
+  const angularSchematicsCollection = require.resolve('../../node_modules/@schematics/angular/collection.json');
+  const schematicRunner = new SchematicTestRunner('@schematics/angular', angularSchematicsCollection);
+  let appTree: UnitTestTree;
+
+  beforeEach(async () => {
+    appTree = await schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
+    appTree = await schematicRunner.runSchematicAsync('application', appOptions, appTree).toPromise();
+  });
+
+  it('should add devextreme dependency (default)', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('install', {}, appTree).toPromise();
+    const packageConfig = JSON.parse(tree.readContent('package.json'));
+
+    expect(packageConfig.dependencies['devextreme']).toBe(latestVersions['devextreme']);
+    expect(packageConfig.dependencies['devextreme-angular']).toBe(latestVersions['devextreme-angular']);
+    expect(packageConfig.devDependencies['devextreme-themebuilder']).toBe(latestVersions['devextreme']);
+  });
+
+  it('should add devextreme dependency (custom)', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('install', { dxversion: '18.2.5' }, appTree).toPromise();
+    const packageConfig = JSON.parse(tree.readContent('package.json'));
+
+    expect(packageConfig.dependencies.devextreme).toBe('18.2.5');
+    expect(packageConfig.devDependencies['devextreme-themebuilder']).toBe('18.2.5');
+  });
+
+  it('should add devextreme cli devDependency', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('install', { dxversion: '18.2.5' }, appTree).toPromise();
+    const packageConfig = JSON.parse(tree.readContent('package.json'));
+
+    expect(packageConfig.devDependencies['devextreme-cli']).toBeDefined();
+  });
+
+  it('should add devextreme styles', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('install', {}, appTree).toPromise();
+    const angularConfig = JSON.parse(tree.readContent('angular.json'));
+    const styles = angularConfig['projects']['testApp']['architect']['build']['options']['styles'];
+
+    expect(styles[0]).toBe('node_modules/devextreme/dist/css/dx.common.css');
+    expect(styles[1]).toBe('node_modules/devextreme/dist/css/dx.light.css');
+  });
+
+  it('should register jszip', async () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('install', {}, appTree).toPromise();
+    const tsconfig = JSON.parse(tree.readContent('tsconfig.app.json'));
+    const jszip = tsconfig['compilerOptions']['paths']['jszip'];
+
+    expect(jszip[0]).toBe('node_modules/jszip/dist/jszip.min.js');
+  });
+
+  it('should add devextreme styles to the specified project', async () => {
+    const secondAppOptions: any = {
+      name: 'testApp2',
+      inlineStyle: false,
+      inlineTemplate: false,
+      projectRoot: 'src2',
+      routing: true,
+      style: 'css',
+      skipTests: false,
+      skipPackageJson: false
+    };
+
+    appTree = await schematicRunner.runSchematicAsync('application', secondAppOptions, appTree).toPromise();
+
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = await runner.runSchematicAsync('install', { project: 'testApp2' }, appTree).toPromise();
+    const angularConfig = JSON.parse(tree.readContent('angular.json'));
+    const styles = angularConfig['projects']['testApp2']['architect']['build']['options']['styles'];
+
+    expect(styles[0]).toBe('node_modules/devextreme/dist/css/dx.common.css');
+    expect(styles[1]).toBe('node_modules/devextreme/dist/css/dx.light.css');
+
+    expect(angularConfig['projects']['testApp']['architect']['build']['options']['styles'].length).toBe(1);
+  });
+});

package/src/install/schema.json

@@ -7,7 +7,7 @@
     "dxversion": {
       "type": "string",
       "description": "The DevExtreme version",
-      "default": "^21.1.3"
+      "default": "^21.2.3"
     },
     "project": {
       "type": "string",

package/src/utility/array.ts

@@ -0,0 +1,3 @@
+export function makeArrayUnique(arr: Array<any>) {
+  return  [...new Set(arr)];
+}

package/src/utility/change.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const newLine = `
+const newLine = `
 `;
 function applyChanges(host, changes, filePath) {
     const recorder = host.beginUpdate(filePath);

package/src/utility/change.ts

@@ -0,0 +1,66 @@
+import { Tree } from '@angular-devkit/schematics';
+import { InsertChange, Change } from '@schematics/angular/utility/change';
+
+import {
+  Node
+} from 'typescript';
+
+const newLine = `
+`;
+
+export function applyChanges(host: Tree, changes: Change[], filePath: string) {
+  const recorder = host.beginUpdate(filePath);
+
+  changes.forEach((change: InsertChange) => {
+    recorder.insertLeft(change.pos, change.toAdd);
+  });
+
+  host.commitUpdate(recorder);
+
+  return host;
+}
+
+// TODO: implement options.index
+// TODO: implement spaces shift calculation
+export function insertItemToArray(
+  host: Tree,
+  filePath: string,
+  node: Node,
+  item: string,
+  options: { location: 'start' | 'end' } = { location: 'start' }
+) {
+  const isItemValid = /^\s*\{[\s\S]*\}\s*$/m.test(item);
+  if (!isItemValid) {
+    return host;
+  }
+
+  const nodeContent = node.getText();
+  const nodePosition = node.getStart();
+  const leftBracketPosition = nodePosition + nodeContent.indexOf('[');
+  const rightBracketPosition = nodePosition + nodeContent.lastIndexOf(']');
+  let itemPosition = leftBracketPosition + 1;
+  let fileRecorder = host.beginUpdate(filePath);
+
+  item = newLine + item;
+
+  const isNodeEmpty = !/\[[\s\S]*\S+[\s\S]*\]/m.test(nodeContent);
+  if (isNodeEmpty) {
+    const formattedArray = `[${newLine}]`;
+    fileRecorder.remove(leftBracketPosition, rightBracketPosition - leftBracketPosition + 1);
+    fileRecorder.insertLeft(leftBracketPosition, formattedArray);
+    host.commitUpdate(fileRecorder);
+    fileRecorder = host.beginUpdate(filePath);
+  } else {
+    if (options.location === 'end') {
+      itemPosition = nodePosition + nodeContent.lastIndexOf('}') + 1;
+      item = ',' + item;
+    } else {
+      item = item + ',';
+    }
+  }
+
+  fileRecorder.insertLeft(itemPosition, item);
+  host.commitUpdate(fileRecorder);
+
+  return host;
+}

package/src/utility/latest-versions.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 // TODO: implement
 exports.latestVersions = {
-    'devextreme': '^21.1.3',
-    'devextreme-angular': '^21.1.3',
+    'devextreme': '^21.2.3',
+    'devextreme-angular': '^21.2.3',
     'devextreme-cli': 'latest'
 };
 //# sourceMappingURL=latest-versions.js.map

package/src/utility/latest-versions.ts

@@ -0,0 +1,6 @@
+// TODO: implement
+export const latestVersions = {
+  'devextreme': '^21.2.3',
+  'devextreme-angular': '^21.2.3',
+  'devextreme-cli': 'latest'
+};

package/src/utility/modify-json-file.ts

@@ -0,0 +1,13 @@
+import { Tree } from '@angular-devkit/schematics';
+
+export function modifyJSONFile(host: Tree, path: string, callback: (obj: any) => any) {
+  let serializedConfig = host.read(path)!.toString();
+  serializedConfig = serializedConfig.replace(/\/\*[\S\s]+?\*\/\r?\n/g, '');
+  let obj = JSON.parse(serializedConfig);
+
+  obj = callback(obj);
+
+  host.overwrite(path, `${JSON.stringify(obj, null, 2)}\n`);
+
+  return host;
+}

package/src/utility/project.ts

@@ -0,0 +1,25 @@
+import { Tree } from '@angular-devkit/schematics';
+import { getWorkspace } from '@schematics/angular/utility/config';
+
+export function getProjectName(host: Tree, project: any) {
+  const projectName = project;
+  const workspace = getWorkspace(host);
+  const projects = Object.keys(workspace.projects);
+
+  return projectName && projects.indexOf(projectName) > -1 ? projectName : workspace.defaultProject;
+}
+
+export function getApplicationPath(host: Tree, projectName: string) {
+  const sourcePath = getSourceRootPath(host, projectName);
+  return sourcePath ? `${sourcePath}/app/` : 'src/app/';
+}
+
+export function getSourceRootPath(host: Tree, projectName: string) {
+  const project = getWorkspace(host).projects[projectName];
+  return project.sourceRoot || project.root;
+}
+
+export function getRootPath(host: Tree, projectName: string) {
+  const project = getWorkspace(host).projects[projectName];
+  return project.root;
+}

package/src/utility/routing.js

@@ -12,10 +12,10 @@ function hasComponentInRoutes(routes, name) {
 }
 exports.hasComponentInRoutes = hasComponentInRoutes;
 function getRoute(name) {
-    return `  {
-    path: '${core_1.strings.dasherize(name)}',
-    component: ${getRouteComponentName(name)},
-    canActivate: [ AuthGuardService ]
+    return `  {
+    path: '${core_1.strings.dasherize(name)}',
+    component: ${getRouteComponentName(name)},
+    canActivate: [ AuthGuardService ]
   }`;
 }
 exports.getRoute = getRoute;