amazing work btw!

It breaks when an Object appears

// src/virtual-dom.js
    initTree: function initTree(parentNode) {
        var type = this.type;
        var props = this.props;

        var node = this.node = createElement$1(type, props);
        this.eachChildren(function (vchild) {

            console.log(vchild)   // added
            vchild.initTree(node);
        });
        appendNode(parentNode, node);
        this.attachRef();
    },

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?

the example with react router huge apps is not working when you click the link to a course http://react-lite-with-react-router.coding.io/huge-apps/course/1 http://react-lite-with-react-router.coding.io/huge-apps/

npm install 遇到点问题

> [email protected] preinstall /Users/xxx/Documents/source/js/react-lite/node_modules/zlib
> node-waf clean || true; node-waf configure build

sh: node-waf: command not found
sh: node-waf: command not found

node version : v0.12.0

why use react-lite, avoid script|head|link tag in client side. Dose it cause performance problems ?

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!

It doesn't work with react-portal. Just pointing out, close it if there's no work around or it isn't suppose to work.

Error:

ERROR in ./~/react-portal/portal.js
[0] Module not found: Error: Cannot resolve module 'react-lite/lib/CSSPropertyOperations' in /Users/project/node_modules/react-portal

I notice you are using the old React v.0.13 for ref. Plans to update to support React v. 15?

Hey, great project!

I'm just about to start reading through the source to figure out exactly what the tradeoffs are (beyond losing out on server-side rendering). This definitely looks like it could be a sane alternative to the core library, especially for smaller projects, but it would be nice to know up front just what the differences are so people don't run into a wall down the road.

That is unless the only difference is the loss of renderToString/renderToStaticMarkup, which I find doubtful, but it'd be nice to know for sure straight from the documentation.

Thanks!

Comparing react-lite to React, I can't see any use of keys when I did a quick search through your source code. React uses keys to sort and re-order keyed-nodes.
I notice however that you have a silly implementation of something that suppose to be reordering, but far far from what React has and use.

If this is a small "copy" of React, why not follow what React does and implement a correct reordering?

React have a feture to keep track on DOM nodes, and keep them in focus during update. You don't have this.

document.activeElement;

Any plans to copy React on this one?

Neat project!

Is the filesize in the readme after compression + gzip? could you clarify that and potentially compare directly with vanilla React?

Thanks!

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

I noticed that you are missing an important feature - to remove events from the DOM.A listener should be cleaned up when you destroy a node, and also on the nodes children.

You find it in React if you look at the EventListener object..

remove: function () {
          target.removeEventListener(eventType, callback, false);
        }

Hi!
version: 0.15.13

I'm having trouble using react-lite alongside animation libraries.

when the component tries to transition, I get:
Uncaught Invariant Violation: findDOMNode was called on an unmounted component.

I've had the same error with both rc-animate and velocity-react.

Both work fine w/ the same code on regular react. Any ideas?

Thanks!

https://github.com/developit/preact

Cannot resolve module 'react-lite/lib/ReactMount'

I can't see that you have any children reconciliation as drafted out in this specs:

https://facebook.github.io/react/docs/reconciliation.html

Any plans to implement this? It should be basic if this was a React copy.

The context will be assigned to an empty object when calling forceUpdate.

I have found some wried codes which may be the bug's source, on the 750th line of react-lite.common.js:

var nextContext = $cache.context || {};

After simply changing it to the below, the bug seems to be fixed:

var nextContext = $cache.context || context;

Maybe I should give a PR? to master? or other branchs?

The error is:
Unable to set property 'parentContext' of undefined or null.

Which breaks the execution.

I'm not entirely sure what's causing this, but I changed my code from createClass to extend component, removed mixin and created a higher-order component instead.

https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

instead using react.render can we use ReactDOM default renderer... for initial render instead use it inside react tree.. or use it as aliases ?
eg: eact-worker-dom and use react lite to work too...

import React from 'react';
import reactDOM from 'react-worker-dom'; // Instead of using react-dom
reactDOM.render(new Worker('worker.js'), document.getElementById('container'));

many clojurescript React wrapper also use ReactDOM..

React changes their versioning scheme and now they are at 15.0. It would be nice if we can keep in sync with their version numbers.

Using react-bootstrap, attributes are being added to the rendered components that are not present with React. For example, here is the rendered result of a react-bootstrap Button with default props:

<a bsstyle="default" bsclass="btn" active="false" block="false" disabled="false" navitem="false" navdropdown="false" href="/accounts/users/add" class="btn btn-default" role="button">Add New User</a>

All the false attributes actually shouldn't be there.

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.

Hi!

I'm using react-lite along side of react-typeahead.

It digs into React.__spread, which is just an Object.assign polyfill. Is it possible / valuable enough to add that method to react-lite?

https://github.com/facebook/react/blob/6a8ebfc41842fb200c87a919478dcd3aa95be0d7/src/isomorphic/React.js#L70

When using react-icons, it appears svg elements lose attribute styles. This is is a screenshot in a working dev environment

and a screenshot of a production build using react-lite where the svg does not show

One thing I noticed is the attributes lose their camel case in the dom. I tested a production build using react and svg elements display normally. Any help to get svgs showing would be appreciated!

  render() {
    return (
      <img className="avatar-one" ref="img"
        onLoad={()=>{
          console.log('onload this.refs', this.refs)
        }}
        onError={()=>{
          console.log('onerror this.refs', this.refs)
        }} />
    )
  }

Hey @Lucifier129
In react-lite, I found that this.refs sometimes equals to null, called in onLoad/onError of <img> tag.
The probability is very small, but I can always reproduce it by very frequent rendering.
It causes a bug in my app.
And when I try the regular React, it's fine.

https://github.com/Lucifier129/react-lite/blob/master/dist/react-lite.common.js#L1395

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?

I have a question about react-lite's event system. Why does function returned from getEventHandler prevent from propagating native event?

    var getEventHandler = function getEventHandler(handleEvent) {
        handleEvent = eventHandlerWrapper(handleEvent);
        return function (e) {
            e.stopPropagation(); // This makes some side effect.
            e.nativeEvent = e;
            return handleEvent.call(this, e);
        };
    };

I had attached native click event listener on document.body, but because of it, my event listener was never called. React doesn't do like that.

I noticed that many important features for dealing with children is not adopted into React lite. E.g. insertAt(), a function React uses for children.

Plan to implement it?

React now also uses optimizations for Edge, when they deal with children. Added in React 15. This is not included either.

And you are not removing text nodes on diff. If nodeA have text and nodeB doesn't. nodeB will get undefined as text. In react this node are removed and reordered.

So any plans for a proper children diff algorithm ?

我使用了react-router用做路由，redux 用作数据流， react-redux 的Provider在Route中。
当使用react-lite时，调用setState时只有当前组件触发重渲染，子组件未重渲染。
如果使用 react 时，则当前组件和子组件都会重渲染

I just tried building a browser bundle with react-lite and immediately got a bundle 100k smaller than before 🎉 .

One thing that breaks is code that invokes event.persist() (see https://facebook.github.io/react/docs/events.html#event-pooling): Uncaught TypeError: e.persist is not a function.

Is this expected and if yes, should it be added to "versus"-section in the README?

I just figured out that this is not a virtual DOM. You are touching DOM too much, both on creation and update! That's why you get your horrible performance!

One example is found in the velem prototype where you do an update. For children you are calling childNodes on a real DOM node!! An this happen on each update.

You take this childnodes and iterate over it - more expensive - BEFORE you update the node with it.

How many times you think you are touching the real DOM? Too many.

You should use the vdom object for this.

A lot of different places in your code you are doing this - touching DOM where you shouldn't.

I just compared with React. They are not doing it the same way as you are doing it!

To get the childNodes length in a virtual DOM, just count how many children there is on the vdom object without touching the DOM.

const Example = props =>
  <div onClick={event => console.log('outer')}>
    <span onClick={event => {event.stopPropagation(); console.log('inner');}} />
  </div>;

This logs first inner and then outer, same result with event.stopImmediatePropagation().

I assume this is because of the event delegation, as there is only on event handler at document per app and event, so the native stopImmediatePropagation won't work, because there are no other event listeners to cancel.

How can I prevent events from propagating with react-lite?

Had to look up webpack documentation for this, But I think resolve key should be stated in example.

// webpack.config.js
{
    resolve: {
        alias: {
            'react': 'react-lite',
            'react-dom': 'react-lite'
        }
    }
}

In the Readme. PR forthcoming.

Did you copy most of the implementation details from React or created your own virtual-dom implementation?

Great work by the way!

<div className="op-btn" onClick={()=>{
                alert(1)
                window.addEventListener('click', () => {
                  alert(2)
                })

                // this.refs.filePanel.toggle()
              }}>发送文件</div>

Hello, here is one more difference I found between react and react-lite.
In react, both 1 and 2 are alerted, while in react-lite, only 1 is alerted.
In my case, I have to wrap the second binding with a setTimeout to make it work in react.
Yes, in this case, the result of react-lite is expected.
But there is such an inconsistency to be noticed ;)

代码：
<Header {...this.state} />
错误：
[email protected]:146 Uncaught TypeError: React.__spread is not a function

<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?

I am not sure if it's my setup. However I got an issue at this line in react-bootstrap:
var version = _react2['default'].version.split('.').map(parseFloat);
Seems the react object isn't populated with the version.

(Error was,
Uncaught TypeError: Cannot read property 'split' of undefined
)

Hi. I notice you are storing id and relevant component data on the DOM node itself. Any reason for this? It's a major slow down. Better is to create a virtual instance and transfer the instance on update.
Comparing to React, that is how they do it, plus they use the owner that you are missing.

Does react-lite have a dev and production mode like React?

With Webpack I use this:

new webpack.DefinePlugin({
  "process.env": { 
     NODE_ENV: JSON.stringify("production") 
   }
})

Does this also work with react-lite?

🍺

ReactDOM.render(<MyComponent />, container)

get error:

Uncaught TypeError: Cannot set property 'parentContext' of undefined

function initVcomponent(vcomponent, parentContext, namespaceURI) {
        var Component = vcomponent.type;
        var props = vcomponent.props;
        var uid = vcomponent.uid;

        var componentContext = getContextByTypes(parentContext, Component.contextTypes);
        var component = new Component(props, componentContext);
        var updater = component.$updater;
        var cache = component.$cache;
            // cache is undefined!
        cache.parentContext = parentContext;

工兄弟, 我已经尽量简化了重现问题步骤, 如附件:

1. npm install
2. npm start

注释掉:
resolve: {
alias: {
'react': 'react-lite',
'react-dom': 'react-lite'
}
}
成功
没有注释掉就失败

请点解, 等待您的回复
gyj.zip

React have either deprecated or removed a lot of fetures in the upcomming React 15, that you still are using in your code. Plans to remove them?