AlaskaAirlines / auro-avatar

Custom element for the purpose of displaying an avatar image.
https://auro.alaskaair.com/components/auro/avatar
Apache License 2.0
1 stars 0 forks source link

Update to Lit2.0, TS support, issue templates, component registration extension #38

Closed blackfalcon closed 1 year ago

blackfalcon commented 1 year ago

Is your feature request related to a problem? Please describe.

The badge element is built using Lit1.0 and related dependencies. The element does not support typescript users. Issue templates and github settings in this repo are outdated. The current badge element is well behind recent versions of core support functions.

This repo does not support TS users.

This repo's issue templates are out of date.

This repo does not support component extension.

Describe the solution you'd like

Update to Lit2.0

Using a Node 18 environment, update all other dependencies. This may include deleting and rebuilding the package-lock.json file and node_modules/ directory then running npm run i to recreate all resources.

Update component registration

Update the following core features of the badge element

  1. Remove the element definition from the element .js file and place into index.js file
  2. Update rollup dependencies and configs to support the new import model

Update typescript support

Update the repo to support typescript. The solution is to use the typescript npm package, add a types npm build script and create a tsconfig.json file.

tsconfig.json example

{
  "include": ["src/**/*.js"], // process the generated JS files from the src js files 
  "exclude": [],
  "compilerOptions": {
    // Tells TypeScript to read JS files, as
    // normally they are ignored as source files
    "allowJs": true,
    // Generate d.ts files
    "declaration": true,
    // This compiler run should
    // only output d.ts files
    "emitDeclarationOnly": true,
    "outDir": "dist",
    // go to js file when using IDE functions like
    // "Go to Definition" in VSCode
    "declarationMap": true
  }
}

Update the repo's ISSUE TEMPLATES

  1. update: .github/ISSUE_TEMPLATE/bug_report.md
  2. update: .github/ISSUE_TEMPLATE/feature_request.md
  3. update: .github/ISSUE_TEMPLATE/general-support.md
  4. update: .github/settings.yml
  5. delete: .github/ISSUE_TEMPLATE/develop-design-story.md
  6. delete: .github/ISSUE_TEMPLATE/audit.md
  7. delete: .github/ISSUE_TEMPLATE/new_wc.md
  8. delete: .github/ISSUE_TEMPLATE/parent-design-story.md
  9. delete: .github/ISSUE_TEMPLATE/review-design-story.md
  10. delete: .github/ISSUE_TEMPLATE/symbol-design-story.md
  11. delete: .github/ISSUE_TEMPLATE/user-story.md

When reviewing code from the previous issue commit, be sure to include this commit as well. https://github.com/AlaskaAirlines/auro-badge/commit/fdaddcc8d314decfa891a1930ba90d31293943f2

Remvoe legacy build files and dependencies

  1. Delete Sass files from demo dir
  2. Remove npm build scripts for any demo Sass
  3. Remove all npm scripts related to building a demo in a ./build dir and delete ./scripts/prepForBuild.js
  4. Update dependencies to match package.json in the Auro Generator
  5. Remove all references to focus-visible and @webcomponents/webcomponentsjs
  6. Update to chalk v.5 and update all files that use chalk as a dependency
  7. Update ./scripts/postCss.js to match the version in the Auro Generator and remove all unused dependencies from the package.json
  8. Delete ./scripts/removeNonRemPlugin.js
  9. Delete ./index.html

Update the README

Update the Install bundled assets from CDN section to match that of the Auro Generator templates. Remove references to any es5 module support.

Update the settings.yml

Update ./github/settings.yml to match the Auro Generator

Update Test and Publish

Update .github/workflows/testPublish.yml to match the Auro Generator

Exit criteria

This issue will be considered closed once the repo is updated to Lit2.0 and all features and tests operate as expected with all other dependencies updated as well.

This issue can be closed once a .d.ts file is created with the build.

This issue can be closed once the issue templates match the content from the generator repo.

This issue will not be considered complete once the listed core features are updated along with all associated dependencies and all features work as previously expected with node 18 installed.

This issue was copied from #66 by @blackfalcon.

This issue was copied from #57 by @blackfalcon.