WIP: Feature/migration

[ghost]

Please, check this PR. This is not final and need a lot of check and rework, can do it together.
Commits didn't squash just to look the history of this.

[tychenjiajun]

Wow. Moving from node-sass to dart-sass is exactly what I'm planning to do. Thank you for your contribution!
Are you going to migrate the whole project to mdc-web 5.0? There's a lot of things to do and I think it's better to do it component by component and make a PR for every component update.

[ghost]

@tychenjiajun I want to help if no objections. For now, no changes in components, except string templating in some places.
Changed only webpack configuration a little bit and added aliases
I plan to stabilize branch for migration(5.x) and fast review whole components. After detailed review each component step by step and merge in (5.x) branch. After this I hope can be planned to merge in master

[ghost]

@tychenjiajun check please one more time. What do you think about that configuration?
I'm not sure it can be comfortable for everyone but from my perspective looks up to date.
I have added a storybook, very comfortable for using and checking whole components. There are a lot of places to play around...

[tychenjiajun]

@qtx4k Do you mean Storybook? I haven't used it before so I need some time to dig into it. It looks nice at my first sight. So keep going with it. I'll keep an eye on your commits.
If you have any further questions, feel free to continue commenting here.

[ghost]

@tychenjiajun yes, from my branch can check how it looks like in any time
yarn storybook
also, a little bit confused with yarn/npm. yarn more comfortable with workspaces and in contribution guideline yarn, but yarn.lock in .gitignore, move fully to yarn ? :)

Any ideas about what need to keep in mind?

[tychenjiajun]

@qtx4k Personally I prefer yarn. But migrating from npm to yarn may affect the Circle CI which runs under @matsp 's account. It's better to ask for his approvement.

[ghost]

Migrate Vuepress to dart-sass as far as I see blocked by sass-loader issue #804

[tychenjiajun]

Some of my thoughts about the upcoming version:

1. We should follow the BEM methodology. Only the mdc-xxx-yyy kinds of stuff can be implemented as Vue component. mdc-xxx-yyy--modifier should be Vue props and mdc-xx-yyy__element should be in the slots. This means

<m-tab-bar>
  <m-tab></m-tab>
</m-tab-bar>

should be deprecated and use

<m-tab-bar>
  <m-tab-scroller>
    <m-tab></m-tab>
  </m-tab-scroller>
</m-tab-scorller>

instead. And <m-card-primary-action> should be removed. User should use <div class="mdc-card__primary-action" v-ripple> instead.

2. Expose methods to be called by users. The is the only way (I think) to resolve issues like [Menu]: Hoist To Body property isn't reactive #335
3. Use provide/inject in some components's instantiation process. I've done this in many of the existing components but not all of them.

I'm not going to add new functions or improvements in the current version ( based on mdc-web 3.2.0) any more. So I think it's time to release a new and final version based on 3.2.0 @matsp .

[tychenjiajun]

@qtx4k

I have a problem starting the storybook

> start-storybook

info @storybook/vue v5.3.14
info 
ERR! /home/jiajunc/WebstormProjects/material-components-vue/build/webpack.config.common.js:1
ERR! import path from 'path'
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module

[tychenjiajun]

@qtx4k Are you still working on it? If you're using a new account, we'll close this PR and you can open a new one.

[tychenjiajun]

@matsp I think this PR and be merged into a new branch, maybe next. I'll try working on it. And I hope a new version can be released based on the current master branch.

[matsp]

@tychenjiajun Okay, I will release a new version this weekend :)

[tychenjiajun]

inactive