Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create SSR fixture #38

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Create SSR fixture #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9bfe2cc
Create ssr fixture
pomber Oct 13, 2018
0c1fca1
Fix prettier in windows
pomber Oct 13, 2018
9e32992
Render without client side JS
pomber Oct 13, 2018
902d096
Style
pomber Oct 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions fixtures/react-ssr/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
build
19 changes: 19 additions & 0 deletions fixtures/react-ssr/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "react-ssr-fixture",
"license": "MIT",
"private": true,
"version": "0.5.0",
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"code-surfer": "0.5.0",
"express": "^4.16.4",
"razzle": "^2.4.0",
"react": "^16.5.2",
"react-dom": "^16.5.2"
}
}
52 changes: 52 additions & 0 deletions fixtures/react-ssr/src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from "react";
import CodeSurfer from "code-surfer";
import prismTheme from "prism-react-renderer/themes/duotoneLight";

const code = `
const App = () => (
<div style={{ height: 100 }}>
<CodeSurfer code={code} />
</div>
);

console.log();
`;

const App = () => (
<div
style={{
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
background: prismTheme.plain.backgroundColor,
border: `1px solid ${prismTheme.plain.color}`,
borderRadius: "3px",
boxSizing: "border-box"
}}
>
<div style={{ flex: 1 }} />
<CodeSurfer
code={code}
showNumbers
step={{ lines: [2] }}
theme={prismTheme}
/>
<div style={{ flex: 1 }} />
<div
style={{
padding: "10px",
overflow: "hidden",
font: `12px -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`,
color: "#586069",
backgroundColor: "#f7f7f7",
borderTop: `1px solid ${prismTheme.plain.color}`,
borderRadius: "0 0 2px 2px"
}}
>
Foo
</div>
</div>
);

export default App;
9 changes: 9 additions & 0 deletions fixtures/react-ssr/src/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// import App from "./app";
// import React from "react";
// import { hydrate } from "react-dom";

// hydrate(<App />, document.getElementById("root"));

// if (module.hot) {
// module.hot.accept();
// }
26 changes: 26 additions & 0 deletions fixtures/react-ssr/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import app from "./server";
import http from "http";

const server = http.createServer(app);

let currentApp = app;

server.listen(process.env.PORT || 3000, error => {
if (error) {
console.log(error);
}

console.log("🚀 started");
});

if (module.hot) {
console.log("✅ Server-side HMR Enabled!");

module.hot.accept("./server", () => {
console.log("🔁 HMR Reloading `./server`...");
server.removeListener("request", currentApp);
const newApp = require("./server").default;
server.on("request", newApp);
currentApp = newApp;
});
}
55 changes: 55 additions & 0 deletions fixtures/react-ssr/src/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import App from "./app";
import React from "react";
import express from "express";
import { renderToString, renderToStaticMarkup } from "react-dom/server";
import inline from "glamor/inline";

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const server = express();
server
.disable("x-powered-by")
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
// .get("/oembed/*", (req, res) => {})
.get("/*", (req, res) => {
const markup = inline(renderToStaticMarkup(<App />));
res.status(200).send(
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title>Code Surfer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="alternate" type="application/json+oembed"
href="https://code-surfer.now.sh/oembed?url=${req.url}&format=json"
title="Code Surfer oEmbed" />
<link rel="alternate" type="text/xml+oembed"
href="https://code-surfer.now.sh/oembed?url=${req.url}&format=xml"
title="Code Surfer oEmbed" />
<style>
html, body, #root {
height: 100%;
padding: 0;
margin: 0;
}
</style>
${
"" && assets.client.css
? `<link rel="stylesheet" href="${assets.client.css}">`
: ""
}
${
"" && process.env.NODE_ENV === "production"
? `<script src="${assets.client.js}" defer></script>`
: `<script src="${assets.client.js}" defer crossorigin></script>`
}
</head>
<body>
<div id="root">${markup}</div>
</body>
</html>`
);
});

export default server;
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
"build:watch": "lerna exec yarn build:watch --no-private --parallel",
"start": "lerna exec yarn start --scope",
"start:fixture": "run-p build:watch \"start {1}-fixture\" --",
"format": "prettier --write '**/*.{js,jsx,css,md}'",
"format:check": "prettier-check '**/*.{js,jsx,css,md}'",
"format": "prettier --write \"**/*.{js,jsx,css,md}\"",
"format:check": "prettier-check \"**/*.{js,jsx,css,md}\"",
"test": "run-p format:check test:all",
"test:all": "lerna run test",
"build:website": "lerna exec yarn build --scope website",
Expand Down
3 changes: 2 additions & 1 deletion packages/code-surfer/src/scroller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const getNewCenter = (container, content, firstSelected, lastSelected) => {
// debugger;
const parentHeight = container.parentElement.offsetHeight;
container.style.padding = `${parentHeight / 2}px 0`;
container.style.height = 0;

firstSelected = firstSelected || content;
lastSelected = lastSelected || firstSelected;
Expand Down Expand Up @@ -136,7 +137,7 @@ export class Container extends React.Component {
style: Object.assign(
{},
{
height: 0,
// height: 0,
margin: 0,
overflow: "hidden",
textAlign: "center",
Expand Down
Loading