Jhernandez has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/378900 )
Change subject: WIP: Use Page template component in About page
......................................................................
WIP: Use Page template component in About page
Change-Id: I3bf347e27f15a5061e59de3c074e99e411e59531
---
A src/common/components/page/page.css
A src/common/components/page/page.tsx
M src/common/components/preact-utils.ts
M src/common/pages/about.tsx
M src/common/routers/api.ts
M src/common/routers/route.ts
M src/common/routers/router.ts
M webpack.config.ts
8 files changed, 101 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/00/378900/1
diff --git a/src/common/components/page/page.css
b/src/common/components/page/page.css
new file mode 100644
index 0000000..822885b
--- /dev/null
+++ b/src/common/components/page/page.css
@@ -0,0 +1,15 @@
+.Page {}
+
+.Page-title {
+ /* TODO: Extract to typography components once we have the specs */
+ font-size: var(--font-size-h4);
+ font-weight: bold;
+}
+
+.Page-subtitle {
+ /* TODO: Extract to typography components once we have the specs */
+ font-size: var(--font-size-note);
+ color: var(--wmui-color-base20);
+}
+
+.Page-content {}
\ No newline at end of file
diff --git a/src/common/components/page/page.tsx
b/src/common/components/page/page.tsx
new file mode 100644
index 0000000..ad7d71f
--- /dev/null
+++ b/src/common/components/page/page.tsx
@@ -0,0 +1,28 @@
+import { h } from "preact";
+import Paper, { Separator } from "../paper/paper";
+import { ChildrenProps } from "../preact-utils";
+import "./page.css";
+
+interface Props extends ChildrenProps {
+ title: JSX.Element | string;
+ subtitle: JSX.Element | string;
+}
+
+export default function Page({
+ title,
+ subtitle,
+ children
+}: Props): JSX.Element {
+ return (
+ <Paper>
+ <div class="Page">
+ <div class="Page-header">
+ <div class="Page-title">{title}</div>
+ <div class="Page-subtitle">{subtitle}</div>
+ </div>
+ {children && <Separator />}
+ <div class="Page-content">{children}</div>
+ </div>
+ </Paper>
+ );
+}
diff --git a/src/common/components/preact-utils.ts
b/src/common/components/preact-utils.ts
index 256a2d5..b515b9b 100644
--- a/src/common/components/preact-utils.ts
+++ b/src/common/components/preact-utils.ts
@@ -1,7 +1,22 @@
+import { FunctionalComponent, Component } from "preact";
+
// todo: delete pending https://github.com/developit/preact/pull/869.
export type ComponentChild = JSX.Element | string;
export type ComponentChildren = ComponentChild[];
+// TODO: Upstream fixed type definition for AnyComponent
+// export type AnyComponent<PropsType, StateType> =
+// | FunctionalComponent<PropsType>
+// | Component<PropsType, StateType>;
+
+// export type AnyComponent<
+// PropsType,
+// StateType,
+// C extends Component<PropsType, StateType>
+// > = C | FunctionalComponent<PropsType>;
+
+export { AnyComponent } from "preact";
+
export interface ChildrenProps {
children?: ComponentChildren;
}
diff --git a/src/common/pages/about.tsx b/src/common/pages/about.tsx
index 652f7ff..2136270 100644
--- a/src/common/pages/about.tsx
+++ b/src/common/pages/about.tsx
@@ -1,8 +1,35 @@
-import { h } from "preact";
+import { h, Component as PreactComponent } from "preact";
import App from "../components/app/app";
+import Page from "../components/page/page";
-export const Component = (): JSX.Element => (
- <App>
- <p>About Marvin</p>
- </App>
-);
+// Fake a type declaration for the global VERSION
+declare const VERSION: string;
+
+export interface State {
+ subtitle: string;
+}
+
+export class Component extends PreactComponent<void, State> {
+ constructor() {
+ super();
+ this.state = { subtitle: "" };
+ }
+
+ componentWillMount() {
+ // Fill the subtitle on the client with the information embedded in the
+ // assets (version and env)
+ const env = process.env.NODE_ENV || "development";
+ const subtitle = `Version ${VERSION}; Env: ${env}`;
+ this.setState({ subtitle });
+ }
+
+ render(_props: void, { subtitle }: State): JSX.Element {
+ return (
+ <App>
+ <Page title="About marvin" subtitle={subtitle}>
+ <p>About Marvin</p>
+ </Page>
+ </App>
+ );
+ }
+}
diff --git a/src/common/routers/api.ts b/src/common/routers/api.ts
index c45a584..5076526 100644
--- a/src/common/routers/api.ts
+++ b/src/common/routers/api.ts
@@ -1,4 +1,5 @@
import { Props as WikiProps, Params as WikiParams } from "../pages/wiki";
+import { State as AboutState } from "../pages/about";
import { AnyRoute, Route, newRoute } from "./route";
export const index: Route = newRoute({
@@ -8,7 +9,7 @@
chunkName: "pages/index"
});
-export const about: Route = newRoute({
+export const about: Route<void, AboutState> = newRoute({
path: "/about",
endpoint: () =>
import(/* webpackChunkName: "pages/about" */ "../pages/about"),
diff --git a/src/common/routers/route.ts b/src/common/routers/route.ts
index cbd5cb3..e688a9e 100644
--- a/src/common/routers/route.ts
+++ b/src/common/routers/route.ts
@@ -1,5 +1,5 @@
import * as pathToRegExp from "path-to-regexp";
-import { AnyComponent } from "preact";
+import { AnyComponent } from "../components/preact-utils";
export interface RouteParams {
[name: string]: string;
diff --git a/src/common/routers/router.ts b/src/common/routers/router.ts
index 0795667..9db0a75 100644
--- a/src/common/routers/router.ts
+++ b/src/common/routers/router.ts
@@ -1,5 +1,5 @@
import * as pathToRegExp from "path-to-regexp";
-import { AnyComponent } from "preact";
+import { AnyComponent } from "../components/preact-utils";
import { AnyRoute, Endpoint, RouteParams } from "../../common/routers/route";
export interface RouteResponse<Props, State> {
diff --git a/webpack.config.ts b/webpack.config.ts
index 3c1adc8..c7b76d5 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -9,6 +9,8 @@
WEBPACK_DEV_SERVER_URL
} from "./src/server/configuration";
+const pkg = require("./package.json");
+
const PATHS = {
// Files used by the client and the server.
public: {
@@ -181,6 +183,10 @@
// See also
//
https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31.
configuration.plugins = [
+ new webpack.DefinePlugin({
+ "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+ VERSION: JSON.stringify(pkg.version)
+ }),
// Reference modules by name instead of by chunk ID so hashes don't change
// when new files are added. For example,
// `"./node_modules/preact/dist/preact.esm.js"` instead of `18`.
--
To view, visit https://gerrit.wikimedia.org/r/378900
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3bf347e27f15a5061e59de3c074e99e411e59531
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <jhernan...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
