🎉 examples/react-native-web-app

MoOx · Apr 12, 2018 · dd9d19f · MoOx · Apr 12, 2018 · MoOx
1 parent e31ae12
commit dd9d19f
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 0 deletions.
diff --git a/examples/react-native-web-app/App.js b/examples/react-native-web-app/App.js
@@ -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 });
+};
+
+export default createApp(routes, render);
diff --git a/examples/react-native-web-app/Html.js b/examples/react-native-web-app/Html.js
@@ -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);
+
+  const helmet = Head.renderStatic();
+  return (
+    <html {...helmet.htmlAttributes.toComponent()}>
+      <head>
+        {helmet.meta.toComponent()}
+        {helmet.title.toComponent()}
+        {helmet.base.toComponent()}
+        {app.getStyleElement()}
+        <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;
diff --git a/examples/react-native-web-app/__tests__/index.js b/examples/react-native-web-app/__tests__/index.js
@@ -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");
+});
diff --git a/examples/react-native-web-app/package.json b/examples/react-native-web-app/package.json
@@ -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"]
+  }
+}