奥罗图书馆

该存放处拥有Auro设计系统各存放处共用的脚本、公用事业和工作流程.

脚本

发布 Surge Demo

这是一个使用 GitHub 动作生成突起演示的自动化工作流程 。 在对公关作任何修改时,将会在公关上添加或更新一个与演示内容相类似的链接:

Surge demo deployment succeeded! 🚀🚀🚀

[Auro Web Component Generator](https://surge.sh/)

此工作流程使用文件 ./scripts/config/useBundles.js 以更新演示 HTML 文件,以使用组件的捆绑版本,从而能够在突起时静态支持它们.

要将这个功能添加到 auro 组件中, 您只需要将以下片段添加到 publishDemo.yml 文档中 ./.github/workflows 目录.

name: Deploy Demo

on:
  pull_request:
    branches: [ main ]


jobs:
  call-publish-demo-workflow:
    uses: AlaskaAirlines/auro-library/.github/workflows/publishDemo.yml@main
    secrets:
      SURGE_TOKEN: ${{secrets.AURO_SURGE_TOKEN}}

说明: 这只会在位于“阿拉斯加空行”组织的组件中正常工作,因为依赖于整个 Org 行动的秘密 AURO_SURGE_TOKEN。 。 。 .

之后,您将想要确保更新您想要的脚本标签, 在您的捆绑中替换 ./demo/*.html 带有 data-demo-scripts="true" 属性.

--    <script type="module" src="../index.js"></script>
++    <script type="module" src="../index.js" data-demo-script="true"></script>

注意: 如果您未能做到这一点, 组件将无法在您的演示中注册 .

猛烈降级

这个工作流程可以自动删除并清除任何活动超过2+月的突起演示. 理论上的突起可以让我们有无限数量的活页,但是通过清理未使用和被打磨的演示,我们在未来可以更组织地保存我们的突起账户.

说明: 这个工作流程在每月第一个月的月工作上执行.

为了清理我们所有的激增项目 此 GitHub 动作 用于处理删除逻辑.

依赖性标签版本

这是用于生成依赖组件标记命名自定义字符串的两部分工具. 这对防止 版本冲突 当一个给定的Auro组件的多版本可能被装入一页时.

说明: 下面所有代码样本中使用的示例配置假设 auro-dropdown 是依赖部分。 根据需要替换示例代码中的任何Auro组件.

第1部分:建筑

配置

1. 创建新文件 ./scripts/version.js 内容如下:

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.

2. 在组件中添加以下脚本 package.json 文件 :

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

3. 这个 build:version 脚本在 package.json 应作为第一个步骤添加 build 剧本.

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

执行

一旦配置完成, 执行 npm run build。必须在此之前完成一次 npm run dev 在本地开发时。 当Auro依赖性被初始安装或更新到新版本时 npm run build:version 或一个完整 npm run build 必须执行.

执行时 build:version中定义的 Auro 依赖 ./scripts/version.js 文件,将创建一个包含已安装的依赖性版本的新JS文件.

例如,遵循这些步骤:

1. 运行 npm i @aurodesignsystem/[email protected]
2. 添加以下内容: ./scripts/version.js 脚本文件 :

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

3. 运行 npm run build

将导致:

• 创建新文件 : ./src/dropdownVersion.js
• 文件内容将导出已安装组件的版本 。 在这种情况下: export default '1.0.0'

第二部分:运行时间

配置

在主要组成部分JS档案中 ./src 目录添加以下内容:

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

在组件构造器中添加以下内容:

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

在组件属性中增加以下内容:

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

使用量

新的动态命名版本 auro-dropdown 可以在您的组件模板中使用如下:

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

当组件在运行期间完成时,DOM现在显示如下:

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

注意:标签名所附加的数字将匹配所安装的依赖的版本.

使用联署材料访问动态命名元素

动态组件在 JS 查询选择器中使用以下字符串可访问:

this.dropdownTag._$litStatic$

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

同步所有模板

如何运行 syncAllTemplates.mjs 脚本

要运行 syncAllTemplates.mjs 脚本,您需要将一个新的节点脚本添加到链接的组件中,并将其指向 syncAllTemplates.mjs 文档。 您可以通过指向 syncAllTemplates.mjs 文件并添加一个 --github 参数。 对linter 配置也可以增加一个 --linters 参数.

示例调用

// 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"

准备构建 api.md

如何运行 generateWcaComponent.mjs 脚本

要运行 generateWcaComponent.mjs 脚本,您需要为您想要用 WCA 处理的组件提供文件路径 。 此脚本只应在项目添加新组件后执行一次 。 在运行剧本时, .js 文件将在 scripts/wca 文件夹.

示例调用

// Common case: 1 component in 1 project
"build:api:prepare": "node ./node_modules/@aurodesignsystem/auro-library/scripts/generateWcaComponent.mjs 'src/auro-flight.js'"

// multiple components in 1 project
"build:api:prepare": "node ./node_modules/@aurodesignsystem/auro-library/scripts/config/syncAllTemplates.mjs 'src/auro-flight*.js'"

向 CEM 字段插件折旧

这个 deprecatedProseToFieldPlugin 是一个共享的 自定义元素外观 分析器插件。 它提倡在下列文字上写作的淫秽的口语: @event 财务报告和审定财务报表 @slot 标记输入机器可读 deprecated 生成字段 custom-elements.json,因此编辑工具可以打击被贬损的事件和插槽.

CEM分析器已经发出一个 deprecated 字段,用于属性和明确声明的成员 @deprecated JSDoc标签,但它确实 没有 对被宣布为内入类的事件和空档这样做 @event 编号 : @slot 标签。 此插件通过扫描每个声明的 events 财务报告和审定财务报表 slots 并且,如果说明中包含一个折旧标记((Deprecated) …, (中文(简体) ), **DEPRECATED** …或线索 deprecated 单词 :

• 套装 deprecated 标记和分隔符之后的指南文本(-, (中文(简体) ), :, (中文(简体) ), –,或 ———例如, "Use the \输入“事件”改为“事件”
• 套装 deprecated 改为 true 当传教士不作任何引导的时候.

属性和成员被故意置之不理——分析器已经给那些正确标记了. 已携带的条目 deprecated 值永远不会被覆盖.

使用量

将插件导入您的组件库 custom-elements-manifest.config.mjs 并加进 plugins 数组 :

import { deprecatedProseToFieldPlugin } from '@aurodesignsystem/auro-library/scripts/build/deprecatedProseToFieldPlugin.mjs';

export default {
  globs: ['components/**/src/*.js'],
  litelement: true,
  plugins: [deprecatedProseToFieldPlugin()]
};

重现你的 custom-elements.json 现在将用他们的指导信息标记被侵蚀的事件和时间档.