AlaskaAirlines / auro-input

Custom HTML element for inputting string data in forms
https://auro.alaskaair.com/components/auro/input
Apache License 2.0
2 stars 4 forks source link

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

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

Huskey 8

The following outlines the steps needed for updating any repo to the latest version of Husky.

  1. npx husky-init
  2. npm i @open-wc/testing@latest @web/test-runner@latest @web/dev-server@latest --save-dev
  3. npm run prepare
  4. chmod ug+x .husky/*
  5. chmod ug+x .git/hooks/*
  6. Update package.json - "test": "wtr --coverage", and "test:watch": "wtr --watch",
  7. Add web-test-runner.config.mjs
  8. Update .husky/pre-commit and necessary pre-commit actions
  9. Delete legacy Husky configs from package.json
  10. Delete karma.conf.js file
  11. Uninstall @open-wc/testing-karma

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 and add CODEOWNER file

  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
  12. new file: .github/CODEOWNERS

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

Update to support Node 18

https://github.com/AlaskaAirlines/auro-flight/blob/50854e9213f571c6137303fa466a7ea9a3df944a/package.json#L18-L20

https://github.com/AlaskaAirlines/auro-flight/blob/50854e9213f571c6137303fa466a7ea9a3df944a/.github/workflows/testPublish.yml#L18

https://github.com/AlaskaAirlines/auro-flight/blob/50854e9213f571c6137303fa466a7ea9a3df944a/.github/workflows/testPublish.yml#L40

Dart Sass

Update project and npm scripts to use the latest version of Dart Sass

Single CLI

Allow users to use a single CLI instance for development

Update to use Chalk 5

Update package and postinstall to support Chalk 5+

@aurodesignsystem

Update any current dependency and code resources to support any new element published to the @aurodesignsystem namespace.

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 #45 by @blackfalcon.