docs: add changelog and update readme (#775)

* docs: add changelog and update readme

* Apply suggestions from code review

Co-authored-by: JJ Kasper <jj@jjsweb.site>

Changelog.md

@@ -0,0 +1,79 @@
+# Changelog
+
+## [5.0.0]
+
+### Features
+
+- Introduce contextual styles (#744)
+- Opt-in react 18 insertion effect hook when available (#753)
+- Fallback to module level registry in browser (#768)
+
+### Improvements
+
+- Make JSXStyle return a noop if the registry context is not provided (#749)
+- Fix typings of `nonce` property
+- Pre-compile dependencies to reduce install size/time (#770)
+
+### BREAKING CHANGES
+
+#### APIs
+
+- `styled-jsx/server` import path is deprecated
+- `flush` and `flushToHTML` from `styled-jsx/server` APIs are deprecated
+- New component `<StyledRegistry>` is introduced
+- New APIs `useStyleRegistry` and `createStyleRegistry` are introduced
+
+#### Usage
+
+If you're only using styled-jsx purely client side, nothing will effect you.
+If you're using styled-jsx inside Next.js without customization, Next.js will automatically handle the changes for you.
+
+If you have your own customization with styled-jsx in Next.js, for example you have a custom `_document`:
+By default, doing this will let Next.js collect styles and pass them down.
+
+```jsx
+class Document extends React.Component {
+  static async getInitialProps(ctx) {
+    return await ctx.defaultGetInitialProps(ctx)
+  }
+}
+```
+
+Or for instance you're passing `nonce` property in `getInitialProps` of `_document`, this will let you configure it:
+
+```diff
+class Document extends React.Component {
+  static async getInitialProps(ctx) {
+-    return await ctx.defaultGetInitialProps(ctx)
++    return await ctx.defaultGetInitialProps(ctx, { nonce })
+  }
+}
+```
+
+If you're building the SSR solution yourself with other frameworks, please checkout the **Server-Side Rendering** section in readme.
+
+## [4.0.1]
+
+- Mark `@babel/core` as optional peer dependency
+
+## [4.0.0]
+
+- Use react hooks to manage styles injection (#720)
+
+### BREAKING CHANGES
+
+- Drop support for react versions < 16.8.0
+
+### Improvements
+
+- Drop babel 6 support (#730)
+- Auto publish alpha/beta versions
+
+## [3.4.x]
+
+### Improvements
+
+- Typing support
+- Inject unique \_JSXStyle identifier
+- Hide webpack loader warnings
+- Refactor the import helpers

readme.md

@@ -375,6 +375,23 @@ export default (req, res) => {
 }
 ```
 
+There's also a new API `createStyleRegistry` that is introduced when you have to create a registry manually. In this way you can operate the registry yourself to extract the rendered styles (`registry.styles()`) or flush them out (`registry.flush()`).
+
+```js
+const registry = createStyleRegistry()
+const styles = registry.styles() // access styles
+
+function Page() {
+  return (
+    <StyleRegistry registry={registry}>
+      <App />
+    </StyleRegistry>
+  )
+}
+```
+
+By default `<StyleRegistry />` will use the `registry` from root top `StyleRegistry`, which means there's only one `registry` in the react tree.
+
 It's **paramount** that you use one of these two functions so that
 the generated styles can be diffed when the client loads and
 duplicate styles are avoided.