From 15182684cb62bf15f04d94e08252633d10864e03 Mon Sep 17 00:00:00 2001 From: Parsa Ghadimi Date: Mon, 14 May 2018 21:46:28 +0430 Subject: [PATCH 01/10] components: ErrorPage --- src/components/error.tsx | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/error.tsx diff --git a/src/components/error.tsx b/src/components/error.tsx new file mode 100644 index 00000000..2f11a224 --- /dev/null +++ b/src/components/error.tsx @@ -0,0 +1,32 @@ +/*! + Copyright 2018 Propel http://propel.site/. All rights reserved. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ + +import { h } from "preact"; + +export interface ErrorPageProps { + header?: string; + message: string; +} + +export function ErrorPage(props: ErrorPageProps) { + return ( +
+
+

{ props.header || "Error" }

+

{ props.message }

+
+
+ ); +} From c21bd2901889c5f03695d27c0ab3c8c28a19741e Mon Sep 17 00:00:00 2001 From: Parsa Ghadimi Date: Fri, 18 May 2018 11:14:55 +0430 Subject: [PATCH 02/10] Implement router --- package.json | 1 + src/router.tsx | 129 +++++++++++++++++++++++++++++++++++++++++++++++++ tsconfig.json | 1 + yarn.lock | 4 ++ 4 files changed, 135 insertions(+) create mode 100644 src/router.tsx diff --git a/package.json b/package.json index a8da7a72..70759703 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "node-sass": "^4.9.0", "parcel-bundler": "^1.8.1", "parcel-plugin-markdown": "^0.3.1", + "path-to-regexp": "^2.2.1", "preact": "^8.2.7", "prettier": "^1.12.1", "puppeteer": "^0.13.0", diff --git a/src/router.tsx b/src/router.tsx new file mode 100644 index 00000000..62eef178 --- /dev/null +++ b/src/router.tsx @@ -0,0 +1,129 @@ +/*! + Copyright 2018 Propel http://propel.site/. All rights reserved. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ + +import pathToRegexp from "path-to-regexp"; +import { cloneElement, Component, VNode } from "preact"; + +let id = 0; +const listeners = new Map void>(); +const regexCache = new Map(); +const regexKeysCache = new Map(); + +export interface MatchedResult { + [key: string]: string; +} + +export function match(pattern: string): false | MatchedResult { + const path = window.location.pathname; + let regex = regexCache.get(pattern); + let keys = regexKeysCache.get(pattern); + if (!regex) { + const mKeys = []; + regex = pathToRegexp(pattern, mKeys); + keys = mKeys.map(x => x.name); + regexCache.set(pattern, regex); + regexKeysCache.set(pattern, keys); + } + const re = regex.exec(path); + if (!re) return false; + const data = {}; + for (const i in keys) { + if (!keys[i]) continue; + const key = keys[i]; + data[key] = re[1 + Number(i)]; + } + return data; +} + +function onPopState() { + const mapValues = listeners.values(); + for (const cb of mapValues) { + cb(); + } +} + +window.onpopstate = onPopState; + +export function pushState(url) { + window.history.pushState({}, document.title, url); + onPopState(); +} + +export function back() { + window.history.back(); +} + +export interface RouterChildProps { + path?: string; +} + +export type RouterChild = VNode; + +export interface RouterProps { + children?: RouterChild[]; +} + +export interface RouterState { + active: number | string; + props: MatchedResult; +} + +export class Router extends Component { + state = { + active: null, + props: null + }; + id: number; + + onLocationChange() { + const children: RouterChild[] = this.props.children; + for (const i in children) { + if (!children[i]) continue; + const child = children[i]; + const attributes = child.attributes; + if (!attributes || !attributes.path) { + this.setState({ active: i, props: null }); + return; + } + const props = match(attributes.path); + if (!props) continue; + this.setState({ active: i, props }); + return; + } + this.setState({ active: null, props: null }); + } + + componentWillMount() { + this.id = ++id; + listeners.set(id, this.onLocationChange.bind(this)); + this.onLocationChange(); + } + + componentWillUnmount() { + listeners.delete(this.id); + } + + componentWillReceiveProps() { + this.onLocationChange(); + } + + render() { + const { active, props } = this.state; + if (active === null) return null; + const activeEl = this.props.children[active]; + const newProps = { ...activeEl.attributes, matches: props }; + return cloneElement(activeEl, newProps); + } +} diff --git a/tsconfig.json b/tsconfig.json index 552a2671..264c6fb7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,6 +19,7 @@ "preserveConstEnums": true, "pretty": true, "sourceMap": true, + "allowSyntheticDefaultImports": true, "target": "es2017" }, "exclude": ["build", "deps", "node_modules", "src/testdata/"] diff --git a/yarn.lock b/yarn.lock index 35950fec..049a6135 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3907,6 +3907,10 @@ path-parse@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1" +path-to-regexp@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.2.1.tgz#90b617025a16381a879bc82a38d4e8bdeb2bcf45" + path-type@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441" From 7aa2f6e75f1fad6e832d43e077a212ab2dc10b55 Mon Sep 17 00:00:00 2001 From: Parsa Ghadimi Date: Fri, 18 May 2018 11:17:04 +0430 Subject: [PATCH 03/10] rm notebook_root.tsx and other unused codes --- src/db.ts | 2 - src/notebook_root.tsx | 243 ------------------------------------------ src/pages.tsx | 75 ------------- 3 files changed, 320 deletions(-) delete mode 100644 src/notebook_root.tsx diff --git a/src/db.ts b/src/db.ts index 851e4785..58df7aa5 100644 --- a/src/db.ts +++ b/src/db.ts @@ -102,7 +102,6 @@ class DatabaseFB implements Database { title: "", updated: firebase.firestore.FieldValue.serverTimestamp() }; - console.log({ newDoc }); const docRef = await nbCollection.add(newDoc); return docRef.id; } @@ -123,7 +122,6 @@ class DatabaseFB implements Database { title: "", updated: firebase.firestore.FieldValue.serverTimestamp() }; - console.log({ newDoc }); const docRef = await nbCollection.add(newDoc); return docRef.id; } diff --git a/src/notebook_root.tsx b/src/notebook_root.tsx deleted file mode 100644 index fba9c6c1..00000000 --- a/src/notebook_root.tsx +++ /dev/null @@ -1,243 +0,0 @@ -/*! - Copyright 2018 Propel http://propel.site/. All rights reserved. - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. - */ - -// Propel Notebooks. -// Note that this is rendered and executed server-side using JSDOM and then is -// re-rendered client-side. The Propel code in the cells are executed -// server-side so the results can be displayed even if javascript is disabled. - -import { Component, h } from "preact"; -import { normalizeCode } from "./components/common"; -import { GlobalHeader } from "./components/header"; -import { Loading } from "./components/loading"; -import { UserMenu } from "./components/menu"; -import { Notebook } from "./components/notebook"; -import { Profile } from "./components/profile"; -import { Recent } from "./components/recent"; -import * as db from "./db"; -import * as types from "./types"; - -// An anonymous notebook doc for when users aren't logged in -const anonDoc = { - anonymous: true, - cells: [], - created: new Date(), - owner: { - displayName: "Anonymous", - photoURL: require("./img/anon_profile.png"), - uid: "" - }, - title: "Anonymous Notebook", - updated: new Date() -}; - -export interface FixedProps { - code: string; -} - -// FixedCell is for non-executing notebook-lookalikes. Usually will be used for -// non-javascript code samples. -// TODO share more code with Cell. -export class FixedCell extends Component { - render() { - // Render as a pre in case people don't have javascript turned on. - return ( -
-
- 
{normalizeCode(this.props.code)}
-
-
- ); - } -} - -export interface NotebookRootProps { - userInfo?: types.UserInfo; // The current user who is logged in. - // If nbId is specified, it will be queried, and set in doc. - nbId?: string; - // If profileId is specified, it will be queried. - profileUid?: string; - // If neither nbId nor profileUid is specified, NotebookRoot will - // use the current URL's query string to search fo nbId and profile. - // If those are not found, NotebookRoot will query the most recent. - onReady: () => void; -} - -export interface NotebookRootState { - // Same as in props, but after checking window.location. - nbId?: string; - profileUid?: string; - - // If set a Notebook for this doc will be displayed. - doc?: types.NotebookDoc; - // If set the most-recent page will be displayed. - mostRecent?: types.NbInfo[]; - // If set the profile page will be displayed. - profileLatest?: types.NbInfo[]; - - errorMsg?: string; -} - -export class NotebookRoot extends Component< - NotebookRootProps, - NotebookRootState -> { - notebookRef?: Notebook; // Hook for testing. - isCloningInProgress: boolean; - - constructor(props) { - super(props); - let nbId; - if (this.props.nbId) { - nbId = this.props.nbId; - } else { - const matches = window.location.search.match(/nbId=(\w+)/); - nbId = matches ? matches[1] : null; - } - let profileUid; - if (this.props.profileUid) { - profileUid = this.props.profileUid; - } else { - const matches = window.location.search.match(/profile=(\w+)/); - profileUid = matches ? matches[1] : null; - } - this.state = { nbId, profileUid }; - } - - async componentWillMount() { - // Here is where we query firebase for all sorts of messages. - const { nbId, profileUid } = this.state; - try { - if (nbId) { - // nbId specified. Query the the notebook. - const doc = await (nbId === "anonymous" - ? Promise.resolve(anonDoc) - : db.active.getDoc(nbId)); - this.setState({ doc }); - } else if (profileUid) { - // profileUid specified. Query the profile. - const profileLatest = await db.active.queryProfile(profileUid, 100); - this.setState({ profileLatest }); - } else { - // Neither specified. Show the most-recent. - // TODO potentially these two queries can be combined into one. - const mostRecent = await db.active.queryLatest(); - this.setState({ mostRecent }); - } - } catch (e) { - this.setState({ errorMsg: e.message }); - } - } - - async componentDidUpdate() { - // Call the onReady callback for testing. - if ( - this.state.errorMsg || - this.state.mostRecent || - this.state.profileLatest || - this.state.doc - ) { - if (this.props.onReady) this.props.onReady(); - } - } - - private async onNewNotebook() { - const nbId = await db.active.create(); - window.location.href = nbUrl(nbId); - } - - private async onOpenNotebook(nbId: string) { - window.location.href = nbUrl(nbId); - } - - private async handleNotebookSave(doc: types.NotebookDoc) { - this.setState({ doc }); - if (doc.anonymous) return; - if (!this.props.userInfo) return; - if (this.props.userInfo.uid !== doc.owner.uid) return; - try { - await db.active.updateDoc(this.state.nbId, doc); - } catch (e) { - // TODO - console.log(e); - } - } - - async handleNotebookClone() { - if (this.isCloningInProgress) return; - this.isCloningInProgress = true; - const cloneId = await db.active.clone(this.state.doc); - // Redirect to new notebook. - window.location.href = nbUrl(cloneId); - } - - render() { - let body; - if (this.state.errorMsg) { - body = ( -
-
-

Error

-

{this.state.errorMsg}

-
-
- ); - } else if (this.state.profileLatest) { - body = ( - - ); - } else if (this.state.doc) { - body = ( - (this.notebookRef = ref)} - userInfo={this.props.userInfo} - /> - ); - } else if (this.state.mostRecent) { - body = ( - - ); - } else { - body = ; - } - - return ( -
- - - - {body} -
- ); - } -} - -function nbUrl(nbId: string): string { - const u = window.location.origin + "/notebook?nbId=" + nbId; - return u; -} diff --git a/src/pages.tsx b/src/pages.tsx index 7f9b9b6b..1c3283f3 100644 --- a/src/pages.tsx +++ b/src/pages.tsx @@ -15,22 +15,6 @@ // tslint:disable:variable-name // This is the propelml.org website. It is used both server-side and // client-side for generating HTML. -import { Component, h, render } from "preact"; -import { Home } from "./components/home"; -import * as db from "./db"; -import * as nb from "./notebook_root"; -import * as types from "./types"; - -export interface Page { - title: string; - path: string; - root: any; - route: RegExp; -} - -export function renderPage(p: Page): void { - render(h(p.root, null), document.body, document.body.children[0]); -} export let firebaseUrls = [ "https://www.gstatic.com/firebasejs/4.9.0/firebase.js", @@ -67,62 +51,3 @@ export function getHTML(title, markup) { `; } - -export interface RouterState { - userInfo?: types.UserInfo; - loadingAuth: boolean; -} - -// The root of all pages of the propel website. -// Handles auth. -export class Router extends Component { - constructor(props) { - super(props); - this.state = { - loadingAuth: true, - userInfo: null - }; - } - - unsubscribe: db.UnsubscribeCb; - componentWillMount() { - this.unsubscribe = db.active.subscribeAuthChange(userInfo => { - this.setState({ loadingAuth: false, userInfo }); - }); - } - - componentWillUnmount() { - this.unsubscribe(); - } - - render() { - console.log("document.location.pathname", document.location.pathname); - const page = route(document.location.pathname); - return h(page.root, { userInfo: this.state.userInfo }); - } -} - -export function route(pathname: string): Page { - for (const page of pages) { - if (pathname.match(page.route)) { - return page; - } - } - // TODO 404 page - return null; -} - -export const pages: Page[] = [ - { - title: "Propel ML", - path: "index.html", - root: Home, - route: /^\/(index.html)?$/ - }, - { - title: "Propel Notebook", - path: "notebook.html", - root: nb.NotebookRoot, - route: /^\/notebook/ - } -]; From f452ad08768834e6db8520a4fdffb1d181033d65 Mon Sep 17 00:00:00 2001 From: Parsa Ghadimi Date: Fri, 18 May 2018 11:19:09 +0430 Subject: [PATCH 04/10] Implement Propel router and some fixes in components --- src/app.tsx | 209 ++++++++++++++++++++++++++++++++++ src/components/menu.tsx | 1 + src/components/notebook.tsx | 19 ++-- src/components/user_title.tsx | 19 +--- src/main.tsx | 4 +- 5 files changed, 229 insertions(+), 23 deletions(-) create mode 100644 src/app.tsx diff --git a/src/app.tsx b/src/app.tsx new file mode 100644 index 00000000..77617e6e --- /dev/null +++ b/src/app.tsx @@ -0,0 +1,209 @@ +/*! + Copyright 2018 Propel http://propel.site/. All rights reserved. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ + +import { Component, h } from "preact"; +import * as db from "./db"; +import { pushState, Router } from "./router"; +import * as types from "./types"; +import { equal } from "./util"; + +import { ErrorPage } from "./components/error"; +import { GlobalHeader } from "./components/header"; +import { Home } from "./components/home"; +import { Loading } from "./components/loading"; +import { UserMenu } from "./components/menu"; +import { Notebook } from "./components/notebook"; +import { Profile } from "./components/profile"; +import { Recent } from "./components/recent"; + +interface BindProps { + [key: string]: (props: any) => Promise; +} + +interface BindState { + data: { [key: string]: string }; + error: string; +} + +/** + * This react HOC can be used to bind result of some async + * methods to props of the given component (C). + * see: https://reactjs.org/docs/higher-order-components.html + * + * const newComponent = bind(Component, { + * async prop(props) { + * const re = await someAsyncActions(); + * return re; + * } + * }); + */ +function bind(C, bindProps: BindProps) { + return class extends Component { + state = { data: null, error: null }; + prevMatches = null; + + async loadData() { + if (equal(this.props.matches, this.prevMatches)) return; + this.prevMatches = this.props.matches; + const data = {}; + for (const key in bindProps) { + if (!bindProps[key]) continue; + try { + data[key] = await bindProps[key](this.props); + } catch (e) { + this.setState({ data: null, error: e.message }); + return; + } + } + this.setState({ data, error: null }); + } + + render() { + this.loadData(); + const { data, error } = this.state; + if (error) return ; + if (!data) return ; + return ; + } + }; +} + +// An anonymous notebook doc for when users aren't logged in +const anonDoc = { + anonymous: true, + cells: [], + created: new Date(), + owner: { + displayName: "Anonymous", + photoURL: require("./img/anon_profile.png"), + uid: "" + }, + title: "Anonymous Notebook", + updated: new Date() +}; + +// TODO Move these components to ./pages.tsx. +// tslint:disable:variable-name +async function onNewNotebook() { + const nbId = await db.active.create(); + // Redirect to new notebook. + pushState(`/notebook/${nbId}`); +} + +async function onOpenNotebook(nbId: string) { + // Redirect to notebook. + pushState(`/notebook/${nbId}`); +} + +export const RecentPage = bind(Recent, { + notebooks() { + return db.active.queryLatest(); + }, + async onNewNotebook() { + return () => onNewNotebook(); + }, + async onOpenNotebook() { + return (nbId: string) => onOpenNotebook(nbId); + } +}); + +export const ProfilePage = bind(Profile, { + notebooks(props) { + const uid = props.matches.userId; + return db.active.queryProfile(uid, 100); + }, + async onNewNotebook() { + return () => onNewNotebook(); + }, + async onOpenNotebook() { + return (nbId: string) => onOpenNotebook(nbId); + } +}); + +export const NotebookPage = bind(Notebook, { + initialDoc(props) { + const nbId = props.matches.nbId; + return nbId === "anonymous" + ? Promise.resolve(anonDoc) + : db.active.getDoc(nbId); + }, + save(props) { + const nbId = props.matches.nbId; + const cb = async doc => { + if (doc.anonymous) return; + if (!props.userInfo) return; + if (props.userInfo.uid !== doc.owner.uid) return; + try { + await db.active.updateDoc(nbId, doc); + } catch (e) { + // TODO + console.log(e); + } + }; + return Promise.resolve(cb); + }, + clone(props) { + const cb = async doc => { + const cloneId = await db.active.clone(doc); + // Redirect to new notebook. + pushState(`/notebook/${cloneId}`); + }; + return Promise.resolve(cb); + } +}); + +export const HomePage = bind(Home, {}); +// tslint:enable:variable-name + +export interface AppState { + loadingAuth: boolean; + userInfo: types.UserInfo; +} + +export class App extends Component<{}, AppState> { + state = { + loadingAuth: true, + userInfo: null + }; + + unsubscribe: db.UnsubscribeCb; + componentWillMount() { + this.unsubscribe = db.active.subscribeAuthChange(userInfo => { + this.setState({ loadingAuth: false, userInfo }); + }); + } + + componentWillUnmount() { + this.unsubscribe(); + } + + render() { + const { userInfo } = this.state; + return ( +
+ + + + + + + + + + +
+ ); + } +} diff --git a/src/components/menu.tsx b/src/components/menu.tsx index fea805bc..7e9a39e4 100644 --- a/src/components/menu.tsx +++ b/src/components/menu.tsx @@ -26,6 +26,7 @@ export interface UserMenuProps { export function UserMenu(props): JSX.Element { if (props.userInfo) { + // TODO "Your notebooks" link return (
diff --git a/src/components/notebook.tsx b/src/components/notebook.tsx index 6ff7f0f1..ad03f405 100644 --- a/src/components/notebook.tsx +++ b/src/components/notebook.tsx @@ -35,7 +35,7 @@ export interface NotebookProps { save?: (doc: types.NotebookDoc) => void; initialDoc?: types.NotebookDoc; userInfo?: types.UserInfo; // Info about currently logged in user. - clone?: () => void; + clone?: (doc: types.NotebookDoc) => void; } export interface NotebookState { @@ -178,12 +178,7 @@ export class Notebook extends Component { this.active = cellId; } - onClone() { - if (this.props.clone) this.props.clone(); - } - - save() { - if (!this.props.save) return; + toDoc(): types.NotebookDoc { const cells = []; for (const key of this.state.order) { cells.push(this.state.codes.get(key)); @@ -199,7 +194,15 @@ export class Notebook extends Component { title: this.state.title, updated: new Date() }; - this.props.save(doc); + return doc; + } + + onClone() { + if (this.props.clone) this.props.clone(this.toDoc()); + } + + save() { + if (this.props.save) this.props.save(this.toDoc()); } handleTitleChange(event) { diff --git a/src/components/user_title.tsx b/src/components/user_title.tsx index 28acf6fb..5598119c 100644 --- a/src/components/user_title.tsx +++ b/src/components/user_title.tsx @@ -17,27 +17,20 @@ import { h } from "preact"; import * as types from "../types"; import { Avatar } from "./avatar"; -export function profileLink( - u: types.UserInfo, - text: string = null -): JSX.Element { - const href = window.location.origin + "/notebook?profile=" + u.uid; - return ( - - {text ? text : u.displayName} - - ); -} - export interface UserTitleProps { userInfo: types.UserInfo; } export function UserTitle(props: UserTitleProps): JSX.Element { + const href = window.location.origin + "/user/" + props.userInfo.uid; return (
-

{profileLink(props.userInfo)}

+

+ + {props.userInfo.displayName} + +

); } diff --git a/src/main.tsx b/src/main.tsx index e73e6903..79df70ca 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,7 @@ import { h, render, rerender } from "preact"; +import { App } from "./app"; import { drainExecuteQueue } from "./components/cell"; import { enableFirebase } from "./db"; -import { Router } from "./pages"; import { assert, IS_WEB } from "./util"; assert(IS_WEB); @@ -9,7 +9,7 @@ assert(IS_WEB); enableFirebase(); window.addEventListener("load", async () => { - render(, document.body, document.body.children[0]); + render(, document.body, document.body.children[0]); await drainExecuteQueue(); // If we're in a testing environment... From f17a23545d88b5061a4625842dc8ccef970ae72c Mon Sep 17 00:00:00 2001 From: Parsa Ghadimi Date: Fri, 18 May 2018 12:27:31 +0430 Subject: [PATCH 05/10] Update nb_test --- src/app.tsx | 8 +++++++- src/nb_test.ts | 42 ++++++++++++++++++------------------------ 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 77617e6e..58c9f7d9 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -53,6 +53,11 @@ function bind(C, bindProps: BindProps) { return class extends Component { state = { data: null, error: null }; prevMatches = null; + componentRef; + + private onReady() { + if (this.props.onReady) this.props.onReady(); + } async loadData() { if (equal(this.props.matches, this.prevMatches)) return; @@ -75,7 +80,8 @@ function bind(C, bindProps: BindProps) { const { data, error } = this.state; if (error) return ; if (!data) return ; - return ; + this.onReady(); + return (this.componentRef = r)} {...this.props} {...data} />; } }; } diff --git a/src/nb_test.ts b/src/nb_test.ts index 88858180..e72f919f 100644 --- a/src/nb_test.ts +++ b/src/nb_test.ts @@ -1,24 +1,13 @@ import { h, render, rerender } from "preact"; import { testBrowser } from "../tools/tester"; +import { NotebookPage, ProfilePage } from "./app"; import { cellExecuteQueue } from "./components/cell"; import { Notebook } from "./components/notebook"; import * as db from "./db"; -import * as nb from "./notebook_root"; import { assert, assertEqual, createResolvable, delay } from "./util"; const DOC_TITLE = "Anonymous Notebook"; -testBrowser(async function notebook_NotebookRoot() { - const mdb = db.enableMock(); - resetPage(); - const el = h(nb.NotebookRoot, {}); - render(el, document.body); - await flush(); - assertEqual(mdb.counts, { queryLatest: 1 }); - const c = document.body.getElementsByTagName("div")[0]; - assertEqual(c.className, "notebook"); -}); - testBrowser(async function notebook_Notebook() { const mdb = db.enableMock(); await renderAnonNotebook(); @@ -140,7 +129,7 @@ testBrowser(async function notebook_profile() { }); testBrowser(async function notebook_executeQueue() { - const { notebookRef } = await renderAnonNotebook(); + const notebookRef = await renderAnonNotebook(); // All the cells must be executed now. assertEqual(cellExecuteQueue.length, 0); const cell1 = await notebookRef.insertCell(2, "a = 0"); @@ -163,7 +152,7 @@ testBrowser(async function notebook_executeQueue() { testBrowser(async function notebook_urlImport() { db.enableMock(); - const { notebookRef } = await renderAnonNotebook(); + const notebookRef = await renderAnonNotebook(); const testdataUrl = `${location.origin}/repo/src/testdata`; const cell1 = await notebookRef.insertCell(1, ` @@ -196,27 +185,32 @@ function resetPage() { function renderProfile(profileUid: string) { const promise = createResolvable(); resetPage(); - const el = h(nb.NotebookRoot, { - onReady: promise.resolve, - profileUid + const el = h(ProfilePage, { + matches: { + userId: profileUid + }, + onReady: promise.resolve }); render(el, document.body); return promise; } -async function renderAnonNotebook(): Promise { +async function renderAnonNotebook(): Promise { const promise = createResolvable(); resetPage(); - let notebookRoot: nb.NotebookRoot; - const el = h(nb.NotebookRoot, { - nbId: "default", + let notebookRoot; + const el = h(NotebookPage, { + matches: { + nbId: "default" + }, onReady: promise.resolve, - ref: n => (notebookRoot = n) + ref: ref => (notebookRoot = ref) }); render(el, document.body); await promise; - await notebookRoot.notebookRef.isReady; - return notebookRoot; + const notebookRef = notebookRoot.componentRef; + await notebookRef.isReady; + return notebookRef; } async function renderNotebook(): Promise { From 0af2e48dfb8180f2ed648274c0437f283b968fd7 Mon Sep 17 00:00:00 2001 From: Parsa Ghadimi Date: Sat, 19 May 2018 19:25:18 +0430 Subject: [PATCH 06/10] Use hash history instead of browser's native history --- package.json | 2 ++ src/app.tsx | 8 +++---- src/components/footer.tsx | 9 ++++---- src/components/link.tsx | 28 ++++++++++++++++++++++++ src/components/logo.tsx | 5 +++-- src/components/recent.tsx | 11 ++++++++-- src/components/user_title.tsx | 7 +++--- src/router.tsx | 41 +++++++++++++++++------------------ yarn.lock | 32 +++++++++++++++++++++++++-- 9 files changed, 105 insertions(+), 38 deletions(-) create mode 100644 src/components/link.tsx diff --git a/package.json b/package.json index 70759703..b42b4ad1 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,12 @@ "devDependencies": { "@types/acorn": "^4.0.3", "@types/codemirror": "0.0.51", + "@types/history": "^4.6.2", "@types/node": "^8.9.4", "acorn": "^5.5.0", "codemirror": "^5.35.0", "he": "^1.1.1", + "history": "^4.7.2", "ncp": "^2.0.0", "node-fetch": "^1.7.3", "node-sass": "^4.9.0", diff --git a/src/app.tsx b/src/app.tsx index 58c9f7d9..11169b2e 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -15,7 +15,7 @@ import { Component, h } from "preact"; import * as db from "./db"; -import { pushState, Router } from "./router"; +import { push, Router } from "./router"; import * as types from "./types"; import { equal } from "./util"; @@ -105,12 +105,12 @@ const anonDoc = { async function onNewNotebook() { const nbId = await db.active.create(); // Redirect to new notebook. - pushState(`/notebook/${nbId}`); + push(`/notebook/${nbId}`); } async function onOpenNotebook(nbId: string) { // Redirect to notebook. - pushState(`/notebook/${nbId}`); + push(`/notebook/${nbId}`); } export const RecentPage = bind(Recent, { @@ -164,7 +164,7 @@ export const NotebookPage = bind(Notebook, { const cb = async doc => { const cloneId = await db.active.clone(doc); // Redirect to new notebook. - pushState(`/notebook/${cloneId}`); + push(`/notebook/${cloneId}`); }; return Promise.resolve(cb); } diff --git a/src/components/footer.tsx b/src/components/footer.tsx index b0efefd1..9e93f257 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -14,14 +14,15 @@ */ import { h } from "preact"; +import { Link } from "./link"; export function Footer(): JSX.Element { return (
- References - Documentation - GitHub - Contact + References + Documentation + GitHub + Contact
); } diff --git a/src/components/link.tsx b/src/components/link.tsx new file mode 100644 index 00000000..fb66236f --- /dev/null +++ b/src/components/link.tsx @@ -0,0 +1,28 @@ +/*! + Copyright 2018 Propel http://propel.site/. All rights reserved. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ + +import { h } from "preact"; +import { push } from "../router"; + +export interface LinkProps extends JSX.HTMLAttributes { + href: string; +} + +export function Link(props: LinkProps) { + const { href, children, ...otherProps } = props; + return ( + push(href)} {...otherProps} > { children } + ); +} diff --git a/src/components/logo.tsx b/src/components/logo.tsx index 192aa58e..3a98f0f5 100644 --- a/src/components/logo.tsx +++ b/src/components/logo.tsx @@ -14,6 +14,7 @@ */ import { h } from "preact"; +import { Link } from "./link"; export interface PropelLogoProps { subtitle?: string; @@ -26,7 +27,7 @@ export function PropelLogo(props: PropelLogoProps): JSX.Element { if (props.subtitle) { Subtitle = (

- {props.subtitle} + {props.subtitle}

); } @@ -45,7 +46,7 @@ export function PropelLogo(props: PropelLogoProps): JSX.Element {

- Propel + Propel

{Subtitle}
diff --git a/src/components/recent.tsx b/src/components/recent.tsx index 6dec05f7..0f27edaa 100644 --- a/src/components/recent.tsx +++ b/src/components/recent.tsx @@ -15,9 +15,9 @@ import { Component, h } from "preact"; import * as types from "../types"; +import { Link } from "./link"; import { NotebookList } from "./list"; import { NewNotebookButton } from "./new_notebook_button"; -import { profileLink } from "./user_title"; export interface RecentProps { notebooks: types.NbInfo[]; @@ -52,7 +52,14 @@ export class Recent extends Component { if (this.props.userInfo) { profileLinkEl = (
-

{profileLink(this.props.userInfo, "Your Notebooks")}

+

+ + {this.props.userInfo.displayName} + +

); } diff --git a/src/components/user_title.tsx b/src/components/user_title.tsx index 5598119c..8f920976 100644 --- a/src/components/user_title.tsx +++ b/src/components/user_title.tsx @@ -16,20 +16,21 @@ import { h } from "preact"; import * as types from "../types"; import { Avatar } from "./avatar"; +import { Link } from "./link"; export interface UserTitleProps { userInfo: types.UserInfo; } export function UserTitle(props: UserTitleProps): JSX.Element { - const href = window.location.origin + "/user/" + props.userInfo.uid; + const href = "/user/" + props.userInfo.uid; return (

- + {props.userInfo.displayName} - +

); diff --git a/src/router.tsx b/src/router.tsx index 62eef178..6aaa9dca 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -13,11 +13,13 @@ limitations under the License. */ +import { createHashHistory } from "history"; import pathToRegexp from "path-to-regexp"; import { cloneElement, Component, VNode } from "preact"; let id = 0; const listeners = new Map void>(); +const history = createHashHistory(); const regexCache = new Map(); const regexKeysCache = new Map(); @@ -26,7 +28,7 @@ export interface MatchedResult { } export function match(pattern: string): false | MatchedResult { - const path = window.location.pathname; + const path = history.location.pathname; let regex = regexCache.get(pattern); let keys = regexKeysCache.get(pattern); if (!regex) { @@ -47,24 +49,6 @@ export function match(pattern: string): false | MatchedResult { return data; } -function onPopState() { - const mapValues = listeners.values(); - for (const cb of mapValues) { - cb(); - } -} - -window.onpopstate = onPopState; - -export function pushState(url) { - window.history.pushState({}, document.title, url); - onPopState(); -} - -export function back() { - window.history.back(); -} - export interface RouterChildProps { path?: string; } @@ -106,8 +90,8 @@ export class Router extends Component { } componentWillMount() { - this.id = ++id; - listeners.set(id, this.onLocationChange.bind(this)); + this.id = id++; + listeners.set(this.id, this.onLocationChange.bind(this)); this.onLocationChange(); } @@ -127,3 +111,18 @@ export class Router extends Component { return cloneElement(activeEl, newProps); } } + +export function push(url) { + history.push(url); +} + +export function back() { + history.goBack(); +} + +history.listen(() => { + const listenerCbs = listeners.values(); + for (const cb of listenerCbs) { + cb(); + } +}); diff --git a/yarn.lock b/yarn.lock index 049a6135..2bcb851f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16,6 +16,10 @@ version "0.0.39" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" +"@types/history@^4.6.2": + version "4.6.2" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0" + "@types/node@^8.9.4": version "8.10.12" resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.12.tgz#dcb66f6de39074a296534bd1a256a3c6a1c8f5b5" @@ -2450,6 +2454,16 @@ he@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +history@^4.7.2: + version "4.7.2" + resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b" + dependencies: + invariant "^2.2.1" + loose-envify "^1.2.0" + resolve-pathname "^2.2.0" + value-equal "^0.4.0" + warning "^3.0.0" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -2608,7 +2622,7 @@ ini@^1.3.4, ini@~1.3.0: version "1.3.5" resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" -invariant@^2.2.2: +invariant@^2.2.1, invariant@^2.2.2: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" dependencies: @@ -3137,7 +3151,7 @@ longest-streak@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e" -loose-envify@^1.0.0: +loose-envify@^1.0.0, loose-envify@^1.2.0: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -4695,6 +4709,10 @@ resolve-from@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" +resolve-pathname@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" + resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -5678,6 +5696,10 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +value-equal@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" + vega-canvas@1, vega-canvas@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/vega-canvas/-/vega-canvas-1.0.1.tgz#22cfa510af0cfbd920fc6af8b6111d3de5e63c44" @@ -5934,6 +5956,12 @@ vm-browserify@0.0.4: dependencies: indexof "0.0.1" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + dependencies: + loose-envify "^1.0.0" + whet.extend@~0.9.9: version "0.9.9" resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1" From 04f669c152481d7dbe3dcc9ae427d4cff95a0553 Mon Sep 17 00:00:00 2001 From: Bert Belder Date: Sat, 19 May 2018 23:07:58 -0700 Subject: [PATCH 07/10] Make router type-safe --- src/app.tsx | 39 +++++++++++++++++++++++++++++---------- src/nb_test.ts | 4 ++-- 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 11169b2e..8ad9fb21 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -13,7 +13,7 @@ limitations under the License. */ -import { Component, h } from "preact"; +import { Component, ComponentConstructor, h } from "preact"; import * as db from "./db"; import { push, Router } from "./router"; import * as types from "./types"; @@ -28,15 +28,34 @@ import { Notebook } from "./components/notebook"; import { Profile } from "./components/profile"; import { Recent } from "./components/recent"; -interface BindProps { - [key: string]: (props: any) => Promise; +type Partial = { [K in keyof T]?: T[K] }; + +type ReadOnly = { readonly [K in keyof T]: T[K] }; + +interface PageProps { + path: string; + matches?: { [key: string]: string }; + onReady?: () => void; +} + +type BindProps

= { + [K in keyof P]?: (props: ReadOnly>) => Promise +}; + +type BoundProps

= PageProps & BindProps

; + +interface BindStateNormal

{ + data: { [K in keyof P]: P[K] }; + error: null; } -interface BindState { - data: { [key: string]: string }; +interface BindStateError { + data: null; error: string; } +type BindState

= BindStateNormal

| BindStateError; + /** * This react HOC can be used to bind result of some async * methods to props of the given component (C). @@ -49,8 +68,8 @@ interface BindState { * } * }); */ -function bind(C, bindProps: BindProps) { - return class extends Component { +function bind

(C: ComponentConstructor, bindProps: BindProps

) { + return class extends Component, BindState

> { state = { data: null, error: null }; prevMatches = null; componentRef; @@ -62,7 +81,7 @@ function bind(C, bindProps: BindProps) { async loadData() { if (equal(this.props.matches, this.prevMatches)) return; this.prevMatches = this.props.matches; - const data = {}; + const data: Partial

= {}; for (const key in bindProps) { if (!bindProps[key]) continue; try { @@ -72,7 +91,7 @@ function bind(C, bindProps: BindProps) { return; } } - this.setState({ data, error: null }); + this.setState({ data: data as P, error: null }); } render() { @@ -170,7 +189,7 @@ export const NotebookPage = bind(Notebook, { } }); -export const HomePage = bind(Home, {}); +export const HomePage = bind(Home as any, {}); // tslint:enable:variable-name export interface AppState { diff --git a/src/nb_test.ts b/src/nb_test.ts index e72f919f..95907ee4 100644 --- a/src/nb_test.ts +++ b/src/nb_test.ts @@ -185,7 +185,7 @@ function resetPage() { function renderProfile(profileUid: string) { const promise = createResolvable(); resetPage(); - const el = h(ProfilePage, { + const el = h(ProfilePage as any, { matches: { userId: profileUid }, @@ -199,7 +199,7 @@ async function renderAnonNotebook(): Promise { const promise = createResolvable(); resetPage(); let notebookRoot; - const el = h(NotebookPage, { + const el = h(NotebookPage as any, { matches: { nbId: "default" }, From 9df964feeff7d22eab822c494f2d81445cbf6223 Mon Sep 17 00:00:00 2001 From: Parsa Ghadimi Date: Sun, 20 May 2018 17:31:30 +0430 Subject: [PATCH 08/10] Write tests for router --- src/router_test.tsx | 70 +++++++++++++++++++++++++++++++++++++++++++++ src/test.ts | 1 + 2 files changed, 71 insertions(+) create mode 100644 src/router_test.tsx diff --git a/src/router_test.tsx b/src/router_test.tsx new file mode 100644 index 00000000..aec55caf --- /dev/null +++ b/src/router_test.tsx @@ -0,0 +1,70 @@ +// Tests for the router component. +import { h, render, rerender } from "preact"; +import { testBrowser } from "../tools/tester"; +import { push, Router } from "./router"; +import { assertEqual } from "./util"; + +const matchedProps = new Map(); + +interface ComponentProps { + id: string; + matches?: any; + path?: string; +} +// tslint:disable-next-line:variable-name +const Test = (props: ComponentProps) => { + matchedProps.set(props.id, props.matches); + return ( +

+ ); +}; + +testBrowser(async function router() { + document.body.innerHTML = ""; + render( + + + + + + + + , document.body); + // .slice(1) is to remove # from the location.hash. + const path = () => document.location.hash.slice(1); + const activePage = () => { + const rendered = document.querySelectorAll(".test"); + // We must render only one component at each moment. + assertEqual(rendered.length, 1); + return rendered[0].id; + }; + // Rest path. + window.location.hash = "/"; + await flush(); + // Initial page. + assertEqual(path(), "/"); + assertEqual(activePage(), "p1"); + // 404 page. + push("/propel"); + await flush(); + assertEqual(path(), "/propel"); + assertEqual(activePage(), "404"); + // We must not render p2 in this case. + push("/test/12345"); + await flush(); + assertEqual(path(), "/test/12345"); + assertEqual(activePage(), "p4"); + assertEqual(matchedProps.get("p4").v, "12345"); + // Go to a page with some argument. + push("/page/345"); + await flush(); + assertEqual(path(), "/page/345"); + assertEqual(activePage(), "p3"); + assertEqual(matchedProps.get("p3").v, "345"); +}); + +// Call this to ensure that the DOM has been updated after events. +function flush(): Promise { + rerender(); + return Promise.resolve(); +} diff --git a/src/test.ts b/src/test.ts index 64f7c855..6a1739c1 100644 --- a/src/test.ts +++ b/src/test.ts @@ -3,4 +3,5 @@ import "./fetch_test"; import "./inspector_test"; import "./nb_test"; import "./nb_transpiler_test"; +import "./router_test"; import "./rpc_test"; From 99e700ba4a4c35752c6da7d92ae2b1f8863d4a13 Mon Sep 17 00:00:00 2001 From: Parsa Ghadimi Date: Mon, 21 May 2018 17:49:04 +0430 Subject: [PATCH 09/10] Remove GlobalHeader from home page --- src/components/home.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/home.tsx b/src/components/home.tsx index bbce7ad1..0b682095 100644 --- a/src/components/home.tsx +++ b/src/components/home.tsx @@ -13,14 +13,12 @@ limitations under the License. */ import { h } from "preact"; -import { GlobalHeader } from "./header"; // tslint:disable-next-line:variable-name export const Home = props => { const md = require("../../README.md"); return (
-
From 87e8e31be04e1ff62fee1a181d84e5b7ec87bd03 Mon Sep 17 00:00:00 2001 From: Parsa Ghadimi Date: Mon, 21 May 2018 19:00:44 +0430 Subject: [PATCH 10/10] Reviews --- src/app.tsx | 2 +- src/nb_test.ts | 11 ++--------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 8ad9fb21..952f1551 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -106,7 +106,7 @@ function bind

(C: ComponentConstructor, bindProps: BindProps

) { } // An anonymous notebook doc for when users aren't logged in -const anonDoc = { +export const anonDoc = { anonymous: true, cells: [], created: new Date(), diff --git a/src/nb_test.ts b/src/nb_test.ts index 95907ee4..a7f2d4a9 100644 --- a/src/nb_test.ts +++ b/src/nb_test.ts @@ -1,6 +1,6 @@ import { h, render, rerender } from "preact"; import { testBrowser } from "../tools/tester"; -import { NotebookPage, ProfilePage } from "./app"; +import { anonDoc, NotebookPage, ProfilePage } from "./app"; import { cellExecuteQueue } from "./components/cell"; import { Notebook } from "./components/notebook"; import * as db from "./db"; @@ -218,16 +218,9 @@ async function renderNotebook(): Promise { let notebook: Notebook; const nb = h(Notebook as any, { initialDoc: { - anonymous: true, + ...anonDoc, cells: ["let a = 4", "let b = 5"], - created: new Date(), - owner: { - displayName: "Anonymous", - photoURL: require("./img/anon_profile.png"), - uid: "" - }, title: DOC_TITLE, - updated: new Date() }, ref: ref => (notebook = ref) });