we develop the use of react-lite for build project, when i in the react componentWillReceiveProps method dispatch an action , the react-lite will show zhe error : Can not read property '$ updater' of undefined., but i use react to build project will not report this error.

I know you have a fix in the previous version of this problem(https://github.com/Lucifier129/react-lite/issues/82), but I use the new master code when I will report this error, so i don't no how to fix it

Context is that we use:

• webpack2
• webpack-dll
• reactrouter
• split bundles to deliver react components

page.route.js:168 TypeError: Cannot read property 'vchildren' of undefined
    at destroyVelem (webpack:///./~/react-lite/dist/react-lite.common.js?:363:25)
    at destroyVnode (webpack:///./~/react-lite/dist/react-lite.common.js?:150:9)
    at destroyVelem (webpack:///./~/react-lite/dist/react-lite.common.js?:367:9)
    at destroyVnode (webpack:///./~/react-lite/dist/react-lite.common.js?:150:9)
    at destroyVcomponent (webpack:///./~/react-lite/dist/react-lite.common.js?:492:5)
    at destroyVnode (webpack:///./~/react-lite/dist/react-lite.common.js?:153:9)
    at destroyVcomponent (webpack:///./~/react-lite/dist/react-lite.common.js?:492:5)
    at destroyVnode (webpack:///./~/react-lite/dist/react-lite.common.js?:153:9)
    at destroyVcomponent (webpack:///./~/react-lite/dist/react-lite.common.js?:492:5)
    at destroyVnode (webpack:///./~/react-lite/dist/react-lite.common.js?:153:9)

It seems that whatever I try to do with your code, I ran into errors, bugs or strange behaviour. Obviously this code is at a very early stage and not ready for production.

• TypeError: Failed to execute 'replaceChild' on 'Node': parameter 2 is not of type 'Node'.
• TypeError: Cannot read property 'childNodes' of null
• TypeError: Cannot read property 'tagName' of null

This is just a few errors I get all the time. And this is related till how you are dealing with the children, the fact you are not removing any children etc.

In your velem and the destroy function. Seems sometimes it can't find the children it should unmount. Sometimes 1 or more of the children are undefined or null.

And a lot more.

I suggest try to copy some of the stuff from Virtual DOM as I have seen you tried in the beginning, but changed from that path. They are also following React and doesnt have this errors.

React-lite is a good attempt, but not ready yet. For now I got enough because of this and performance so I move away to better solutions.

Maybe one day in the future I will check back on this repo

Hi! I ran the vdom benchmark, and I have to state that the performance is horrible. Any plans to fix this shortly? Else, a very great concept. But there are so many vdom libraries out there that have better performance.

I open a new ticket for this one. As mentioned replaceChild can be read-only. I was looking into your code, and figured out how to fix this. My solution is then also related to performance issues.

The solution:

In each prototype - stateless, component etc, you add this in the top:

this.element = null

In the init section where you create , change to

* node = this.element = ....*

And then when you do a diff / update, you do this:

* newElement.element = this.element*

Got it?

So then when it comes to destroy, you do this

this.element.parentNode.replaceChild(this.element, newElement.element)

In this solution you will not to do a typeof to check if its a function anymore. Will give you some better performance :)

Great work with react-lite!

<Editor ref="edit" id="editor" className="edit"
              style={{
                fontFamily: fields.fontFamily.value,
                fontSize: fields.fontSize.value,
                fontWeight: fields.fontBold.value ? 'bold' : 'normal',
                color: fields.fontColor.value,
              }}
              onKeyDown={(e)=>this.onKeyDown(e)}
              onInput={(e)=>this.onInput(e)}
              dangerouslySetInnerHTML={{__html: currConver.editor}} />

It seems the innerHTML clears when one of the css style updates. When I switch back to react, it works. Is it a bug of react-lite?

Uncaught TypeError: Cannot read property '$updater' of undefined

When I include the below in my webpack.config to use react-lite in place of react, I rec'ing the above error. When I remove react-lite, my app works as expected.

Is there any good way of debugging this?

resolve: {
    alias: {
      'react': 'react-lite',
      'react-dom': 'react-lite'
    }
  }

When using "select" tag, the selected option is not displayed. This works in Chrome, but not IE or Edge.

Expected Dropdown to show with the selected value picked in Edge or IE.

Actual The first item is selected

Example https://jsfiddle.net/xy99xexh/3/

amazing work !

i use react-lite with react-boilerplate , it did shrink the build size, but got this error in brower (regular react works fine):

webpack config

Reproduce:

check out a demo for this issue if you have time, then npm install && npm run build && cd ./build

So, I really like this project and use it in production on several projects. One problem I run into over and over again has to do with peer deps. I'll pull an npm package into my project, eg this React lightbox component, and it ends up forcing regular React to be bundled instead of react-lite due to peer deps.

Yes I could go in and change the peer deps on each package, but that defeats the purpose of a package manager. I'm using browserify by the way, but would gladly switch to webpack if it makes this easier. Is anyone aware of a good way to force peer deps?

React 15 removed use of innerHTML and now uses createElement. See latest release notes.

You are still using innerHTML - wich is slow - a lot.

Are you going to fix this?

Uncaught InvalidStateError: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.

"react-lite": "^0.15.38", "fastclick": "^1.0.6",

google chrome: 63.0.3239.132, set toggle device toolbar on

related issue: https://github.com/ftlabs/fastclick/issues/358

It's probably an issue for fastclick, but it affects src/react-lite/lib/react-tap-event-plugin.js

I do not see fastclick list on devDependencies of package.json .

Should I install fastclick by myself? Or, just add alias 'react-tap-event-plugin': 'react-lite/lib/react-tap-event-plugin'?

react-lite/lib/react-tap-event-plugin.js:

'use strict';

var Fastclick = require('fastclick');
module.exports = function injectTapEventPlugin() {
	var supportTouch = ('ontouchstart' in document);
	if (supportTouch) {
		Fastclick.attach(document.body);
	}
};

As you can see here, onClick handler is not triggered when a disabled button is clicked (which is correct). However, it is triggered when clicking a <span> inside a disabled button.

Is this a valid behavior? I'm only encountering this issue with react-lite, works fine with react.

The bug can reproduce with Chrome and Edge, works fine in Firefox. Also, anujs(https://github.com/RubyLouvre/anu, another React-like library) and React works fine.

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3192.0 Safari/537.36

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16251

Example: https://lucifier129.github.io/material-ui/build/#/

In Chrome, I have to double-click a MenuItem to trigger its onClick event with react-lite.

I found the source of bug: https://github.com/callemall/material-ui/blob/master/src/internal/TouchRipple.js#L210. I replaced the rippleGroup to <div />, the issue still exists.

      rippleGroup = (
-       <ReactTransitionGroup style={prepareStyles(mergedStyles)}>
-         {ripples}
-       </ReactTransitionGroup>
+       <div />
      );
    }

Then I tried to debug react-lite. The first click didn't trigger click event.

So I wrapped dispatchEvent with setTimeout to wait 65ms, now the click triggered normally. Delaying batchUpdate is useless.

I think it's maybe any function canceled mouseup event, but there're no function controlled event.

Now I have no clue...

Hi team, Really, really like the clear and focused objective of react-lite. Would it be possible to see a RUM-style performance (network-time, dom-time, time-to-visual render time, etc) comparison of the same (material-ui or similar) component examples running in react-lite and react?

Ideally, zero difference or possibly better runtime performance and far-better initial-call network performance with a smaller .js file, but without seeing a comparison just assumptions.