Niedzielski has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/398541 )
Change subject: WIP: add support for page transitions
......................................................................
WIP: add support for page transitions
Bug: T179489
Change-Id: Ic79100b5f796eedf914e9ad6cc1da5cd820de288
---
M package-lock.json
M package.json
M src/client/index.css
M src/client/index.tsx
M src/client/webpack.config.ts
A src/common/types/preact-css-transition-group.d.ts
6 files changed, 117 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/41/398541/1
diff --git a/package-lock.json b/package-lock.json
index 977e3d5..d018d50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6047,6 +6047,12 @@
"resolved": "https://registry.npmjs.org/preact/-/preact-8.2.7.tgz";,
"integrity":
"sha512-m34Ke8U32HyKRVzUOCAcaiIBLR2ye6syiuRclU5DxyixDPDFqdLbIElhERBrF6gDbPKQR+Vpv5bZ9CCbvN6pdQ=="
},
+ "preact-css-transition-group": {
+ "version": "1.3.0",
+ "resolved":
"https://registry.npmjs.org/preact-css-transition-group/-/preact-css-transition-group-1.3.0.tgz";,
+ "integrity": "sha1-Bv5Giyb3gC6VuCmnYtsLwZmu85k=",
+ "dev": true
+ },
"preact-render-to-string": {
"version": "3.7.0",
"resolved":
"https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-3.7.0.tgz";,
diff --git a/package.json b/package.json
index bcaec8d..6917feb 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
"mocha": "4.0.1",
"nodemon": "1.13.2",
"npm-run-all": "4.1.2",
+ "preact-css-transition-group": "1.3.0",
"prettier": "1.9.2",
"sinon": "4.1.3",
"style-loader": "0.19.1",
@@ -108,11 +109,11 @@
"bundlesize": [
{
"path": "dist/public/index.*.js",
- "maxSize": "4KB"
+ "maxSize": "4.1KB"
},
{
"path": "dist/public/index.*.css",
- "maxSize": "4.9KB"
+ "maxSize": "5.0KB"
},
{
"path": "dist/public/runtime.*.js",
@@ -120,7 +121,7 @@
},
{
"path": "dist/public/vendor.*.js",
- "maxSize": "9.5KB"
+ "maxSize": "11.5KB"
},
{
"path": "dist/public/pages/about.*.js",
diff --git a/src/client/index.css b/src/client/index.css
index fb9779d..be75f5a 100644
--- a/src/client/index.css
+++ b/src/client/index.css
@@ -125,3 +125,33 @@
p {
margin: var(--space) 0;
}
+
+/* Page transitions */
+
+.Client-component-container {
+ /* Stack the components one on top of the other so that pages can transition
+ by fading in and out. */
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.Client-component-container-enter {
+ opacity: 0;
+ transition: opacity var(--transition-duration-medium) ease-in;
+}
+
+.Client-component-container-enter-active {
+ opacity: 1;
+}
+
+.Client-component-container-leave {
+ opacity: 1;
+ transition: opacity var(--transition-duration-medium) ease-out;
+}
+
+.Client-component-container-leave-active {
+ opacity: 0;
+}
diff --git a/src/client/index.tsx b/src/client/index.tsx
index ea10080..c5ce613 100644
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -3,6 +3,7 @@
import { Location as HistoricalLocation } from "history";
import "wikimedia-ui-base/wikimedia-ui-base.css";
import "./index.css";
+import CSSTransitionGroup from "preact-css-transition-group";
import { RouteResponse, newRouter } from "../common/router/router";
import { SSRData } from "../common/models/ssr-data";
import { WithContext } from "../common/components/with-context";
@@ -24,13 +25,24 @@
throw new Error('Missing element with "root" ID.');
})();
-function renderPageRoot({ Component, props, title }: RouteResponse<any>) {
+/**
+ * @param {!any} componentKey A low-memory unique identifier for the page.
e.g.,
+ * the URL.
+ */
+function renderPageRoot(
+ componentKey: any,
+ { Component, props, title }: RouteResponse<any>
+) {
// Update the window / tab title.
document.title = formatDocTitle(title ? title(props) : undefined);
render(
<WithContext history={history}>
- <Component {...props} />
+ <CSSTransitionGroup transitionName="Client-component-container">
+ <div class="Client-component-container" key={componentKey}>
+ <Component {...props} />
+ </div>
+ </CSSTransitionGroup>
</WithContext>,
pageRoot,
pageRoot.lastElementChild || undefined
@@ -38,7 +50,9 @@
}
function route(location: Location | HistoricalLocation) {
- router.route(location.pathname, location.search).then(renderPageRoot);
+ router
+ .route(location.pathname, location.search)
+ .then(rsp => renderPageRoot(location.pathname, rsp));
}
// Observe the History
diff --git a/src/client/webpack.config.ts b/src/client/webpack.config.ts
index a9171e0..69e6b20 100644
--- a/src/client/webpack.config.ts
+++ b/src/client/webpack.config.ts
@@ -114,7 +114,7 @@
// Limits the sum of all assets (index, runtime, and vendor) required
// for an initial load for a specific entry (e.g., index).
- maxEntrypointSize: 64 * 1024
+ maxEntrypointSize: 96 * 1024
},
resolve: { extensions: EXTENSIONS },
diff --git a/src/common/types/preact-css-transition-group.d.ts
b/src/common/types/preact-css-transition-group.d.ts
new file mode 100644
index 0000000..bd32bd6
--- /dev/null
+++ b/src/common/types/preact-css-transition-group.d.ts
@@ -0,0 +1,59 @@
+// todo: upstream.
+declare module "preact-css-transition-group" {
+ import {
+ Component,
+ ComponentProps,
+ FunctionalComponent,
+ AnyComponent
+ } from "preact";
+
+ interface CSSTransitionGroupProps<
+ C extends Component<any, any> | FunctionalComponent<any>
+ > extends ComponentProps<C> {
+ transitionName: string;
+ /** Defaults to true. */
+ transitionEnter?: boolean;
+ /** Defaults to true. */
+ transitionLeave?: boolean;
+ transitionEnterTimeout?: number;
+ transitionLeaveTimeout?: number;
+
+ /**
+ * The Preact AnyComponent or DOM component string used to render the
+ * CSSTransitionGroup. Defaults to 'span'.
+ */
+ component?: AnyComponent<any, any> | string;
+
+ /**
+ * Any additional properties specified on the CSSTransitionGroup will be
+ * passed to component. e.g.:
+ * <CSSTransitionGroup transitionName='foo' component='div' class='foo'
+ * bar={1}>
+ * ... children ...
+ * </CSSTransitionGroup>
+ * Will render as:
+ * <div class='foo' bar='1'>... children ...</div>
+ */
+ [name: string]: any;
+ }
+
+ // todo: import from Preact instead pending
+ // https://github.com/developit/preact/pull/869.
+ type ComponentChild = JSX.Element | string;
+ type ComponentChildren = ComponentChild[];
+
+ interface CSSTransitionGroupState {
+ children: ComponentChildren;
+ }
+
+ type Key = string | number | any;
+
+ export default abstract class CSSTransitionGroup extends Component<
+ CSSTransitionGroupProps<CSSTransitionGroup>,
+ any
+ > {
+ performEnter(key: Key): void;
+ performLeave(key: Key): void;
+ stop(key: Key): void;
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/398541
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic79100b5f796eedf914e9ad6cc1da5cd820de288
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Niedzielski <[email protected]>
Gerrit-Reviewer: Sniedzielski <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
