Skip to content

Commit acb698d

Browse files
kdinevkdinev
authored
Merge pull request #8942 from IgniteUI/iganchev/hammer-js-to-angular-json-11.0.x
Add hammerjs to Angular options - 11.0.x
2 parents 61e8943 + a31eb3d commit acb698d

File tree

3 files changed

+115
-66
lines changed

3 files changed

+115
-66
lines changed

‎projects/igniteui-angular/schematics/ng-add/index.spec.ts‎

Lines changed: 53 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -93,46 +93,70 @@ describe('ng-add schematics', () => {
9393
expect(pkgJsonData.dependencies['hammerjs']).toBeTruthy();
9494
});
9595

96-
it('should add hammer.js to the main.ts file', async () => {
96+
it('should NOT add hammer.js to the main.ts file', async () => {
9797
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
9898
const mainTs = tree.read(`${sourceRoot}/main.ts`).toString();
99-
expect(mainTs).toContain('import \'hammerjs\';');
99+
expect(mainTs).not.toContain('import \'hammerjs\';');
100100
});
101101

102-
it('should not add hammer.js if it exists in angular.json build options', async () => {
102+
it('should NOT add hammer.js to the test.ts file', async () => {
103+
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
104+
const testTs = tree.read(`${sourceRoot}/test.ts`).toString();
105+
expect(testTs).not.toContain('import \'hammerjs\';');
106+
});
107+
108+
it('should add hammer.js in angular.json build options under scripts', async () => {
109+
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
110+
const ngJsonConfigResult = JSON.parse(tree.read('/angular.json').toString());
111+
expect(ngJsonConfigResult.projects.testProj.architect.build.options.scripts).toContain('./node_modules/hammerjs/hammer.min.js');
112+
});
113+
114+
it('should add hammer.js in angular.json test options under scripts', async () => {
115+
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
116+
const ngJsonConfigResult = JSON.parse(tree.read('/angular.json').toString());
117+
expect(ngJsonConfigResult.projects.testProj.architect.test.options.scripts).toContain('./node_modules/hammerjs/hammer.min.js');
118+
});
119+
120+
it('should NOT duplicate hammer.js if it exists in angular.json build options', async () => {
103121
const ngJsonConfig1 = JSON.parse(tree.read('/angular.json').toString());
104122
ngJsonConfig1.projects.testProj.architect.build.options.scripts.push('./node_modules/hammerjs/hammer.min.js');
105123
tree.overwrite('/angular.json', JSON.stringify(ngJsonConfig1));
106124
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
107125

108-
const newContent = tree.read(`${sourceRoot}/main.ts`).toString();
109-
expect(newContent.split('import \'hammerjs\';\n// test comment').length).toEqual(1);
126+
const ngJsonConfigResult = JSON.parse(tree.read('/angular.json').toString());
127+
expect(ngJsonConfigResult.projects.testProj.architect.build.options.scripts.length).toBe(1);
128+
expect(ngJsonConfigResult.projects.testProj.architect.build.options.scripts).toMatch('./node_modules/hammerjs/hammer.min.js');
110129
});
111130

112-
it('should add hammer.js to the test.ts file', async () => {
131+
it('should NOT duplicate hammer.js if it exists in angular.json test options', async () => {
132+
const ngJsonConfig1 = JSON.parse(tree.read('/angular.json').toString());
133+
ngJsonConfig1.projects.testProj.architect.test.options.scripts.push('./node_modules/hammerjs/hammer.min.js');
134+
tree.overwrite('/angular.json', JSON.stringify(ngJsonConfig1));
113135
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
114-
const testTs = tree.read(`${sourceRoot}/test.ts`).toString();
115-
expect(testTs).toContain('import \'hammerjs\';');
136+
137+
const ngJsonConfigResult = JSON.parse(tree.read('/angular.json').toString());
138+
expect(ngJsonConfigResult.projects.testProj.architect.test.options.scripts.length).toBe(1);
139+
expect(ngJsonConfigResult.projects.testProj.architect.test.options.scripts).toMatch('./node_modules/hammerjs/hammer.min.js');
116140
});
117141

118-
it('should not add hammer.js if it exists in angular.json test options', async () => {
142+
it('should NOT add hammer.js to main.ts if it exists in angular.json build options', async () => {
119143
const ngJsonConfig1 = JSON.parse(tree.read('/angular.json').toString());
120-
ngJsonConfig1.projects.testProj.architect.test.options.scripts.push('./node_modules/hammerjs/hammer.min.js');
144+
ngJsonConfig1.projects.testProj.architect.build.options.scripts.push('./node_modules/hammerjs/hammer.min.js');
121145
tree.overwrite('/angular.json', JSON.stringify(ngJsonConfig1));
122146
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
123147

124-
const testTs = tree.read(`${sourceRoot}/test.ts`).toString();
125-
expect(testTs).toMatch('// test comment');
148+
const newContent = tree.read(`${sourceRoot}/main.ts`).toString();
149+
expect(newContent).toMatch('// test comment');
126150
});
127151

128-
it('should not add hammer.js if it exists in main.ts', async () => {
129-
const mainTsPath = `${sourceRoot}/main.ts`;
130-
const content = tree.read(mainTsPath).toString();
131-
tree.overwrite(mainTsPath, 'import \'hammerjs\';\n' + content);
152+
it('should NOT add hammer.js to test.ts if it exists in angular.json test options', async () => {
153+
const ngJsonConfig1 = JSON.parse(tree.read('/angular.json').toString());
154+
ngJsonConfig1.projects.testProj.architect.test.options.scripts.push('./node_modules/hammerjs/hammer.min.js');
155+
tree.overwrite('/angular.json', JSON.stringify(ngJsonConfig1));
132156
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
133157

134-
const newContent = tree.read(mainTsPath).toString();
135-
expect(newContent.split('import \'hammerjs\';\n// test comment').length).toEqual(2);
158+
const newContent = tree.read(`${sourceRoot}/test.ts`).toString();
159+
expect(newContent).toMatch('// test comment');
136160
});
137161

138162
it('should add hammer.js to package.json dependencies', async () => {
@@ -141,6 +165,17 @@ describe('ng-add schematics', () => {
141165
expect(pkgJsonData.dependencies['hammerjs']).toBeTruthy();
142166
});
143167

168+
it('should NOT add hammer.js to angular.json if it exists in main.ts options', async () => {
169+
const mainTsPath = `${sourceRoot}/main.ts`;
170+
const content = tree.read(mainTsPath).toString();
171+
tree.overwrite(mainTsPath, 'import \'hammerjs\';\n' + content);
172+
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
173+
174+
const ngJsonConfigResult = JSON.parse(tree.read('/angular.json').toString());
175+
expect(ngJsonConfigResult.projects.testProj.architect.build.options.scripts.length).toBe(0);
176+
expect(ngJsonConfigResult.projects.testProj.architect.build.options.scripts).not.toContain('./node_modules/hammerjs/hammer.min.js');
177+
});
178+
144179
it('should add the CLI only to devDependencies', async () => {
145180
await runner.runSchematicAsync('ng-add', { normalizeCss: false }, tree).toPromise();
146181
const pkgJsonData = JSON.parse(tree.readContent('/package.json'));

‎projects/igniteui-angular/schematics/ng-add/index.ts‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { createHost, getDefaultProject } from '../utils/util';
1010

1111
const enablePolyfills = async (tree: Tree, context: SchematicContext): Promise<string> => {
1212
const project = await getDefaultProject(tree);
13-
const targetFile = getConfigFile(project, 'polyfills');
13+
const targetFile = getConfigFile(project, 'polyfills', context);
1414
if (!tree.exists(targetFile)) {
1515
context.logger.warn(`${targetFile} not found. You may need to update polyfills.ts manually.`);
1616
return;
@@ -46,21 +46,25 @@ const readInput = (options: Options): Rule =>
4646
if (options.polyfills) {
4747
const targetProperty = 'es5BrowserSupport';
4848
const project = workspace.projects.get(workspace.extensions['defaultProject'] as string);
49-
const polyfillsFile = getConfigFile(project, 'polyfills');
50-
const build = project.targets.get('build');
51-
let polyfillsData = tree.read(polyfillsFile).toString();
52-
if (build.options[targetProperty] !== undefined) {
53-
// If project targets angular cli version >= 7.3
54-
build.options[targetProperty] = true;
55-
enableWebAnimationsAndGridSupport(tree, polyfillsFile, polyfillsData);
56-
await workspaces.writeWorkspace(workspace, workspaceHost);
57-
} else {
58-
// If project targets angular cli version < 7.3
59-
polyfillsData = await enablePolyfills(tree, context);
60-
enableWebAnimationsAndGridSupport(tree, polyfillsFile, polyfillsData);
49+
const polyfillsFile = getConfigFile(project, 'polyfills', context);
50+
if (polyfillsFile !== undefined) {
51+
const build = project.targets.get('build');
52+
let polyfillsData = tree.read(polyfillsFile).toString();
53+
if (build.options[targetProperty] !== undefined) {
54+
// If project targets angular cli version >= 7.3
55+
build.options[targetProperty] = true;
56+
enableWebAnimationsAndGridSupport(tree, polyfillsFile, polyfillsData);
57+
await workspaces.writeWorkspace(workspace, workspaceHost);
58+
} else {
59+
// If project targets angular cli version < 7.3
60+
polyfillsData = await enablePolyfills(tree, context);
61+
enableWebAnimationsAndGridSupport(tree, polyfillsFile, polyfillsData);
62+
}
63+
} else {
64+
context.logger.warn(`You may want to manually uncomment '// import 'web-animations-js' in polyfills.ts`);
6165
}
6266
}
63-
};
67+
};
6468

6569
const addNormalize = (options: Options): Rule =>
6670
async (tree: Tree, context: SchematicContext) => {

‎projects/igniteui-angular/schematics/utils/dependency-handler.ts‎

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { workspaces } from '@angular-devkit/core';
2-
import { SchematicContext, Rule, SchematicsException, Tree } from '@angular-devkit/schematics';
2+
import { SchematicContext, Rule, Tree } from '@angular-devkit/schematics';
33
import { Options } from '../interfaces/options';
44
import { createHost } from './util';
55

@@ -47,39 +47,44 @@ export const getWorkspacePath = (host: Tree): string => {
4747
const logIncludingDependency = (context: SchematicContext, pkg: string, version: string): void =>
4848
context.logger.info(`Including ${pkg} - Version: ${version}`);
4949

50-
const getTargetedProjectOptions = (project: workspaces.ProjectDefinition, target: string) => {
50+
const getTargetedProjectOptions = (project: workspaces.ProjectDefinition, target: string, context: SchematicContext) => {
5151
if (project.targets &&
5252
project.targets[target] &&
5353
project.targets[target].options) {
5454
return project.targets[target].options;
5555
}
5656

57-
const projectTarget = project.targets.get(target);
57+
const projectTarget = project.targets?.get(target);
5858
if (projectTarget) {
5959
return projectTarget.options;
6060
}
6161

62-
throw new SchematicsException(`Cannot determine the project's configuration for: ${target}`);
62+
context.logger.warn(`Could not find matching ${target} options ` +
63+
`in Angular workspace ${project.sourceRoot}. ` +
64+
`It could require you to manually add and update the ${target} section.`);
6365
};
6466

65-
export const getConfigFile = (project: workspaces.ProjectDefinition, option: string, configSection: string = 'build'): string => {
66-
const options = getTargetedProjectOptions(project, configSection);
67-
if (!options) {
68-
throw new SchematicsException(`Could not find matching ${configSection} section` +
69-
`inside of the workspace config ${project.sourceRoot} `);
70-
}
71-
if (!options[option]) {
72-
throw new SchematicsException(`Could not find the project ${option} file inside of the ` +
73-
`workspace config ${project.sourceRoot}`);
74-
}
75-
return options[option];
76-
77-
};
67+
export const getConfigFile =
68+
(project: workspaces.ProjectDefinition, option: string, context: SchematicContext, configSection: string = 'build'): string => {
69+
const options = getTargetedProjectOptions(project, configSection, context);
70+
if (!options) {
71+
context.logger.warn(`Could not find matching ${configSection} options in Angular workspace. ` +
72+
`It could require you to manually add and update the ${configSection} options.`);
7873

74+
}
75+
if (options) {
76+
if (!options[option]) {
77+
context.logger.warn(`Could not find a matching ${option} property under ${configSection} options in Angular workspace. ` +
78+
`Some updates may not execute correctly.`);
79+
} else {
80+
return options[option];
81+
}
82+
}
83+
};
7984
export const overwriteJsonFile = (tree: Tree, targetFile: string, data: any) =>
8085
tree.overwrite(targetFile, JSON.stringify(data, null, 2) + '\n');
8186

82-
87+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
8388
export const logSuccess = (options: Options): Rule => (tree: Tree, context: SchematicContext) => {
8489
context.logger.info('');
8590
context.logger.warn('Ignite UI for Angular installed');
@@ -140,24 +145,29 @@ export const getPropertyFromWorkspace = (targetProp: string, workspace: any, cur
140145
return null;
141146
};
142147

143-
const addHammerToConfig = async (project: workspaces.ProjectDefinition, tree: Tree, config: string): Promise<void> => {
144-
const projectOptions = getTargetedProjectOptions(project, config);
145-
const tsPath = getConfigFile(project, 'main', config);
146-
const hammerImport = 'import \'hammerjs\';\n';
147-
const tsContent = tree.read(tsPath).toString();
148-
// if there are no elements in the architect[config]options.scripts array that contain hammerjs
149-
// and the "main" file does not contain an import with hammerjs
150-
if (!projectOptions.scripts.some(el => el.includes('hammerjs')) && !tsContent.includes(hammerImport)) {
151-
// import hammerjs in the specified by config main file
152-
const mainContents = hammerImport + tsContent;
153-
tree.overwrite(tsPath, mainContents);
154-
}
155-
};
148+
const addHammerToConfig =
149+
async (project: workspaces.ProjectDefinition, tree: Tree, config: string, context: SchematicContext): Promise<void> => {
150+
const projectOptions = getTargetedProjectOptions(project, config, context);
151+
const tsPath = getConfigFile(project, 'main', context, config);
152+
const hammerImport = 'import \'hammerjs\';\n';
153+
const tsContent = tree.read(tsPath)?.toString();
154+
// if there are no elements in the architect[config]options.scripts array that contain hammerjs
155+
// and the "main" file does not contain an import with hammerjs
156+
if (!projectOptions?.scripts?.some(el => el.includes('hammerjs')) && !tsContent?.includes(hammerImport)) {
157+
const hammerjsFilePath = './node_modules/hammerjs/hammer.min.js';
158+
if (projectOptions?.scripts) {
159+
projectOptions.scripts.push(hammerjsFilePath);
160+
return;
161+
}
162+
context.logger.warn(`Could not find a matching scripts array property under ${config} options. ` +
163+
`It could require you to manually update it to 'scripts': [ ${hammerjsFilePath}] `);
164+
}
165+
};
156166

157167
const includeDependencies = async (pkgJson: any, context: SchematicContext, tree: Tree): Promise<void> => {
158168
const workspaceHost = createHost(tree);
159169
const { workspace } = await workspaces.readWorkspace(tree.root.path, workspaceHost);
160-
const project = workspace.projects.get(workspace.extensions['defaultProject'] as string);
170+
const defaultProject = workspace.projects.get(workspace.extensions['defaultProject'] as string);
161171
for (const pkg of Object.keys(pkgJson.dependencies)) {
162172
const version = pkgJson.dependencies[pkg];
163173
const entry = DEPENDENCIES_MAP.find(e => e.name === pkg);
@@ -168,8 +178,8 @@ const includeDependencies = async (pkgJson: any, context: SchematicContext, tree
168178
case 'hammerjs':
169179
logIncludingDependency(context, pkg, version);
170180
addPackageToPkgJson(tree, pkg, version, entry.target);
171-
await addHammerToConfig(project, tree, 'build');
172-
await addHammerToConfig(project, tree, 'test');
181+
await addHammerToConfig(defaultProject, tree, 'build', context);
182+
await addHammerToConfig(defaultProject, tree, 'test', context);
173183
break;
174184
default:
175185
logIncludingDependency(context, pkg, version);

0 commit comments

Comments
 (0)