jxnblk/mdx-deck
1
1
Fork 0
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-11-26 11:55:33 +03:00
Code Issues Projects Releases Wiki Activity

Add CSS SSR support

Browse Source
This commit is contained in:
Brent Jackson 2018-08-25 10:39:35 -04:00
parent 00b2527629
commit 44b0cb5562
5 changed files with 63 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lib/build.js
View File

@ -5,9 +5,12 @@ const log = require('./log')
const build = async (opts = {}) => { const build = async (opts = {}) => {
log('rendering static html') log('rendering static html')
const { body, head } = await renderHTML(opts) const { body, head, css } = await renderHTML(opts)
opts.head = head Object.assign(opts, {
opts.body = body body,
head,
css,
})
log('bundling js') log('bundling js')
const config = createConfig(opts) const config = createConfig(opts)

6
lib/config.js
View File

@ -13,6 +13,9 @@ const babel = {
'babel-preset-env', 'babel-preset-env',
'babel-preset-stage-0', 'babel-preset-stage-0',
'babel-preset-react', 'babel-preset-react',
].map(require.resolve),
plugins: [
'babel-plugin-styled-components'
].map(require.resolve) ].map(require.resolve)
} }
@ -55,6 +58,7 @@ const rules = [
const template = ({ const template = ({
head = '<title>mdx-deck</title>', head = '<title>mdx-deck</title>',
css = '',
body = '', body = '',
js, js,
publicPath publicPath
@ -65,7 +69,7 @@ const template = ({
<meta name='viewport' content='width=device-width,initial-scale=1'> <meta name='viewport' content='width=device-width,initial-scale=1'>
<style>*{box-sizing:border-box}body{font-family:system-ui,sans-serif;margin:0}</style> <style>*{box-sizing:border-box}body{font-family:system-ui,sans-serif;margin:0}</style>
<meta name='generator' content='mdx-deck'> <meta name='generator' content='mdx-deck'>
${head} ${head}${css}
</head> </head>
<body> <body>
<div id=root>${body}</div> <div id=root>${body}</div>

11
lib/html.js
View File

@ -5,7 +5,9 @@ const {
renderToString, renderToString,
renderToStaticMarkup renderToStaticMarkup
} = require('react-dom/server') } = require('react-dom/server')
const { ServerStyleSheet } = require('styled-components')
const webpack = require('webpack') const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const rimraf = require('rimraf') const rimraf = require('rimraf')
const createConfig = require('./config') const createConfig = require('./config')
@ -26,6 +28,7 @@ const getApp = async opts => {
App: path.join(__dirname, '../dist/entry.js') App: path.join(__dirname, '../dist/entry.js')
} }
config.target = 'node' config.target = 'node'
config.externals = [ nodeExternals() ]
const compiler = webpack(config) const compiler = webpack(config)
@ -49,11 +52,15 @@ const getApp = async opts => {
const renderHTML = async opts => { const renderHTML = async opts => {
const App = await getApp(opts) const App = await getApp(opts)
const headTags = [] const headTags = []
const sheet = new ServerStyleSheet()
const body = renderToString( const body = renderToString(
React.createElement(App, { headTags }) sheet.collectStyles(
React.createElement(App, { headTags })
)
) )
const head = renderToStaticMarkup(headTags) const head = renderToStaticMarkup(headTags)
return { body, head } const css = sheet.getStyleTags()
return { body, head, css }
} }
module.exports = renderHTML module.exports = renderHTML

40
package-lock.json generated
View File

@ -13,6 +13,14 @@
"@babel/highlight": "7.0.0-rc.1" "@babel/highlight": "7.0.0-rc.1"
} }
}, },
"@babel/helper-annotate-as-pure": {
"version": "7.0.0-rc.3",
"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-rc.3.tgz",
"integrity": "sha512-RhZtfIVaNmz9MfnvAdkxh8rgsYr1OCg1Oj3s7AC53W7Jm7sDeHGJihO3qnDcKbudHXyAdNWACTglRo+72pVhOQ==",
"requires": {
"@babel/types": "7.0.0-rc.3"
}
},
"@babel/highlight": { "@babel/highlight": {
"version": "7.0.0-rc.1", "version": "7.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-rc.1.tgz", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-rc.1.tgz",
@ -32,6 +40,23 @@
} }
} }
}, },
"@babel/types": {
"version": "7.0.0-rc.3",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-rc.3.tgz",
"integrity": "sha512-9sN1GWRztypQ2lViYR9HcClQILkObaX8vNFwrdgtMGB697xQePxSZqyhe8R2VR0afnJ1Jdg7y4X+IRE2CDRhDQ==",
"requires": {
"esutils": "^2.0.2",
"lodash": "^4.17.10",
"to-fast-properties": "^2.0.0"
},
"dependencies": {
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
}
}
},
"@compositor/webfont": { "@compositor/webfont": {
"version": "1.0.39", "version": "1.0.39",
"resolved": "https://registry.npmjs.org/@compositor/webfont/-/webfont-1.0.39.tgz", "resolved": "https://registry.npmjs.org/@compositor/webfont/-/webfont-1.0.39.tgz",
@ -1112,6 +1137,16 @@
"integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=", "integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=",
"dev": true "dev": true
}, },
"babel-plugin-styled-components": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.1.tgz",
"integrity": "sha1-MdvraW0TVNFYXmDWbHkF9eR0r80=",
"requires": {
"@babel/helper-annotate-as-pure": "^7.0.0-beta.37",
"babel-types": "^6.26.0",
"stylis": "^3.0.0"
}
},
"babel-plugin-syntax-async-functions": { "babel-plugin-syntax-async-functions": {
"version": "6.13.0", "version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
@ -9891,6 +9926,11 @@
"uuid": "^3.1.0" "uuid": "^3.1.0"
} }
}, },
"webpack-node-externals": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz",
"integrity": "sha512-ajerHZ+BJKeCLviLUUmnyd5B4RavLF76uv3cs6KNuO8W+HuQaEs0y0L7o40NQxdPy5w0pcv8Ew7yPUAQG0UdCg=="
},
"webpack-sources": { "webpack-sources": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz",

4
package.json
View File

@ -28,6 +28,7 @@
"ansi-html": "0.0.7", "ansi-html": "0.0.7",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-loader": "^7.1.5", "babel-loader": "^7.1.5",
"babel-plugin-styled-components": "^1.5.1",
"babel-preset-env": "^1.7.0", "babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", "babel-preset-stage-0": "^6.24.1",
@ -63,7 +64,8 @@
"styled-system": "^3.0.2", "styled-system": "^3.0.2",
"superbox": "^2.1.0", "superbox": "^2.1.0",
"webpack": "^4.16.5", "webpack": "^4.16.5",
"webpack-hot-client": "^4.1.1" "webpack-hot-client": "^4.1.1",
"webpack-node-externals": "^1.7.2"
}, },
"peerDependencies": {}, "peerDependencies": {},
"devDependencies": { "devDependencies": {