archive-gh-me/react-viewer
1
0
Fork 0
mirror of https://github.com/infeng/react-viewer.git synced 2025-12-08 17:36:40 +00:00
Code Issues Projects Releases Wiki Activity

fix: error in ssr

Browse Source
This commit is contained in:
infeng 2019-08-01 15:22:05 +08:00
parent 93d273362d
commit 69d3ec7ea8
8 changed files with 6373 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Viewer.tsx
View File

@ -12,16 +12,26 @@ export default class Viewer extends React.Component<ViewerProps, any> {
super();
this.container = null;
this.defaultContainer = document.createElement('div');
this.defaultContainer = null;
if (typeof document !== 'undefined') {
this.setDefaultContainer();
}
this.component = null;
}
setDefaultContainer() {
this.defaultContainer = document.createElement('div');
}
renderViewer() {
if (this.props.visible || this.component) {
if (!this.container) {
if (this.props.container) {
this.container = this.props.container;
} else {
if (!this.defaultContainer) {
this.setDefaultContainer();
}
this.container = this.defaultContainer;
document.body.appendChild(this.container);
}

8
ssr-test/.babelrc Normal file
View File

@ -0,0 +1,8 @@
{
"presets": [
"@babel/react"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}

26
ssr-test/app.js Normal file
View File

@ -0,0 +1,26 @@
const React = require('react');
const Viewer = require('../dist/index.js');
function App () {
const [ visible, setVisible ] = React.useState(false);
const images = [
{
src:
"https://infeng.github.io/react-viewer/59111ff2c38954887bc313887fe76e27.jpg"
},
{
src:
"https://infeng.github.io/react-viewer/bbbc41dac417d9fb4b275223a6a6d3e8.jpg"
}
];
return (
<div>
<button onClick={() => { setVisible(true); }}>{visible ? 'close' : 'open'}</button>
<Viewer images={images} visible={visible} />
</div>
);
}
module.exports = App;

5
ssr-test/client.js Normal file
View File

@ -0,0 +1,5 @@
const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./app');
ReactDOM.hydrate(<App />, document.getElementById('root'));

6238
ssr-test/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
ssr-test/package.json Normal file
View File

@ -0,0 +1,25 @@
{
"name": "ssr-test",
"version": "0.0.1",
"scripts": {
"start": "babel-node server.js",
"build": "webpack"
},
"dependencies": {
"@babel/cli": "^7.5.5",
"@babel/node": "^7.5.5",
"express": "^4.17.1",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"@types/react": "^16.8.24",
"@types/react-dom": "^16.8.5",
"babel-loader": "^8.0.6",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6"
}
}

30
ssr-test/server.js Normal file
View File

@ -0,0 +1,30 @@
'use strict';
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./app');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', function response(req, res) {
const html = ReactDOMServer.renderToString(<App />);
const _frontHtml = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="root">${html}</div>
<script src="/main.js"></script>
</body>
</html>`
res.send(_frontHtml);
});
var server = app.listen(process.env.PORT || 8005, '0.0.0.0', function () {
console.log('app listening on port ', process.env.PORT || 8005);
});

30
ssr-test/webpack.config.js Normal file
View File

@ -0,0 +1,30 @@
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './client.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
}
],
},
devtool: 'cheap-module-eval-source-map',
resolve: {
extensions: [ '.js' ],
modules: [path.join(__dirname, 'node_modules')],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
};