Materialize css

[guybedford]

From jspm/jspm-cli#536 -

Hi there,

I'm having a hard time getting something fairly basic to work and hoping for a nudge in the direction. The issue is similar to another issue but the information listed on the ticket don't seem to help me.

I pushed a test repo up as a discussion point and will outline my issues referencing the lines of code in there. I want to load the main JS file from materializecss and with my current code, I get an error: Uncaught ReferenceError: jQuery is not defined

1. After going through the basic jspm setup, I tried installing with this command:
   jspm install github:dogfalo/materialize -o "{ main: 'js/bin/materialize.js', shim: { 'js/bin/materialize.js': ['jquery'] } }" However, running this command (or just jspm install github:dogfalo/materialize) doesn't seem to describe any hard dependency on jquery in either package.json or config.js
2. I tried manually defining a shim to describe the hard dependency
3. If I try to define information within package.json, any jspm install command removes the changes for whatever reason (tried what is described here)

I'd absolutely love any pointers or tips on how to solve this seemingly simple problem.

Thanks

[guybedford]

@chrisronline have a look at Bootstrap as an example - https://github.com/jspm/registry/blob/master/package-overrides/github/twbs/bootstrap%403.1.0.json.

Note that the shim only defines the modular dependency. It is like writing require in your code. You still need to add the package.json dependency property as well to ensure that dependency is installed and present in the app.

[chrisronline]

Thanks @guybedford.

I think I'm understanding more about this. If I install the library with this command:

jspm install github:dogfalo/materialize -o "{ main: 'js/bin/materialize.js', shim: { 'js/bin/materialize.js': ['jquery'] }, format: 'global', dependencies: { 'jquery': '*' }, registry: 'jspm'}"

It generates this in the .jspm.json:

"jspm": {
    "main": "js/bin/materialize.js",
    "shim": {
      "js/bin/materialize.js": [
        "jquery"
      ]
    },
    "format": "global",
    "dependencies": {
      "jquery": "*"
    },
    "registry": "jspm"
  }

However, when I open js/bin/materialize.js, I do not see any dependency line - only:

/* */ 
"format global";

I know the modified js/bootstrap file from twbs contains these lines:

/* */ 
"format global";
"deps jquery";
"deps ../css/bootstrap.css!";
"exports $";

The configs looks identical to me - what am I missing?

A side note - if I install with no global option, it defaults to amd. Is that the default or is jspm scanning the source of the main file to determine the module format?

Thanks

[guybedford]

You need to remove the .js extension from the module name in the shim config.

Yes jspm is scanning the sources to guess the module format when none is set.

[chrisronline]

Perfect. Works now.

What is the recommendation for handling this installation configs across machines/developers? Can I commit the custom installation into source control somehow? Like, in my example, I don't see where my setting the format to global exists anywhere outside of the .jspm.json file. Are we supposed to register the changes in this registry? Ask the maintainer to add something in the package.json?

[guybedford]

The recommendation is to send a PR to the jspm registry at https://github.com/jspm/registry/ so that all users can share this configuration. We're going to have workflows to make this better in future, but for now it has to be a manual PR.

[chrisronline]

Sounds good. Thanks for the help @guybedford

[zeeshanjan82]

Hi, I need to install materialize framework in my project and I am using jspm. When I issue the command:
jspm install github:dogfalo/materialize -o "{ main: 'js/bin/materialize.js', shim: { 'js/bin/materialize.js': ['jquery'] }, format: 'global', dependencies: { 'jquery': '*' }, registry: 'jspm'}"
I get an error: error getting package config for github:dogfalo/materialize

also is the command correct if I need to install the materialize framework through jspm

[guybedford]

@zeeshanjan82 you can also include your override in the package.json via:

override.json

{
  "main": "js/bin/materialize.js",
  "shim": {
    "js/bin/materialize.js": [
      "jquery"
    ]
  },
  "format": "global",
  "dependencies": {
    "jquery": "*"
  }
}

jspm install github:dogfalo/materialize -o override.json

[zeeshanjan82]

Thanks @guybedford but I am still getting the same error as yesterday. I have attached the screeshot

[guybedford]

@zeeshanjan82 yes the package.json file at https://github.com/Dogfalo/materialize/blob/v0.97.0/package.json#L14 is badly formatted. I think throwing here is the right thing to do actually. Perhaps post an issue on the project page for this repo.

[tlvenn]

Package.json has been fixed and they recreated the 0.97 tag so you can now jspm install it properly.

[zeeshanjan82]

Thanks @tlvenn and @guybedford I have tried and it works well now. I appreciate your help.

[zeeshanjan82]

Facing this issue. jspm/demo-es6#15

[zeeshanjan82]

Have fixed the issue, just had to import jquery.

[imvecino]

Hi,

I'm new to this and would like to know if materializecss can be used when also using Aurelia. So far what I've done that's running is jspm init on my root, install Aurelia and create the app.js but already importing aurelia-bootstrapper. From here everything works fine.

However, when I try using materializecss after installing it with jspm install github:dogfalo/materialize or with the options from the first comment, materializecss does not seem to work.

To test this, what I did was to copy the sample from the materializecss collapsible sample markup enclosed in template tags in my app.html file like this:

• filter_dramaFirst

  Lorem ipsum dolor sit amet.

• placeSecond

  Lorem ipsum dolor sit amet.

• whatshotThird

  Lorem ipsum dolor sit amet.

and also pasted this line inside the head section of the index.html file so that I can use the icons:

link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"

When I browse the index.html file it renders the collapsible javascript component but nothings happens when I click on any of the component's headers It's supposed to show the collapsible body.

Please let me know how to fix this. I have been trying almost every night for several days but I can't seem to make it work.

[petersgiles]

@imvecino I used this command, You probably want to make sure there's not artefacts from previous attempts laying around.

jspm install materialize=github:Dogfalo/materialize@master

[fernandogmar]

I got some problems with 0.17.0-beta.38 intalling [email protected]
This is what I did, in case it helps anyone with the same problems:

jspm install materialize-css=npm:materialize-css -o '{format: "global", "main": "bin/materialize.js", shim: { "bin/materialize": ["jquery"] }}'