Niedzielski has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/374110 )
Change subject: WIP: New: add routing
......................................................................
WIP: New: add routing
Bug: T173323
Change-Id: Ieb205a96fba498d4e0127e4f894ab7aa3bea06a3
---
M package-lock.json
M package.json
M src/client/index.tsx
M src/client/tsconfig.json
M src/common/components/app/index.test.ts
M src/common/components/app/index.tsx
A src/common/components/pages/about.tsx
A src/common/components/pages/index.tsx
A src/common/components/pages/not-found.tsx
A src/common/routers/api.tsx
A src/common/routers/route.ts
M src/server/index.ts
A src/types/preact.d.ts
13 files changed, 125 insertions(+), 15 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/10/374110/1
diff --git a/package-lock.json b/package-lock.json
index ea4b546..c95a3f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,6 +50,12 @@
"integrity":
"sha512-c3Npme+2JGqxW8+B+aXdN5SPIlCf1C8WxQC6Ea39rO/ASPosnMkWVR16mDJtRE+2dr2xwOQ7DiLxb+wO/TWuPg==",
"dev": true
},
+ "@types/page": {
+ "version": "1.5.32",
+ "resolved": "https://registry.npmjs.org/@types/page/-/page-1.5.32.tgz";,
+ "integrity":
"sha512-mgpXPpersWqorz6456UZVREk3MoiKlq1XJUH/b/1J2mMFafuKCTOUc8j+EoNiETkIjE/Fv7E9loBA4gpEvKH9Q==",
+ "dev": true
+ },
"@types/serve-static": {
"version": "1.7.31",
"resolved":
"https://registry.npmjs.org/@types/serve-static/-/serve-static-1.7.31.tgz";,
@@ -4108,6 +4114,32 @@
"registry-url": "3.1.0"
}
},
+ "page": {
+ "version": "1.7.1",
+ "resolved": "https://registry.npmjs.org/page/-/page-1.7.1.tgz";,
+ "integrity": "sha1-OIbBR7iVSHeDdZs36AChEhO8OO0=",
+ "dev": true,
+ "requires": {
+ "path-to-regexp": "1.2.1"
+ },
+ "dependencies": {
+ "isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz";,
+ "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+ "dev": true
+ },
+ "path-to-regexp": {
+ "version": "1.2.1",
+ "resolved":
"https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.2.1.tgz";,
+ "integrity": "sha1-szcFwUAjTYc8hyHHuf2LVB7Tr/k=",
+ "dev": true,
+ "requires": {
+ "isarray": "0.0.1"
+ }
+ }
+ }
+ },
"pako": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz";,
diff --git a/package.json b/package.json
index 126b865..895300e 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
"--- HOOKS ---": "# Triggered scripts.",
"precommit": "npm test -s",
"--- INTERNAL ---": "# Private scripts.",
- "server:watch": "nodemon -i dist -i src/client -e js,json,ts,tsx
${VERBOSE:--q} -x 'ts-node src/server'",
+ "server:watch": "nodemon -i dist -i src/client -e js,json,ts,tsx
${VERBOSE:--q} -x 'ts-node -P src/server src/server'",
"server:build": "tsc -p src/server",
"client:watch": "webpack-dev-server -w",
"client:build": "webpack"
@@ -53,6 +53,7 @@
"@types/express": "^4.0.36",
"@types/mocha": "^2.2.41",
"@types/node": "^8.0.20",
+ "@types/page": "^1.5.32",
"@types/touch": "^3.1.0",
"assets-webpack-plugin": "^3.5.1",
"css-loader": "^0.28.5",
@@ -69,6 +70,7 @@
"mocha": "^3.5.0",
"nodemon": "^1.11.0",
"npm-run-all": "^4.0.2",
+ "page": "^1.7.1",
"prettier": "^1.5.3",
"sinon": "^3.0.0",
"style-loader": "^0.18.2",
diff --git a/src/client/index.tsx b/src/client/index.tsx
index 491feac..946899c 100644
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -1,10 +1,19 @@
import "./index.css";
-import { h, render } from "preact";
-import App from "../common/components/app";
+import * as page from "page";
+import { api } from "../common/routers/api";
+import { render } from "preact";
const root = document.getElementById("root");
if (!root) {
throw new Error('Missing element with "root" ID.');
}
-render(<App />, root, root.lastElementChild || undefined);
+api.forEach(route => {
+ page(route.path, () =>
+ route
+ .response()
+ .then((m: any) =>
+ render(m.default(), root, root.lastElementChild || undefined)
+ )
+ );
+});
diff --git a/src/client/tsconfig.json b/src/client/tsconfig.json
index 2820b53..e18ffe7 100644
--- a/src/client/tsconfig.json
+++ b/src/client/tsconfig.json
@@ -2,6 +2,7 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"target": "ES5",
- "module": "ES2015"
+ "module": "esnext",
+ "lib": [ "dom", "es2015" ]
}
}
diff --git a/src/common/components/app/index.test.ts
b/src/common/components/app/index.test.ts
index 08f68dc..df76ba2 100644
--- a/src/common/components/app/index.test.ts
+++ b/src/common/components/app/index.test.ts
@@ -5,6 +5,6 @@
describe("app()", () => {
it("salutes you", () => {
const html = render(app());
- assert.ok(html.indexOf("Hello world") !== -1, "App HTML contains a hello");
+ assert.ok(html.indexOf("About") !== -1, "App HTML contains an about");
});
});
diff --git a/src/common/components/app/index.tsx
b/src/common/components/app/index.tsx
index 968f576..b3f1573 100644
--- a/src/common/components/app/index.tsx
+++ b/src/common/components/app/index.tsx
@@ -1,7 +1,19 @@
import "./index.css";
import { FunctionalComponent, h } from "preact";
-const app: FunctionalComponent<any> = (_props: any): JSX.Element =>
- <div class="App">Hello world</div>;
+const app: FunctionalComponent<any> = ({ children } = {}) =>
+ <div class="App">
+ <ul>
+ <li>
+ <a href={"/about"}>About</a>
+ </li>
+ <li>
+ <a href={"/404"}>404</a>
+ </li>
+ </ul>
+ <div>
+ {children}
+ </div>
+ </div>;
export default app;
diff --git a/src/common/components/pages/about.tsx
b/src/common/components/pages/about.tsx
new file mode 100644
index 0000000..33c163d
--- /dev/null
+++ b/src/common/components/pages/about.tsx
@@ -0,0 +1,7 @@
+import App from "../app";
+import { h } from "preact";
+
+export default (): JSX.Element =>
+ <App>
+ <p>About Marvin</p>
+ </App>;
diff --git a/src/common/components/pages/index.tsx
b/src/common/components/pages/index.tsx
new file mode 100644
index 0000000..06a5c50
--- /dev/null
+++ b/src/common/components/pages/index.tsx
@@ -0,0 +1,7 @@
+import App from "../app";
+import { h } from "preact";
+
+export default (): JSX.Element =>
+ <App>
+ <p>Hello world!</p>
+ </App>;
diff --git a/src/common/components/pages/not-found.tsx
b/src/common/components/pages/not-found.tsx
new file mode 100644
index 0000000..4088313
--- /dev/null
+++ b/src/common/components/pages/not-found.tsx
@@ -0,0 +1,7 @@
+import App from "../app";
+import { h } from "preact";
+
+export default (): JSX.Element =>
+ <App>
+ <p>Not found</p>
+ </App>;
diff --git a/src/common/routers/api.tsx b/src/common/routers/api.tsx
new file mode 100644
index 0000000..e8bfe9e
--- /dev/null
+++ b/src/common/routers/api.tsx
@@ -0,0 +1,21 @@
+import { Route } from "./route";
+
+const index: Route = {
+ path: "/",
+ response: () => import("../components/pages/index"),
+ status: 200
+};
+
+const about: Route = {
+ path: "/about",
+ response: () => import("../components/pages/about"),
+ status: 200
+};
+
+const notFound: Route = {
+ path: "*",
+ response: () => import("../components/pages/not-found"),
+ status: 404
+};
+
+export const api = [index, about, notFound];
diff --git a/src/common/routers/route.ts b/src/common/routers/route.ts
new file mode 100644
index 0000000..d386ed5
--- /dev/null
+++ b/src/common/routers/route.ts
@@ -0,0 +1,5 @@
+export interface Route {
+ path: string,
+ response: () => Promise<any>,
+ status: number
+}
diff --git a/src/server/index.ts b/src/server/index.ts
index bd9d8b1..770e79b 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -2,7 +2,7 @@
import "ignore-styles";
import * as express from "express";
-import app from "../common/components/app";
+import { api } from "../common/routers/api";
import page from "./templates/page";
import { render } from "preact-render-to-string";
@@ -19,12 +19,18 @@
server.use(express.static("dist/public"));
-server.get("/", (_req, res) => {
- res.status(200).send(page({ title: "", body: render(app()), assets }));
-});
-
-server.get("*", (_req, res) => {
- res.status(404).send("Not found");
+api.forEach(route => {
+ server.get(route.path, (_request, response) => {
+ route.response().then((m: any) => {
+ response.status(route.status).send(
+ page({
+ title: "",
+ body: render(m.default()),
+ assets
+ })
+ );
+ });
+ });
});
server.listen(PORT, () => {
diff --git a/src/types/preact.d.ts b/src/types/preact.d.ts
new file mode 100644
index 0000000..5a5a94e
--- /dev/null
+++ b/src/types/preact.d.ts
@@ -0,0 +1 @@
+export declare type Children = JSX.Element | JSX.Element[] | string;
--
To view, visit https://gerrit.wikimedia.org/r/374110
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ieb205a96fba498d4e0127e4f894ab7aa3bea06a3
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Niedzielski <sniedziel...@wikimedia.org>
Gerrit-Reviewer: Sniedzielski <sniedziel...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
