developit / preact-compat-example Goto Github PK

View Code? Open in Web Editor NEW

52.0 5.0 16.0 602 KB

:speedboat: Demo of preact-compat + react-toolbox to reduce build size by 95%.

Home Page: https://preact-compat-example.surge.sh

JavaScript 92.29% CSS 2.67% HTML 5.04%

preact demo preact-demos

preact-compat-example's Introduction

preact-compat Example

This is a demo showing preact-compat being leveraged to make use of react-toolbox library with Preact instead of React.

The React-based demo was 1.8mb of JavaScript. This demo, using exactly the same code and with the same functionality, is 60kb - or 14.3kb when gzipped.

Live Demo

preact-compat-example's People

Contributors

Stargazers

Watchers

Forkers

rsaccon asolove phucpnt ariesw nickyvu redstrike chkmrv antakasa haigecao jurby bjrn bq1028 ancyrweb wangpang jonathonherbert manjunathgk22

preact-compat-example's Issues

14.3kb (gzipped) including everything? (preact-compact, react-toolbox, all components, css, ...)

Well All is is in the question.
is there a way to get an even smaller overall size if one only uses a subset of components (I.e. only necessary js and css are to be included).
Thank you much for the libraries you provide!

2 Problems

This is the story of how I found a bug preventing this project from being built, cursed a lot, fixed the bug, but then discovered another bug, and eventually gave up. I hope you do not take any of this personally. I really appreciate your work and the fact that it's free and open source. Sorry for dumping all of this on you

First problem: can't `npm run build`

Steps to produce error:

git clone https://github.com/developit/preact-compat-example.git
cd preact-compat-example
npm install
npm run build

Expected: it should work

Actual: it does not.

This error happened for me on macOS El Capitan, with Node v6.3.0 and v4.4.7. Normally I would include an error log, but the error log is way too long. Here are some of the last few lines from my terminal, which illustrate the repetitive nature of the errors:

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[local]__[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/source-map-loader!./~/react-toolbox/lib/animations/zoom-out.scss
    Module build failed:
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /Users/james/preact-compat-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)
Child extract-text-webpack-plugin:
        + 1 hidden modules

    ERROR in ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[local]__[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/toolbox-loader!./~/source-map-loader!./~/react-toolbox/lib/animations/zoom-in.scss
    Module build failed:
      @import "./colors";
     ^
          Import directives may not be used within control directives or mixins.
          in /Users/james/preact-compat-example/node_modules/react-toolbox/lib/_base.scss (line 4, column 3)

After some Googling, I thought I might be able to fix the issue by updating the dependencies, so I looked at the output from npm outdated and ran this to update everything:

npm i sass-loader@4 react-toolbox@1 preact-router@2 [email protected] normalize.css@4 html-webpack-plugin@2 extract-text-webpack-plugin@1 babel-preset-es2015-minimal@2

This seemed to work, but when I ran npm run build I noticed this text in red:

ERROR in ./src/index.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/app' in /Users/james/preact-compat-example/src
 @ ./src/index.js 11:11-43

ERROR in ./src/components/app/index.js
Module not found: Error: Cannot resolve module 'react-toolbox/lib/app' in /Users/james/preact-compat-example/src/components/app
 @ ./src/components/app/index.js 9:11-43

So I started spewing expletives

I did some more Googling and found this changelog for react-toolbox which explains:

App component is no longer needed. From now on we are blocking the body overflow in components with Overlay. You can stop wrapping you whole application if you want.

Eventually I remove the references to <ToolboxApp> and both of the require()s that were failing because the file that defined <ToolboxApp> was deleted. I also updated the package.json dependency versions. Here is a patch that illustrates it all.

But, even though I can npm run build without errors, there is another problem, and that's why this is an issue, not a pull request 😭

Second problem: can't `npm run start`

I tried running npm run start and it eventually said Visit http://0.0.0.0:8080 to view your app. so I did, and I waited a very long time, both in Chrome and Safari Technology Preview. It took an incredibly long amount of time, but eventually I got this:

TypeError: Cannot assign to read only property 'children' of object '[object HTMLAnchorElement]'
    at w (http://0.0.0.0:8080/bundle.js:2:24741)
    at F (http://0.0.0.0:8080/bundle.js:2:27318)
    at A (http://0.0.0.0:8080/bundle.js:2:26164)
    at I (http://0.0.0.0:8080/bundle.js:2:26681)
    at A (http://0.0.0.0:8080/bundle.js:2:26155)
    at I (http://0.0.0.0:8080/bundle.js:2:26681)
    at A (http://0.0.0.0:8080/bundle.js:2:26155)
    at H (http://0.0.0.0:8080/bundle.js:2:28820)
    at H (http://0.0.0.0:8080/bundle.js:2:28702)
    at Y (http://0.0.0.0:8080/bundle.js:2:29472)

[many more expletives were said]

I stopped that process and ran cd build; python -m SimpleHTTPServer 8000 hoping that maybe it was just a timing issue. I went to http://localhost:8000 and I got the exact same error.

If it's any help, the page contained things like {% if (o.htmlWebpackPlugin.files.favicon) { %}

Does not work anymore when upgrading dependencies

After exploring MDL I wanted to give react-toolbox + preact-compat a try. Unfortunately things started to fall apart when upgrading the dependencies. First I upgraded preact and preact-compat. At that point, ripple effect did not work anymore, when checking I go this:
Uncaught TypeError: Cannot read property 'ripple' of undefined

and things got worse when updating react-toolbox, the button style did not get applied anymore, and on clicking the button I got this
Uncaught TypeError: Cannot read property 'button' of undefined

I tried to follow the code changes in react-toolbox button between then and now, there are many, but my understanding of the internals of react, preact and react-toolbox at this time is unfortunatly not sufficient to fix those issues!

JSX element type 'DatePicker' does not have any construct or call signatures.

I tried several components, but all of them are saying no construct or call signatures .

E.g
JSX element type 'DatePicker' does not have any construct or call signatures.

Webpack 2 compatible?

Hi,

I try to compare webpack2 tree shaking result with rollup but it seem like it need more than monkey patch.
BTW I also try apply preact to that example , good news is it did compile but bad news is it throw error on browser...

Uncaught TypeError: Cannot read property 'isRequired' of undefined

Seem like something is missing there.
I think I try everything I can think of (which is not much) and I'm out of luck now.

Any hint?

Time Picker

After choosing the hour, it tries writing the minutes over the hours and if you try choosing, it overwrites the hour choice.

React dependency

Hi, I was trying to use preact with redux and react-redux. Apparently there is no more proptypes on preact. I was asking me, why do you need React as a dependency if you have preact-compat. In which case wouldn you use react, preact, and preact-compat?

Thanks and amazing project!

Some react-toolbox components work, some not

I just tried them all to see how far we get with preact-4.1.0 and preact-compat-1.1.0

First the good news: Many (if not most) components just work as expected.

Now the bad news. The following imports fail:

import DatePicker from 'react-toolbox/lib/date_picker';
import { List, ListItem, ListSubHeader, ListDivider, ListCheckbox } from 'react-toolbox';
import {IconMenu, MenuItem, MenuDivider } from 'react-toolbox';
import { RadioGroup, RadioButton } from 'react-toolbox';
import { Snackbar } from 'react-toolbox';
import {Tab, Tabs} from 'react-toolbox';
import TimePicker from 'react-toolbox/lib/time_picker';

The error is always the same: ReactCSSTransitionGroup module cannot be resolved and/or polyfill modules cannot be resolved. Here is an example of such an error:

./~/react-toolbox/lib/utils/polyfills.js
Module not found: Error: Cannot resolve module 'core-js/fn/array/from' in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
resolve module core-js/fn/array/from in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
  looking for modules in /Users/robertosaccon/preact-compat-example/node_modules
    /Users/robertosaccon/preact-compat-example/node_modules/core-js doesn't exist (module as directory)
[/Users/robertosaccon/preact-compat-example/node_modules/core-js]
 @ ./~/react-toolbox/lib/utils/polyfills.js 3:0-32


./~/react-toolbox/lib/utils/polyfills.js
Module not found: Error: Cannot resolve module 'core-js/fn/array/iterator' in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
resolve module core-js/fn/array/iterator in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
  looking for modules in /Users/robertosaccon/preact-compat-example/node_modules
    /Users/robertosaccon/preact-compat-example/node_modules/core-js doesn't exist (module as directory)
[/Users/robertosaccon/preact-compat-example/node_modules/core-js]
 @ ./~/react-toolbox/lib/utils/polyfills.js 5:0-36


./~/react-toolbox/lib/utils/polyfills.js
Module not found: Error: Cannot resolve module 'core-js/fn/map' in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
resolve module core-js/fn/map in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
  looking for modules in /Users/robertosaccon/preact-compat-example/node_modules
    /Users/robertosaccon/preact-compat-example/node_modules/core-js doesn't exist (module as directory)
[/Users/robertosaccon/preact-compat-example/node_modules/core-js]
 @ ./~/react-toolbox/lib/utils/polyfills.js 7:0-25


./~/react-toolbox/lib/utils/polyfills.js
Module not found: Error: Cannot resolve module 'core-js/fn/string/starts-with' in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
resolve module core-js/fn/string/starts-with in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
  looking for modules in /Users/robertosaccon/preact-compat-example/node_modules
    /Users/robertosaccon/preact-compat-example/node_modules/core-js doesn't exist (module as directory)
[/Users/robertosaccon/preact-compat-example/node_modules/core-js]
 @ ./~/react-toolbox/lib/utils/polyfills.js 9:0-40


./~/react-toolbox/lib/utils/polyfills.js
Module not found: Error: Cannot resolve module 'core-js/fn/symbol' in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
resolve module core-js/fn/symbol in /Users/robertosaccon/preact-compat-example/node_modules/react-toolbox/lib/utils
  looking for modules in /Users/robertosaccon/preact-compat-example/node_modules
    /Users/robertosaccon/preact-compat-example/node_modules/core-js doesn't exist (module as directory)
[/Users/robertosaccon/preact-compat-example/node_modules/core-js]
 @ ./~/react-toolbox/lib/utils/polyfills.js 11:0-28


./~/react-addons-css-transition-group/index.js
Module not found: Error: Cannot resolve module 'preact-compat/lib/ReactCSSTransitionGroup' in /Users/robertosaccon/preact-compat-example/node_modules/react-addons-css-transition-group
resolve module preact-compat/lib/ReactCSSTransitionGroup in /Users/robertosaccon/preact-compat-example/node_modules/react-addons-css-transition-group
  looking for modules in /Users/robertosaccon/preact-compat-example/node_modules
    resolve 'file' or 'directory' lib/ReactCSSTransitionGroup in /Users/robertosaccon/preact-compat-example/node_modules/preact-compat
      resolve file
        /Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup doesn't exist
        /Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup.jsx doesn't exist
        /Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup.scss doesn't exist
        /Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup.js doesn't exist
        /Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup.json doesn't exist
      resolve directory
        /Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup doesn't exist (directory default file)
        /Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup/package.json doesn't exist (directory description file)
[/Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup]
[/Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup.jsx]
[/Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup.scss]
[/Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup.js]
[/Users/robertosaccon/preact-compat-example/node_modules/preact-compat/lib/ReactCSSTransitionGroup.json]
 @ ./~/react-addons-css-transition-group/index.js 1:17-61

The CSS transition stuff has been mentioned before: preactjs/preact-compat#14. Now I am wondering whether preact-compat should be extended or instead just a specific toolbox compatibility layer created

The following components don't work as expected or throw runtime errors at initial render:

Avatar: Inline SVG (Github Icon in the original documentation example) does not get displayed

Dialog and Drawer: throw a runtime error
Uncaught TypeError: Cannot read property 'map' of undefined

DropDown: throws a runtime error
Uncaught Error: Invalid propvalueof typenumbersupplied toDropdown, expectedstring.

Would be great if we get all components working !!!

Chrome/FF developer tools element navigation is slow

I've never seen this before so I'm not sure where the core issue is, but it seem to fit with this example as I created a preact app using preact-cli and react-toolbox so maybe you have some insight.

You can see the issue for yourself by navigation to my app. You don't have to login, just open developer tools, select the Element panel, and start expanding elements. You should notice a long lag with the responsiveness of the element panel.

I don't see this problem with the react-toolbox components page or the preact-compact-example page.

To attempt to isolate the issue I created a new app from preact-cli and only added the Snackbar example.

What I noticed was that importing components as shown seemed to be the problem.
In other words changing this:

import { Button, Snackbar } from 'react-toolbox'

to this

import { Button } from 'react-toolbox/lib/button'
import { Snackbar } from 'react-toolbox/lib/snackbar'

seemed to fix the problem.

However after following that pattern for every react-toolbox component I'm still seeing the issue. I did introduce changes at top level routes which obviously worked, but seemed to have diminishing returns and once I added the main app route back in it's back to being painfully slow.

developit / preact-compat-example Goto Github PK

preact-compat-example's Introduction

preact-compat Example

preact-compat-example's People

Contributors

Stargazers

Watchers

Forkers

preact-compat-example's Issues

First problem: can't npm run build

Second problem: can't npm run start

Recommend Projects

Recommend Topics

Recommend Org

First problem: can't `npm run build`

Second problem: can't `npm run start`