airbnb / hypernova Goto Github PK

If I return a promise from getComponent, and I decide the name is not valid currently this is the response

 ®[test-hypernova]$ http POST localhost:3030/batch < test/assets/organism.json
HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 0
Date: Thu, 16 Jun 2016 20:08:45 GMT
X-Powered-By: Express

for reference, the posted json looks like:

{
  "test" : {
    "name": "/usr/bin/evil",
    "data": {
      "name": "Ryan"
    }
  }
}

a section of my getComponent looks like

    getComponent(name) {
      return new Promise((resolve, reject) => {
        // make sure the name has no funny biz
        var parts = name.split('@')
        if (parts.length !== 2) return reject('Weird name passed to us')
        if (!validate(parts[0]).validForNewPackages) return reject('invalid package')

Can we make it so the rejected promise makes a 400 status code, and maybe a json response like:

{
    "error": null,
    "results": {
        "test": {
            "duration": 268.287959,
            "error":"invalid package",
            "meta": {},
            "name": "/usr/bin/evil",
            "statusCode": 400,
            "success": false
        }
    },
    "success": false
}

Version 6.22.1 of babel-cli just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As babel-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi @goatslacker!

So I have a logger set up inside an express middleware, logging various things about the request.

One bit of information I'd like to add to the logs is - did the request hit a cold cache or not?

I have access to this information inside of my application code - inside of getComponent. However there's no great way that I can currently think of to thread this information along to other parts of the express app.

I'm thinking one way to do this would be to expose the express request object to the context object passed into getComponent

Or maybe there's just a better way to architect this?

Thanks!

I have an issue with makeValidDataAttribute expecting to always get only defined values.

When I run an application where the hypernova server fails and the hypernova client (hypernova-python in my case) does not include the hypernova-id data attribute the call-chain from load("Component") ends up running from_script with an object like {hypernova-key: "Component", hypernova-id: null}. When that then wants to normalize the attributes it fails on hypernova-id.

By reading the commit that added the functionality of multiple copies of the same component I thought supporting hypernova-id was optional?

Context
Code is transpiled with webpack 2 and babel-loader with presets es2015 and react.

Example html:

<div data-hypernova-key="Component"></div>
<script type="application/json" data-hypernova-key="Component">
        <!--{"someData": "here"}--></script>

Error-code:

Uncaught TypeError: Cannot read property 'replace' of null
  at makeValidDataAttribute

As of React 16 a new method renderToStream() method was introduced. I first though of creating a feature request issue at airbnb/hypernova-react but after taking a look at the code it seems that more ground-work needs to be done at the server itself to support streams in the first place.

@goatslacker mentioned in #22 that there are plans to support streams and even async rendering, it would be interesting if this was already started by anyone or if we could support you guys on this feature.

In the latter case it would be nice if we could collect all ideas/hints here on how to implement this feature correctly.

What's the best way to server side render component that checks uses window and document which are only available in the browser?

I'm working on an issue to optimize open source library for server rendering: github.com/shakacode/react_on_rails/pull/660.

We're considering breaking away from placing react hydration data in a meta tag and moving into maybe a script tag.

Why does Airbnb puts react hydration data inside of an <script type=“application/json” data-key=“foobar”><!--{json}--></script> per the screen shots below? Is this related to XSS or performance reasons?

view-source:https://www.airbnb.com/s/Panorama--BC--Canada?guests=10&adults=10&children=0&infants=0&checkin=12%2F18%2F2017&checkout=12%2F25%2F2017&ss_id=19nvfbwh&ss_preload=true&source=bb&page=1&s_tag=pMJm3GqR&allow_override%5B%5D=

CC: @goatslacker

Hello,

I'm working on creating a php client for hypernova. One thing that I haven't been able to figure out is what url to post to for hypernova, and how the POST params should be set up. I'm running hypernova.js locally, and have tried POST'ing to http://localhost:3030/ but am getting 404s! When I POST to http://localhost:3030/batch I get this response (below), no matter what i put in the params, and getComponent is not being called.

{ "success": true, "error": null, "results": {} }

I would appreciate a little bit more information on what the POST url is and how POST params should be passed.

Hey team, I really appreicate you guys open source hypernova. It's awesome and flexiable that make isomorphic so convenient.

But now I encounter some weird situation, I don't know if there is something I missed.
My application is trying to render lots of html tags with server, precisely, like 13k tags. When I limited the tags rendered by server under 400, it works as expected. And when I reset limitation to about 1.2k, I got some warning like below:

 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ">1</span></a></li><li class="tag" data-
 (server) ">1</span></a></li></ul></div></div>

After that, I raise limitation again to like 4k and server-render does not work anymore. The application is still working with fallback.

It's really frustrated.

Would you guy consider large payload for hypernova server could be a problem?

btw, here is my hypernova.js

const hypernova = require('hypernova/server');
const createGetComponent = require('hypernova/server').createGetComponent;
const path = require('path');

hypernova({
  devMode: false,
  getComponent: createGetComponent({
    SearchTag: path.resolve('./app/assets/javascripts/isomorphic/searchTag/searchTag.js'),
  }),
  port: 3030,
});

thanks.

Version 4.0.2 of sinon was just published.

This version is covered by your current version range and after updating it in your project the build failed.

sinon is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

html coverage reports currently show the compiled es5

Would be nice to either:

1. Add sourcemaps to istanbul reports
2. Switch to nyc and compile on the fly

(2 is maybe undesirable if you want the assurance of testing against the actual dist code. fwiw though, something like this patch does the trick.)

Having a Rails API as backend, can I use Hypernova to render json data retrieved from the API and use that data for server side rendering? Is there any example showing how to use Rails API with Hypernova?

Hi again!

Consider a scenario where inside of getComponent, we'd like to return a React component rendered with either with renderReact or renderReactStatic, depending on the context (eg legacy reasons).

My initial thought is that we could do something funky like define NameOfComponent and NameOfComponentStatic and pass such args though the component name.

What would be even better though is to be able to define custom args; something like

{
  "NameOfComponent": {
    "name": "NameOfComponent",
    "args": {
       "renderType": "static",
    },
    "data": {
      "theseAreProps": true,
      "someOtherProps": ["one", "two", "three"]
    },
  }
}

and args gets passed alongside name to getComponent.

Does this seem reasonable? Thanks!

I've been looking into this project and I am really excited about it. I am curious if there has been any talk about having the flexibility to use a server environment that is not express. Namely the use-case I find most interesting would be the ability to run hypernova as a lambda, which would require a more stateless implementation.

Thanks!

npm install within the hypernova repo on npm@6 keeps failing.

Steps to reproduce

npm install

...
> [email protected] build /Users/leungwi/Projects/VRT/sporza/NODE/contrib/hypernova
> babel src -d lib

src/Module.js -> lib/Module.js
src/coordinator.js -> lib/coordinator.js
src/createGetComponent.js -> lib/createGetComponent.js
src/createVM.js -> lib/createVM.js
src/environment.js -> lib/environment.js
src/getFiles.js -> lib/getFiles.js
src/index.js -> lib/index.js
src/loadModules.js -> lib/loadModules.js
src/server.js -> lib/server.js
src/utils/BatchManager.js -> lib/utils/BatchManager.js
src/utils/lifecycle.js -> lib/utils/lifecycle.js
src/utils/logger.js -> lib/utils/logger.js
src/utils/renderBatch.js -> lib/utils/renderBatch.js
src/worker.js -> lib/worker.js
up to date in 3.952s
[!] 7 vulnerabilities found [3729 packages audited]
    Severity: 5 low | 2 critical
    Run `npm audit` for more detail

npm audit

npm ERR! code EAUDITNOLOCK
npm ERR! audit Neither npm-shrinkwrap.json nor package-lock.json found: Cannot audit a project without a lockfile
npm ERR! audit Try creating one first with: npm i --package-lock-only

npm i --package-lock-only installs all the packages but doesn't create a package-lock.json because the .npmrc has package-lock disabled.

@goatslacker @ljharb I notice that 2.1.3 is the latest tag on the npm registry, but master has been on 2.2.0 for a couple of months.

Will this be released soon? Thanks!

This is the linked resource in question.
http://airbnb.io/projects/hypernova/docs/client-spec.md

function decode(res) {
  const jsonPayload = ENCODE.reverse().reduce((str, coding) => {
    ...
}

Array.prototype.reverse changes the array in place, is this desirable in this case? The second time load is called (and decode too as a result), ENCODE.reverse() should have the same value as ENCODE in the beginning, i.e.

> ENCODE = ['a', 'b']
["a", "b"]
> ENCODE.reverse()
["b", "a"]
> ENCODE.reverse()
["a", "b"]

Does Hypernova support Rails 5.1? I have tried to setup server side rendering but my node server doesn't respond.

Rather than using different renderer functions allow hypernova to be extended through an array of functions which will operate in a reduce() fashion.

Context: airbnb/hypernova-aphrodite#5

Rendering is a CPU bound task which might be problematic for Node js during spikes.
We could use something like https://github.com/xk/node-threads-a-gogo to create a thread pool of workers that render React components to HTML and use the event loop just for I/O.

when I'm using webpack to bundle the project code into one file. I find the code require in src/module will be compiled into __webpack_require__. so that I can't load the native module from node in the vm context.

code in lib/Module.js

{
    key: 'loadFile',
    value: function () {
      function loadFile(file, parent) {
        var filename = _module2['default']._resolveFilename(file, parent);

        if (parent) {
          var cachedModule = parent.cache[filename];
          if (cachedModule) return cachedModule.exports;
        }

        if (isNativeModule(filename)) {
          // eslint-disable-next-line global-require
          return require(filename);
        }
}

my project code use createVM, some sample code like this:

import * as hypernova from 'hypernova/server'
const createVM = hypernova.createVM

const vm = createVM(Object.assign({}, {
  cacheSize: 100,
}, vmOptions))

vm.run(name, `my code here`)

As a result. the code in Module.js will be bundled by webpack like this

{
    key: 'loadFile',
        value: function () {
      function loadFile(file, parent) {
        var filename = _module2['default']._resolveFilename(file, parent);

        if (parent) {
          var cachedModule = parent.cache[filename];
          if (cachedModule) return cachedModule.exports;
        }

        if (isNativeModule(filename)) {
          // eslint-disable-next-line global-require
          return __webpack_require__(187)(filename);
        }
}

so that. if I require some native module in vm.run. It cannot resolved by webpack

if I change the code in the src/Module.js then build and bundle.The result workd well.

if (isNativeModule(filename)) {
  // eslint-disable-next-line global-requir
  return eval("require")(filename);
}

Any suggestion?

As per documentation: The most common use-case would be to use a VM to keep each module sandboxed between requests. You can use createGetComponent from Hypernova to retrieve a getComponent function that does this.

I'm using createGetComponent to load following component:

import React from 'react';
import { renderReact } from 'hypernova-react';

let meme = 25;

function SimpleComponent({ name }) {
  return <div onClick={() => alert('Click handlers work.')}>Hello, {meme++}, {name}!</div>;
}

export default renderReact('SimpleComponent', SimpleComponent);

with following getComponent function

  getComponent: createGetComponent({
    SimpleComponent: path.resolve('build/components/SimpleComponent/index.js'),
    Counter: path.resolve('build/components/Counter/index.js')
  }),

And meme counter keeps ticking:

I just tried out the hypernova stack and found that the devMode does not reload the component on each request as documented.

Example

hypernova.js

const hypernova = require('hypernova/server');

hypernova({
  devMode: true,
  port: 3030,
  getComponent: name => require(`./${name}.js`)
});

app.js

const React = require('react');
const {renderReact} = require('hypernova-react');

function App(props) {
  return React.createElement('div', null, `Hello ${props.name}`);
}

module.exports = renderReact('app', App);

server.js

const express = require('express');
const Renderer = require('hypernova-client');
const devModePlugin = require('hypernova-client/plugins/devModePlugin');

const app = express();

const renderer = new Renderer({
  url: 'http://localhost:3030/batch',
  plugins: [
    devModePlugin,
  ],
});

app.get('/', (req, res) => {
  const jobs = {
    app: { name: req.query.name || 'Stranger' }
  };

  renderer.render(jobs).then(html => res.send(html));
});

app.listen(8080, () => console.log('Now listening'));

What happens

When requesting localhost:8080 you will be greeted as configured by Hello Stranger but when changing the returned string of the App, e.g. into Hello foo bar ${props.name} the supernova server still renders the old cached component and returns Hello stranger again.

What should happen

When passing a truthy devMode option to hypernova, the server should invalidate the Node caches on each request.

I also searched for references of devMode in the server code, but haven't found anything except for the cluster setup.

Maybe I just missed something, but to me it seems this functionality isn't implemented or was removed in a recent commit?

In trying to add some logging middleware, I noticed that res.statusCode is not set.

(curl: http://i.imgur.com/Ch5f2gM.png)

I presume this is an unintended bug? Looks like status is set here: https://github.com/airbnb/hypernova/blob/master/src/utils/renderBatch.js#L20

Version 2.2.2 of babel-preset-airbnb just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As babel-preset-airbnb is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml
• The new Node.js version is in-range for the engines in 1 of your package.json files, so that was left alone

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

Version 2.3.0 of babel-preset-airbnb just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As babel-preset-airbnb is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hey,

I found the example documentation to be sufficient to understand the concepts. However, implementation was not possible.

I am intending on using Hypernova with React-Router and/or Redux. And I'm wondering if my application structure will permit this.

Something such as:

//Render components
function App (props) {
  return (
    <Router history={browserHistory}>
      <Route path="/" component={Index}/>
      <Route path="*" component={NoMatch}/>
    </Router>
  )
}

export default renderReact('App.js', App)

Does not render when you hit the desired Port of Hypernova (using the hypernova/server package).

If it's possible. Writing more detailed documentation would be fabulous as the pros of Hypernova vastly outweight the cons in terms of implementation of traditional server side rendering with template literals.

looks like the nodejs link is broken :(
https://github.com/airbnb/hypernova/blob/master/docs/clients.md

https://github.com/shunsugai/rails-webpacker-hypernova

This is a project I'm attempting to get working. You have to bundle install that, then do

node hypernova.js
./bin/rails s
./bin/webpack-dev-server

And then access /hello/index

It works fine, but the problem is, is the main div isn't server rendered at all. I'm new to rails but I didn't see any errors anywhere.

Version 4.10.0 of eslint was just published.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi y'all!

First off, thank you for a really great Github project. We use it here at RTR and its added a lot of rigor around the server-side rendering from our Ruby app.

Onto the issue. Would you be open to a PR which allows the hypernova master process to restart its workers after a specific number of requests. We currently have a job calling SIGTERM on the workers due to memory leaks resulting from our not using createGetComponent.

We have a lot of top level modules and so we opted to not go that route for now and are wondering what your opinion would be on allowing for a hybrid approach, similar to what unicorn-worker-killer does for Ruby.

Thanks again!

Version 4.15.0 of eslint was just published.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

In your readme, example component returns object: {default: [Function]},
but in your BatchManager it expects a function:

https://github.com/airbnb/hypernova/blob/master/src/utils/BatchManager.js#L141

Did I miss something or there is more to it than you have in the example/readme.

Thank you.

Per nodejs/node#2741 - this will start warning soon.

nodejs/node#3307 seems to provide a way to do isNativeModule.

I see that I have the ability to add a logger property to the config object passed in to the hypernova initializer. However, it looks like this only gives me the ability to override these defaults:

{
  level: 'info',
  colorize: true,
  timestamp: true,
  prettyPrint: process.env.NODE_ENV !== 'production',
}

What I'd really like to be able to do is pass in my own transports to Winston so I can hook in to my remote logging service. Any plans to add this feature?

I'm using onServer to be able to hook into express before the batch route is added, so I can do something like this: https://stackoverflow.com/a/21858212/4396258

(Context: we want to just restart workers if they consume too much memory, but specifically at the end of a request so we don't drop drop any requests)

It's either this or adding a workerShouldExit method as a config? What do you think? Can I safely use the onServer method, or is this subject to removal?

(Also on the subject of undocumented arguments - what about documenting context too? It's useful for collecting stats.)

@ljharb @goatslacker

Hey all

<div id="root">{{ html }}</div>

If hypernova server fails by any reason and the html content would be empty, then the renderReact('Component', Component) wouldn't work either returns blank page and I have to call:

ReactDOM.hydrate(
    <Component />,
    document.getElementById('root')
  )

In this case how could I know my root is empty? because this condition throws error due to undefined document object:
document.getElementById('root') !== null && document.getElementById('root').hasChildNodes()

TypeError: ((!(null === document.getElementById(...))) && document.getElementById(...).hasChildNodes(...)) is not a function

So I'm trying out hypernova for a new project but I already have a lengthy app built in React.

The main issue right now is that it fails with the ES6 imports.

Does this work with ES6 or how should I proceed?

EDIT I get that I need to transpile my Js but now it says window is not defined

UPDATE 2 I removed the commonChunks optimization and I tried nodeExternals but with or without node externals it just says that MyComponentName.js is not registered. So I'm a bit stumped. don't know what to do.

I am working on vue bindings for Hypernova, but vue-server-renderer renderer pass html by callback:

const Vue = require('vue')
 
const renderer = require('vue-server-renderer').createRenderer()
 
const vm = new Vue({
  render (h) {
    return h('div', 'hello')
  }
})

renderer.renderToString(vm, (err, html) => {
  console.log(html) // -> <div server-rendered="true">hello</div> 
})

So, I'd like getComponent support a function which return a Promise, just like props => Promise.resole(html).

I was looking through code and found that it's vulnerable to attacks when source code uses native node modules, such as fs.

const fs = require('fs');
const testFolder = './';

fs.readdir(testFolder, (err, files) => {
    files.forEach(file => {
          console.log(file);
            });
})

These native modules are still executed in runInContext of createVM.js.

Version 2.4.0 of eslint-plugin-import just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hey guys,

I might be just doing something wrong but when I implemented the hypernova setup, all I see is a blank screen. This is the current source code that is getting rendered. I'm using Ruby on Rails & React.

<div data-hypernova-key="indexjs" data-hypernova-id="4d2cf94b-7e2b-4bea-8cf7-24f94af855ef"></div> <script type="application/json" data-hypernova-key="indexjs" data-hypernova-id="4d2cf94b-7e2b-4bea-8cf7-24f94af855ef"><!--{"name":"Hypernova The Renderer"}--></script>

My index.erb.html has the following code:
<%= render_react_component('index.js', :name => 'Hypernova The Renderer') %>

The react app is leveraging Webpack and the React app is fully in the 'public' folder of my Rails app. I've tried it with the index.js and AppProvider.js file in the rails configuration.

Here's my index.js source code:

import React from 'react';
import ReactDOM from 'react-dom';
import AppProvider from './app_provider';

ReactDOM.render(<AppProvider />, document.querySelector('#app'));

and this is my app_provider.js

import {renderReact} from 'hypernova-react';
import { persistStore } from 'redux-persist';
import { Provider } from 'react-redux';
import Routes from './routing/routes';
import styles from './index.scss';
import globalStyles from './styles/font-face.css';
import { store } from './util/store.js';

import LoadingSpinner from './components/Loading/loading';

class AppProvider extends Component {
    constructor(){
        super();
        this.state = {
            rehydrated: false
        };
    }
    componentDidMount(){
        persistStore(store, { blacklist: ['pagination', 'notification', 'properties', 'blog', 'navigation', 'position', 'landing', 'tagbar', 'auction', 'rainworx'] }, () => {
            this.setState({rehydrated: true});
        })
    }
    render(){
        if(!this.state.rehydrated){
            return <LoadingSpinner />
        }
        return (
            <Provider store={store}>
                <Routes />
            </Provider>
        );
    }
}

export default renderReact('AppProvider.js', AppProvider);```

Does Hypernova cache components and if so what is the cache key based on? I was looking through the code and it appears like there's some caching going on but only in createVM which doesn't appear to be used unless you're using createGetComponent. I'm not using createGetComponent because I'm just bundling all of my components into a single file and calling the corresponding component given the passed in name like:

getComponent(name) {
  return require('./app/assets/build/server-bundle.js')[name];
}

Hi, I attempted to test hypernova without loading a component from a file like this (it handles JSX because I'm compiling server JS file w/ webpack):

import hypernova from 'hypernova/server'
import { renderReact } from 'hypernova-react'

const TestComponent = () => <div>Hello Hypernova</div>

hypernova({
  devMode: true,
  getComponent: function () {
    return renderReact('TestComponent', TestComponent)
  }
})

Then when I use this from Rails:

# view
# <%= render_react_component "Test" %>

# controller
around_action :hypernova_render_support

# initializer
if Rails.env.development?
  require "hypernova/plugins/development_mode_plugin"
  Hypernova.add_plugin!(DevelopmentModePlugin.new)
end

Hypernova.configure do |config|
  config.host = "localhost"
  config.port = 8080
end

I do see hypernova's div rendered, but the content is empty:

<div data-hypernova-key="Test" data-hypernova-id="59829cc1-7a43-4c1a-a63e-e59458fb4459"></div>

On the server, I get this error:

Warning: a promise was created in a handler but was not returned from it, see http://goo.gl/rRqMUw

I'm not sure how to go about debugging this. Any help would be much appreciated.

Hi all! Thanks for this awesome project!

From the README:

  // the port the app will start on
  port: 8080,
  // whether or not to run in parallel using all available cpus
  endpoint: '/batch'
  // default endpoint path
}

What config option is "whether or not to run in parallel using all available cpus" referring to? It also looks like the 'default endpoint path' should be on that line instead.

Thanks!

I'm really excited about this project. Unfortunately I'm locked into a java platform so I'd have to write a client to be able to use it. I don't mind doing that on the surface of it, but it'd be extremely useful to have a general test suite for validating the clients against the spec. That would also make it easier to write other clients in other languages.

Do any such tests exist? If not, would that be something the team would be interested in helping support if someone started it?

I am sorry if the description of my issue is a big vague, but I am not really sure where to start when fixing that error.
I am testing hypernova with hypernova-ruby in a Rails 4.2 environment. Server-side rendering works very well most of the time. But sometimes it seems like there are no props passed to the component for rendering (in hypernova).
I already checked the context (in getComponent function) and the props are passed to the server, anyhow the resulting string is build with the default props.

Any idea where to start on this?