Upgrading from the rui-wc Package

If you’re upgrading an application that uses the web components (i.e. you previously imported the rui-wc package), there is a one-time set of upgrade steps that you must perform in order to adopt this release.

Before getting started

• Your application must be upgraded to the 2023.0.0 release before beginning this upgrade.
• If anything looks incorrect to you after the upgrade, please first check your HTML and verify that you’re using the correct tag names, property names, and property values.
  • In our guided upgrades we encountered one app that was using incorrect property values that just happened to work in the past, but which no longer continued to work after the upgrade (which is not unexpected).
• If your app uses the internal HTML+CSS for any component instead of the component API, that will break with this upgrade. Your app should be using the components directly. Component internals are private and are subject to change from release to release.
  • In our guided upgrades we encountered one app that was using internal HTML and CSS in the nav bar rather than the components. Their nav bar only looked correct after they switched to using the actual components.

.npmrc

• Add the following to your .npmrc file to define the @jkhy scope. If your application has a local .npmrc file, make this change in there. Otherwise make this change to the global .npmrc file in the user folder for your operating system.

@jkhy:registry=https://jackhenry.pkgs.visualstudio.com/_packaging/JHAResponsiveControlsPackage/npm/registry/
always-auth=true

• You should keep the existing @jha scope in this file if you will still need to install the older rui-wc or rui-angular packages in other repos.
• Your existing personal access token (PAT) will work with this new scope.

package.json

Responsive UI deploys new package names as of release 8.0, so you must update the package name in package.json in addition to updating the version number.

• Replace "@jha/rui-angular": "x.y.z" with "@jkhy/responsive-ui-angular": "9.2.0" in the package dependencies section.
• Replace "@jha/rui-wc": "x.y.z" with "@jkhy/responsive-ui-wc": "9.2.0" in the package dependencies section.

Other code

• Do a mass replace of all instances of @jha/rui-wc with @jkhy/responsive-ui-wc throughout your application.
  • This will update any view-level TypeScript that imported Responsive UI Javascript to use the new packages.
  • If your code is in a monorepo with multiple projects and you’re only upgrading one of those projects, you’ll want to be careful to scope the search/replace to only the project(s) that you want to upgrade.
• Do a second mass replace of all instances of @jha/rui-angular with @jkhy/responsive-ui-angular throughout your application.
  • This will update any view-level TypeScript that imported Responsive UI Javascript to use the new packages.
  • If your code is in a monorepo with multiple projects and you’re only upgrading one of those projects, you’ll want to be careful to scope the search/replace to only the project(s) that you want to upgrade.
• If your application references any of the Responsive UI CSS variables, you will need to add an rui prefix to each of these references.
  • You can tell if your app is referencing CSS variables by doing a search for var(-- in your app’s code. If you don’t find any matches, then there’s nothing more to do here.
  • Each CSS variable now has a rui prefix that acts as a namespace.
  • For example, if you previously referenced the --line CSS variable using var(--line), you would change that to var(--rui-line).
  • If your application is only referencing CSS variables from Responsive UI, you can do a mass replace to replace var(-- with var(--rui-.

Build and test your app

• Change directory into your application’s main directory.
• If this is an Angular app, delete the .angular folder to avoid Angular caching.
• Delete the node_modules folder.
• Delete the package-lock.json file.
• Run npm install to install package dependencies.
  • The new package has a dependency on lodash that will result in a CommonJS warning. You can suppress this warning by adding it to the allowedCommonJsDependencies section of your angular.json file.
• Build and examine your application using your normal processes.
• Contact us with any questions.