Jss: Add a rehydrate function

Created on 4 Feb 2018  路  2Comments  路  Source: cssinjs/jss

Initially I went against creating a separate rehydrate function, because we decided to not actually do rehydration, but instead just regenerate the styles, because it is fast enough and more robust.

So if I did `jss.rehydrate('.style-selector')麓 it would be basically inserting the styles after this element and just removing the old style node.

Now as some people had issues with mismatching selectors from SSR, it makes sense to add some more logic to rehydrate, which will make sure in dev mode that user gets proper error report.

  1. Check that client and server setup uses the same NODE_ENV
  2. Check the module id matches between ssr and client (first part - module id)

    • Check the JSS versions matching between ssr and client

    • if hot reload is used and modules are reevaluated, a mismatch is possible

  3. Check the JSS instances counter matches between ssr and client. (second part - Jss instance id)
  4. If last part is not matching (rule id)
  5. Support streaming (https://github.com/cssinjs/react-jss/issues/203)

All checks could be done for e.g. if ssr generates a comment string which contains the information (dev mode only). Rehydration call checks the comment and prints a warning or error.

moderate feature request important

Most helpful comment

Indeed, It could be really usefull to have those error reports. Actually managing packages which uses jss as dependency is a pain

All 2 comments

cc @jedwards1211

Indeed, It could be really usefull to have those error reports. Actually managing packages which uses jss as dependency is a pain

Was this page helpful?
0 / 5 - 0 ratings