WIP: Static rendering #330

okonet · 2017-02-18T10:52:58Z

This PR implements static rendering of the styleguide when building for production.

🚧🚧🚧
Please don't merge yet. Still WIP!!!
🚧🚧🚧

… client

sapegin · 2017-02-18T10:57:26Z

examples/.gitignore

@@ -0,0 +1 @@
+**/styleguide/*.js


We already have rules in global gitignore:

/examples/**/styleguide/build /examples/**/styleguide/index.html

Scripts should be in a separate folder anyway.

Oh I see. Is there a reason for them to be in a separate dir BTW?

Better UI: not to scare users with extra files and make index.html easier to find ;-)

This reverts commit 37e10a5.

okonet · 2017-02-21T16:00:30Z

It looks like I was able to render everything besides the actual components (which is by design) statically using latest commit.

This includes:

TOC (Table of Contents) with proper slugs (this took some time)
Markdown documents
Code highlighted with highlight.js

We'll need to take some care of injecting CSS into head during the build time as well.

sapegin · 2017-02-22T13:15:33Z

package.json

@@ -58,15 +57,18 @@
    "loader-utils": "^0.2.16",
    "lodash": "^4.17.4",
    "minimist": "^1.2.0",
+    "node-noop": "^1.0.0",


lodash/noop should be enough ;-)

sapegin · 2017-02-22T13:22:34Z

scripts/build.js

-		// require('fs').writeFileSync('stats.json', JSON.stringify(stats.toJson()));
-		callback(err, stats);
+	// Firstly, build static "server" bundle
+	return webpack(makeWebpackConfig(config, 'production', true), (err, stats) => {


Can we pass an array of webpack config here?

Can you elaborate on passing an array here? What do you mean exactly? How would this change it?

As I understand you can call webpack like this: webpack([config1, config2]).

Yes, but this isn't the same. This will produce 2 compiler's processes but we want to share one process.

How do you share it? I see two separate webpack calls with different configs.

Actually you might be right about it. I was a bit confused. Let me try it out.

sapegin · 2017-02-22T13:25:46Z

src/rsg-components/HtmlDocument/HtmlDocumentRenderer.js

+import React, { PropTypes } from 'react';
+import HTMLDocument from 'react-html-document';
+
+function getScrtips(assets) {


This should be in HtmlDocument.js. The idea is to provide a simple way to redefine rendering of components, so data and markup should be separated.

Agreed! Will refactor appropriately.

sapegin · 2017-02-22T13:26:57Z

src/rsg-components/HtmlDocument/HtmlDocumentRenderer.js

+				{ name: 'charset', content: 'utf-8' },
+			]}
+		>
+			{ children }


I’m wondering why ESLint don’t complain about this spaces… 🤔

No rule defined?

I’ll check ;-)

okonet · 2017-02-23T11:30:40Z

@kof can you help me here with rendering styles statically? SG isn't using react-jss so no SheetsRegistry etc.

BTW @sapegin should we switch to react-jss? Can you elaborate in more details what's is missing from it to be able to use the "official" repository?

codecov-io · 2017-02-23T11:49:56Z

Codecov Report

Merging #330 into master will decrease coverage by <.01%.
The diff coverage is 97.95%.

@@            Coverage Diff             @@
##           master     #330      +/-   ##
==========================================
- Coverage   94.77%   94.77%   -0.01%     
==========================================
  Files          75       78       +3     
  Lines         995     1014      +19     
  Branches      202      211       +9     
==========================================
+ Hits          943      961      +18     
- Misses         52       53       +1

Impacted Files	Coverage Δ
scripts/schemas/config.js	`96.96% <ø> (ø)`	⬆️
scripts/make-webpack-config.js	`100% <100%> (ø)`	⬆️
loaders/utils/getStyleguide.js	`100% <100%> (ø)`
scripts/create-server.js	`90.9% <100%> (ø)`	⬆️
...sg-components/HtmlDocument/HtmlDocumentRenderer.js	`100% <100%> (ø)`
loaders/styleguide-loader.js	`100% <100%> (ø)`	⬆️
src/rsg-components/HtmlDocument/HtmlDocument.js	`100% <100%> (ø)`
...rc/rsg-components/ReactComponent/ReactComponent.js	`100% <100%> (ø)`	⬆️
src/rsg-components/Examples/Examples.js	`83.33% <100%> (ø)`	⬆️
src/utils/utils.js	`96.92% <85.71%> (-1.44%)`	⬇️
... and 4 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2f80d73...c82a157. Read the comment docs.

kof · 2017-02-23T11:58:41Z

@okonet I am not aware of decision details, it seems like react-jss would be a good fit here. In any case its easy. You can always create a SheetsRegistry and add the sheets to it and then get them all together as a CSS string.

- Use proper `charSet` key for the metatag as of venmo/react-html-document#9 - Moved metatags to renderer to allow easy customization without merging

okonet · 2017-02-23T12:11:05Z

@kof can you commit the solution you're suggesting?

sapegin · 2017-02-23T12:38:08Z

@okonet @kof Basically these two lines. We need to merge styles with user’s styles and and also pass merged theme object. And strip Renderer for nicer class names.

I’m not sure it’s all possible to do with react-jss and what would be the best solution.

kof · 2017-02-23T13:20:27Z

Btw. WrappedComponent.name is not supported everywhere, haven't found caniuse data in this regard.

kof · 2017-02-23T13:21:58Z

react-jss uses options.meta property if you pass it, otherwise it falls back to a component name https://github.com/cssinjs/react-jss/blob/master/src/index.js#L36

kof · 2017-02-23T13:23:41Z

Why do you call them SomethingRenderer anyways and then replace the Renderer part in order to have nicer meta attributes on style tags? Why not to remove the Renderer thing from the name from the beginning? If it is not a container component, it is a renderer anyways, containers have no sheets.

kof · 2017-02-24T08:53:14Z

Ok, I have finished the SSR integration for JSS. I needed to do 2 suboptimal things, because of "react-html-document" component limitations.

We need to get the styles used by the application before we render the document. That module assumes we don't. So I needed to render the app to string first and then pass it to HtmlDocument inside of a div with dangerouslySetInnerHTML.
HtmlDocument abstraction doesn't give any option to define an attribute on server-side rendered style tag, in order to delete that tag once js kicks in I currently remove the first tag, but it will break if you add more style tags on the server and they will come first.

okonet · 2017-02-24T09:00:40Z

Hmm, that makes me think if we still should use HtmlDocument. Right now it looks as hack. Are there any better options to do that @kof?

kof · 2017-02-24T09:09:56Z

Yes, simple template string like here

kof · 2017-02-24T09:11:00Z

Or optionally own document renderer component without that dependency.

okonet · 2017-02-24T09:28:22Z

How own renderer would help us here?

kof · 2017-02-24T09:32:32Z

How own renderer would help us here?

It would specify an id for the ssr style tag.
It would accept content as an html string and incapsulate dangerouslySetInnerHTML

kof · 2017-02-24T09:33:07Z

Optionally this can be done by sending a pr to that original package and make this possible.

okonet · 2017-02-24T10:44:10Z

@kof do you mind updating the PR by removing the react-html-document and introducing the template string? I'm away for a few days so won't be able to work a lot. 🏂

kof · 2017-02-24T10:52:19Z

I think I can make it happen

sapegin · 2017-02-24T10:53:11Z

@kof Awesome!

okonet · 2017-03-07T10:29:43Z

@kof any news on this one?

kof · 2017-03-07T10:30:52Z

@okonet not yet, could find time right now, because on the trip

okonet · 2017-04-12T08:01:12Z

@sapegin NOOOO! Why did you close it?

sapegin · 2017-04-12T08:03:00Z

I’ve removed the next branch because it was merged, so it wasn’t me ;-| Is it possible to change the target branch without resending a PR?

okonet · 2017-04-12T08:05:31Z


It actually worked :) Still needs a rebase.

okonet · 2017-08-18T06:15:41Z

@kof do you think you could find some time to get this done any soon?

sapegin · 2017-08-18T06:52:58Z

We probably need to create another branch first because this one is probably from 4.x and it would be a nightmare to merge master to it.

kof · 2017-08-18T07:25:16Z

Will be hard, I have a great deal of issues on jss project.

FDiskas · 2023-05-25T15:06:13Z

Can be closed probably.

okonet and others added 5 commits February 18, 2017 11:44

WIP: Partially working static rendering

18aa677

WIP: Use react-html-document to render index.html for both server and…

d92dbcb

… client

WIP: Some fixes for SSR

1d05a94

Refactor: Decouple styleguide data loading from webpack loader

8c3ceed

Add gitignore for example's builds

37e10a5

okonet added the enhancement label Feb 18, 2017

okonet self-assigned this Feb 18, 2017

Remove unused plugin

2c80a6d

sapegin reviewed Feb 18, 2017

View reviewed changes

okonet and others added 4 commits February 18, 2017 12:41

Extract HTML Document rendering to a separate component

6ca6b88

Revert "Add gitignore for example's builds"

6367b36

This reverts commit 37e10a5.

WIP Working version of both client and server rendering with slugs

84761be

Merge branch 'next' into feat-static-rendering

c1dd726

Fixed tests

a074e70

sapegin reviewed Feb 22, 2017

View reviewed changes

okonet added 4 commits February 23, 2017 11:46

Use mutli-compiler mode of webpack for both server and build

48c443d

Use lodash/noop instead of node-noop

b6f5ac4

Split HtmlDocument to component and renderer

e6e9e00

Fixed tests for create-server

8e6bdbc

Add DOCTYPE

e0916d8

Fix charset metatag. This should fix phanomtjs tests on CI.

470cdbb

- Use proper `charSet` key for the metatag as of venmo/react-html-document#9 - Moved metatags to renderer to allow easy customization without merging

okonet and others added 2 commits February 24, 2017 10:01

Merge branch 'next' into feat-static-rendering

b5d2c4e

fix ssr in dev mode

c82a157

okonet mentioned this pull request Mar 15, 2017

className deprecation notice react-dropzone/react-dropzone#386

Closed

sapegin closed this Apr 12, 2017

okonet changed the base branch from next to master April 12, 2017 08:05

okonet reopened this Apr 12, 2017

okonet mentioned this pull request Aug 18, 2017

Use renderToStaticMarkup in when running build. #121

Open

okonet mentioned this pull request Apr 7, 2018

Performance improvement ideas #258

Open

snyk-bot mentioned this pull request Apr 16, 2021

[Snyk] Security upgrade copy-webpack-plugin from 4.6.0 to 5.0.0 rollup-umd/react-styleguidist#86

Open

This was referenced Aug 17, 2021

[Snyk] Fix for 1 vulnerabilities Bhanditz/react-styleguidist#112

Open

[Snyk] Security upgrade copy-webpack-plugin from 4.6.0 to 5.0.0 rollup-umd/react-styleguidist#94

Open

		@@ -0,0 +1 @@
		*/styleguide/.js

WIP: Static rendering #330

Are you sure you want to change the base?

WIP: Static rendering #330

Conversation

okonet commented Feb 18, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

okonet commented Feb 21, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

okonet commented Feb 23, 2017

codecov-io commented Feb 23, 2017 • edited Loading

Codecov Report

kof commented Feb 23, 2017 • edited Loading

okonet commented Feb 23, 2017

sapegin commented Feb 23, 2017

kof commented Feb 23, 2017

kof commented Feb 23, 2017

kof commented Feb 23, 2017 • edited Loading

kof commented Feb 24, 2017

okonet commented Feb 24, 2017

kof commented Feb 24, 2017

kof commented Feb 24, 2017

okonet commented Feb 24, 2017

kof commented Feb 24, 2017

kof commented Feb 24, 2017

okonet commented Feb 24, 2017

kof commented Feb 24, 2017

sapegin commented Feb 24, 2017

okonet commented Mar 7, 2017

kof commented Mar 7, 2017

okonet commented Apr 12, 2017

sapegin commented Apr 12, 2017

okonet commented Apr 12, 2017 • edited Loading

okonet commented Aug 18, 2017

sapegin commented Aug 18, 2017

kof commented Aug 18, 2017

FDiskas commented May 25, 2023 • edited Loading

codecov-io commented Feb 23, 2017 •

edited

Loading

kof commented Feb 23, 2017 •

edited

Loading

kof commented Feb 23, 2017 •

edited

Loading

okonet commented Apr 12, 2017 •

edited

Loading

FDiskas commented May 25, 2023 •

edited

Loading