fix(angular): support nested module folders

- nested folder support for cds/angular - fixes missing sub module support for broken treeshaking - improves generated directive basic types Signed-off-by: Cory Rylan <splintercode.cb@gmail.com>
vmware-archive · Nov 3, 2021 · dcd040a · dcd040a
1 parent efeaf75
commit dcd040a
Show file tree

Hide file tree

Showing 32 changed files with 231 additions and 271 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,7 +12,15 @@ packages/react/coverage
 .rollup.cache
 
 # auto-generated ng-core components
-packages/angular/projects/cds-angular/src/cds/components
+packages/angular/projects/cds-angular/*
+!packages/angular/projects/cds-angular/_stubs
+!packages/angular/projects/cds-angular/*.json
+!packages/angular/projects/cds-angular/*.md
+!packages/angular/projects/cds-angular/karma.conf.js
+!packages/angular/projects/cds-angular/yarn.lock
+!packages/angular/projects/cds-angular/src/all.spec.ts
+!packages/angular/projects/cds-angular/src/test.ts
+
 
 # compiled output
 /dist

diff --git a/apps/core-angular-cli/angular.json b/apps/core-angular-cli/angular.json
@@ -35,6 +35,7 @@
           },
           "configurations": {
             "production": {
+              "sourceMap": true,
               "budgets": [
                 {
                   "type": "initial",

diff --git a/apps/core-angular-cli/src/app/app.component.html b/apps/core-angular-cli/src/app/app.component.html
@@ -1,6 +1,6 @@
 <main cds-text="body" cds-layout="vertical gap:lg p:lg">
   <cds-alert-group status="warning" *ngIf="show">
-    <cds-alert [closable]="true" (closeChange)="show = false">
+    <cds-alert closable (closeChange)="show = false">
       Hello World
     </cds-alert>
   </cds-alert-group>

diff --git a/apps/core-angular-cli/src/app/app.module.ts b/apps/core-angular-cli/src/app/app.module.ts
@@ -1,35 +1,57 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { cloudIcon, ClarityIcons } from '@cds/core/icon';
-import '@cds/core/icon/register.js';
-import '@cds/core/accordion/register.js';
-import '@cds/core/alert/register.js';
-import '@cds/core/button/register.js';
-import '@cds/core/checkbox/register.js';
-import '@cds/core/datalist/register.js';
-import '@cds/core/file/register.js';
-import '@cds/core/forms/register.js';
-import '@cds/core/input/register.js';
-import '@cds/core/password/register.js';
-import '@cds/core/radio/register.js';
-import '@cds/core/range/register.js';
-import '@cds/core/search/register.js';
-import '@cds/core/select/register.js';
-import '@cds/core/textarea/register.js';
-import '@cds/core/time/register.js';
-import '@cds/core/toggle/register.js';
+import { CdsIconModule } from '@cds/angular/icon';
+import { CdsAccordionModule } from '@cds/angular/accordion';
+import { CdsAlertModule } from '@cds/angular/alert';
+import { CdsButtonModule } from '@cds/angular/button';
+import { CdsCheckboxModule } from '@cds/angular/checkbox';
+import { CdsDatalistModule } from '@cds/angular/datalist';
+import { CdsFormsModule } from '@cds/angular/forms';
+import { CdsFileModule } from '@cds/angular/file';
+import { CdsInputModule } from '@cds/angular/input';
+import { CdsPasswordModule } from '@cds/angular/password';
+import { CdsRadioModule } from '@cds/angular/radio';
+import { CdsRangeModule } from '@cds/angular/range';
+import { CdsSearchModule } from '@cds/angular/search';
+import { CdsSelectModule } from '@cds/angular/select';
+import { CdsTagModule } from '@cds/angular/tag';
+import { CdsTextareaModule } from '@cds/angular/textarea';
+import { CdsTimeModule } from '@cds/angular/time';
+import { CdsToggleModule } from '@cds/angular/toggle';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, ReactiveFormsModule, AppRoutingModule],
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    AppRoutingModule,
+    CdsIconModule,
+    CdsAccordionModule,
+    CdsAlertModule,
+    CdsButtonModule,
+    CdsCheckboxModule,
+    CdsDatalistModule,
+    CdsFileModule,
+    CdsFormsModule,
+    CdsInputModule,
+    CdsPasswordModule,
+    CdsRadioModule,
+    CdsRangeModule,
+    CdsSearchModule,
+    CdsSelectModule,
+    CdsTagModule,
+    CdsTextareaModule,
+    CdsTimeModule,
+    CdsToggleModule,
+  ],
   providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA], // temp for @cds/angular once update to angular 12.x
+  bootstrap: [AppComponent]
 })
 export class AppModule {
   constructor() {

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -3,11 +3,12 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "build": "npm-run-all build:lib build:update",
+    "build": "npm-run-all clean build:lib build:update",
     "build:preinstall": "mkdir -p ../../dist/angular/ && cp ./projects/cds-angular/package.json ../../dist/angular/",
     "build:update": "node ../../scripts/update-local-packages.js /packages/angular/dist/angular/package.json",
     "build:lib": "yarn run generate:core-ng-modules && ng build cds-angular --configuration=production",
-    "generate:core-ng-modules": "node ../../scripts/core-ng-module-generator && prettier --write ./projects/cds-angular/src/cds",
+    "clean": "cd ./projects/cds-angular && git clean -dfX",
+    "generate:core-ng-modules": "node ../../scripts/core-ng-module-generator && prettier --write ./projects/cds-angular/",
     "test": "ng test cds-angular --watch false  --source-map=false",
     "lint": "eslint -c .eslintrc.js \"src/**/*.ts\" \"projects/**/*.ts\"",
     "lint:fix": "eslint --fix -c .eslintrc.js \"src/**/*.ts\" \"projects/**/*.ts\""

diff --git a/packages/angular/projects/cds-angular/_stubs/directive.ts.mustache b/packages/angular/projects/cds-angular/_stubs/directive.ts.mustache
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+import { Directive, ElementRef, {{#hasProps}} Input {{/hasProps}} {{#hasEvents}}, Output, EventEmitter {{/hasEvents}} } from '@angular/core';
+import { {{elementClassName}} } from '@cds/core/{{{directiveModule}}}';
+
+@Directive({ selector: '{{tagName}}' })
+export class {{directiveClassName}} {
+  protected element: {{elementClassName}};
+
+  {{#props}}
+  get {{name}}() {
+    return this.element.{{name}};
+  }
+  {{! empty string is added to support boolean attrs https://github.com/angular/angular/issues/14761 }}
+  @Input() set {{name}}(value{{#isBoolean}}: boolean | ''{{/isBoolean}}) {
+    this.element.{{name}} = {{#isBoolean}}!!{{/isBoolean}}value;
+  };
+  {{/props}}
+
+  {{#events}}
+  @Output() {{name}}: EventEmitter<CustomEvent> = new EventEmitter();
+  {{/events}}
+
+  constructor(elementRef: ElementRef) {
+    this.element = elementRef.nativeElement;
+  }
+}
diff --git a/...-angular/src/cds/_stubs/index.ts.mustache → ...ects/cds-angular/_stubs/index.ts.mustache b/...-angular/src/cds/_stubs/index.ts.mustache → ...ects/cds-angular/_stubs/index.ts.mustache
@@ -1,11 +1,11 @@
 /*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
 {{#directives}}
-export * from './{{directiveFileName}}.directive';
+export * from './{{{directiveFileName}}}.directive';
 {{/directives}}
 
-export * from './{{moduleFileName}}.module';
+export * from './{{{moduleFileName}}}.module';
diff --git a/...angular/src/cds/_stubs/module.ts.mustache → ...cts/cds-angular/_stubs/module.ts.mustache b/...angular/src/cds/_stubs/module.ts.mustache → ...cts/cds-angular/_stubs/module.ts.mustache
@@ -1,18 +1,17 @@
 /*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import '@cds/core/{{{moduleDirectory}}}/register.js';
 
 {{#directives}}
-import { {{directiveClassName}} } from './{{directiveFileName}}.directive';
+import { {{directiveClassName}} } from './{{{directiveFileName}}}.directive';
 {{/directives}}
 
-import '@cds/core/{{moduleDirectory}}/register.js';
-
 @NgModule({
   imports: [CommonModule],
   declarations: [

diff --git a/packages/angular/projects/cds-angular/_stubs/package.json.mustache b/packages/angular/projects/cds-angular/_stubs/package.json.mustache
@@ -0,0 +1,9 @@
+{
+  "name": "@cds/angular/{{{moduleDirectory}}}",
+  "ngPackage": {
+    "lib": {
+      "entryFile": "public-api.ts",
+      "flatModuleFile": "{{{moduleFileName}}}"
+    }
+  }
+}
diff --git a/...ar/projects/cds-angular/src/public-api.ts → ...cds-angular/_stubs/public-api.ts.mustache b/...ar/projects/cds-angular/src/public-api.ts → ...cds-angular/_stubs/public-api.ts.mustache
@@ -2,4 +2,4 @@
  * Public API Surface of cds-angular
  */
 
-export * from './cds/components/index';
+export * from './index';
diff --git a/...lar/src/cds/_stubs/root-index.ts.mustache → ...cds-angular/_stubs/root-index.ts.mustache b/...lar/src/cds/_stubs/root-index.ts.mustache → ...cds-angular/_stubs/root-index.ts.mustache
@@ -1,11 +1,11 @@
 /*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
 export * from './cds-angular.module';
 
 {{#modules}}
-export * from './{{moduleDirectoryName}}/index';
+export * from '@cds/angular/{{{moduleDirectory}}}';
 {{/modules}}
diff --git a/...ar/src/cds/_stubs/root-module.ts.mustache → ...ds-angular/_stubs/root-module.ts.mustache b/...ar/src/cds/_stubs/root-module.ts.mustache → ...ds-angular/_stubs/root-module.ts.mustache
@@ -1,17 +1,13 @@
 /*
- * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
 import { NgModule } from '@angular/core';
 
 {{#modules}}
-import { {{moduleClassName}} } from './{{moduleDirectory}}/index';
-{{/modules}}
-
-{{#modules}}
-import '@cds/core/{{moduleDirectory}}/register.js';
+import { {{moduleClassName}} } from '@cds/angular/{{{moduleDirectory}}}';
 {{/modules}}
 
 @NgModule({

diff --git a/...s-angular/src/cds/_stubs/test.ts.mustache → ...jects/cds-angular/_stubs/test.ts.mustache b/...s-angular/src/cds/_stubs/test.ts.mustache → ...jects/cds-angular/_stubs/test.ts.mustache
diff --git a/packages/angular/projects/cds-angular/ng-package.json b/packages/angular/projects/cds-angular/ng-package.json
@@ -2,8 +2,7 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/angular",
   "lib": {
-    "entryFile": "src/public-api.ts",
-    "flatModuleFile": "cds-angular"
+    "entryFile": "src/public-api.ts"
   },
   "allowedNonPeerDependencies": ["jsdom"]
 }
diff --git a/packages/angular/projects/cds-angular/package.json b/packages/angular/projects/cds-angular/package.json
@@ -28,4 +28,4 @@
     "url": "https://github.com/vmware/clarity/issues"
   },
   "schematics": "./schematics/cds-collection.json"
-}
+}
diff --git a/packages/angular/projects/cds-angular/src/all.spec.ts b/packages/angular/projects/cds-angular/src/all.spec.ts
@@ -48,7 +48,7 @@ import {
   CdsToggleGroupDirective,
   CdsToggleDirective,
   CdsModule,
-} from './cds/components';
+} from './public-api';
 
 describe('CDS Accordion Content', () => {
   let fixture: ComponentFixture<any>;

diff --git a/packages/angular/projects/cds-angular/src/cds/_stubs/directive.ts.mustache b/packages/angular/projects/cds-angular/src/cds/_stubs/directive.ts.mustache
diff --git a/packages/angular/projects/cds-angular/src/cds/cds-base.ts b/packages/angular/projects/cds-angular/src/cds/cds-base.ts
diff --git a/packages/angular/projects/cds-angular/tsconfig.lib.json b/packages/angular/projects/cds-angular/tsconfig.lib.json
@@ -8,7 +8,11 @@
     "declarationMap": true,
     "inlineSources": true,
     "types": [],
-    "lib": ["dom", "es2018"]
+    "lib": ["dom", "es2018"],
+    "paths": {
+      "@cds/angular": ["./"],
+      "@cds/angular/*": ["./*"]
+    }
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js
@@ -58,7 +58,6 @@ const config = {
       './src/range',
       './src/search',
       './src/select',
-      './src/selection-panels',
       './src/selection-panels/checkbox',
       './src/selection-panels/radio',
       './src/tag',

diff --git a/packages/core/src/badge/badge.element.ts b/packages/core/src/badge/badge.element.ts
@@ -41,7 +41,7 @@ export class CdsBadge extends LitElement {
 
   /**
    * Sets the color of the badge
-   * @type {neutral | info | success | warning | danger}
+   * @type {'neutral' | 'info' | 'success' | 'warning' | 'danger'}
    */
   @property({ type: String })
   status: StatusTypes = 'neutral';

diff --git a/packages/core/src/forms/control-group/control-group.element.ts b/packages/core/src/forms/control-group/control-group.element.ts
@@ -200,6 +200,7 @@ export class CdsInternalControlGroup extends LitElement {
     this.observers.forEach(o => o.disconnect());
   }
 
+  /** @private */
   get layoutStable() {
     return (
       !inlineControlListIsWrapped(Array.from(this.controls), this.layout) &&

diff --git a/packages/core/src/forms/control/control.element.ts b/packages/core/src/forms/control/control.element.ts
@@ -355,6 +355,7 @@ export class CdsControl extends LitElement {
     }
   }
 
+  /** @private */
   get layoutStable() {
     return (
       this.labelLayout !== ControlLabelLayout.default ||

diff --git a/packages/core/src/internal-components/overlay/overlay.element.ts b/packages/core/src/internal-components/overlay/overlay.element.ts
@@ -100,6 +100,7 @@ export class CdsInternalOverlay extends CdsBaseFocusTrap implements Animatable {
 
   // renderRoot needs delegatesFocus so that focus can cross the shadowDOM
   // inside an element with aria-modal set to true
+  /** @private */
   static get shadowRootOptions() {
     return { ...super.shadowRootOptions, delegatesFocus: true };
   }

diff --git a/packages/core/src/modal/modal-content.element.ts b/packages/core/src/modal/modal-content.element.ts
@@ -34,6 +34,7 @@ export class CdsModalContent extends LitElement {
   // renderRoot needs delegatesFocus so that focus can cross the shadowDOM
   // inside modal-content with a tabindex of -1. we need the tabindex so a
   // modal's content can scroll if it needs to.
+  /** @private */
   static get shadowRootOptions() {
     return { ...super.shadowRootOptions, delegatesFocus: true };
   }

diff --git a/packages/core/src/navigation/navigation-start.element.ts b/packages/core/src/navigation/navigation-start.element.ts
@@ -190,7 +190,7 @@ export class CdsNavigationStart extends LitElement implements FocusableItem {
     return [baseStyles, itemStyles, styles];
   }
 
-  get toggleIconDirection(): Directions {
+  private get toggleIconDirection(): Directions {
     return getToggleIconDirection(this);
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,4 +28,4 @@ @@
         "url": "https://github.com/vmware/clarity/issues"
       },
       "schematics": "./schematics/cds-collection.json"
-    }
+    }