feat(deps): dynamic renaming of dependency elements with version #127

index.js

@@ -1,15 +1,5 @@
-import { AuroInput } from '@aurodesignsystem/auro-input/src/auro-input.js';
-import { AuroDropdown } from '@aurodesignsystem/auro-dropdown/src/auro-dropdown.js';
 import { AuroCombobox } from './src/auro-combobox.js';
 
-if (!customElements.get("combobox-input")) {
-  customElements.define("combobox-input", class extends AuroInput {});
-}
-
-if (!customElements.get("combobox-dropdown")) {
-  customElements.define("combobox-dropdown", class extends AuroDropdown {});
-}
-
 /**
  * Register Custom Element.
  * @param {Object} name - Name to use for custom element.

package.json

@@ -127,7 +127,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render dist:js build:api test build:docs bundler build:demoScripts postinstall types",
+    "build": "npm-run-all build:version build:sass sass:render dist:js build:api test build:docs bundler build:demoScripts postinstall types",
     "build:ci": "npm-run-all sweep build",
     "build:api": "wca analyze 'src/auro-combobox.js' --outFiles docs/api.md",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render",
@@ -136,13 +136,14 @@
     "build:sass": "npm-run-all build:sass:demo build:sass:component postCss:component sass:render",
     "build:sass:demo": "sass --no-source-map demo:demo",
     "build:sass:component": "sass --no-source-map src:src",
+    "build:version": "node scripts/version.js",
     "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples --exec npm run build:dev:assets",
     "bundler": "rollup -c",
     "bundler:test": "rollup -c -w",
     "scssLint": "stylelint \"./src/**/*.scss\"",
     "dev": "concurrently --kill-others 'npm run build:watch' 'npm run serve'",
     "dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist",
-    "esLint": "./node_modules/.bin/eslint src/**/*.js",
+    "esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
     "linters": "npm-run-all scssLint esLint",
     "preCommit": "node scripts/pre-commit.mjs",
     "postCss:component": "node ./scripts/postCss.js",

scripts/dependencyTagVersioning.mjs

@@ -0,0 +1,42 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { literal, unsafeStatic } from 'lit/static-html.js';
+
+export class AuroDependencyVersioning {
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @private
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateElementName(baseName, version) {
+    let result = baseName;
+
+    result += '-';
+    result += version.replace(/[.]/g, '_');
+
+    return result;
+  }
+
+  /**
+   * Generates a unique string to be used for child auro element naming.
+   * @param {string} baseName - Defines the first part of the unique element name.
+   * @param {string} version - Version of the component that will be appended to the baseName.
+   * @returns {string} - Unique string to be used for naming.
+   */
+  generateTag(baseName, version, tagClass) {
+    const elementName = this.generateElementName(baseName, version);
+    const tag = literal`${unsafeStatic(elementName)}`;
+
+    if (!customElements.get(elementName)) {
+      customElements.define(elementName, class extends tagClass {});
+    }
+
+    return tag;
+  }
+}

scripts/postCss.js

@@ -1,3 +1,8 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
 const autoprefixer = require('autoprefixer');
 const postcss = require('postcss');
 const comments = require('postcss-discard-comments');

scripts/version.js

@@ -0,0 +1,9 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+const versionWriter = require("./versionWriter");
+
+versionWriter.writeDepVersionFile('@aurodesignsystem/auro-dropdown');
+versionWriter.writeDepVersionFile('@aurodesignsystem/auro-input');

scripts/versionWriter.js

@@ -0,0 +1,21 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+function writeDepVersionFile(pkg) {
+  console.warn('writeDepVersionFile', pkg);
+
+  const fs = require('fs');
+
+  const path = '../node_modules/' + pkg + '/package.json';
+  const json = require(path);
+  const version = json.version;
+  const elemSubName = pkg.substring(pkg.indexOf('auro-') + 5);
+  const versionFilePath = './src/' + elemSubName + 'Version.js';
+
+  fs.writeFileSync(versionFilePath, `export default '${version}'`);
+};
+
+// add the code below
+module.exports = { writeDepVersionFile };

src/auro-combobox.js

@@ -4,16 +4,23 @@
 // ---------------------------------------------------------------------
 
 // If using litElement base class
-import { LitElement, html } from "lit";
+import { LitElement } from "lit";
+import { html } from 'lit/static-html.js';
+import { AuroDependencyVersioning } from "../scripts/dependencyTagVersioning.mjs";
 
 // If using auroElement base class
 // See instructions for importing auroElement base class https://git.io/JULq4
 // import { html, css } from "lit";
 // import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement';
 
-/* eslint-disable max-lines */
+/* eslint-disable max-lines, lit/binding-positions, lit/no-invalid-html */
 
 import '@aurodesignsystem/auro-menu';
+import { AuroDropdown } from '@aurodesignsystem/auro-dropdown/src/auro-dropdown.js';
+import dropdownVersion from './dropdownVersion';
+
+import { AuroInput } from '@aurodesignsystem/auro-input/src/auro-input.js';
+import inputVersion from './inputVersion';
 
 // Import touch detection lib
 import styleCss from "./style-css.js";
@@ -50,6 +57,13 @@ export class AuroCombobox extends LitElement {
     this.optionSelected = null;
 
     this.privateDefaults();
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+    this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
+    this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
   }
 
   /**
@@ -124,7 +138,27 @@ export class AuroCombobox extends LitElement {
       /**
        * @private
        */
-      msgSelectionMissing: { type: String }
+      msgSelectionMissing: { type: String },
+
+      /**
+       * @private
+       */
+      dropdownElementName: { type: String },
+
+      /**
+       * @private
+       */
+      dropdownTag: { type: Object },
+
+      /**
+       * @private
+       */
+      inputElementName: { type: String },
+
+      /**
+       * @private
+       */
+      inputTag: { type: Object }
     };
   }
 
@@ -499,9 +533,9 @@ export class AuroCombobox extends LitElement {
   }
 
   firstUpdated() {
-    this.dropdown = this.shadowRoot.querySelector('combobox-dropdown');
+    this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$); // eslint-disable-line no-underscore-dangle
     this.menu = this.querySelector('auro-menu');
-    this.input = this.dropdown.querySelector('combobox-input');
+    this.input = this.dropdown.querySelector(this.inputTag._$litStatic$); // eslint-disable-line no-underscore-dangle
 
     this.configureMenu();
     this.configureInput();
@@ -570,8 +604,7 @@ export class AuroCombobox extends LitElement {
    * @returns {void}
    */
   focus() {
-    this.shadowRoot.querySelector('combobox-dropdown').querySelector('combobox-input').
-      focus();
+    this.input.focus();
   }
 
   updated(changedProperties) {
@@ -633,7 +666,7 @@ export class AuroCombobox extends LitElement {
             : undefined
           }
         </div>
-        <combobox-dropdown
+        <${this.dropdownTag}
           for="dropdownMenu"
           bordered
           rounded
@@ -642,7 +675,8 @@ export class AuroCombobox extends LitElement {
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
           disableEventShow>
-          <combobox-input
+          <${this.inputTag}
+            auro-input
             slot="trigger"
             bordered
             ?required="${this.required}"
@@ -651,7 +685,7 @@ export class AuroCombobox extends LitElement {
             ?icon="${this.triggerIcon}"
             .type="${this.type}">
             <slot name="label" slot="label"></slot>
-          </combobox-input>
+          </${this.inputTag}>
           <div class="menuWrapper">
             <slot slotchange="${this.handleSlotChange()}"></slot>
           </div>
@@ -665,7 +699,7 @@ export class AuroCombobox extends LitElement {
               `
             }
           </span>
-        </combobox-dropdown>
+        </${this.dropdownTag}>
       </div>
     `;
   }

src/dropdownVersion.js

@@ -0,0 +1 @@
+export default '2.9.9'

src/inputVersion.js

@@ -0,0 +1 @@
+export default '2.14.0'

src/style.scss

@@ -5,7 +5,7 @@
 
 @import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties';
 
-combobox-input {
+[auro-input] {
   /* 3.5rem if --auro-size-700 not defined */
   min-height: var(--auro-size-700, 3.5rem);
   max-height: var(--auro-size-700, 3.5rem);