Permalink
Browse files

examples/react-app-styles-with-emotion: Complete & tested Emotion exa…

…mple (#1186)

* Example: react-app-styles-with-emotion (#1183)

* examples/react-app-styles-with-emotion: simplify and test
  • Loading branch information...
MoOx committed Oct 16, 2017
1 parent 2ad2182 commit 4855324ade822fb90c2b9b31fd0615231ac61765
@@ -0,0 +1,29 @@
import React from "react";
import { Router, Route, browserHistory } from "react-router";
import { createApp } from "@phenomic/preset-react-app/lib/client";
import { hydrate } from "emotion";
import styled from "react-emotion";
// window._emotion is set inside html.js and caches emotion styles
if (typeof window !== "undefined" && window._emotion) {
hydrate(window._emotion);
}
const Title = styled("h1")`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Title2 = styled("h1")`
font-size: 2em;
text-align: right;
color: blue;
`;
export default createApp(() => (
<Router history={browserHistory}>
<Route path="/" component={() => <Title>Hello World!</Title>} />
<Route path="/2" component={() => <Title2>Hello again!</Title2>} />
</Router>
));
@@ -0,0 +1,25 @@
import * as React from "react";
import { extractCritical } from "emotion-server";
export default ({ App, render }: PhenomicHtmlPropsType) => {
const { html, Main, State, Script } = render(<App />);
const { css, ids } = extractCritical(html);
return (
<html>
<head>
<style dangerouslySetInnerHTML={{ __html: css }} />
</head>
<body>
<Main />
<State />
<script
dangerouslySetInnerHTML={{
__html: `window._emotion = ${JSON.stringify(ids)}`
}}
/>
<Script />
</body>
</html>
);
};
@@ -0,0 +1,21 @@
/* eslint-disable import/no-extraneous-dependencies */
import path from "path";
import fs from "fs";
it("should build example correctly", () => {
const file1 = fs.readFileSync(
path.join(__dirname, "..", "dist", "index.html"),
{ encoding: "utf8" }
);
expect(file1).toContain("Hello World!");
expect(file1).toContain(
"font-size:1.5em;text-align:center;color:palevioletred"
);
const file2 = fs.readFileSync(
path.join(__dirname, "..", "dist", "2", "index.html"),
{ encoding: "utf8" }
);
expect(file2).toContain("Hello again!");
expect(file2).toContain("font-size:2em;text-align:right;color:blue");
});
@@ -0,0 +1,23 @@
{
"private": true,
"name": "@phenomic/example-react-app-styles-with-emotion",
"version": "1.0.0-alpha.12",
"devDependencies": {
"@phenomic/cli": "^1.0.0-alpha.12",
"@phenomic/core": "^1.0.0-alpha.12",
"@phenomic/preset-react-app": "^1.0.0-alpha.12",
"emotion": "^8.0.0",
"emotion-server": "^8.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-emotion": "^8.0.0",
"react-router": "^3.2.0"
},
"scripts": {
"start": "phenomic start",
"build": "phenomic build"
},
"phenomic": {
"presets": ["@phenomic/preset-react-app"]
}
}
@@ -28,3 +28,13 @@ declare module "rehype-stringify" {
declare module "rehype-react" {
declare var exports: any;
}
declare module "emotion" {
declare var exports: any;
}
declare module "emotion-server" {
declare var exports: any;
}
declare module "react-emotion" {
declare var exports: any;
}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 4855324

Please sign in to comment.