Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 09 11:55
    andyrichardson added as member
  • Sep 19 2020 17:31
    kelset added as member
  • Nov 07 2019 21:58
    blainekasten added as member
  • Nov 04 2019 04:43
    edelhart-voicebase opened #114
  • Nov 03 2019 12:43

    dependabot[bot] on npm_and_yarn

    Bump eslint from 3.19.0 to 4.18… (compare)

  • Nov 03 2019 12:43
    dependabot[bot] labeled #113
  • Nov 03 2019 12:43
    dependabot[bot] opened #113
  • Oct 07 2019 14:31
    cullenjett removed as member
  • Oct 07 2019 14:29
    cullenjett added as member
  • Sep 21 2019 04:32
    onbjerg closed #18
  • Jul 24 2019 17:49
    divmain removed as member
  • Apr 23 2019 17:41
    johannam999 removed as member
  • Apr 23 2019 17:39
    johannam999 added as member
  • Dec 14 2018 17:53
    bingomanatee removed as member
  • Nov 09 2018 20:24
    boygirl closed #112
  • Nov 09 2018 20:24
    boygirl commented #112
  • Nov 09 2018 01:56
    bingomanatee commented #112
  • Nov 09 2018 01:54
    bingomanatee commented #112
  • Nov 09 2018 01:48
    bingomanatee commented #112
  • Nov 09 2018 01:40
    bingomanatee commented #112
Dale Bustad
@divmain
However, it might be possible to have freactal do its partial render
and then run renderStatic on the generated VDOM tree.
Have you tried anything like that?
Andrew Gower
@amogower

@divmain Thanks for the reply, have tried a few things, the latest attempt being the following:

var { html, css } = StyleSheetServer.renderStatic(() => {
    doAsync(component, props).then((reponse) => { console.log(reponse); return reponse; });
    console.log('finishing');
});
console.log({ html, css });

async function doAsync(component, props) {
    response = await FreactalServer.initialize(React.createElement(component, props));
    console.log(response);
    // do something with response
    return response;
}

In the log, 'finishing' shows, then css is complete but html is undefined then the react response is correctly shown...

Dale Bustad
@divmain

@amogower I've poked through the aphrodite source, and I don't have the best of news. It doesn't look like this is going to work for you. The fundamental problem is that aphrodite uses globals to track used class names and styles (see here).

My original thought was to write an asynchronous version of aphrodite's renderStatic function (see here). However, that reset at the beginning ensures the globals are reset to their initial values. Ultimately, this means that if you were to have multiple simultaneous renders going on (like would be occuring in a server setting), you'd get collisions, styles could be reset in the middle of a render, and the output would just not be what you want.

I don't see this as avoidable with aphrodite's current architecture.

I'm curious whether other CSS-in-JS libs suffer from the same architectural limitations or not. I'm taking a look now.
Andrew Gower
@amogower
We’ve actually managed to get it working
Dale Bustad
@divmain
Have you tried two simultaneous renders?
If you're treating it as a synchronous affair, I'm not surprised you got the right output
but as soon as you have multiple concurrent renders going on, the stylesheets are going to look pretty wonky
Andrew Gower
@amogower
That’s it, I ended up adding a renderStaticAsync function to StyleSheetServer
That returns a promise and accepts a renderFunc that returns a promise
Dale Bustad
@divmain
right
I'm assuming you're still calling reset() though?
Andrew Gower
@amogower
Yeah, should I be?
That's what reset does
if that function is invoked while freactal is asynchronously rendering the VDOM, you'll have issues
take the following as a hypothetical sequence of events:
  1. Request A begins.
  1. renderStaticAsync is called for Request A
ugh, one sec, I'll type this out in an editor
Andrew Gower
@amogower
No worries, thanks for taking the time!
Dale Bustad
@divmain
Np!
Dale Bustad
@divmain
OK here we go
This all assumes that renderFn includes a call to FreactalServer.initialize.
  1. Request A begins.
  2. renderStaticAsync is called for Request A. This resets the global injectionBuffer string and alreadyInjected class-name set.
  3. The renderFn is invoked (calling initialize) with props related to request A.
  4. Freactal begins to asynchronously evaluate the component tree.
  5. For the sake of argument, it gets about half-way through that async evaluation.
  6. Request B begins.
  7. renderStaticAsync is called for Request B. Again, this resets the global injectionBuffer string and alreadyInjected class-name set.
  8. The renderFn is invoked for request B and the component tree begins to be evaluated.
  9. However, aphrodite is still working on styles for request A, and we've just reset the global variables that it uses to build the style output.
  10. initialize completes for request A, but aphrodite outputs only the second half of the stylesheet, since the vars were reset part-way through.
  11. initialize completes for request B, but aphrodite outputs part of the style-sheet from request A, since A was still being evaluated after reset was called.
@amogower ^^^
I'm looking at styled-components to see if it makes similar assumptions
Dale Bustad
@divmain
It looks like styled-components won't have this issue
It's designed to work with Rapscallion
(which I also wrote, and so it uses similar techniques to support async rendering)
Andrew Gower
@amogower
Perfect, will look into switching over to this tonight
Thanks for all the in-depth help!
One other quick question, regarding Freactal - When hydrating the state on the server, the hydrate function was causing async issues with state variables in our components. When I remove the hydrate() function and just pass in window.state it all works again, which surely can’t be right?
Dale Bustad
@divmain
Oh, that sounds super strange @amogower
If you can get me a code sample or small repro, I'll take a look
could be a bug
Andrew Gower
@amogower
It’s probably not a bug, we probably have no idea what’s going on, but here’s the base component's initial state where attempted the hydrate:
const checkoutStateTemplate = provideState({
    initialState: () => IS_BROWSER ? window.__state__ :
    ({
        activeStep: 1,
        bookingTotal: '',
        extraFee: '',
        showMobileSidebar: false,
        step: {
            1: {
                visited: false,
                complete: true,
                password: ''
            },
            2: {
                visited: false,
                complete: false,
                configuration: '',
                comments: ''
            },
            3: {
                visited: false,
                complete: true,
                addOns: {}
            },
            4: {
                visited: false,
                complete: true,
                flexible: 'true'
            },
            5: {
                visited: false,
                complete: false,
                paymentType: 'card',
                credit_card_number: '',
                credit_card_name: '',
                credit_card_cvv: '',
                credit_card_expiry_month: '',
                credit_card_expiry_year: ''
            }
        },
        user: {
            id: '',
            email: '',
            phone_number: '',
            first_name: '',
            last_name: '',
            is_admin: false,
            is_logged_in: false
        }
    }),
  });
That seems to provide the sub components with everything they need while hydrate seems to cause what seems like an asynchronous issue:
provideState({
    initialState: () => IS_BROWSER ? hydrate(window.__state__) :
    ({
Dale Bustad
@divmain
hmm okay
I'll take a look
thx!
Andrew Gower
@amogower
Thanks again for your help @divmain , if you need to see more code I’ll need to figure out a way to get a bigger sample to you
Dale Bustad
@divmain
:+1:
Andrew Gower
@amogower
@divmain Any joy with hydrate? Still haven’t figured out what’s going on...
Dale Bustad
@divmain
Hey @amogower, sorry to keep you waiting. I haven't had much time to dig in yet. Would you mind opening a GH issue with a representative so that I don't lose track?
Ryan Lewis
@archae0pteryx
Love the library guys! I'm sure i'll have many questions. Just wanted to say hi
Dale Bustad
@divmain
Thanks @archae0pteryx
Feel free to reach out if you run into issues!