Beta tech debt #72
Beta tech debt #72
Conversation
BREAKING CHANGE: trigger major release for color theme support #64
Reviewer's Guide by SourceryThis pull request focuses on updating the auro-card component to improve version control, enhance compatibility, and refactor some of the code. The changes include introducing a new method for registering components, updating dependencies, and making adjustments to improve the component's flexibility and performance. Sequence diagram for component registration processsequenceDiagram
participant Developer
participant RuntimeUtils
participant AuroCard
Developer->>RuntimeUtils: import { AuroCard }
Developer->>RuntimeUtils: registerComponent('custom-card', AuroCard)
RuntimeUtils->>AuroCard: Define custom element
AuroCard-->>RuntimeUtils: Custom element defined
RuntimeUtils-->>Developer: Custom element ready for use
Class diagram for updated AuroCard componentclassDiagram
class AuroCard {
+LitElement
+role: article
+runtimeUtils: AuroLibraryRuntimeUtils
+hyperlinkTag: String
+firstUpdated()
+render() HTML
}
class AuroLibraryRuntimeUtils
class AuroDependencyVersioning {
+generateTag(componentName, version, component)
}
AuroCard --> AuroLibraryRuntimeUtils
AuroCard --> AuroDependencyVersioning
AuroCard --> AuroHyperlink
AuroDependencyVersioning --> AuroHyperlink
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @jordanjones243 - I've reviewed your changes - here's some feedback:
Overall Comments:
- The removal of color definitions for labels in .github/settings.yml seems unintentional. Could you clarify if this was meant to be part of this PR?
Here's what I looked at during the review
- 🟢 General issues: all looks good
- 🟢 Security: all looks good
- 🟡 Testing: 2 issues found
- 🟡 Complexity: 1 issue found
- 🟡 Documentation: 3 issues found
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| @@ -40,15 +40,15 @@ describe('auro-card', () => { | |||
| }); | |||
|
|
|||
| it('auro-hyperlink is rendered when `href` attribute is present', async () => { | |||
| const el = await fixWebComponent( "/"); | |||
| const link = el.shadowRoot.querySelectorAll('auro-hyperlink'); | |||
There was a problem hiding this comment.
question (testing): Update test to use attribute selector instead of tag name
The test has been updated to use an attribute selector '[auro-hyperlink]' instead of the tag name 'auro-hyperlink'. While this change aligns with the implementation, it's important to ensure that this new selector correctly identifies the hyperlink element in all scenarios.
| @@ -40,15 +40,15 @@ describe('auro-card', () => { | |||
| }); | |||
|
|
|||
| it('auro-hyperlink is rendered when `href` attribute is present', async () => { | |||
There was a problem hiding this comment.
suggestion (testing): Add test for dynamic tag generation
With the introduction of dynamic tag generation using this.hyperlinkTag, it would be beneficial to add a test that verifies the correct tag is being generated and used based on the version. This ensures that the new versioning logic is working as expected.
it('auro-hyperlink is rendered when `href` attribute is present', async () => {
const el = await fixWebComponent("/");
const link = el.shadowRoot.querySelector('auro-hyperlink');
expect(link).to.exist;
});
it('generates correct hyperlink tag based on version', async () => {
const el = await fixWebComponent("/");
el.version = '2.0';
await el.updateComplete;
const link = el.shadowRoot.querySelector('auro-hyperlink-v2');
expect(link).to.exist;
});
|
|
||
| ### Recommended Use and Version Control | ||
|
|
||
| There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-card` custom element is defined automatically. |
There was a problem hiding this comment.
issue (documentation): Typo: 'custom clement' should be 'custom element'
|
|
||
| ### Recommended Use and Version Control | ||
|
|
||
| There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-card` custom element is defined automatically. |
There was a problem hiding this comment.
issue (documentation): Typo: 'custom clement' should be 'custom element'
| import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; | ||
|
|
||
| RuntimeUtils.default.prototype.registerComponent('custom-card', AuroCard); |
There was a problem hiding this comment.
question (documentation): Unusual usage of RuntimeUtils.default.prototype.registerComponent
Is this the correct way to use the registerComponent method? It seems unusual to access it via default.prototype. Could you clarify if this is the intended usage?
| import { LitElement, html } from "lit"; | ||
| /* eslint-disable lit/no-invalid-html, lit/binding-positions */ | ||
|
|
||
| import { LitElement} from "lit"; |
There was a problem hiding this comment.
issue (complexity): Consider refactoring to use a base component for common functionality.
While the changes introduce important functionality for dependency management and versioning, they significantly increase the complexity of the AuroCard component. We suggest refactoring to reduce complexity while maintaining the desired functionality:
-
Move versioning and runtime utilities to a higher level:
Instead of importing and initializing these in each component, consider creating a base component or mixin that handles these concerns:import { LitElement } from "lit"; import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; export class AuroBaseElement extends LitElement { constructor() { super(); this.runtimeUtils = new AuroLibraryRuntimeUtils(); this.versioning = new AuroDependencyVersioning(); } firstUpdated() { this.runtimeUtils.handleComponentTagRename(this, this.tagName.toLowerCase()); } getVersionedTag(tagName, version, component) { return this.versioning.generateTag(tagName, version, component); } }
-
Simplify the AuroCard component by extending the base element:
import { html } from 'lit/static-html.js'; import { AuroBaseElement } from './AuroBaseElement.js'; import { AuroHyperlink } from '@aurodesignsystem/auro-hyperlink/src/auro-hyperlink.js'; import hyperlinkVersion from './hyperlinkVersion'; export class AuroCard extends AuroBaseElement { constructor() { super(); this.setAttribute('role', 'article'); this.hyperlinkTag = this.getVersionedTag('auro-hyperlink', hyperlinkVersion, AuroHyperlink); } // ... rest of the component code }
This approach maintains the functionality while reducing complexity in individual components. It centralizes the handling of cross-cutting concerns like versioning and runtime utilities, making the code more maintainable and easier to understand.
|
🎉 This PR is included in version 4.0.0-beta.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Alaska Airlines Pull Request
Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
Resolves: #64, #70
Summary:
Please summarize the scope of the changes you have submitted, what the intent of the work is and anything that describes the before/after state of the project.
Type of change:
Please delete options that are not relevant.
Checklist:
By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.
Thank you for your submission!
-- Auro Design System Team
Summary by Sourcery
Refactor the auro-card component to enhance version control and flexibility by introducing a method for registering custom components with unique names. Update documentation and tests to reflect these changes, and remove deprecated Husky hook lines. Additionally, update design tokens and web core stylesheets to newer versions.
New Features:
Enhancements:
Documentation:
Tests:
Chores: