feat(components/packages): configure commonjs dependencies (#2280)

* feat(components/packages): configure commonjs dependencies

* Add tests

libs/components/packages/src/schematics/ng-add/ng-add.schematic.ts

@@ -8,6 +8,7 @@ import {
 import fs from 'fs-extra';
 import path from 'path';
 
+import { addCommonJsConfig } from '../rules/add-commonjs-config';
 import { addPolyfillsConfig } from '../rules/add-polyfills-config';
 import { applySkyuxStylesheetsToWorkspace } from '../rules/apply-skyux-stylesheets-to-workspace';
 import { installAngularCdk } from '../rules/install-angular-cdk';
@@ -50,6 +51,7 @@ export default function ngAdd(options: Schema): Rule {
  return chain([
  installEssentialSkyUxPackages(skyuxVersion),
  installAngularCdk(),
+ addCommonJsConfig(projectName),
  addPolyfillsConfig(projectName, ['build', 'test']),
  applySkyuxStylesheetsToWorkspace(projectName),
  modifyTsConfig(),

libs/components/packages/src/schematics/rules/add-commonjs-config.spec.ts

@@ -0,0 +1,50 @@
+import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
+import { getWorkspace } from '@schematics/angular/utility/workspace';
+
+import { firstValueFrom } from 'rxjs';
+
+import { createTestLibrary } from '../testing/scaffold';
+
+import { addCommonJsConfig } from './add-commonjs-config';
+
+describe('add-commonjs-config', () => {
+ const runner = new SchematicTestRunner(
+ 'schematics',
+ require.resolve('../../../collection.json'),
+ );
+
+ it('should not update library config', async () => {
+ const tree = await createTestLibrary(runner, {
+ projectName: 'my-lib',
+ });
+ await firstValueFrom(runner.callRule(addCommonJsConfig('my-lib'), tree));
+ const workspace = await getWorkspace(tree);
+ expect(
+ workspace.projects.get('my-lib')?.targets.get('build')?.options?.[
+ 'allowedCommonJsDependencies'
+ ],
+ ).toBeUndefined();
+ });
+
+ it('should update app config', async () => {
+ const tree = await createTestLibrary(runner, {
+ projectName: 'my-lib',
+ });
+ await firstValueFrom(
+ runner.callRule(addCommonJsConfig('my-lib-showcase'), tree),
+ );
+ const workspace = await getWorkspace(tree);
+ expect(
+ workspace.projects.get('my-lib-showcase')?.targets.get('build')
+ ?.options?.['allowedCommonJsDependencies'],
+ ).toEqual([
+ '@skyux/icons',
+ 'autonumeric',
+ 'dom-autoscroller',
+ 'dragula',
+ 'fontfaceobserver',
+ 'intl-tel-input',
+ 'moment',
+ ]);
+ });
+});

libs/components/packages/src/schematics/rules/add-commonjs-config.ts

@@ -0,0 +1,55 @@
+import { Rule } from '@angular-devkit/schematics';
+
+import { updateWorkspace } from '../utility/workspace';
+
+// List of builders that support allowedCommonJsDependencies.
+const allowedCommonJsDependenciesBuilders = [
+ '@angular-devkit/build-angular:application',
+ '@angular-devkit/build-angular:browser',
+ '@blackbaud-internal/skyux-angular-builders:browser',
+];
+
+/**
+ * Adds allowedCommonJsDependencies to the given targets' configuration.
+ */
+export function addCommonJsConfig(projectName: string): Rule {
+ const targetNames = ['build'];
+ return () =>
+ updateWorkspace((workspace) => {
+ const project = workspace.projects.get(projectName);
+
+ /* istanbul ignore next */
+ if (!project) {
+ return;
+ }
+
+ for (const targetName of targetNames) {
+ const target = project.targets.get(targetName);
+
+ /* istanbul ignore next */
+ if (!target) {
+ return;
+ }
+
+ // Abort if builder is not approved.
+ if (!allowedCommonJsDependenciesBuilders.includes(target.builder)) {
+ continue;
+ }
+
+ target.options ??= {};
+ target.options['allowedCommonJsDependencies'] ??= [];
+ target.options['allowedCommonJsDependencies'] = [
+ ...new Set([
+ ...(target.options['allowedCommonJsDependencies'] as string[]),
+ '@skyux/icons',
+ 'autonumeric',
+ 'dom-autoscroller',
+ 'dragula',
+ 'fontfaceobserver',
+ 'intl-tel-input',
+ 'moment',
+ ]),
+ ].sort((a, b) => a.localeCompare(b));
+ }
+ });
+}