mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-30 00:44:20 +03:00
Add CSS SSR support
This commit is contained in:
parent
00b2527629
commit
44b0cb5562
@ -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)
|
||||||
|
@ -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>
|
||||||
|
@ -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(
|
||||||
|
sheet.collectStyles(
|
||||||
React.createElement(App, { headTags })
|
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
40
package-lock.json
generated
@ -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",
|
||||||
|
@ -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": {
|
||||||
|
Loading…
Reference in New Issue
Block a user