feat(naming): dynamically generate unique name for auro-dropdown #127

README.md

@@ -82,9 +82,9 @@ We recommend you load these bundles using [differential serving](https://philipw
 
 ```html
 <!-- **NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/@aurodesignsystem/auro-combobox@latest/dist/auro-combobox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/auro-combobox@latest/dist/auro-combobox__bundled.js" type="module"></script>
 ```
 
 ## auro-combobox use cases

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

@@ -19,10 +19,10 @@
     "node": ">=18.15.0"
   },
   "dependencies": {
-    "@alaskaairux/icons": "^4.27.0",
+    "@alaskaairux/icons": "^4.28.0",
     "@aurodesignsystem/auro-dropdown": "^2.9.9",
-    "@aurodesignsystem/auro-input": "^2.13.2",
-    "@aurodesignsystem/auro-menu": "^3.9.5",
+    "@aurodesignsystem/auro-input": "^2.14.1",
+    "@aurodesignsystem/auro-menu": "^3.10.0",
     "chalk": "^5.2.0",
     "lit": "^2.7.4"
   },
@@ -31,13 +31,15 @@
     "@aurodesignsystem/webcorestylesheets": "^4.3.1"
   },
   "devDependencies": {
-    "@alaskaairux/design-tokens": "^3.12.1",
+    "@alaskaairux/design-tokens": "^3.14.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.2.0",
+    "@aurodesignsystem/webcorestylesheets": "^4.6.0",
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
     "@open-wc/testing": "^3.1.8",
+    "@rollup/plugin-commonjs": "^25.0.1",
     "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^10.0.3",
@@ -50,7 +52,7 @@
     "copyfiles": "^2.4.1",
     "core-js": "^3.30.2",
     "eslint": "^8.40.0",
-    "eslint-plugin-jsdoc": "^44.0.1",
+    "eslint-plugin-jsdoc": "^46.2.6",
     "husky": "^8.0.3",
     "lodash": "^4.17.21",
     "markdown-magic": "^2.6.1",
@@ -110,7 +112,8 @@
             "./package.json",
             "./CHANGELOG.md",
             "./README.md",
-            "./docs/api.md"
+            "./docs/api.md",
+            "./src/version.js"
           ]
         }
       ],
@@ -127,7 +130,8 @@
     "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",
+    "build:version": "node scripts/version.js",
     "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",
@@ -142,7 +146,7 @@
     "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/prepForBuild.js

@@ -0,0 +1,31 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+const fs = require('fs');
+const bundle = 'auro-combobox__bundled.js';
+const indexFile = './build/index.html';
+
+// File destination.txt will be created or overwritten by default.
+let copyFiles = async function() {
+  fs.copyFile(`./dist/${bundle}`, `./build/${bundle}`, (err) => {
+    if (err) throw err;
+    console.log(`${bundle} was copied to ./build dir`);
+  });
+}
+
+// Edit string in new index.html file
+fs.readFile(indexFile, 'utf8', function (err,data) {
+  copyFiles();
+
+  if (err) {
+    return console.log(err);
+  }
+
+  const element = data.replace(`../src/auro-combobox.js`, `auro-combobox__bundled.js`);
+
+  fs.writeFile(indexFile, element, 'utf8', function (err) {
+     if (err) return console.log(err);
+  });
+});

scripts/removeNonRemPlugin.js

@@ -0,0 +1,32 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+const postcss = require('postcss');
+
+const customPropertyRegExp = /^--[A-z][\w-]*$/;
+// Remove all declarations that do not contain rems
+module.exports = postcss.plugin('remove-non-rem', function (opts) {
+  opts = opts || {};
+
+  return function (css) {
+    css.walkDecls(decl => {
+      if (!decl.value.includes('rem') || customPropertyRegExp.test(decl.prop)) {
+        decl.remove();
+      }
+    });
+
+    css.walkRules(rule => {
+      if (rule.nodes.length == 0) {
+        rule.remove();
+      }
+    });
+
+    css.walkAtRules(rule => {
+      if (rule.nodes.length == 0) {
+        rule.remove();
+      }
+    });
+  };
+});

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 }
     };
   }
 
@@ -331,7 +365,9 @@ export class AuroCombobox extends LitElement {
      * Validate every time we remove focus from the datepicker.
      */
     this.addEventListener('focusout', () => {
+      console.log("blurred", document.activeElement === this);
       if (document.activeElement !== this) {
+        console.log("active element is this");
         this.validate();
       }
 
@@ -499,9 +535,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 +606,10 @@ export class AuroCombobox extends LitElement {
    * @returns {void}
    */
   focus() {
-    this.shadowRoot.querySelector('combobox-dropdown').querySelector('combobox-input').
-      focus();
+    console.log("focus");
+    const inputEl = this.dropdown.querySelector(this.inputTag._$litStatic$); // eslint-disable-line no-underscore-dangle
+
+    inputEl.focus();
   }
 
   updated(changedProperties) {
@@ -633,7 +671,7 @@ export class AuroCombobox extends LitElement {
             : undefined
           }
         </div>
-        <combobox-dropdown
+        <${this.dropdownTag}
           for="dropdownMenu"
           bordered
           rounded
@@ -642,7 +680,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 +690,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 +704,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.1'