Not compatible with React 15.* about react-ssr-optimization

[Dryymoon]

I have adapted version for latest React 15*.
Fully worked example, but for now its very simple:
https://gist.github.com/Dryymoon/49f2d5d631b6ba9a35ac663e59c193ce
The advantage of this solution - that for cache props calculated very deeply and fast.
Not testen in prod.

[megatolya]

Ok! thanks a lot 👍

[megatolya]

@Dryymoon can you help me?

I replaced electrode-react-ssr-optimization/lib/index.js file with your gist. And got error:

 TypeError: Can't add property _instantiateReactComponent, object is not extensible
    at WrappedInstantiateReactComponent (/Users/megatolya/workspace/mobile/node_modules/electrode-react-ssr-optimization/lib/index.js:95:46)
    at /Users/megatolya/workspace/mobile/node_modules/domino-react/lib/ReactServerRendering.js:37:31
    at ReactServerRenderingTransaction.Mixin.perform (/Users/megatolya/workspace/mobile/node_modules/domino-react/lib/Transaction.js:136:20)
    at renderToStringImpl (/Users/megatolya/workspace/mobile/node_modules/domino-react/lib/ReactServerRendering.js:36:24)
    at Object.renderToString (/Users/megatolya/workspace/mobile/node_modules/domino-react/lib/ReactServerRendering.js:54:10)
    at _store (/Users/megatolya/workspace/mobile/app/lib/utils/render.js:47:53)
    at Object.renderLayout (/Users/megatolya/workspace/mobile/app/lib/utils/render.js:74:31)
    at Object.Wrapper (/Users/megatolya/workspace/mobile/app/wrapper.js:80:29)
    at next (native)
    at onFulfilled (/Users/megatolya/workspace/mobile/node_modules/co/index.js:65:19)

which refs here: https://gist.github.com/Dryymoon/49f2d5d631b6ba9a35ac663e59c193ce#file-reactcachepatch-js-L90
Without replacing was the same error.
Tried it on react 0.14.8 and 0.15.1.
Stackoverflow says components are freezed now and you can't access them directly but you can clone them. So I removed all Object.preventExtensions (instantiateReactComponent.js) and Object.freeze (react/lib/ReactElement.js) from react.
And it stopped throwing exceptions. But cache didnt work.

const reactOptimizer = require("electrode-react-ssr-optimization");
const keyGenerator = props => {
   console.log('hello!', props);
   return 'asd';
};
reactOptimizer.add('MovieHeader', keyGenerator);
reactOptimizer.enable(true);

In console was:

React Caching Enabled :)
React succesful Patched for Caching
React succesful Patched for Caching

But component was updating like before. keyGenerator wasnt called. What can be wrong with my prj?

I can try make simple app which reproduce error if you want.

[Dryymoon]

This code not needed - const reactOptimizer = require("electrode-react-ssr-optimization"); const keyGenerator = props => { console.log('hello!', props); return 'asd'; }; reactOptimizer.add('MovieHeader', keyGenerator); reactOptimizer.enable(true);
And electrode-react-ssr-optimization not used at all in my component.

Partial Example of My webpack config for server build:

var config = {}; config.devtool = 'cheap-module-source-map'; config.context = appRootDir; config.entry = []; config.entry.push('./src/helpers/react/ReactCachePatch.js'); config.entry.push('./src/server.js'); config.target = 'node'; config.node = { global: true, __dirname: false, __filename: false, process: true, Buffer: true }; ...

See "ReactCachePatch" In this config entries it come before any entery.
For use without webpack Include this file in main or bootstrap server script(once on porject) before any imports or requires of react or any components that uses react.

When This patch only works when NODE_ENV=== 'production', because in dev mode React checking for imutability of component.

For now - usage - in any react class ->
export default class ... extends Component { static cache = {} // No attributes for now. render() {...} }

static cache = {} <- it instruct ReactCache Module for enabling smart cache for this component.

[Dryymoon]

How you and others paste code in comments on Github in pretty style?

[megatolya]

ok thx i'll try it later!

How you and others paste code in comments on Github in pretty style?

like this:

[megatolya]

I reproduced the way you described. It seems working but I have some questions about how to control it.

It works if i add static cache = {} to top-level components but dumb components are not cached. For example, If i add static cache = {} to MoviePage (smart component), then it will be cached and movie pages would be the same for all different movies (that have totally another props). So I don't control cache validation and it seems useless.

In electrode readme you described a way to validate cache of components with cool api. Can I do the same things with your new flow?

P.S. am i right that electrode (this repo) is not used in your new flow. And ReactCache module is only file that do all cache work?
P.P.S. we can speak russian if you ok 😊