@aurodesignsystem/auro-library

Auro-Library

This repository holds shared scripts, utilities, and workflows utilized acorss repositories along the Auro Design System.

Scripts

Publish Surge Demo

This repository holds shared scripts, utilities, and workflows utilized acorss repositories along the Auro Design System.

Surge Demo Teardown

Dependency Tag Versioming

This workflow works to automatically delete and clear any surge demos that have been active for more than 2+ months. Surge in theory allows us to have an infinite amount of active pages but by clearing unused and stale demos we can keep our Surge account more organized in the future.

Note: This workflow exectutes on a monthly cronjob on the first of each month.

In order to clear all our surge projects we rely on this GitHub Action to handle the deletion logic.

Dependency Tag Versioning

Dependency Tag Versioming

This is a two part utility for the purpose of generating a custom string for dependency component tag naming. This is important to prevent version conflicts when multiple versions of a given Auro component may be loaded on a single page.

Note: The example configuration used below in all code samples assumes auro-dropdown is the dependency component. Substitute any Auro component in the example code as needed.

Part 1: The Build

Configuration

1. Create a new file ./scripts/version.js with the following content:

const versionWriter = require("./versionWriter"); // need to update this with the right path when used from node_modules

versionWriter.writeDepVersionFile('@aurodesignsystem/auro-dropdown'); // duplicate this line for each Auro dependency.

1. Add the following script to the component package.json file:

"build:version": "node scripts/version.js"

1. The build:version script in package.json should be added as the first step of the build script.

"build": "npm-run-all build:version ... etc.",

Execution

Once configuration is complete, execute npm run build. This must be done once before npm run dev when developing locally. When Auro dependencies are initially installed or updated to new versions then npm run build:version or a complete npm run build must be executed.

Upon execution of build:version, for each Auro dependency defined in the ./scripts/version.js file, a new JS file will be created that contains the installed version of the dependency.

For example, following these steps:

1. Run npm i @aurodesignsystem/auro-dropdown@1.0.0
2. add the following to the ./scripts/version.js script file:

versionWriter.writeDepVersionFile('@aurodesignsystem/auro-dropdown');

1. Run npm run build

Will result in:

• A new file created: ./src/dropdownVersion.js
• File content will export the version of the component installed. In this case: export default '1.0.0'

Part 2: The Runtime

Configuration

In the main component JS file located in the ./src directory add the following:

import { AuroDependencyVersioning } from "../scripts/dependencyTagVersioning.mjs";
import { AuroDropdown } from '@aurodesignsystem/auro-dropdown/src/auro-dropdown.js';
import dropdownVersion from './dropdownVersion';

In the components constructor add the following:

const versioning = new AuroDependencyVersioning();
this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);

In the component properties add the following:

/**
 * @private
 */
dropdownTag: { type: Object }

Usage

The new dynamically named version of auro-dropdown may now be used in your component template as follows:

render() {
  return html`
    <div>
      <${this.dropdownTag}></${this.dropdownTag}>
    </div>
  `;
}

When the component is rendered during runtime the DOM will now show up as follows:

<div>
  <auro-dropdown_1_0_0></auro-dropdown_1_0_0>
</div>

Note: the numbers attached in the tag name will match the version of the dependency that was installed.

Accessing the dynamically named element with JS

The dynamic component is accessible using a the following string in a JS query selector: `this.dropdownTag._$litStatic# Auro-Library

This repository holds shared scripts, utilities, and workflows utilized acorss repositories along the Auro Design System.

Scripts

Publish Surge Demo

This repository holds shared scripts, utilities, and workflows utilized acorss repositories along the Auro Design System.

Surge Demo Teardown

Dependency Tag Versioming

This workflow works to automatically delete and clear any surge demos that have been active for more than 2+ months. Surge in theory allows us to have an infinite amount of active pages but by clearing unused and stale demos we can keep our Surge account more organized in the future.

Note: This workflow exectutes on a monthly cronjob on the first of each month.

In order to clear all our surge projects we rely on this GitHub Action to handle the deletion logic.

Dependency Tag Versioning

firstUpdated() {
  this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
};

Sync All Templates

How to Run the syncAllTemplates.mjs Script

To run the syncAllTemplates.mjs script, you will need to add a new node script into the linked component and point that to the syncAllTemplates.mjs file. You can individually run the workflow configurations by pointing to the syncAllTemplates.mjs file and adding a --github parameter after the path. The same can be done for the linter configurations by adding a --linters parameter.

Example Calls

// Default
"syncTemplates": "./node_modules/@aurodesignsystem/auro-library/scripts/config/syncAllTemplates.mjs"

// Only sync github workflow templates
"syncTemplates": "./node_modules/@aurodesignsystem/auro-library/scripts/config/syncAllTemplates.mjs --github"

// Only sync linter configuration templates
"syncTemplates": "./node_modules/@aurodesignsystem/auro-library/scripts/config/syncAllTemplates.mjs --linters"

Changelog

2.5.1 (2024-02-07)

Bug Fixes

• update reference to index.md (e504708)