investigate a method to import single Materialize modules

[Thanood]

I think it's a good idea to combine the issues mentioned in #13 and #30 into a separate issue dedicated to gather information on loading single Materialize features and make it work using a module loader instead of loading the bundled js file.

At the moment, this issue serves for gathering information on how this can possibly be done.

[Thanood]

The following issue is full of information on how to get Materialize working with AMD. It's a litte difficult for me to follow, though. As far as I can see it doesn't solve single module loading but it may be a starting point. It also mentions the same problems I had getting it to work with System.js (importing single modules):
Dogfalo/materialize#634

Related issue: Dogfalo/materialize#1212

[Thanood]

This one could also be interesting. It's about integrating Materialize and Browserify. It mentions the same "missing hammerjs, missing picker" issues I have seen from getting unit-tests to run with the npm version.
Most interesting actually are the links inside this issue, leading to PRs.

Dogfalo/materialize#1422
Dogfalo/materialize#2302
Dogfalo/materialize#2381

I hope I'm not spamming their repo too much with all that issue-linking. 😄

[Thanood]

ng-materialize seems to remove some of Materialize's dependencies and pulls in Waves and ngAnimate separately.

[Thanood]

If anyone has a hint for searching, I'd be glad. 😄
I've already tried:

• importing single features from Materialize
• import materialize-css as single modules
• import Materialize with es6
• load Materialize with Systemjs

[Thanood]

An issue about support for a module system. Again, referenced issues in this issue are interesting.
Dogfalo/materialize#1348

[Thanood]

angular-materialize also uses the Materialize global, but uses node-materialize.

[Thanood]

So far it seems everyone is using the bundled global version in some way or the other. Issues on AMD issues split Materialize up into separate modules but always require all of them (and thus somehow combining them) to make it work.

This is a little unfortunate but it may also be a good start experimenting with it since they actually do combine them. Maybe there is a way to only combine features if necessary.

[Thanood]

Could we possibly come up with some clever systemjs config to load toasts as a single module?

It depends on Hammer and Velglobals but at least it does not require jQuery plugins loaded, like for example modal.

Could that generally be a problem? Velocity being used as a global and as a jQuery plugin in different occasions.

[isaachinman]

You guys have seen this, right? Someone has already made Materialize fully AMD. I don't see how this is such a complex issue, it's just a matter of setting up deps correctly.

[Thanood]

Thanks @isaachinman for your comment. Yes, I've seen this (the issue leading to that repo is actually linked in the first comment).
At the moment, this issue is only a collection of thoughts. So anything here has not been tried yet.
Is that repo actually able to import single Materialize features? From the comments in the issue posted as a first comment I can't derive this, and - as mentioned - we've not tried it yet. 😄

But you're right, I should have a deeper look at that repo.

The point of this issue is to provide a way with which we can import single features. Loading (all of) Materialize by a module loader is not a problem at all. What makes this complex from my point of view is:

• Future users should imo be able to use the "official" Materialize distribution.
• To be able to import single features we have to circumvent some issues of Materialize's structure (have a look at modals for example). Using the npm version of Materialize already gives some errors about missing dependencies (which need to be set up correctly, as you state).
• I'd be glad to find the "right way" to do this. 😄

But all this may come from a lack of understanding. If you have further insight, please share.
Also, of course, I'll have a look at the repo you linked.

[isaachinman]

Yes, I've personally used that AMD repo via RequireJs in a past project and it worked well. I was not interested in things like toasts and tooltips, so simply did not require those scripts. It allows for a much more modular build.

The "right way" to do this is to allow devs to create modular builds from Materialize via an npm package (imo) as this is the perfect balance of custom build and "official dist", as a quick npm install will update your project to the latest Materialize spec without any effort (as long as it's backwards compatible).

I'm actually currently using Materialize for another project, and have had to revert to using a fork as an npm package because the official Materialize package is hopelessly broken. I can't say much about the actual structure of the js (you mentioned modals), but again I don't see how it's more complicated than sorting deps and declaring them. Eg require('materialize-modal') would import the modal script, but prior to that any deps.

I'd be happy to help with this project as I'm quite fond of Materialize and would love to see it become a truly adaptable tool instead of a synchronous ~130kb script.

[Thanood]

I'd like to get some feedback from the rest of the team here. I'd be glad to see some help in this regard.. Just to be clear: Please be aware that this is not primarily an attempt to produce a modularized version of Materialize but to provide Aurelia custom components which help to use Materialize in Aurelia apps.

Having said that, rest assured that I would be glad of any help getting a working modular approach.
My first attempt on writing a unit test for the md-waves attribute failed because Materialize required a lib (Waves of course) which was included in the bundled distribution but was not available from its source. I'd really be interested in seeing that solved - without using a fork but leveraging the possibilities of jspm/systemjs as I'm still not that experienced in systemjs.

Another challenge would then be to get toasts/modals/tooltips working without depending on a Materializeglobal.
At least from my point of view it was a challenge. 😄

[Thanood]

Interesting: https://github.com/aguegu/vue-materializecss