From 3d3f20ef1ed219afb20812bd83d7ba48e21e97e0 Mon Sep 17 00:00:00 2001 From: Jordan Jones Date: Tue, 13 Aug 2024 10:11:33 -0700 Subject: [PATCH] perf: use custom version of dropdown --- package-lock.json | 101 +++++++++++++++++++++------------------ package.json | 11 +++-- scripts/version.mjs | 3 ++ src/auro-select.js | 38 ++++++++++----- src/dropdownVersion.js | 1 + src/style.scss | 4 +- test/auro-select.test.js | 8 ++-- 7 files changed, 96 insertions(+), 70 deletions(-) create mode 100644 scripts/version.mjs create mode 100644 src/dropdownVersion.js diff --git a/package-lock.json b/package-lock.json index 258b58a..06bc3ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,10 +10,10 @@ "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "@aurodesignsystem/auro-dropdown": "^2.10.6", + "@aurodesignsystem/auro-dropdown": "^3.0.0-beta.2", "@aurodesignsystem/auro-formvalidation": "^1.0.3", "@aurodesignsystem/auro-library": "^2.6.3", - "@aurodesignsystem/auro-menu": "^3.11.9", + "@aurodesignsystem/auro-menu": "^3.12.0-beta.1", "chalk": "^5.3.0", "lit-element": "^4.1.0", "lit-html": "^3.2.0" @@ -39,7 +39,7 @@ "concurrently": "^8.2.2", "copyfiles": "^2.4.1", "core-js": "^3.38.0", - "eslint": "^9.5.0", + "eslint": "^9.9.0", "eslint-plugin-jsdoc": "^50.0.1", "husky": "^9.1.4", "lodash": "^4.17.21", @@ -179,42 +179,33 @@ } }, "node_modules/@aurodesignsystem/auro-dropdown": { - "version": "2.10.6", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-dropdown/-/auro-dropdown-2.10.6.tgz", - "integrity": "sha512-tlrcKNK78JMm4eunI2+PjdrZTg2tvfAUIhj1bTtBCk2+GYg6B9m4DHSHpxp+0uaMPBExwAUpvqYc8R6AWnaZaQ==", + "version": "3.0.0-beta.2", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-dropdown/-/auro-dropdown-3.0.0-beta.2.tgz", + "integrity": "sha512-sP+ohHSzNuspnSnaWfc1bAyfiAxmjZNaBK9UmCITt+A7nUvBxAq4sD8MKeUTDNsBm8Viluxj+3J3meoT6qgNGQ==", "hasInstallScript": true, "dependencies": { + "@aurodesignsystem/auro-icon": "^5.0.0-beta.1", "@popperjs/core": "^2.11.8", "chalk": "^5.2.0", - "lit": "^3.1.2" + "lit": "^3.2.0" }, "engines": { "node": "^18 || ^20" }, "peerDependencies": { "@alaskaairux/design-tokens": "^3.11.0", - "@aurodesignsystem/auro-icon": "^4.2.0", "@aurodesignsystem/design-tokens": "^4.1.1", "@aurodesignsystem/webcorestylesheets": "^5.0.3" } }, - "node_modules/@aurodesignsystem/auro-formvalidation": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-formvalidation/-/auro-formvalidation-1.0.3.tgz", - "integrity": "sha512-diJ5VE64WjVlnSIdSm8Wcj0ouhNPgveXePYrhknWcXwLvepPwt3XZyY+hGFaXTEd1ni9I2VYzypvnTPawkMsOA==", - "hasInstallScript": true, - "engines": { - "node": "^18 || ^20" - } - }, - "node_modules/@aurodesignsystem/auro-icon": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-4.4.0.tgz", - "integrity": "sha512-OCMdjy5mt7nPvOgp48usSMPmosYKcS/uxC6kHxK9jMltnsSfjOQVjGZirEztVXfxKYQbDAaEhTDoOigK89ucew==", + "node_modules/@aurodesignsystem/auro-dropdown/node_modules/@aurodesignsystem/auro-icon": { + "version": "5.0.0-beta.1", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-5.0.0-beta.1.tgz", + "integrity": "sha512-E1dth3K8JiViAdMtNb6ZESPZxIj8pQVlAoozsw6LAAIimWtEay4Mo2Mp22RByIWv2oK/ro3KuAwcyqiSotmQgQ==", "hasInstallScript": true, "dependencies": { "chalk": "^5.3.0", - "lit": "^3.1.2" + "lit": "^3.1.3" }, "engines": { "node": "^18.x || ^20.x" @@ -225,6 +216,15 @@ "@aurodesignsystem/webcorestylesheets": "^5.0.8" } }, + "node_modules/@aurodesignsystem/auro-formvalidation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-formvalidation/-/auro-formvalidation-1.0.3.tgz", + "integrity": "sha512-diJ5VE64WjVlnSIdSm8Wcj0ouhNPgveXePYrhknWcXwLvepPwt3XZyY+hGFaXTEd1ni9I2VYzypvnTPawkMsOA==", + "hasInstallScript": true, + "engines": { + "node": "^18 || ^20" + } + }, "node_modules/@aurodesignsystem/auro-library": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-2.6.3.tgz", @@ -241,14 +241,13 @@ } }, "node_modules/@aurodesignsystem/auro-menu": { - "version": "3.11.9", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-menu/-/auro-menu-3.11.9.tgz", - "integrity": "sha512-q2fL2CGosfTI91wPickUtVSUouVGnR/HVJXfJ+TgObAk2aey7dBvwGI4f3guC8MKqY29kbrhU0e7BHAkR3CdRw==", + "version": "3.12.0-beta.1", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-menu/-/auro-menu-3.12.0-beta.1.tgz", + "integrity": "sha512-Vkwk3OQZlFx0Sc65uwGO/Ve0hi0gdTXy27Uoj2VwDhl4FrVEaQWblxOn3SxeJuKqOd8A2MLX+2kdORSesRUIrw==", "hasInstallScript": true, "dependencies": { - "@aurodesignsystem/auro-icon": "^4.4.0", "chalk": "^5.3.0", - "lit": "^3.1.2", + "lit": "^3.1.4", "mark.js": "8.11.0" }, "engines": { @@ -911,14 +910,14 @@ } }, "node_modules/@eslint/config-array": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.16.0.tgz", - "integrity": "sha512-/jmuSd74i4Czf1XXn7wGRWZCuyaUZ330NH1Bek0Pplatt4Sy1S5haN21SCLLdbeKslQ+S0wEJ+++v5YibSi+Lg==", + "version": "0.17.1", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.1.tgz", + "integrity": "sha512-BlYOpej8AQ8Ev9xVqroV7a02JK3SkBAaN9GfMMH9W6Ch8FlQlkjGw4Ir7+FgYwfirivAf4t+GtzuAxqfukmISA==", "dev": true, "dependencies": { "@eslint/object-schema": "^2.1.4", "debug": "^4.3.1", - "minimatch": "^3.0.5" + "minimatch": "^3.1.2" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -970,9 +969,9 @@ "dev": true }, "node_modules/@eslint/js": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.5.0.tgz", - "integrity": "sha512-A7+AOT2ICkodvtsWnxZP4Xxk3NbZ3VMHd8oihydLRGrJgqqdEz1qSeEgXYyT/Cu8h1TWWsQRejIx48mtjZ5y1w==", + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.0.tgz", + "integrity": "sha512-hhetes6ZHP3BlXLxmd8K2SNgkhNSi+UcecbnwWKwpP7kyi/uC75DJ1lOOBO3xrC4jyojtGE3YxKZPHfk4yrgug==", "dev": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -5713,16 +5712,16 @@ } }, "node_modules/eslint": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.5.0.tgz", - "integrity": "sha512-+NAOZFrW/jFTS3dASCGBxX1pkFD0/fsO+hfAkJ4TyYKwgsXZbqzrw+seCYFCcPCYXvnD67tAnglU7GQTz6kcVw==", + "version": "9.9.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.9.0.tgz", + "integrity": "sha512-JfiKJrbx0506OEerjK2Y1QlldtBxkAlLxT5OEcRF8uaQ86noDe2k31Vw9rnSWv+MXZHj7OOUV/dA0AhdLFcyvA==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", - "@eslint-community/regexpp": "^4.6.1", - "@eslint/config-array": "^0.16.0", + "@eslint-community/regexpp": "^4.11.0", + "@eslint/config-array": "^0.17.1", "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "9.5.0", + "@eslint/js": "9.9.0", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.3.0", "@nodelib/fs.walk": "^1.2.8", @@ -5731,9 +5730,9 @@ "cross-spawn": "^7.0.2", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", - "eslint-scope": "^8.0.1", + "eslint-scope": "^8.0.2", "eslint-visitor-keys": "^4.0.0", - "espree": "^10.0.1", + "espree": "^10.1.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", @@ -5761,6 +5760,14 @@ }, "funding": { "url": "https://eslint.org/donate" + }, + "peerDependencies": { + "jiti": "*" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + } } }, "node_modules/eslint-plugin-detect-bad-words": { @@ -8457,13 +8464,13 @@ "dev": true }, "node_modules/lit": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz", - "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.0.tgz", + "integrity": "sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==", "dependencies": { "@lit/reactive-element": "^2.0.4", - "lit-element": "^4.0.4", - "lit-html": "^3.1.2" + "lit-element": "^4.1.0", + "lit-html": "^3.2.0" } }, "node_modules/lit-element": { diff --git a/package.json b/package.json index ad4ff35..088f729 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,10 @@ "node": "^18.x || ^20.x" }, "dependencies": { - "@aurodesignsystem/auro-dropdown": "^2.10.6", + "@aurodesignsystem/auro-dropdown": "^3.0.0-beta.2", "@aurodesignsystem/auro-formvalidation": "^1.0.3", "@aurodesignsystem/auro-library": "^2.6.3", - "@aurodesignsystem/auro-menu": "^3.11.9", + "@aurodesignsystem/auro-menu": "^3.12.0-beta.1", "chalk": "^5.3.0", "lit-element": "^4.1.0", "lit-html": "^3.2.0" @@ -53,7 +53,7 @@ "concurrently": "^8.2.2", "copyfiles": "^2.4.1", "core-js": "^3.38.0", - "eslint": "^9.5.0", + "eslint": "^9.9.0", "eslint-plugin-jsdoc": "^50.0.1", "husky": "^9.1.4", "lodash": "^4.17.21", @@ -139,7 +139,7 @@ "web components" ], "scripts": { - "build": "npm-run-all build:sass sass:render types", + "build": "npm-run-all build:sass build:version sass:render types", "build:test": "npm-run-all test linters", "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall", "build:ci": "npm-run-all sweep build:release", @@ -148,13 +148,14 @@ "build:docs": "node scripts/generateDocs.mjs", "build:sass": "npm-run-all build:sass:component postCss:component sass:render", "build:sass:component": "sass --no-source-map src:src", + "build:version": "node scripts/version.mjs", "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.mjs", diff --git a/scripts/version.mjs b/scripts/version.mjs new file mode 100644 index 0000000..6e433d7 --- /dev/null +++ b/scripts/version.mjs @@ -0,0 +1,3 @@ +import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js'; + +versionWriter.writeDepVersionFile('@aurodesignsystem/auro-dropdown'); diff --git a/src/auro-select.js b/src/auro-select.js index b41d1cb..ad28623 100644 --- a/src/auro-select.js +++ b/src/auro-select.js @@ -3,16 +3,22 @@ // --------------------------------------------------------------------- -/* eslint-disable prefer-named-capture-group, max-lines */ +/* eslint-disable prefer-named-capture-group, max-lines, no-underscore-dangle, lit/binding-positions, lit/no-invalid-html */ // If using litElement base class -import { LitElement, html } from "lit"; - -import '@aurodesignsystem/auro-menu'; +import { LitElement } from "lit"; +import { html } from 'lit/static-html.js'; import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/validation.js'; import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; +import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; + +import { AuroDropdown } from '@aurodesignsystem/auro-dropdown/src/auro-dropdown.js'; +import dropdownVersion from './dropdownVersion'; + +import '@aurodesignsystem/auro-menu'; + // Import touch detection lib import styleCss from "./style-css.js"; @@ -69,6 +75,13 @@ export class AuroSelect extends LitElement { * @private */ this.runtimeUtils = new AuroLibraryRuntimeUtils(); + + /** + * Generate unique names for dependency components. + */ + const versioning = new AuroDependencyVersioning(); + + this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown); } /** @@ -150,7 +163,7 @@ export class AuroSelect extends LitElement { * @returns {void} */ configureDropdown() { - this.dropdown = this.shadowRoot.querySelector('auro-dropdown'); + this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$); this.dropdown.addEventListener('auroDropdown-ready', () => { this.auroDropdownReady = true; @@ -164,8 +177,7 @@ export class AuroSelect extends LitElement { * @returns {void} */ updateDisplayedValue(option) { - const dropdown = this.shadowRoot.querySelector('auro-dropdown'); - const triggerContentEl = dropdown.querySelector('#triggerFocus'); + const triggerContentEl = this.dropdown.querySelector('#triggerFocus'); // remove all existing rendered value(s) triggerContentEl.querySelectorAll('auro-menuoption, [valuestr]').forEach((elm) => { @@ -399,15 +411,15 @@ export class AuroSelect extends LitElement { super.performUpdate(); if (this.validity && this.validity !== 'valid') { - this.shadowRoot.querySelector('auro-dropdown').setAttribute('error', ''); + this.dropdown.setAttribute('error', ''); } else { - this.shadowRoot.querySelector('auro-dropdown').removeAttribute('error'); + this.dropdown.removeAttribute('error'); } if (this.disabled) { - this.shadowRoot.querySelector('auro-dropdown').setAttribute('disabled', ''); + this.dropdown.setAttribute('disabled', ''); } else if (!this.disabled) { - this.shadowRoot.querySelector('auro-dropdown').removeAttribute('disabled'); + this.dropdown.removeAttribute('disabled'); } if (this.noCheckmark) { @@ -517,7 +529,7 @@ export class AuroSelect extends LitElement { : undefined }; - - + ${!this.validity || this.validity === undefined || this.validity === 'valid' ? html` diff --git a/src/dropdownVersion.js b/src/dropdownVersion.js new file mode 100644 index 0000000..edcd620 --- /dev/null +++ b/src/dropdownVersion.js @@ -0,0 +1 @@ +export default '3.0.0-beta.2' \ No newline at end of file diff --git a/src/style.scss b/src/style.scss index 39f9a51..8c9ca92 100644 --- a/src/style.scss +++ b/src/style.scss @@ -27,7 +27,9 @@ } :host { - auro-dropdown { + [auro-dropdown] { + position: relative; + &::part(trigger) { min-height: var(--ds-size-500, $ds-size-500); max-height: var(--ds-size-500, $ds-size-500); diff --git a/test/auro-select.test.js b/test/auro-select.test.js index 1991b40..494a9a1 100644 --- a/test/auro-select.test.js +++ b/test/auro-select.test.js @@ -20,7 +20,7 @@ describe('auro-select', () => { it('toggles the bib on click', async () => { const el = await defaultFixture(); - const dropdown = el.shadowRoot.querySelector('auro-dropdown'); + const dropdown = el.shadowRoot.querySelector('[auro-dropdown]'); const trigger = dropdown.querySelector('[slot="trigger"]'); trigger.click(); @@ -33,7 +33,7 @@ describe('auro-select', () => { it('tabbing away from the element closes the bib', async () => { const el = await defaultFixture(); - const dropdown = el.shadowRoot.querySelector('auro-dropdown'); + const dropdown = el.shadowRoot.querySelector('[auro-dropdown]'); const trigger = dropdown.querySelector('[slot="trigger"]'); trigger.click(); @@ -49,7 +49,7 @@ describe('auro-select', () => { it('Navigates the menu with arrow keys', async () => { const el = await defaultFixture(); - const dropdown = el.shadowRoot.querySelector('auro-dropdown'); + const dropdown = el.shadowRoot.querySelector('[auro-dropdown]'); const trigger = dropdown.querySelector('[slot="trigger"]'); trigger.click(); @@ -112,7 +112,7 @@ describe('auro-select', () => { await elementUpdated(el); - const dropdown = el.shadowRoot.querySelector('auro-dropdown'); + const dropdown = el.shadowRoot.querySelector('[auro-dropdown]'); const triggerContentHTML = dropdown.querySelector('#triggerFocus').innerHTML; await expect(el.optionSelected).to.be.equal(undefined);