Material-UI 12.1

[mbrookes]

is released: https://www.npmjs.com/package/material-ui

Could you update please? Thanks!

[mrphu3074]

@mbrookes of course i can. As you know, MUI have breaking changes since 0.12.x, so i need double check it before update to new ver

[mbrookes]

Thanks for the quick response. Fingers crossed there are no major problems...

[henyana]

+1

[mbrookes]

Actually, for me, the fix I need is in 0.11.1 (calendar), so if 12.x does prove problematic and is going to take a bit longer, 11.1 would be good. 👌

[mbrookes]

@mrphu3074 - I got MUI 0.12.1 working (via NPM etc), but as you hinted, if you update the package, it will break peoples apps. I guess either a note after meteor update to instruct users to change their code, or create a new package for 0.12.x

Even though 0.12.x has a default theme, there are React warnings unless it's passed as context. In a nutshell, after upgrading to MUI 0.12.x you have to:

Remove:

ThemeManager = new MUI.Styles.ThemeManager();

(App crashes otherwise.)

And change getChildContext() to:

  getChildContext(){
    return {
      muiTheme: MUI.Styles.ThemeManager.getMuiTheme(MUI.Styles.LightRawTheme)
    }
  },

(React warnings otherwise)

See: mui/material-ui#1754

[mrphu3074]

@mbrookes i can make mui 0.12.1 work well with meteor, but i having trouble with react-tap-event-plugin and meteor cannot install this module because of peerDependencies

npm ERR! Error: Problems were encountered     
npm ERR! Please correct and try again.
npm ERR! extraneous: fbjs@0.2.1 /Users/nguyenphu/Workspace/Sanbox/untitled/packages/npm-container/.npm/package-new-x8eodm/node_modules/fbjs
npm ERR! extraneous: react-dom@0.14.0-rc1 /Users/nguyenphu/Workspace/Sanbox/untitled/packages/npm-container/.npm/package-new-x8eodm/node_modules/react-dom

do you have any idea?

[mbrookes]

I think the problem is React 0.14.0 which pulls in an incompatible version of react-tap-event-plugin to the one MUI requires.

I'm using React 0.13.3 via the official meteor package.

I didn't have to add to react-tap-event-plugin to packages.json, but I did have to require it in `lib/app.browserify.js:

injectTapEventPlugin = require("react-tap-event-plugin");

[rkstar]

@mrphu3074 --> @mbrookes is right... material-ui is getting react-tap-event-plugin so you do not have to include it in your packages.json file.

i also found a couple of other interesting things here. in this issue on the react-packages repo, i referenced my app.browserify.options.json file and set "react": "Package[react-runtime].React.require" which DOES NOT WORK. this particular thing that i read from another thread makes the automatically downloaded react-tap-event-plugin throw React undefined... errors. BAD

IN ADDITION you cannot use the let keyword in your app.browserify.js file even if you have the ecmascript package added to your project. it throws Unexpected identifier errors! you have to use var or nothing and declare your vars as global.

i've posted my example repo which works with meteor 1.2.0.2 and material-ui 0.12.1 meteor-material-ui-example repo

[mrphu3074]

hi all, i completed upgrade mui to 0.12.1 without errors and compatible with meteor > 1.2.x . This is my way:

• remove react-tap-event-plugin because it duplicated. MUI 0.12 installed it
• update cosmos:browserify to 0.7.0 to support meteor > 1.2

Using ThemeManager in new version

injectTapEventPlugin();

var {
    AppCanvas,
    AppBar,
    Styles,
    RaisedButton,
    DatePicker
    } = MUI;
var { ThemeManager, LightRawTheme } = Styles;

var App = React.createClass({
    childContextTypes: {
        muiTheme: React.PropTypes.object
    },

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(LightRawTheme)
        };
    },

    render: function () {
        return (
            <AppCanvas>
                <AppBar title="izziLab"/>

                <div style={{padding: '80px',}}>
                    <RaisedButton primary={true} label="Tap" />
                    <br/>
                    <DatePicker hintText="Portrait Dialog" />
                    <br/>
                    <DatePicker
                        hintText="Landscape Dialog"
                        mode="landscape"/>
                </div>
            </AppCanvas>
        );
    }
});

if (Meteor.isClient) {
    Meteor.startup(() => React.render(<App/>, document.body));
}

many thanks all and @rkstar

[mbrookes]

The issue now isn't so much MUI compatibility with Meteor - that we know works, but rather backwards compatibility of this package with client code using the old syntax. I can't look at the source (on mobile), but does meteor let packages emit warnings on update?

[mrphu3074]

yes, meteor will notice to update. There is no new syntax in new mui version, it only change the way control theme.

[mbrookes]

"There is no new syntax in new mii version"

Except that if you don't update your client code, it will break. That's new syntax in my book. But that's just semantics. 😄

Anyway, glad to hear it issues a warning / instructions on how to update the Theme code. Nice work!