Master

[rsaccon]

menu now works, with react toolbox 0.14.2

[developit]

@rsaccon Awesome! You didn't happen to check if the Drawer and Popup examples broke, did you? I actually accidentally updated to 0.14.2 today and I may have seen some issues. Apparently there was an API in React ~0.13 for rendering partial VDOM trees into a different root (which seems like a horrible idea, much better implemented as a module) and it might suddenly be relying on that?

[rsaccon]

@developit OMG, you are right, Drawer, Dialog and Snackbar are broken now. So I guess you better not merge this. Btw, have you ever tried to run material-ui on preact ? I think I am gonna give it a try, just to see how far preact gets with that.

[developit]

I haven't, but I really (really!) want to see it. It seems to be a lot more polished than toolbox. Thinking about setting up a repo? :100:

[rsaccon]

I just played around a little bit with the webpack example of material-ui and preact, and there seem to be some issues, e.g. with the React Events and other special React stuff, not covered by preact-compat:

ERROR in ./src/app/app.jsx
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactMount' in /Users/robertosaccon/material-ui/examples/webpack-example/src/app
 @ ./src/app/app.jsx 1:378-409

ERROR in ./src/app/Main.jsx
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactMount' in /Users/robertosaccon/material-ui/examples/webpack-example/src/app
 @ ./src/app/Main.jsx 1:378-409

ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/EventPluginHub' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 7:2-37

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/EventConstants' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/EventPluginUtils' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/EventPropagators' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/SyntheticUIEvent' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ViewportMetrics' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58

ERROR in ./~/material-ui/~/react-addons-transition-group/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactTransitionGroup' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/material-ui/node_modules/react-addons-transition-group
 @ ./~/material-ui/~/react-addons-transition-group/index.js 1:17-58

ERROR in ./~/material-ui/~/react-addons-create-fragment/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactFragment' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/material-ui/node_modules/react-addons-create-fragment
 @ ./~/material-ui/~/react-addons-create-fragment/index.js 1:17-51

ERROR in ./~/material-ui/~/react-addons-pure-render-mixin/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactComponentWithPureRenderMixin' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/material-ui/node_modules/react-addons-pure-render-mixin
 @ ./~/material-ui/~/react-addons-pure-render-mixin/index.js 1:17-71

ERROR in ./~/material-ui/~/react-addons-update/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/update' in /Users/robertosaccon/material-ui/examples/webpack-example/node_modules/material-ui/node_modules/react-addons-update
 @ ./~/material-ui/~/react-addons-update/index.js 1:17-44

[developit]

Dang. I don't even recognize those modules, kinda seems like it's reaching deep into React. That's a bit disappointing :(

[developit]

A bunch of these are fixed now as of Preact 5 :)

[saxicek]

@developit Does the fix include Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactMount'? Have problem with that one. :-(

[louisremi]

This bug seems to be caused by React hot loader : https://github.com/gaearon/react-hot-loader/issues/53

[developit]

Correct, that is generally the cause.

[louisremi]

Do you have any workaround? It seems adopting webpack2 (beta) and switching to react-hot-loader is one way... I haven't tried it yet, but this repo can serve as an example: https://github.com/ctrlplusb/preact-compat-hmr

[developit]

@louisremi I just use the Webpack HMR API directly: https://github.com/developit/preact-boilerplate/blob/master/src/index.js#L6-L18 (Ignore the log stuff unless you want to suppress Webpack HMR logging)

[louisremi]

Alright, thanks!

Btw, I don't think your requestAnimationFrame throttles calls to init unless you return as soon as you detect that a frame has already been requested, e.g.:

var isFrameRequested = false;
module.hot.accept('./components/app', () => {
  if ( isFrameRequested ) {
    return;
  }
  isFrameRequested = requestAnimationFrame( () => {
    init();
    isFrameRequested = false;
  }
}));

[developit]

@louisremi ah, that requestAnimationFrame is actually to wait for Webpack to inject styles prior to re-rendering, not for throttling. Probably unnecessary, but I just didn't like seeing the flicker!