how does thememanager in 0.12.x work with meteor?

[rkstar]

i posted a comment on an issue in the react-packages repo, but i'm mentioning it here as well because i think i'm at the point where this is a problem i'm having with the new ThemeManager setup.

any help is appreciated.

[shaurya947]

@rkstar I'm not familiar with meteor, but do you have any code sample (proof of concept) that we could look at to see how it works with the new ThemeManager stuff?

@oliviertassinari @hai-cea any ideas guys? Saw @mbrookes comment on #331. Maybe he has an idea?

[mbrookes]

Sorry, I'm using it via izzilab:material-ui which is still at 0.11.0. @mrphu3074 is looking at 0.12.1 before updating given the breaking changes: mrphu3074/react-material-ui#15.

[rkstar]

@shaurya947 i was able to figure out the new thememanager setup, but i'm getting errors and problems with matching up versions of react and react-tap-event-plugin

i've added issues linked to the different commits of code here:
https://github.com/rkstar/meteor-material-ui-example/issues

[shaurya947]

@rkstar support for 0.14-rc1 is still a work in progress. We created a different branch (react-0.14-support) for it and should have something here soon hopefully.

Have you tried it with v0.12.1 of Material-UI and v0.13.3 of React?

[rkstar]

yes, that's the first commit there. the one that uses "meteor/react-packages" is using 0.13.3

what did with this repo was make different commits for the different things i've tried. they give different sets of errors, so i figured it would make sense

[mbrookes]

For kicks and giggles I installed Material-UI 0.12.1 via meteorhacks:npm & cosmos:browserify, and I don't seem to have a problem with react-tap-event-plugin.

I did have to add a require for it to app.browserify.js, which is a bit odd, as I didn't have to add it packages.json. Maybe Material-UI is pulling it down as a dependancy. I'm using react via the official Meteor package if that make a difference.

I had to stripped out all the 11.0 style ThemeManager calls and getChildContext functions to get it to work using the default theme, but I get a ton of React warnings: "owner-based and parent-based contexts differ".

It may be that for meteor you have to define a theme and pass context. But how to actually call ThemeManager in MUI 0.12.x seems to be undocumented! How did you get that to work?

[rkstar]

@mbrookes can you give a code snip? when i remove the react-tap-event-plugin from packages.json but leave my app.browserify.js file in tact, i get this:

=> Exited with code: 8                        
W20150929-14:06:27.772(-4)? (STDERR) 
W20150929-14:06:27.774(-4)? (STDERR) /Users/rkstar/dev/projects/mat/.meteor/local/build/programs/server/app/lib/config/app.browserify.js:103
W20150929-14:06:27.774(-4)? (STDERR) let injectTapEventPlugin = require("react-tap-event-plugin")           // 1
W20150929-14:06:27.774(-4)? (STDERR)     ^^^^^^^^^^^^^^^^^^^^
W20150929-14:06:27.774(-4)? (STDERR) SyntaxError: Unexpected identifier
W20150929-14:06:27.774(-4)? (STDERR)     at /Users/rkstar/dev/projects/mat/.meteor/local/build/programs/server/boot.js:241:30
W20150929-14:06:27.774(-4)? (STDERR)     at Array.forEach (native)
W20150929-14:06:27.775(-4)? (STDERR)     at Function._.each._.forEach (/Users/rkstar/.meteor/packages/meteor-tool/.1.1.9.4tzxrv++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20150929-14:06:27.775(-4)? (STDERR)     at /Users/rkstar/dev/projects/mat/.meteor/local/build/programs/server/boot.js:137:5
W20150929-14:06:31.587(-4)? (STDERR)          
W20150929-14:06:31.588(-4)? (STDERR) /Users/rkstar/dev/projects/mat/.meteor/local/build/programs/server/app/lib/config/app.browserify.js:103
W20150929-14:06:31.588(-4)? (STDERR) let injectTapEventPlugin = require("react-tap-event-plugin")           // 1
W20150929-14:06:31.589(-4)? (STDERR)     ^^^^^^^^^^^^^^^^^^^^
W20150929-14:06:31.591(-4)? (STDERR) SyntaxError: Unexpected identifier
W20150929-14:06:31.591(-4)? (STDERR)     at /Users/rkstar/dev/projects/mat/.meteor/local/build/programs/server/boot.js:241:30
W20150929-14:06:31.591(-4)? (STDERR)     at Array.forEach (native)
W20150929-14:06:31.592(-4)? (STDERR)     at Function._.each._.forEach (/Users/rkstar/.meteor/packages/meteor-tool/.1.1.9.4tzxrv++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20150929-14:06:31.592(-4)? (STDERR)     at /Users/rkstar/dev/projects/mat/.meteor/local/build/programs/server/boot.js:137:5

[rkstar]

@mbrookes here is how i got the ThemeManager to work:
https://github.com/rkstar/meteor-material-ui-example/blob/master/client/mat.jsx

and yes, the docs for that are non-existent. i had to look through the code to figure it out.

[mcevskb]

Docs about theme manager http://material-ui.com/#/customization/themes

const React = require('react');
const ThemeManager = require('material-ui/lib/styles/theme-manager');
const MyRawTheme = require('path/to/your/raw/theme/file');

const MySampleAppComponent = React.createClass({
  //the key passed through context must be called "muiTheme"
  childContextTypes : {
    muiTheme: React.PropTypes.object,
  },
  getChildContext() {
    return {
      muiTheme: ThemeManager.getMuiTheme(MyRawTheme),
    };
  },
  ...
});

[mbrookes]

@rkstar Thanks, I'll take a look.

Looking at rkstar/meteor-material-ui-example#1, do you have "externalify": "0.1.0" in packages.json?

And:

{
  "transforms": {
    "externalify": {
      "global": true,
      "external": {
        "react": "React.require"
      }
    }
  }
}

in lib/app.browserify.options.json?

[mbrookes]

@mcevskb - that (sort of) documents how to use a custom theme, but neither the README nor the docs describe how to use the built in themes as far as I can tell. The docs refer you to the release notes, which refer you back to the docs.

[mbrookes]

@rkstar, that worked for me, thanks:

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },
  getChildContext(){
    return {
      muiTheme: MUI.Styles.ThemeManager.getMuiTheme(MUI.Styles.LightRawTheme)
    }
  },

[rkstar]

i've posted a more extensive response and solution to the problem in mrphu3074/react-material-ui#15

[mbrookes]

I'd like to think it was a team effort. :)

[shaurya947]

👍

[rkstar]

what @mbrookes said