In this web devleopment tutorial we look to upgrade our ScrollToTop Custom Element. It needs the Lit-Element, PikaWeb (to Snowpack )and Typescript packages updated. So we walk through from extracting the project from Github to performing these upgrades and then committing the changes back into Github.
The LitElement upgrade has one breaking change which is that the decorators are no longer in the main package, so we need to import from the distinct decorators module.
SnowPack was quite straightforward just needed to remove all the PikaWeb references in the package.json. Then change our script import in index.html to be of type module and to reference the .JS extension rather than the .TS extension
Typescript was a simple update from V3 to V4 - just needed to change the version in the package.json to allow us to upgrade the major version. We specified a '*' here for the version to allow this to take place.
The upgrade for Typescript we found by using the npm 'outdated' command.
Next up will look to progress the Snowpack upgrade so that it uses the SkyPack CDN and we go NPM less!
Watch video Custom Element upgrade NPM packages demo online without registration, duration hours minute second in high quality. This video was added by user A shot of code 13 January 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 167 once and liked it 8 people.