Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add AMD support #5306

Open
numediaweb opened this issue Oct 27, 2017 · 6 comments
Open

Add AMD support #5306

numediaweb opened this issue Oct 27, 2017 · 6 comments

Comments

@numediaweb
Copy link

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:
#653
https://github.com/noodny/materializecss-amd

@tomscholz
Copy link
Contributor

Related: #634

@numediaweb
Copy link
Author

numediaweb commented Oct 27, 2017

@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
Copy link

tdamir commented Oct 30, 2017

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
Copy link
Author

numediaweb commented Oct 30, 2017

@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
Copy link
Owner

Dogfalo commented Oct 31, 2017

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"
    })
  ]

@Dogfalo Dogfalo closed this as completed Oct 31, 2017
@numediaweb
Copy link
Author

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

@Dogfalo Dogfalo reopened this Nov 2, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants