alt-j / fast-react-server Goto Github PK
View Code? Open in Web Editor NEW[DEPRECATED] Use last versions of React and Node.js for better performance
License: MIT License
[DEPRECATED] Use last versions of React and Node.js for better performance
License: MIT License
I think we should fix rendering of self-closing tags. See: https://tonicdev.com/sigorilla/57c49945758400130071d519
List of self-closing tags:
<area />
<base />
<br />
<col />
<command />
<embed />
<hr />
<img />
<input />
<keygen />
<link />
<meta />
<param />
<source />
<track />
<wbr />
How do I do the following with fast-react-server?
When I tried converting it I keep getting null context.
Old version:
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const serverSide = require('./serverSideRender');
const Components = serverSide.components;
exports.render = render;
function render(component, model, onComplete) {
const chunks = component.split('.');
var componentToRender = Components;
chunks.forEach((ele) => {
componentToRender = componentToRender[ele];
});
const element = React.createFactory(componentToRender)(model);
const result = ReactDOMServer.renderToString(element);
onComplete(null, result);
}
New version:
const React = require('fast-react-server');
const ReactRender = require('fast-react-render');
const serverSide = require('./serverSideRender');
const Components = serverSide.components;
exports.render = render;
function render(component, model, onComplete) {
const chunks = component.split('.');
var componentToRender = Components;
chunks.forEach((ele) => {
componentToRender = componentToRender[ele];
});
const element = React.createElement(componentToRender, model);
var result = ReactRender.elementToString(element);
onComplete(null, result);
}
https://www.npmjs.com/package/mock-require
var mockRequire = require('mock-require');
mockRequire('react', require('fast-react-server'));
That's my snippet for server entry point.
Subj
Something went wrong:
In last builds (https://coveralls.io/builds/8144727) don't run any tests for utils (https://travis-ci.org/alt-j/fast-react-server/jobs/164306466), thats why coverage fell from 100% to 63%.
@sigorilla, can you do something with that?
This method not implemented.
Some popular modules use it like a react router.
How can i make some things for pass through it?
I think we need make some support for new features.
Support Fragments.
Error boundaries.
Any idea about portals?
React.Children.forEach broke react router because it use React.Children.forEach and await components in right order.
Now it iterate from last to first. Need to iterate from first to last.
while (--i >= 0) {
callback.call(thisArg || this, childrenArray[i], i);
}
from src/utils/children.js forEach method.
function createRoutesFromReactChildren(children, parentRoute) {
var routes = [];
_react2.default.Children.forEach(children, function (element) {
if (_react2.default.isValidElement(element)) {
// Component classes may have a static create* method.
if (element.type.createRouteFromReactElement) {
var route = element.type.createRouteFromReactElement(element, parentRoute);
if (route) routes.push(route);
} else {
routes.push(createRouteFromReactElement(element));
}
}
});
return routes;
}
react-router part.
That's depends on order of components to match the URL.
Need implement this type for React.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.