Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Rahul Basu
    @rahulbasu710
    @/all is there any way to find extensive docs on hypernova-react please. Very intrigued with the concept!
    Also am currently using webpack isomorphic tools. How big of a jump or trade-off is the usage of this ?
    Terence Pae
    @tpae
    is it possible to handle component compositions?
    Jorge Bucaran
    @jorgebucaran
    Hi, I am looking for documentation or help with writing my own hypernova bindings for Hyperapp (github.com/hyperapp/hyperapp).
    Writing your own bindings doesn't seem so hard. I was looking at hypernova-react implementation and it's just a few lines of code.
    Serge van den Oever
    @svdoever
    Anyone having experience with using hypernova/hypernova-react where components make async calls and waiting for these async calls while rendering a component at server-side? I want to wait for all async calls using something like domain-task (npm, par of .net core javascriptservices), and do a rerender of the component after all tasks (promises) are fulfilled. I would like to provide an initial redux store state as data to the hypernova call, and as a result of the component rendering get the new store state as data for the component hydration at client side. I don't see any infrastructure in hypernova/hypernova-react to support this case. Any ideas?
    Jordan Harband
    @ljharb
    @svdoever it's a terrible idea to make async calls on the server; so you'd want to do that only in componentDidMount
    Serge van den Oever
    @svdoever
    @ljharb why is it terrible? Otherwise I need to know exactly which data to pass to my components, and have the ability to call for this data in the same way as my components from client side will request this data. In my case I have my server running on ASP.NET with C#, and I make service calls from my reducers using TypeScript. I think another advantage is I can delegate the server-side rendering of the initial state of my Progressive Web App to a separate component server.
    Jordan Harband
    @ljharb
    for one, because react rendering is still sync, not async.
    i should have clarified; make all your async calls on the server before rendering your component tree
    Serge van den Oever
    @svdoever
    In my case I want to to an initial server-side rendering of my PWA. I only have 3 types of input parameters: my URL, my cookies and if needed context data that I know of on the server when I need to render my PWA for a given deep link (will be empty in most cases). I prefer not to write different code for rendering a complete PWA on server side with respect to rendering on the client side. My ideas it to wrap my PWA "top level" component with a Redux store with this initial data, and serialize the resulting Redux store for hydrating on the client. In this case there is no difference in the code for server-side rendering and client-side rendering. If I need to do rendering of my complete PWA based on initial data (required for SEO purposes) I need to have complex logic to differentiate between the two approaches...
    Jordan Harband
    @ljharb
    i'm suggesting that your overall architecture needs tweaking
    all your data fetching code either a) always takes its input as props, or b) takes it as props on the server and differently in the browser, or c) you'd have to mock out a ton of browser stuff in the server (don't do this one)
    Serge van den Oever
    @svdoever
    What happens when I make multiple async calls while rendering my react component using hypernova? are then processed one after the other or are they processed in parallel?
    Jordan Harband
    @ljharb
    it's JS; all the JS parts happen in the main thread, and all the non-JS parts happen in parallel
    the issue is that the rendering won't wait for results.
    a server render must be 100% synchronous and produce a string
    Serge van den Oever
    @svdoever
    Not in my implementation:-)
    Jordan Harband
    @ljharb
    it is in react's implementation, so you don't have a choice.
    (perhaps react 17 will change this, but that's not out for awhile)
    Serge van den Oever
    @svdoever
    I will paste my implementation in a Gist... one moment...
    Jordan Harband
    @ljharb
    k
    Jordan Harband
    @ljharb
    oof, with domains
    Serge van den Oever
    @svdoever
    :-)
    Jordan Harband
    @ljharb
    domains are massively deprecated, and it seems like you're doing a lot of work to build async rendering in react when react itself will have it in v17
    iow you're pushing a big rock uphill
    Serge van den Oever
    @svdoever
    I know... but it works like a breeze:-)
    Jordan Harband
    @ljharb
    if it ever stops working nobody will be able to fix it tho :-p
    and it will break hard with react 17
    Serge van den Oever
    @svdoever
    I need to register my promises somehere and have to wait for them to do my final rendering
    Why would it break for React 17? The only thing I do is wait for all promises to complete before doing a final rendering based on my updated Redux state and returning the resulting string....
    I know React 17 will implement waiting for async actions using continuations, but will it conflict?
    Serge van den Oever
    @svdoever
    My "utility functions" for creating hypernova async components is as follows: https://gist.github.com/svdoever/e486f661d3ac6fe7a9cd2108f431761e
    So a wrapped component looks like:
    import { renderReactAsyncReduxServer, renderReactAsyncReduxClient } from './hypernova-react-async-redux';
    import { CounterConnect } from '../reduxCounter/counterConnect';
    import counterReducer from '../reduxCounter/counterReducer';
    import { createStore } from 'redux';
    
    export default (initialReduxStoreState: any) => {
      return renderReactAsyncReduxServer(
        'HypernovaCounter', // this file's name (or really any unique name)
        CounterConnect,
        createStore(counterReducer, initialReduxStoreState)
      );
    };
    
    renderReactAsyncReduxClient(
      'HypernovaCounter', // this file's name (or really any unique name)
      CounterConnect,
      (data: any) => createStore(counterReducer, data)
    );
    Serge van den Oever
    @svdoever
    I have trouble running hypernova server on Azure. If I create a Windows App Service it is using iisnode and I get the following error:
    Hypernova server running node version: v8.9.4                                                                                   
    2018-04-16T19:56:39.539Z - info: Worker #1 is now online                                                                        
    Mon Apr 16 2018 19:56:42 GMT+0000 (Coordinated Universal Time): Application has thrown an uncaught exception and is terminated: 
    Error: write ENOTSUP                                                                                                            
        at _errnoException (util.js:1022:11)                                                                                        
        at ChildProcess.target._send (internal/child_process.js:702:20)                                                             
        at ChildProcess.target.send (internal/child_process.js:586:19)                                                              
        at sendHelper (internal/cluster/utils.js:25:15)                                                                             
        at send (internal/cluster/master.js:339:10)                                                                                 
        at handle.add (internal/cluster/master.js:311:5)                                                                            
        at SharedHandle.add (internal/cluster/shared_handle.js:29:3)                                                                
        at queryServer (internal/cluster/master.js:300:10)                                                                          
        at Worker.onmessage (internal/cluster/master.js:244:5)                                                                      
        at ChildProcess.onInternalMessage (internal/cluster/utils.js:42:8)                                                          
        at emitTwo (events.js:131:20)                                                                                               
        at ChildProcess.emit (events.js:214:7)                                                                                      
        at emit (internal/child_process.js:772:12)                                                                                  
        at _combinedTickCallback (internal/process/next_tick.js:141:11)                                                             
        at process._tickDomainCallback (internal/process/next_tick.js:218:9)                                                        
    Application has thrown an uncaught exception and is terminated:                                                                 
    Error: write ENOTSUP                                                                                                            
        at _errnoException (util.js:1022:11)                                                                                        
        at ChildProcess.target._send (internal/child_process.js:702:20)                                                             
        at ChildProcess.target.send (internal/child_process.js:586:19)                                                              
        at sendHelper (internal/cluster/utils.js:25:15)                                                                             
        at send (internal/cluster/master.js:339:10)                                                                                 
        at handle.add (internal/cluster/master.js:311:5)                                                                            
        at SharedHandle.add (internal/cluster/shared_handle.js:29:3)                                                                
        at queryServer (internal/cluster/master.js:300:10)                                                                          
        at Worker.onmessage (internal/cluster/master.js:244:5)                                                                      
        at ChildProcess.onInternalMessage (internal/cluster/utils.js:42:8)
    If I use a linux based App Service it uses a docker container managed by pm2 and it displays:
    2018-04-16T20:41:52.742563445Z __/\\\\\\\\\\\\\____/\\\\____________/\\\\____/\\\\\\\\\_____
    2018-04-16T20:41:52.742569845Z  _\/\\\/////////\\\_\/\\\\\\________/\\\\\\__/\\\///////\\\___
    2018-04-16T20:41:52.742576246Z   _\/\\\_______\/\\\_\/\\\//\\\____/\\\//\\\_\///______\//\\\__
    2018-04-16T20:41:52.742582546Z    _\/\\\\\\\\\\\\\/__\/\\\\///\\\/\\\/_\/\\\___________/\\\/___
    2018-04-16T20:41:52.742588946Z     _\/\\\/////////____\/\\\__\///\\\/___\/\\\________/\\\//_____
    2018-04-16T20:41:52.742594946Z      _\/\\\_____________\/\\\____\///_____\/\\\_____/\\\//________
    2018-04-16T20:41:52.742600946Z       _\/\\\_____________\/\\\_____________\/\\\___/\\\/___________
    2018-04-16T20:41:52.742606647Z        _\/\\\_____________\/\\\_____________\/\\\__/\\\\\\\\\\\\\\\_
    2018-04-16T20:41:52.742612547Z         _\///______________\///______________\///__\///////////////__
    2018-04-16T20:41:52.742618247Z
    2018-04-16T20:41:52.742623547Z
    2018-04-16T20:41:52.742628847Z                           Community Edition
    2018-04-16T20:41:52.742634147Z
    2018-04-16T20:41:52.742639448Z             Production Process Manager for Node.js applications
    2018-04-16T20:41:52.742644848Z                      with a built-in Load Balancer.
    2018-04-16T20:41:52.742650248Z
    2018-04-16T20:41:52.742655448Z
    2018-04-16T20:41:52.742660648Z                 Start and Daemonize any application:
    2018-04-16T20:41:52.742674549Z                 $ pm2 start app.js
    2018-04-16T20:41:52.742680649Z
    2018-04-16T20:41:52.742685849Z                 Load Balance 4 instances of api.js:
    2018-04-16T20:41:52.742691249Z                 $ pm2 start api.js -i 4
    2018-04-16T20:41:52.742696549Z
    2018-04-16T20:41:52.742701750Z                 Monitor in production:
    2018-04-16T20:41:52.742707150Z                 $ pm2 monitor
    2018-04-16T20:41:52.742712450Z
    2018-04-16T20:41:52.742717550Z                 Make pm2 auto-boot at server restart:
    2018-04-16T20:41:52.742722850Z                 $ pm2 startup
    2018-04-16T20:41:52.742728050Z
    2018-04-16T20:41:52.742733251Z                 To go further checkout:
    2018-04-16T20:41:52.742738451Z                 http://pm2.io/
    Serge van den Oever
    @svdoever
    It works when I used hypernova devmode:true in both cases.... Is there a difference between using devmode:false so a single worker is used, but scale using iisnode or pm2 ( i.e. pm2 start index.js -i 4) versus using the hypernova coordinator?
    In the code of hypernova I see the following code with respect to devmode:
    if (config.devMode) {
        worker(app, config, onServer);
      } else if (cluster.isMaster) {
        coordinator(config.getCPUs);
      } else {
        worker(app, config, onServer, cluster.worker.id);
      }
    shadowtftby
    @shadowtftby
    Hi everyone, i am using hypernova for rails app with react. In my production env it stop render page after 1-5 hours http://joxi.ru/L21E4daS868qG2 error log hypernova empty. In pm2 i see this http://joxi.ru/8AnkO9wTjqjxZr
    James Mosier
    @jamesmosier
    Out of curiosity, what implementation does the team at Airbnb use for getComponent? Do you all just use createGetComponent and then import a transpiled Node compliant JavaScript file (i.e. not using import, JSX, etc.)? Or do you just use require and grab the ES6 source?
    Jordan Harband
    @ljharb
    we use require, and pull up a server-bundle of the component in question
    James Mosier
    @jamesmosier
    thanks Jordan! by server bundle do you mean just a specific implementation of a component tailored for SSR?
    Jordan Harband
    @ljharb
    i mean like, each entry point is turned into a single webpacked bundle
    James Mosier
    @jamesmosier
    ahh makes sense. Thanks again!
    Agis Anastasopoulos
    @agis
    Are there any plans for a new release soon?
    Arian Meidow
    @sPaCeMoNk3yIam
    What would currently be the best way to use code-splitting and hypernova ssr? I found this article, but I'm not sure if this is still a reliable approach. Also, I dug into react-loadable and now wanted to try out react-loadable together with hypernova. Since in their examples they use ReactDOMServer.renderToString it's easy for them to have a context. How could I accomplish such things as Loadable.Capture with hypernova?
    Arian Meidow
    @sPaCeMoNk3yIam
    More specifically: How can I pass and return modules that were captured? I see in getComponent the possibility to access context and pass it to a modified hypernova-react#renderReact, but the return value of getComponent can only be the generated html.
    Arian Meidow
    @sPaCeMoNk3yIam
    Also, the return value of hypernova-node (hypernova-client) is only html.