mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-10 14:21:06 +03:00
Add CSS SSR support
This commit is contained in:
Brent Jackson
parent
00b2527629
commit
44b0cb5562
@ -5,9 +5,12 @@ const log = require('./log')
|
||||
|
||||
const build = async (opts = {}) => {
|
||||
log('rendering static html')
|
||||
const { body, head } = await renderHTML(opts)
|
||||
opts.head = head
|
||||
opts.body = body
|
||||
const { body, head, css } = await renderHTML(opts)
|
||||
Object.assign(opts, {
|
||||
body,
|
||||
head,
|
||||
css,
|
||||
})
|
||||
|
||||
log('bundling js')
|
||||
const config = createConfig(opts)
|
||||
|
||||
@ -13,6 +13,9 @@ const babel = {
|
||||
'babel-preset-env',
|
||||
'babel-preset-stage-0',
|
||||
'babel-preset-react',
|
||||
].map(require.resolve),
|
||||
plugins: [
|
||||
'babel-plugin-styled-components'
|
||||
].map(require.resolve)
|
||||
}
|
||||
|
||||
@ -55,6 +58,7 @@ const rules = [
|
||||
|
||||
const template = ({
|
||||
head = '<title>mdx-deck</title>',
|
||||
css = '',
|
||||
body = '',
|
||||
js,
|
||||
publicPath
|
||||
@ -65,7 +69,7 @@ const template = ({
|
||||
<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>
|
||||
<meta name='generator' content='mdx-deck'>
|
||||
${head}
|
||||
${head}${css}
|
||||
</head>
|
||||
<body>
|
||||
<div id=root>${body}</div>
|
||||
|
||||
11
lib/html.js
11
lib/html.js
@ -5,7 +5,9 @@ const {
|
||||
renderToString,
|
||||
renderToStaticMarkup
|
||||
} = require('react-dom/server')
|
||||
const { ServerStyleSheet } = require('styled-components')
|
||||
const webpack = require('webpack')
|
||||
const nodeExternals = require('webpack-node-externals')
|
||||
const rimraf = require('rimraf')
|
||||
const createConfig = require('./config')
|
||||
|
||||
@ -26,6 +28,7 @@ const getApp = async opts => {
|
||||
App: path.join(__dirname, '../dist/entry.js')
|
||||
}
|
||||
config.target = 'node'
|
||||
config.externals = [ nodeExternals() ]
|
||||
|
||||
const compiler = webpack(config)
|
||||
|
||||
@ -49,11 +52,15 @@ const getApp = async opts => {
|
||||
const renderHTML = async opts => {
|
||||
const App = await getApp(opts)
|
||||
const headTags = []
|
||||
const sheet = new ServerStyleSheet()
|
||||
const body = renderToString(
|
||||
React.createElement(App, { headTags })
|
||||
sheet.collectStyles(
|
||||
React.createElement(App, { headTags })
|
||||
)
|
||||
)
|
||||
const head = renderToStaticMarkup(headTags)
|
||||
return { body, head }
|
||||
const css = sheet.getStyleTags()
|
||||
return { body, head, css }
|
||||
}
|
||||
|
||||
module.exports = renderHTML
|
||||
|
||||
40
package-lock.json
generated
40
package-lock.json
generated
@ -13,6 +13,14 @@
|
||||
"@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": {
|
||||
"version": "7.0.0-rc.1",
|
||||
"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": {
|
||||
"version": "1.0.39",
|
||||
"resolved": "https://registry.npmjs.org/@compositor/webfont/-/webfont-1.0.39.tgz",
|
||||
@ -1112,6 +1137,16 @@
|
||||
"integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=",
|
||||
"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": {
|
||||
"version": "6.13.0",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz",
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
"ansi-html": "0.0.7",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-plugin-styled-components": "^1.5.1",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
@ -63,7 +64,8 @@
|
||||
"styled-system": "^3.0.2",
|
||||
"superbox": "^2.1.0",
|
||||
"webpack": "^4.16.5",
|
||||
"webpack-hot-client": "^4.1.1"
|
||||
"webpack-hot-client": "^4.1.1",
|
||||
"webpack-node-externals": "^1.7.2"
|
||||
},
|
||||
"peerDependencies": {},
|
||||
"devDependencies": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user