58 lines
1.9 KiB
JavaScript
58 lines
1.9 KiB
JavaScript
const { renderToString } = require('react-dom/server')
|
|
const { transform } = require('./babel')
|
|
const React = require('react')
|
|
const fs = require('fs')
|
|
const path = require('path')
|
|
const dirTree = require('directory-tree')
|
|
|
|
// Name of directory for saving transformed components that should be gitignored
|
|
const dist = 'dist'
|
|
|
|
// Build React components
|
|
// This loops through the react components and transpiles them to /dist
|
|
// so they can be used by Node.js when we do server side rendering
|
|
const tree = dirTree('./react/')
|
|
if (tree) {
|
|
for (const index in tree.children) {
|
|
const file = tree.children[index]
|
|
if (file.type === 'file' && file.extension === '.js') {
|
|
if (!fs.existsSync(path.join(dist, 'react'))) {
|
|
fs.mkdirSync(path.join(dist, 'react'), { recursive: true })
|
|
}
|
|
const content = transform(fs.readFileSync(file.path, 'utf8'))
|
|
fs.writeFileSync(path.join(dist, file.path), content)
|
|
}
|
|
}
|
|
}
|
|
// End Build React Components
|
|
|
|
// Register components
|
|
const components = {
|
|
// CodeBlock: require('../../dist/react/CodeBlock'),
|
|
// CodeEditor: require('../../dist/react/CodeEditor')
|
|
}
|
|
|
|
const renderReact = async componentStr => {
|
|
// Get component name as string so we can use it in the class name
|
|
// which will be needed later if we choose to do client side React hydration
|
|
const componentName = componentStr.match(/<([a-zA-Z]+)\s/)[1]
|
|
// Add the wrapper and class name so we can later use React hydration on the client
|
|
// side
|
|
const jsx = `<div className="react-component-${componentName}">\n${componentStr}\n</div>`
|
|
|
|
const component = transform(jsx)
|
|
|
|
// eslint-disable-next-line
|
|
const getComponent = new Function(
|
|
'React',
|
|
...Object.keys(components),
|
|
`${component.replace('React', 'return React')}`
|
|
)
|
|
|
|
return renderToString(getComponent(React, ...Object.values(components)))
|
|
}
|
|
|
|
module.exports = {
|
|
renderReact
|
|
}
|