Add AMD support

[numediaweb]

When will materialize support AMD? Many modern apps use AMD loaders like RequireJs, WebPack etc..

require.config({
    baseUrl: '/resources/scripts',
    paths: {
        'jquery': '//code.jquery.com/jquery-2.1.1.min',
        'materialize': '../../build/bower_components/materialize/dist/js/materialize.min',
        'velocity': '../../build/bower_components/materialize/js/velocity.min',
        'hammerjs': '../../build/bower_components/materialize/js/hammer.min'
    },
    shim: {
        'materialize': {
            deps: ['jquery', 'hammerjs', 'velocity']
        },
        'velocity': {
            deps: ['jquery']
        }
    }
});

but at the moment this generates this note:

Velocity is already loaded. You may be needlessly importing Velocity again; note that Materialize includes Velocity.

If I remove shim => velocity I get Velocity not defined.

There were some works to make Materialize AMD but I think the projets were abandoned: https://github.com/Dogfalo/materialize/pull/653 https://github.com/noodny/materializecss-amd

[tomscholz]

Related: #634

[numediaweb]

@tomscholz That related issue is locked/closed :(

Also in the feature board no issue about AMD even though I think this is a priority: https://github.com/Dogfalo/materialize/projects/3

[tdamir]

It would be really nice to have an AMD support out of the box.

The best solution I'm aware of is to transform original source files with method described here: https://aurelia-ui-toolkits.gitbooks.io/materialize-bridge-docs/content/installation/aurelia-cli.html

Unfortunately it won't work with v0.100.2 due to a change in Materialize's loading order but it works with v0.100.1.

[numediaweb]

@tdamir I think Materialize is far away from being AMD compliant. If you check the source code you will find that there's no unique way of loading the dependencies (jquery, velocity, hammer): some are AMD and some not and they are mixed together :( Also some "components" are loaded differently:

// Materialize Toast
Materialize.toast('I am a toast!', 4000) // 4000 is the duration of the toast

// Materialize Select
$(document).ready(function() {
  $('select').material_select();
});

I think materialize needs a complete rewrite if we aim to support AMD.

[Dogfalo]

The support way to use Materialize with webpack is either by adding

import Materialize from 'materialize-css';
// OR
require('materialize-css');

or by adding Materialize as a plugin in the config

plugins: [
    new webpack.ProvidePlugin({
      Materialize: "materialize-css"
    })
  ]

[numediaweb]

@Dogfalo Thanks for the example. What about RequireJs what is the appropriate way to include Materialize?