Switching material components from sub module to npm

So after the directory refactoring. I believe there is one more thing that we can improve on. Currently in the project we are using material design web components so that there is . But when they were added first there was no npm module for the components at that time. So they were added as a git sub module untill the npm package was released.

By now. Material design web components are available on NPM. So I decided it would be a good time to switch to the npm module as I will be creating more resources as well. And I will just use the npm modules from here on and just replace the old git submodule with the npm module.

Material Web Components:

So in order to do that. The first thing we need to do is install webcomponents:

 npm i @webcomponents/webcomponentsjs

One we got the bundle.js we need to install individual material components. So I installed the following:


And updated the all the dependencies in the package.json of each component to the new ones.

Updated package.json

// Old
"@material/mwc-base": "file:../../material-components-web-components/packages/base",
// New
"@material/mwc-base": "^0.6.0",

So this one done for all components until I tried installing mwc-textfield. So that was an awts moment for me. As mwc-textfield was not available on npm. Even tho it was used in the project in the git sub module since version 0.1.0. But still it was missing.

And select was missing even in the sub module. Which seeing the demos I was wondering why the select component was not used. So it appears that select along with textfield and some other components are still under development. That’s why they are not available. According the issue #40

Although I was hoping to completely remove the sub module in favor of the npm modules. But it looks like we will have to wait a little text-field is being used by quite a few components. So for now I think we will have to keep the sub module until we have a solution for the textfield component.

So I far I have committed the changes in the refactor branch.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.