@tdb/web
Version:
Common condiguration for serving a web-site and testing web-based UI components.
161 lines (160 loc) • 8.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var common_1 = require("../../common");
var components_1 = require("../../components");
var Image_1 = require("./Image");
var styles = {
base: common_1.css({}),
button: common_1.css({
cursor: 'pointer',
color: '#4990E2',
}),
ul: common_1.css({
listStyle: 'none',
paddingLeft: 0,
}),
};
var cookies = {
server: function () { return common_1.storage.cookie.server(); },
myCookie: common_1.storage.cookie.prop('example.myCookie'),
};
var writeCookieHandler = function () {
var value = cookies.myCookie() || { count: 0 };
cookies.myCookie(tslib_1.__assign({}, value, { count: value.count + 1 }));
};
var Home = (function (_super) {
tslib_1.__extends(Home, _super);
function Home() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = { isAuthenticated: false };
return _this;
}
Home.getInitialProps = function (ctx) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var myCookieValue, props;
return tslib_1.__generator(this, function (_a) {
myCookieValue = cookies.myCookie(undefined, { ctx: ctx });
if (!myCookieValue) {
myCookieValue = { count: 0 };
cookies
.server()
.add(cookies.myCookie, myCookieValue)
.write(ctx);
}
props = { cookieCount: myCookieValue.count };
return [2, props];
});
});
};
Home.prototype.render = function () {
var cookieCount = this.props.cookieCount;
var myCookie = cookieCount === undefined ? "undefined" : "count:" + cookieCount;
return (common_1.React.createElement("div", tslib_1.__assign({}, styles.base),
common_1.React.createElement("h1", null, "Hello World!"),
common_1.React.createElement("ul", tslib_1.__assign({}, styles.ul),
common_1.React.createElement("li", null,
"Next Routes",
common_1.React.createElement("ul", null,
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/normal', label: 'Normal Route' })),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/browser', label: 'Browser Check' })),
common_1.React.createElement("li", null,
common_1.React.createElement(components_1.Link, { href: '/prefetch', prefetch: true },
common_1.React.createElement("a", null, "Link: Prefetch"))),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/b' }),
" (renders ",
common_1.React.createElement("code", null, "/b.tsx"),
")"),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/custom/a' }),
" (renders ",
common_1.React.createElement("code", null, "/b.tsx"),
" from custom route)"),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/range/foo' }),
" (renders ",
common_1.React.createElement("code", null, "/range.tsx"),
' ',
"from custom express route: ",
common_1.React.createElement("code", null, '/range/:id'),
")"))),
common_1.React.createElement("li", null,
"Middleware (Express)",
common_1.React.createElement("ul", null,
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/api' }),
" (GET)"),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/yo' }),
" (GET)"),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/middleware' })),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/manifest?path=foo/**&markdown' })),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/resource/foo/README.md' })),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/resource/foo/README.md?parse' })))),
common_1.React.createElement("li", null,
"Redirection",
common_1.React.createElement(RedirectLinks, null)),
common_1.React.createElement("li", null,
"File",
common_1.React.createElement("ul", null,
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/package.json' })),
common_1.React.createElement("li", null,
common_1.React.createElement(Anchor, { href: '/foo.css' })))),
common_1.React.createElement("li", null,
"Cookies",
common_1.React.createElement("ul", null,
common_1.React.createElement("li", null,
"myCookie: ",
common_1.React.createElement("code", null, myCookie)),
common_1.React.createElement("li", null,
common_1.React.createElement(Button, { onClick: writeCookieHandler }, "write cookie (increment)"))))),
common_1.React.createElement(Image_1.Image, { url: '/images/monkey.jpg', width: 300, title: 'module: local' }),
common_1.React.createElement(Image_1.Image, { url: '/test.ui/images/monkey.jpg', width: 300, title: 'module: test.ui' })));
};
return Home;
}(common_1.React.PureComponent));
exports.Home = Home;
var RedirectLinks = function () {
return (common_1.React.createElement("ul", null,
common_1.React.createElement("li", null,
common_1.React.createElement(RedirectLink, { from: '/redirect/1', to: '/normal' })),
common_1.React.createElement("li", null,
common_1.React.createElement(RedirectLink, { from: '/redirect/2', to: '/normal?color=red' })),
common_1.React.createElement("li", null,
common_1.React.createElement(RedirectLink, { from: '/redirect/2?large', to: '/normal?color=red' }, "(merge query string)")),
common_1.React.createElement("li", null,
common_1.React.createElement(RedirectLink, { from: '/redirect/id/1234', to: '/normal?id=1234' },
"(Route: ",
common_1.React.createElement("code", null, "/redirect/id/:id"),
")"))));
};
var RedirectLink = function (_a) {
var from = _a.from, to = _a.to, children = _a.children;
return (common_1.React.createElement("span", null,
common_1.React.createElement("a", { href: from }, from),
common_1.React.createElement("span", null, " \u2794 "),
common_1.React.createElement("a", { href: to }, to),
" ",
common_1.React.createElement("span", null, children)));
};
var Button = function (props) {
var styles = {
base: common_1.css({
color: '#4990E2',
cursor: 'pointer',
}),
};
return (common_1.React.createElement("code", tslib_1.__assign({}, styles.base, { onClick: props.onClick }), props.children));
};
var Anchor = function (props) {
var href = props.href, _a = props.label, label = _a === void 0 ? props.href : _a;
return common_1.React.createElement("a", { href: href }, label);
};