Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add SSR streaming API and stuff #448

Merged
merged 25 commits into from
Nov 19, 2017
Merged

Add SSR streaming API and stuff #448

merged 25 commits into from
Nov 19, 2017

Conversation

emmatown
Copy link
Member

@emmatown emmatown commented Nov 8, 2017

What:
Add two new exports from emotion-server.

renderStylesToString
This returns a string of html that inlines the critical css required right before it's used.

import { renderToString } from 'react-dom/server'
import { renderStylesToString } from 'emotion-server'
import App from './App'

const html = renderStylesToString(renderToString(<App />))

renderStylesToNodeStream
This returns Node Stream Writable that can be used to insert critical css right before it's required. It can be used with React's streaming API.

import { renderToNodeStream } from 'react-dom/server'
import { renderStylesToNodeStream } from 'emotion-server'
import App from './App'

const stream = renderToNodeStream(<App />).pipe(renderStylesToNodeStream())

I'm not totally sure about the names of these.

There are also some internal changes to extractCritical that should make it faster.

This also fixes some stuff with SSR and labels.

Why:
Closes #341

How:
glamor-stream, https://github.com/threepointone/glamor/blob/master/src/inline.js and some changes in a few places.

Checklist:

  • Documentation
  • Tests
  • Code complete

@@ -0,0 +1,65 @@
import { inserted, registered, names } from 'emotion'

function toTag(ids, thing) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this just accept an array as the second argument and have the function return an object with the updated keys and tag?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that's probably a better idea.

const tokenStream = tokenize()

const inlineStream = through(
function write(thing) {
Copy link
Member

@tkh44 tkh44 Nov 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could use this to avoid having to name the arg.

function write([type, data])

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, it was originally like that but I was debugging something so I changed it.

@emmatown emmatown mentioned this pull request Nov 15, 2017
3 tasks
@emmatown emmatown changed the base branch from master to instances November 17, 2017 23:20
@emmatown emmatown merged commit 26f87e7 into instances Nov 19, 2017
@emmatown emmatown deleted the streaming branch November 19, 2017 05:55
emmatown added a commit that referenced this pull request Dec 23, 2017
* Start

* Fix stuff

* Change .flowconfig

* I wish it was this simple

* Add more flow types and add preact to external

* Remove fontFace and useStylisPlugin

* Add SSR streaming API and stuff (#448)

* Try implementing streaming

* More ideas that I didn't test

* Add deps and more stuff to extractCritical

* More stuff

* I'm still totally guessing

* Fixes, update react and start tests for streaming ssr

* It's a start

* More stuff

* Another thing I haven't tested

* Simplify extractCritical

* Lots of stuff

* Increase bundlesize

* Change hydration and document new APIs

* Remove check for case that cannot happen

* Remove names cache

* Fix some tests

* Fix more tests

* Fix streaming tests

* Add create-emotion-server package

* So close

* I don't know how it worked before

* Increase bundlesize

* Fix dist tests

Closes #341

* Add prefix option and fix instance tests

Closes #400

* Fix nonce option

* More flow types

* Start flow types for react-test-renderer

* Fix type

* Flow types and guessing relative paths

* Add flow to Travis

* Add more stuff to create-emotion README

* Update create-emotion README.md

* Change some stuff with flow

* Fix stuff in babel-plugin-emotion

* More changes to create-emotion's README

* Preact doesn't require contextTypes

* Add README to create-emotion-styled

* Increase bundlesize

* Add create-emotion-styled to preact-emotion's deps

* Basic flow types for create-emotion-styled

* Decrease size

* Add @flow comment to more tests

* Change relative import stuff

* Flow in babel-plugin-emotion

* Add @flow to babel plugin tests

* Fix stuff

* Increase bundlesize

* Type create-emotion-styled 🎉

* stuff

* Remove fontFace docs

* Remove more mentions of fontFace

* Fix relative instance paths and add tests

* Fix tests

* Move stuff into utils file in create-emotion-styled

* Add @flow comment to create-emotion-styled utils

* Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration

Closes #470

* Revert "Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration"

This reverts commit ed185da.

* Increase bundlesize

* Add create-emotion-server README.md

* Fix typo, add more stuff to create-emotion README and start instances doc

* Document the new options to babel-plugin-emotion

* Add link to babel-plugin-emotion options in instances doc

* Fix using filepath when it doesn't exist

* Support nonces in new SSR methods

* Update snapshots

* stuff

* Add jest-serializer-html to SSR tests

* Update flow and pin version in .flowconfig

* Fix example in create-emotion README

* Use undefined instead of null

* Flow type emotion-theming

* Fix error

* Use a single rollup build

* Change create-emotion-styled API

* Fix a thing

* Only use global as the context

* Remove references to rollup:umd npm script

* Add jest-emotion (#495)

* Start of jest-emotion-react based on jest-glamor-react

* Update snapshots

* Use inserted cache instead of StyleSheet to get styles so it works with jsdom

* Throw better error when css.parse throws

* Add test with media query before other rule

I've already fixed this but I want to commit the test without the fix so I know it does actually fail without the fix

* Fix stuff and other stuff

* Replace all css- classes like kentcdodds/jest-glamor-react#28

* More stuff

* Rename to jest-emotion, make createSerializer a named export, add getStyles so people can build other tools on it

* Update jest configs

* Update snapshot

* Fix withComponent carrying styles from flattened components

* Add key and container options to create-emotion (#499)

* Start key and container options

* Fix stuff

* Increase bundlesize

* Add another test

* Add another test

* Update README.md

* Update CHANGELOG.md

* Update sheet.dom tests

* Update snapshots

* Fix flow error
emmatown added a commit that referenced this pull request Jan 4, 2018
* Start gatsby site

* Move stuff

* stuff

* Try to make the site work

* Try to fix site

* It actually works now

* Docs

* Update docs and add docs/ path

* Fix path

* Change header background color

* Change Error background color

* Use frontmatter for title

* Move playground into a component

* More stuff

* Commit for netlify to deploy

* Syntax highlighting for css

* Fix typo

* Use gatsby-plugin-emotion

* Update .gitignore

* Remove stuff and add rebass-emotion

* Update site

* Add unoptimized version of code as a comment for users who are learning.

* Fix a thing

* Fix scrolling in code

* Use babel-standalone from unpkg

* Add gatsby-plugin-netlify

* Clean up markup styles for docs pages.
Enable code examples on docs pages.

* Update doc layout to have sidebar. Not sure how to pull in pages from graphql.

* Use GraphQL to get code examples

* Rename markdownRemark in GraphQL instead of in JS

* Add .nvmrc for netlify

* Fix for code examples

* Update sidebar

* Update docs

* Move sidebar to the layout so the data for the sidebar isn't in the query of each doc page

* Linting

* Linting

* Fix a typo

* Update styles to start implementing @norbertdragan's designs.

#368

* Update styles

* Update links on index page

* Modified typography, layout and button styles (#382)

* Modified typography, layout and button styles

* Ran npm lint

* Run yarn lint

* Format

* Formatting

* Add Edit this page link to docs pages

* Add hover styles to the object button

* Update header and fix react unknown prop warnings

* Add animation to gradient in header

* Move docs

* stuff

* Change size of background gradient on home

* Update yarn.lock

* Update deps

* Update stuff

* Change netlify config

* Change netlify config

* Move docs back to root and sync from master

* Start

* Fix stuff

* Change .flowconfig

* I wish it was this simple

* Add more flow types and add preact to external

* Remove fontFace and useStylisPlugin

* Add SSR streaming API and stuff (#448)

* Try implementing streaming

* More ideas that I didn't test

* Add deps and more stuff to extractCritical

* More stuff

* I'm still totally guessing

* Fixes, update react and start tests for streaming ssr

* It's a start

* More stuff

* Another thing I haven't tested

* Simplify extractCritical

* Lots of stuff

* Increase bundlesize

* Change hydration and document new APIs

* Remove check for case that cannot happen

* Remove names cache

* Fix some tests

* Fix more tests

* Fix streaming tests

* Add create-emotion-server package

* So close

* I don't know how it worked before

* Increase bundlesize

* Fix dist tests

Closes #341

* Add prefix option and fix instance tests

Closes #400

* Fix nonce option

* More flow types

* Start flow types for react-test-renderer

* Fix type

* Flow types and guessing relative paths

* Add flow to Travis

* Add more stuff to create-emotion README

* Update create-emotion README.md

* Change some stuff with flow

* Fix stuff in babel-plugin-emotion

* More changes to create-emotion's README

* Preact doesn't require contextTypes

* Add README to create-emotion-styled

* Increase bundlesize

* Add create-emotion-styled to preact-emotion's deps

* Basic flow types for create-emotion-styled

* Decrease size

* Add @flow comment to more tests

* Change relative import stuff

* Flow in babel-plugin-emotion

* Add @flow to babel plugin tests

* Make doc sidebar responsive

* Add animation to sidebar toggle button

* Fix stuff

* Increase bundlesize

* Fix flow error and gatsby ssr

* Change stuff

* Type create-emotion-styled 🎉

* stuff

* Remove fontFace docs

* Remove more mentions of fontFace

* Fix relative instance paths and add tests

* Fix tests

* Move stuff into utils file in create-emotion-styled

* Add @flow comment to create-emotion-styled utils

* Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration

Closes #470

* Revert "Use stylis from npm (it seems to create a smaller bundle with uglify + rollup than with gcc + uglify + rollup) and add test for multiline declaration"

This reverts commit ed185da.

* Increase bundlesize

* Add create-emotion-server README.md

* Fix typo, add more stuff to create-emotion README and start instances doc

* Document the new options to babel-plugin-emotion

* Add link to babel-plugin-emotion options in instances doc

* Inline code examples that render with react-live

Use the language `jsx live` and call render with a React element and it'll render

* Fixes after merging instances into gatsby

* Change gatsby config

* Start improving styled docs

* Run prettier on markdown

* Add lodash and prop-types to deps of site

* Fix yarn.lock

* Hopefully fix stuff

* Update emotion-site README

* Update docs

* Make object styles page interactive

* Make with-props page interactive

* Change docs

* More stuff to docs

* Fix using filepath when it doesn't exist

* Update react

* Add react-helmet as a dep

* Add link headers back

* Change stuff

* Remove console.log

* Remove more console.*s

* More changes

* Remove name example

* Move babel standalone script tag

* Support nonces in new SSR methods

* Update snapshots

* Start sorting docs

* stuff

* Add jest-serializer-html to SSR tests

* Update flow and pin version in .flowconfig

* Fix example in create-emotion README

* Add keyframes to index.yaml

* Start headings in sidebar

* Use undefined instead of null

* Fix styles

* stuff

* typo

* Add preact-emotion and react-emotion READMEs

* Add emotion-server README

* Start stuff for packages pages

* Change font in code blocks

* Remove styled block

* More stuff for displaying package READMEs

* Flow type emotion-theming

* Fix error

* Use a single rollup build

* Change create-emotion-styled API

* Fix a thing

* Only use global as the context

* Remove references to rollup:umd npm script

* Show packages in docs/

* Add jest-emotion (#495)

* Start of jest-emotion-react based on jest-glamor-react

* Update snapshots

* Use inserted cache instead of StyleSheet to get styles so it works with jsdom

* Throw better error when css.parse throws

* Add test with media query before other rule

I've already fixed this but I want to commit the test without the fix so I know it does actually fail without the fix

* Fix stuff and other stuff

* Replace all css- classes like kentcdodds/jest-glamor-react#28

* More stuff

* Rename to jest-emotion, make createSerializer a named export, add getStyles so people can build other tools on it

* Update jest configs

* Update snapshot

* Add jest-emotion and create-emotion-server to docs.yaml

* Fix withComponent carrying styles from flattened components

* Use renderStylesToString in gatsby site

* Add key and container options to create-emotion (#499)

* Start key and container options

* Fix stuff

* Increase bundlesize

* Add another test

* Add another test

* Update README.md

* Update docs

* Change docs

* Change a bunch of stuff

* Fix key warning

* Stuff

* Fix react-dom being included twice in site and only import darken from polished

* Don't include @babel/types

* stuff

* Update yarn on netlify

* Update netlify.toml

* Run babel in a worker 🎉

* stuff

* Fix SSR

* Fix babel worker

* Stop animating left

* Fix repaints on scroll

* Fix layout thrashing

* Revert "Fix layout thrashing"

This reverts commit 7c866f7.

* Change styles and stuff

* Change docs and change blockquote styles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants