Permalink
Browse files

πŸŽ‰ examples/react-native-web-app

  • Loading branch information...
MoOx committed Apr 12, 2018
1 parent e31ae12 commit dd9d19f6e3a5dba60e7262311c8eb060d8661070
@@ -0,0 +1,42 @@
// @flow
import * as React from "react";
import { Router, Route, browserHistory } from "react-router";
import { createApp } from "@phenomic/preset-react-app/lib/client";
import { AppRegistry, Text } from "react-native-web";
const Title = props => (
<Text
{...props}
style={{
fontSize: "1.5em",
textAlign: "center",
color: "palevioletred"
}}
/>
);
const Title2 = props => (
<Text
{...props}
style={{
fontSize: "2em",
textAlign: "right",
color: "blue"
}}
/>
);
const routes = () => (
<Router history={browserHistory}>
<Route path="/" component={() => <Title>Hello World!</Title>} />
<Route path="/2" component={() => <Title2>Hello again!</Title2>} />
</Router>
);
const render = (rootComponent, rootTag) => {
AppRegistry.registerComponent("App", () => () => rootComponent);
AppRegistry.runApplication("App", { rootTag });
};

This comment has been minimized.

@MoOx

MoOx Apr 12, 2018

Member

Client side integration

export default createApp(routes, render);
@@ -0,0 +1,35 @@
// @flow
import * as React from "react";
import Head from "react-helmet";
import { AppRegistry } from "react-native-web";
const Html = ({ App, render }: PhenomicHtmlPropsType) => {
AppRegistry.registerComponent("App", () => App);
const app = AppRegistry.getApplication("App");
const { Main, State, Script, Style } = render(app.element);

This comment has been minimized.

@MoOx

MoOx Apr 12, 2018

Member

Static side integration

const helmet = Head.renderStatic();
return (
<html {...helmet.htmlAttributes.toComponent()}>
<head>
{helmet.meta.toComponent()}
{helmet.title.toComponent()}
{helmet.base.toComponent()}
{app.getStyleElement()}

This comment has been minimized.

@MoOx

MoOx Apr 12, 2018

Member

Don't forget this part :)

<Style />
{helmet.link.toComponent()}
{helmet.style.toComponent()}
{helmet.script.toComponent()}
{helmet.noscript.toComponent()}
</head>
<body {...helmet.bodyAttributes.toComponent()}>
<Main />
<State />
<Script />
</body>
</html>
);
};
export default Html;
@@ -0,0 +1,34 @@
// @flow
/* 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" }
);
const file2 = fs.readFileSync(
path.join(__dirname, "..", "dist", "2", "index.html"),
{ encoding: "utf8" }
);
expect(file1).toContain("Hello World!");
expect(file1).toContain("font-size:1.5em");
expect(file1).toContain("text-align:center");
expect(file1).toContain("color:palevioletred");
expect(file1).not.toContain("Hello again!");
expect(file1).not.toContain("font-size:2em");
expect(file1).not.toContain("text-align:right");
expect(file1).not.toContain("color:blue");
expect(file2).not.toContain("Hello World!");
expect(file2).not.toContain("font-size:1.5em");
expect(file2).not.toContain("text-align:center");
expect(file2).not.toContain("color:palevioletred");
expect(file2).toContain("Hello again!");
expect(file2).toContain("font-size:2em");
expect(file2).toContain("text-align:right");
expect(file2).toContain("color:blue");
});
@@ -0,0 +1,21 @@
{
"private": true,
"name": "@phenomic/example-react-native-app",
"version": "1.0.0-beta.2",
"devDependencies": {
"@phenomic/cli": "^1.0.0-beta.2",
"@phenomic/core": "^1.0.0-beta.2",
"@phenomic/preset-react-app": "^1.0.0-beta.2",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-native-web": "^0.5.0",
"react-router": "^3.2.0"
},
"scripts": {
"start": "phenomic start",
"build": "phenomic build"
},
"phenomic": {
"presets": ["@phenomic/preset-react-app"]
}
}

0 comments on commit dd9d19f

Please sign in to comment.