= createToken('TokenString');
20 |
21 | function delay() {
22 | return new Promise(resolve => {
23 | setTimeout(resolve, 1);
24 | });
25 | }
26 |
27 | test('async render', async t => {
28 | let numRenders = 0;
29 | const element = 'hi';
30 | const renderFn = el => {
31 | t.equals(el, element, 'render receives correct args');
32 | return delay().then(() => {
33 | numRenders++;
34 | return el;
35 | });
36 | };
37 | const app = new App(element, renderFn);
38 | const ctx = await run(app);
39 | t.ok(ctx.element, 'sets ctx.element');
40 | t.equal(ctx.rendered, element);
41 | t.equal(numRenders, 1, 'calls render once');
42 | t.equal(ctx.element, element, 'sets ctx.element');
43 | t.end();
44 | });
45 |
46 | test('sync render', async t => {
47 | let numRenders = 0;
48 | const element = 'hi';
49 | const renderFn = el => {
50 | numRenders++;
51 | t.equals(el, element, 'render receives correct args');
52 | return el;
53 | };
54 | const app = new App(element, renderFn);
55 | const ctx = await run(app);
56 | t.equal(ctx.rendered, element);
57 | t.equal(numRenders, 1, 'calls render once');
58 | t.equal(ctx.element, element, 'sets ctx.element');
59 | t.end();
60 | });
61 |
62 | test('render plugin order', async t => {
63 | let numRenders = 0;
64 | const element = 'hi';
65 | let order = 0;
66 | const renderFn = el => {
67 | order++;
68 | t.equals(el, element, 'render receives correct args');
69 | t.equal(order, 3, 'runs render function last');
70 | return delay().then(() => {
71 | numRenders++;
72 | return el;
73 | });
74 | };
75 | const renderPlugin = createPlugin({
76 | provides: () => renderFn,
77 | middleware: () => (ctx, next) => {
78 | order++;
79 | t.equal(
80 | ctx.element,
81 | element,
82 | 'sets ctx.element before running render middleware'
83 | );
84 | t.equal(order, 2, 'runs render middleware before render');
85 | return next();
86 | },
87 | });
88 | // TODO(#137): fix flow types for renderPlugin
89 | // $FlowFixMe
90 | const app = new App(element, renderPlugin);
91 | app.middleware((ctx, next) => {
92 | order++;
93 | t.equal(order, 1, 'runs middleware before renderer');
94 | return next();
95 | });
96 | const ctx = await run(app);
97 | t.ok(ctx.element, 'sets ctx.element');
98 | t.equal(ctx.rendered, element);
99 | t.equal(numRenders, 1, 'calls render once');
100 | t.equal(ctx.element, element, 'sets ctx.element');
101 | t.end();
102 | });
103 |
104 | test('app.register - async render with async middleware', async t => {
105 | let numRenders = 0;
106 | const element = 'hi';
107 | const renderFn = el => {
108 | t.equals(el, element, 'render receives correct args');
109 | return delay().then(() => {
110 | numRenders++;
111 | return el;
112 | });
113 | };
114 | const app = new App(element, renderFn);
115 | app.middleware(async (ctx, next) => {
116 | t.equal(ctx.element, element);
117 | t.equal(numRenders, 0);
118 | t.notok(ctx.rendered);
119 | await next();
120 | t.equal(numRenders, 1);
121 | t.equal(ctx.rendered, element);
122 | });
123 | const ctx = await run(app);
124 | t.equal(ctx.rendered, element);
125 | t.equal(numRenders, 1, 'calls render');
126 | t.equal(ctx.element, element, 'sets ctx.element');
127 | t.end();
128 | });
129 |
130 | test('app.register - middleware execution respects registration order', async t => {
131 | let numRenders = 0;
132 | const element = 'hi';
133 | const renderFn = el => {
134 | t.equals(el, element, 'render receives correct args');
135 | return delay().then(() => {
136 | numRenders++;
137 | return el;
138 | });
139 | };
140 | const app = new App(element, renderFn);
141 | let order = 0;
142 | app.middleware(async (ctx, next) => {
143 | t.equal(order, 0, 'calls downstream in correct order');
144 | order++;
145 | t.equal(ctx.element, element);
146 | t.equal(numRenders, 0);
147 | t.notok(ctx.rendered);
148 | await next();
149 | t.equal(order, 3, 'calls upstream in correct order');
150 | t.equal(numRenders, 1);
151 | t.equal(ctx.rendered, element);
152 | order++;
153 | });
154 | app.middleware(async (ctx, next) => {
155 | t.equal(order, 1, 'calls downstream in correct order');
156 | order++;
157 | t.equal(ctx.element, element);
158 | t.equal(numRenders, 0);
159 | t.notok(ctx.rendered);
160 | await next();
161 | t.equal(order, 2, 'calls upstream in correct order');
162 | order++;
163 | t.equal(numRenders, 1);
164 | t.equal(ctx.rendered, element);
165 | });
166 | const ctx = await run(app);
167 | t.equal(ctx.rendered, element);
168 | t.equal(numRenders, 1, 'calls render');
169 | t.equal(order, 4, 'calls middleware in correct order');
170 | t.end();
171 | });
172 |
173 | test('app.register - middleware execution respects dependency order', async t => {
174 | let numRenders = 0;
175 | const element = 'hi';
176 | const renderFn = el => {
177 | t.equals(el, element, 'render receives correct args');
178 | return delay().then(() => {
179 | numRenders++;
180 | return el;
181 | });
182 | };
183 | const app = new App(element, renderFn);
184 | let order = 0;
185 | app.middleware(async function first(ctx, next) {
186 | t.equal(order, 0, 'calls downstream in correct order');
187 | t.equal(numRenders, 0);
188 | order++;
189 | await next();
190 | t.equal(order, 7, 'calls upstream in correct order');
191 | t.equal(numRenders, 1);
192 | order++;
193 | });
194 | app.register(
195 | TokenA,
196 | createPlugin({
197 | deps: {TokenB},
198 | provides: deps => {
199 | t.equal(deps.TokenB().b, 'something-b');
200 | return {a: 'something'};
201 | },
202 | middleware: deps => {
203 | t.equal(deps.TokenB().b, 'something-b');
204 | return async function second(ctx, next) {
205 | t.equal(order, 2, 'calls downstream in correct order');
206 | t.equal(numRenders, 0);
207 | order++;
208 | await next();
209 | t.equal(order, 5, 'calls upstream in correct order');
210 | t.equal(numRenders, 1);
211 | order++;
212 | };
213 | },
214 | })
215 | );
216 | app.middleware(async function third(ctx, next) {
217 | t.equal(order, 3, 'calls downstream in correct order');
218 | t.equal(numRenders, 0);
219 | order++;
220 | await next();
221 | t.equal(order, 4, 'calls upstream in correct order');
222 | t.equal(numRenders, 1);
223 | order++;
224 | });
225 | app.register(
226 | TokenB,
227 | createPlugin({
228 | provides: () => () => ({b: 'something-b'}),
229 | middleware: () => {
230 | return async function fourth(ctx, next) {
231 | t.equal(order, 1, 'calls downstream in correct order');
232 | t.equal(numRenders, 0);
233 | order++;
234 | await next();
235 | t.equal(order, 6, 'calls upstream in correct order');
236 | t.equal(numRenders, 1);
237 | order++;
238 | };
239 | },
240 | })
241 | );
242 | const ctx = await run(app);
243 | t.equal(ctx.rendered, element);
244 | t.equal(numRenders, 1, 'calls render');
245 | t.equal(order, 8, 'calls middleware in correct order');
246 | t.end();
247 | });
248 |
249 | test('app.middleware with dependencies', async t => {
250 | const element = 'hi';
251 | const renderFn = el => {
252 | return el;
253 | };
254 | const app = new App(element, renderFn);
255 | let called = false;
256 | app.register(TokenString, 'Something');
257 | app.middleware({TokenString}, deps => {
258 | t.equal(deps.TokenString, 'Something');
259 | return (ctx, next) => {
260 | called = true;
261 | return next();
262 | };
263 | });
264 | await run(app);
265 | t.ok(called, 'calls middleware');
266 | t.end();
267 | });
268 |
269 | test('app.middleware with no dependencies', async t => {
270 | const element = 'hi';
271 | const renderFn = el => {
272 | return el;
273 | };
274 | const app = new App(element, renderFn);
275 | let called = false;
276 | app.middleware((ctx, next) => {
277 | called = true;
278 | return next();
279 | });
280 | await run(app);
281 | t.ok(called, 'calls middleware');
282 | t.end();
283 | });
284 |
285 | __NODE__ &&
286 | test('ctx.respond as false', async t => {
287 | const element = 'hi';
288 | const renderFn = el => {
289 | t.fail('should not render if ctx.respond is false');
290 | return el;
291 | };
292 | const app = new App(element, renderFn);
293 | app.middleware((ctx, next) => {
294 | ctx.respond = false;
295 | return next();
296 | });
297 | const ctx = await run(app);
298 | t.notOk(ctx.rendered, 'should not render');
299 | t.end();
300 | });
301 |
--------------------------------------------------------------------------------
/src/__tests__/sanitization.browser.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import test from 'tape-cup';
10 | import {html, unescape} from '../sanitization';
11 |
12 | test('sanitization api is not bundled', t => {
13 | t.equals(html, void 0);
14 | t.equals(typeof unescape, 'function');
15 | t.end();
16 | });
17 |
--------------------------------------------------------------------------------
/src/__tests__/sanitization.node.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import test from 'tape-cup';
10 | import {
11 | html,
12 | consumeSanitizedHTML,
13 | dangerouslySetHTML,
14 | escape,
15 | unescape,
16 | } from '../sanitization';
17 |
18 | test('escaping works', async t => {
19 | t.equals(
20 | escape('&'),
21 | '\\u003Cmeta name=\\u0022\\u0022 /\\u003E\\u0026'
22 | );
23 | t.end();
24 | });
25 | test('unescaping works', async t => {
26 | t.equals(
27 | unescape('\\u003Cmeta name=\\u0022\\u0022 /\\u003E\\u0026'),
28 | '&'
29 | );
30 | t.end();
31 | });
32 | test('html sanitization works', async t => {
33 | const userData = '';
34 | const value = html`
35 | ${userData}
36 | ${String(null)}
37 | `;
38 | t.equals(typeof value, 'object');
39 | t.equals(
40 | consumeSanitizedHTML(value),
41 | `\n \\u003Cmalicious data=\\u0022\\u0022 /\\u003E
\n null\n `
42 | );
43 | t.end();
44 | });
45 | test('nested sanitization works', async t => {
46 | const safe = html`
47 | hello
48 | `;
49 | const value = html`
50 | ${safe}
51 | `;
52 | t.equals(typeof value, 'object');
53 | t.equals(consumeSanitizedHTML(value), `\n \n hello\n
\n `);
54 | t.end();
55 | });
56 | test('dangerouslySetHTML works', async t => {
57 | const trusted = dangerouslySetHTML(JSON.stringify({a: 1}));
58 | t.equals(typeof trusted, 'object');
59 | t.equals(consumeSanitizedHTML(trusted), `{"a":1}`);
60 | t.end();
61 | });
62 |
--------------------------------------------------------------------------------
/src/__tests__/test-helper.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import tape from 'tape-cup';
10 | import type {tape$TestCb} from 'tape-cup';
11 | import {compose} from '../compose';
12 |
13 | import type {Context} from '../types.js';
14 |
15 | const env = __BROWSER__ ? 'BROWSER' : 'NODE';
16 |
17 | function testHelper(tapeFn) {
18 | return (name: string, testFn: tape$TestCb) => {
19 | return tapeFn(`${env} - ${name}`, testFn);
20 | };
21 | }
22 |
23 | const test = testHelper(tape);
24 | test.only = testHelper(tape.only.bind(tape));
25 | test.skip = testHelper(tape.skip.bind(tape));
26 |
27 | export default test;
28 |
29 | function getContext() {
30 | return __BROWSER__
31 | ? {}
32 | : {
33 | method: 'GET',
34 | path: '/',
35 | headers: {
36 | accept: 'text/html',
37 | },
38 | };
39 | }
40 |
41 | // $FlowFixMe
42 | export function run(app: any, ctx: Context = {}) {
43 | // $FlowFixMe
44 | ctx = Object.assign(getContext(), ctx);
45 | app.resolve();
46 | return compose(app.plugins)(ctx, () => Promise.resolve()).then(() => ctx);
47 | }
48 |
--------------------------------------------------------------------------------
/src/__tests__/timing.js:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import test from 'tape-cup';
4 | import ClientAppFactory from '../client-app';
5 | import ServerAppFactory from '../server-app';
6 | import {run} from './test-helper';
7 | import {TimingToken} from '../plugins/timing';
8 |
9 | const App = __BROWSER__ ? ClientAppFactory() : ServerAppFactory();
10 |
11 | test('timing plugin', async t => {
12 | const element = 'hi';
13 | const renderFn = el => {
14 | return el;
15 | };
16 | const app = new App(element, renderFn);
17 | app.middleware({timing: TimingToken}, deps => (ctx, next) => {
18 | t.equal(deps.timing.from(ctx), deps.timing.from(ctx), 'timing is memoized');
19 | return next();
20 | });
21 | const ctx = await run(app);
22 | t.equal(typeof ctx.timing.start, 'number', 'sets up ctx.timing.start');
23 | t.ok(
24 | ctx.timing.end instanceof Promise,
25 | 'sets up ctx.timing.end to be a promise'
26 | );
27 | ctx.timing.downstream.then(result => {
28 | t.equal(typeof result, 'number', 'sets downstream timing result');
29 | });
30 | ctx.timing.render.then(result => {
31 | t.equal(typeof result, 'number', 'sets render timing result');
32 | });
33 | ctx.timing.upstream.then(result => {
34 | t.equal(typeof result, 'number', 'sets upstream timing result');
35 | });
36 | ctx.timing.end.then(result => {
37 | t.equal(typeof result, 'number', 'sets end timing result');
38 | t.end();
39 | });
40 | });
41 |
42 | test('timing plugin on error middleware', async t => {
43 | const element = 'hi';
44 | const renderFn = el => {
45 | return el;
46 | };
47 | const app = new App(element, renderFn);
48 | let resolved = {
49 | downstream: false,
50 | upstream: false,
51 | render: false,
52 | };
53 | app.middleware((ctx, next) => {
54 | ctx.timing.downstream.then(result => {
55 | resolved.downstream = true;
56 | });
57 | ctx.timing.render.then(result => {
58 | resolved.render = true;
59 | });
60 | ctx.timing.upstream.then(result => {
61 | resolved.upstream = true;
62 | });
63 | ctx.timing.end.then(result => {
64 | t.equal(typeof result, 'number', 'sets end timing result');
65 | t.equal(resolved.downstream, false, 'does not resolve downstream');
66 | t.equal(resolved.render, false, 'does not resolve render');
67 | t.equal(resolved.upstream, false, 'does not resolve upstream');
68 | t.equal(ctx.status, 500, 'sets ctx.status');
69 | t.end();
70 | });
71 | return next();
72 | });
73 | app.middleware((ctx, next) => {
74 | const e = new Error('fail request');
75 | // $FlowFixMe
76 | e.status = 500;
77 | throw e;
78 | });
79 | await run(app).catch(e => {});
80 | });
81 |
--------------------------------------------------------------------------------
/src/__tests__/virtual.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import tape from 'tape-cup';
10 | import {
11 | assetUrl,
12 | chunkId,
13 | syncChunkIds,
14 | syncChunkPaths,
15 | workerUrl,
16 | } from '../virtual/index.js';
17 |
18 | tape('virtualModules api', t => {
19 | t.equal(typeof assetUrl, 'function');
20 | t.equal(typeof chunkId, 'function');
21 | t.equal(typeof syncChunkIds, 'function');
22 | t.equal(typeof syncChunkPaths, 'function');
23 | t.equal(typeof workerUrl, 'function');
24 |
25 | t.equal(assetUrl('0'), '0');
26 | t.equal(chunkId('0'), '0');
27 | t.equal(syncChunkIds(0), 0);
28 | t.equal(syncChunkPaths(0), 0);
29 | t.equal(workerUrl('0'), '0');
30 | t.end();
31 | });
32 |
--------------------------------------------------------------------------------
/src/base-app.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import {createPlugin} from './create-plugin';
10 | import {createToken, TokenType, TokenImpl} from './create-token';
11 | import {ElementToken, RenderToken, SSRDeciderToken} from './tokens';
12 | import {SSRDecider} from './plugins/ssr';
13 |
14 | import type {aliaser, cleanupFn, FusionPlugin, Token} from './types.js';
15 |
16 | interface Register {
17 | (Token, mixed): aliaser>;
18 | (mixed): aliaser>;
19 | }
20 |
21 | class FusionApp {
22 | constructor(el: Element | string, render: any => any) {
23 | this.registered = new Map(); // getTokenRef(token) -> {value, aliases, enhancers}
24 | this.enhancerToToken = new Map(); // enhancer -> token
25 | this._dependedOn = new Set();
26 | this.plugins = []; // Token
27 | this.cleanups = [];
28 | el && this.register(ElementToken, el);
29 | render && this.register(RenderToken, render);
30 | this.register(SSRDeciderToken, SSRDecider);
31 | }
32 |
33 | // eslint-disable-next-line
34 | registered: Map<
35 | any,
36 | {
37 | aliases?: Map,
38 | enhancers?: Array,
39 | token: any,
40 | value?: FusionPlugin<*, *>,
41 | }
42 | >;
43 | enhancerToToken: Map;
44 | plugins: Array;
45 | cleanups: Array;
46 | renderer: any;
47 | _getService: any => any;
48 | _dependedOn: Set;
49 |
50 | register: Register<*> = (tokenOrValue, maybeValue) => {
51 | const hasToken = tokenOrValue instanceof TokenImpl;
52 | const token = hasToken
53 | ? ((tokenOrValue: any): Token)
54 | : createToken('UnnamedPlugin');
55 | const value: any = hasToken ? maybeValue : tokenOrValue;
56 | if (!hasToken && (value == null || !value.__plugin__)) {
57 | throw new Error(
58 | __DEV__
59 | ? `Cannot register ${String(
60 | tokenOrValue
61 | )} without a token. Did you accidentally register a ${
62 | __NODE__ ? 'browser' : 'server'
63 | } plugin on the ${__NODE__ ? 'server' : 'browser'}?`
64 | : 'Invalid configuration registration'
65 | );
66 | }
67 | // the renderer is a special case, since it needs to be always run last
68 | if (token === RenderToken) {
69 | this.renderer = value;
70 | return {
71 | alias: () => {
72 | throw new Error('Aliasing for RenderToken not supported.');
73 | },
74 | };
75 | }
76 | token.stacks.push({type: 'register', stack: new Error().stack});
77 | if (value && value.__plugin__) {
78 | token.stacks.push({type: 'plugin', stack: value.stack});
79 | }
80 | return this._register(token, value);
81 | };
82 | _register(token: Token, value: *) {
83 | this.plugins.push(token);
84 | const {aliases, enhancers} = this.registered.get(getTokenRef(token)) || {
85 | aliases: new Map(),
86 | enhancers: [],
87 | };
88 | if (value && value.__plugin__) {
89 | if (value.deps) {
90 | Object.values(value.deps).forEach(token =>
91 | this._dependedOn.add(getTokenRef(token))
92 | );
93 | }
94 | }
95 | this.registered.set(getTokenRef(token), {
96 | value,
97 | aliases,
98 | enhancers,
99 | token,
100 | });
101 | const alias = (sourceToken, destToken) => {
102 | const stack = new Error().stack;
103 | sourceToken.stacks.push({type: 'alias-from', stack});
104 | destToken.stacks.push({type: 'alias-to', stack});
105 | this._dependedOn.add(getTokenRef(destToken));
106 | if (aliases) {
107 | aliases.set(getTokenRef(sourceToken), destToken);
108 | }
109 | return {alias};
110 | };
111 | return {alias};
112 | }
113 | middleware(deps: *, middleware: *) {
114 | if (middleware === undefined) {
115 | middleware = () => deps;
116 | }
117 | this.register(createPlugin({deps, middleware}));
118 | }
119 | enhance(token: Token, enhancer: Function) {
120 | token.stacks.push({type: 'enhance', stack: new Error().stack});
121 | const {value, aliases, enhancers} = this.registered.get(
122 | getTokenRef(token)
123 | ) || {
124 | aliases: new Map(),
125 | enhancers: [],
126 | value: undefined,
127 | };
128 | this.enhancerToToken.set(enhancer, token);
129 |
130 | if (enhancers && Array.isArray(enhancers)) {
131 | enhancers.push(enhancer);
132 | }
133 | this.registered.set(getTokenRef(token), {
134 | value,
135 | aliases,
136 | enhancers,
137 | token,
138 | });
139 | }
140 | cleanup() {
141 | return Promise.all(this.cleanups.map(fn => fn()));
142 | }
143 | resolve() {
144 | if (!this.renderer) {
145 | throw new Error('Missing registration for RenderToken');
146 | }
147 | this._register(RenderToken, this.renderer);
148 | const resolved = new Map(); // Token.ref || Token => Service
149 | const nonPluginTokens = new Set(); // Token
150 | const resolving = new Set(); // Token.ref || Token
151 | const registered = this.registered; // Token.ref || Token -> {value, aliases, enhancers}
152 | const resolvedPlugins = []; // Plugins
153 | const appliedEnhancers = [];
154 | const resolveToken = (token: Token, tokenAliases) => {
155 | // Base: if we have already resolved the type, return it
156 | if (tokenAliases && tokenAliases.has(getTokenRef(token))) {
157 | const newToken = tokenAliases.get(getTokenRef(token));
158 | if (newToken) {
159 | token = newToken;
160 | }
161 | }
162 | if (resolved.has(getTokenRef(token))) {
163 | return resolved.get(getTokenRef(token));
164 | }
165 |
166 | // Base: if currently resolving the same type, we have a circular dependency
167 | if (resolving.has(getTokenRef(token))) {
168 | throw new Error(`Cannot resolve circular dependency: ${token.name}`);
169 | }
170 |
171 | // Base: the type was never registered, throw error or provide undefined if optional
172 | let {value, aliases, enhancers} =
173 | registered.get(getTokenRef(token)) || {};
174 | if (value === undefined) {
175 | // Attempt to get default value, if optional
176 | if (token instanceof TokenImpl && token.type === TokenType.Optional) {
177 | this.register(token, undefined);
178 | } else {
179 | const dependents = Array.from(this.registered.entries());
180 |
181 | /**
182 | * Iterate over the entire list of dependencies and find all
183 | * dependencies of a given token.
184 | */
185 | const findDependentTokens = () => {
186 | return dependents
187 | .filter(entry => {
188 | if (!entry[1].value || !entry[1].value.deps) {
189 | return false;
190 | }
191 | return Object.values(entry[1].value.deps).includes(token);
192 | })
193 | .map(entry => entry[1].token.name);
194 | };
195 | const findDependentEnhancers = () => {
196 | return appliedEnhancers
197 | .filter(([, provides]) => {
198 | if (!provides || !provides.deps) {
199 | return false;
200 | }
201 | return Object.values(provides.deps).includes(token);
202 | })
203 | .map(([enhancer]) => {
204 | const enhancedToken = this.enhancerToToken.get(enhancer);
205 | return `EnhancerOf<${
206 | enhancedToken ? enhancedToken.name : '(unknown)'
207 | }>`;
208 | });
209 | };
210 | const dependentTokens = [
211 | ...findDependentTokens(),
212 | ...findDependentEnhancers(),
213 | ];
214 |
215 | const base =
216 | 'A plugin depends on a token, but the token was not registered';
217 | const downstreams =
218 | 'This token is required by plugins registered with tokens: ' +
219 | dependentTokens.map(token => `"${token}"`).join(', ');
220 | const stack = token.stacks.find(t => t.type === 'token');
221 | const meta = `Required token: ${
222 | token ? token.name : ''
223 | }\n${downstreams}\n${stack ? stack.stack : ''}`;
224 | const clue = 'Different tokens with the same name were detected:\n\n';
225 | const suggestions = token
226 | ? this.plugins
227 | .filter(p => p.name === token.name)
228 | .map(p => {
229 | const stack = p.stacks.find(t => t.type === 'token');
230 | return `${p.name}\n${stack ? stack.stack : ''}\n\n`;
231 | })
232 | .join('\n\n')
233 | : '';
234 | const help =
235 | 'You may have multiple versions of the same plugin installed.\n' +
236 | 'Ensure that `yarn list [the-plugin]` results in one version, ' +
237 | 'and use a yarn resolution or merge package version in your lock file to consolidate versions.\n\n';
238 | throw new Error(
239 | `${base}\n\n${meta}\n\n${suggestions && clue + suggestions + help}`
240 | );
241 | }
242 | }
243 |
244 | // Recursive: get the registered type and resolve it
245 | resolving.add(getTokenRef(token));
246 |
247 | function resolvePlugin(plugin) {
248 | const registeredDeps = (plugin && plugin.deps) || {};
249 | const resolvedDeps = {};
250 | for (const key in registeredDeps) {
251 | const registeredToken = registeredDeps[key];
252 | resolvedDeps[key] = resolveToken(registeredToken, aliases);
253 | }
254 | // `provides` should be undefined if the plugin does not have a `provides` function
255 | let provides =
256 | plugin && plugin.provides ? plugin.provides(resolvedDeps) : undefined;
257 | if (plugin && plugin.middleware) {
258 | resolvedPlugins.push(plugin.middleware(resolvedDeps, provides));
259 | }
260 | return provides;
261 | }
262 |
263 | let provides = value;
264 | if (value && value.__plugin__) {
265 | provides = resolvePlugin(provides);
266 | if (value.cleanup) {
267 | this.cleanups.push(function() {
268 | return typeof value.cleanup === 'function'
269 | ? value.cleanup(provides)
270 | : Promise.resolve();
271 | });
272 | }
273 | } else {
274 | nonPluginTokens.add(token);
275 | }
276 |
277 | if (enhancers && enhancers.length) {
278 | enhancers.forEach(e => {
279 | let nextProvides = e(provides);
280 | appliedEnhancers.push([e, nextProvides]);
281 | if (nextProvides && nextProvides.__plugin__) {
282 | // if the token has a plugin enhancer, allow it to be registered with no dependents
283 | nonPluginTokens.delete(token);
284 | if (nextProvides.deps) {
285 | Object.values(nextProvides.deps).forEach(token =>
286 | this._dependedOn.add(getTokenRef(token))
287 | );
288 | }
289 | nextProvides = resolvePlugin(nextProvides);
290 | }
291 | provides = nextProvides;
292 | });
293 | }
294 | resolved.set(getTokenRef(token), provides);
295 | resolving.delete(getTokenRef(token));
296 | return provides;
297 | };
298 |
299 | for (let i = 0; i < this.plugins.length; i++) {
300 | resolveToken(this.plugins[i]);
301 | }
302 | for (const token of nonPluginTokens) {
303 | if (
304 | token !== ElementToken &&
305 | token !== RenderToken &&
306 | !this._dependedOn.has(getTokenRef(token))
307 | ) {
308 | throw new Error(
309 | `Registered token without depending on it: "${token.name}"`
310 | );
311 | }
312 | }
313 |
314 | this.plugins = resolvedPlugins;
315 | this._getService = token => resolved.get(getTokenRef(token));
316 | }
317 | getService(token: Token): any {
318 | if (!this._getService) {
319 | throw new Error('Cannot get service from unresolved app');
320 | }
321 | return this._getService(token);
322 | }
323 | }
324 |
325 | /* Helper functions */
326 | function getTokenRef(token) {
327 | if (token instanceof TokenImpl) {
328 | return token.ref;
329 | }
330 | return token;
331 | }
332 |
333 | export default FusionApp;
334 |
--------------------------------------------------------------------------------
/src/base-app.js.flow:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import type {
10 | aliaser,
11 | cleanupFn,
12 | ExtractReturnType,
13 | FusionPlugin,
14 | Middleware,
15 | Token,
16 | } from './types.js';
17 |
18 | declare class FusionApp {
19 | constructor(element: Element, render: *): FusionApp;
20 | cleanups: Array;
21 | registered: Map;
22 | plugins: Array;
23 | renderer: any;
24 | cleanup(): Promise;
25 | enhance(token: Token, enhancer: Function): void;
26 | register(
27 | Plugin: FusionPlugin
28 | ): aliaser>;
29 | register(
30 | token: Token,
31 | Plugin: FusionPlugin
32 | ): aliaser>;
33 | register(token: Token, val: TVal): aliaser>;
34 | middleware(
35 | deps: TDeps,
36 | middleware: (Deps: $ObjMap) => Middleware
37 | ): void;
38 | middleware(middleware: Middleware): void;
39 | callback(): (...Array<*>) => Promise | any;
40 | resolve(): void;
41 | getService(token: Token): any;
42 | }
43 |
44 | declare export default typeof FusionApp;
45 |
--------------------------------------------------------------------------------
/src/client-app.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 | /* eslint-env browser */
9 | import {compose} from './compose.js';
10 | import timing, {TimingToken} from './plugins/timing';
11 | import BaseApp from './base-app';
12 | import createClientHydrate from './plugins/client-hydrate';
13 | import createClientRenderer from './plugins/client-renderer';
14 | import {RenderToken, ElementToken} from './tokens';
15 |
16 | export default function(): typeof BaseApp {
17 | return class ClientApp extends BaseApp {
18 | constructor(el, render) {
19 | super(el, render);
20 | this.register(TimingToken, timing);
21 | this.middleware({element: ElementToken}, createClientHydrate);
22 | }
23 | resolve() {
24 | this.middleware({render: RenderToken}, createClientRenderer);
25 | return super.resolve();
26 | }
27 | callback() {
28 | this.resolve();
29 | const middleware = compose(this.plugins);
30 | return () => {
31 | // TODO(#62): Create noop context object to match server api
32 | const ctx: any = {
33 | url: window.location.path + window.location.search,
34 | element: null,
35 | body: null,
36 | };
37 | return middleware(ctx, () => Promise.resolve()).then(() => ctx);
38 | };
39 | }
40 | };
41 | }
42 |
--------------------------------------------------------------------------------
/src/compose.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import type {Middleware} from './types.js';
10 |
11 | // inline version of koa-compose to get around Rollup/CUP commonjs-related issue
12 | export function compose(middleware: Array): Middleware {
13 | if (!Array.isArray(middleware)) {
14 | throw new TypeError('Middleware stack must be an array!');
15 | }
16 | for (const fn of middleware) {
17 | if (typeof fn !== 'function') {
18 | throw new TypeError(
19 | `Expected middleware function, received: ${typeof fn}`
20 | );
21 | }
22 | }
23 |
24 | return function(context, next) {
25 | let index = -1;
26 | return dispatch(0);
27 | function dispatch(i) {
28 | if (i <= index) {
29 | return Promise.reject(new Error('next() called multiple times'));
30 | }
31 | index = i;
32 | let fn = middleware[i];
33 | if (i === middleware.length) fn = next;
34 | if (!fn) return Promise.resolve();
35 | try {
36 | return fn(context, function next() {
37 | return dispatch(i + 1);
38 | });
39 | } catch (err) {
40 | return Promise.reject(err);
41 | }
42 | }
43 | };
44 | }
45 |
--------------------------------------------------------------------------------
/src/create-plugin.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import type {FusionPlugin} from './types.js';
10 |
11 | // eslint-disable-next-line flowtype/generic-spacing
12 | type FusionPluginNoHidden = $Diff<
13 | FusionPlugin,
14 | {__plugin__: boolean, stack: string}
15 | >;
16 |
17 | export function createPlugin(
18 | opts: $Exact>
19 | ): FusionPlugin {
20 | return {
21 | __plugin__: true,
22 | stack: new Error().stack,
23 | ...opts,
24 | };
25 | }
26 |
--------------------------------------------------------------------------------
/src/create-token.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import type {Token} from './types.js';
10 |
11 | export const TokenType = Object.freeze({
12 | Required: 0,
13 | Optional: 1,
14 | });
15 | function Ref() {}
16 | export class TokenImpl {
17 | name: string;
18 | ref: mixed;
19 | type: $Values;
20 | optional: ?TokenImpl;
21 | stacks: Array<{
22 | type: 'token' | 'register' | 'enhance' | 'alias-from' | 'alias-to',
23 | stack: string,
24 | }>;
25 |
26 | constructor(name: string, ref: mixed) {
27 | this.name = name;
28 | this.ref = ref || new Ref();
29 | this.type = ref ? TokenType.Optional : TokenType.Required;
30 | this.stacks = [{type: 'token', stack: new Error().stack}];
31 | if (!ref) {
32 | this.optional = new TokenImpl(name, this.ref);
33 | }
34 | }
35 | }
36 |
37 | export function createToken(name: string): Token {
38 | return ((new TokenImpl(name): any): Token);
39 | }
40 |
--------------------------------------------------------------------------------
/src/flow/flow-fixtures.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import {createPlugin, createToken, getEnv} from '../../src/index.js';
10 | import {html, consumeSanitizedHTML} from '../../src/sanitization';
11 | import BaseApp from '../../src/base-app';
12 |
13 | import type {Context, FusionPlugin, Middleware, Token} from '../types.js';
14 |
15 | /* eslint-disable no-unused-vars */
16 |
17 | /*
18 | * This file contains basic sanity code that tests the on-side of different
19 | * parts of the module Flow definitions. Types are defined inline in source.
20 | */
21 |
22 | /* Sanity Check: FusionPlugin */
23 | const someApp: BaseApp = (null: any);
24 | function optionallyRegistersAPlugin(
25 | app: BaseApp,
26 | somePlugin?: FusionPlugin
27 | ): void {
28 | if (somePlugin) {
29 | app.register(somePlugin);
30 | }
31 | }
32 |
33 | const middlewareOnlyPlugin = createPlugin({
34 | middleware: () => (ctx, next) => {
35 | return next();
36 | },
37 | });
38 | (middlewareOnlyPlugin: FusionPlugin);
39 | optionallyRegistersAPlugin(someApp, middlewareOnlyPlugin);
40 |
41 | const emptyPlugin = createPlugin({});
42 | (emptyPlugin: FusionPlugin<*, *>);
43 | (emptyPlugin: FusionPlugin);
44 | (emptyPlugin: FusionPlugin);
45 | optionallyRegistersAPlugin(someApp, emptyPlugin);
46 |
47 | const emptyDepsPlugin = createPlugin({
48 | provides: () => {
49 | return;
50 | },
51 | });
52 | (emptyDepsPlugin: FusionPlugin);
53 | optionallyRegistersAPlugin(someApp, emptyDepsPlugin);
54 |
55 | const sampleStringToken: Token = createToken('string-token');
56 | const singleDepPlugin = createPlugin({
57 | deps: {str: sampleStringToken},
58 | provides: ({str}: {str: string}) => {
59 | return str;
60 | },
61 | });
62 | (singleDepPlugin: FusionPlugin<*, *>);
63 | (singleDepPlugin: FusionPlugin);
64 | (singleDepPlugin: FusionPlugin<*, string>);
65 | (singleDepPlugin: FusionPlugin);
66 | (singleDepPlugin: FusionPlugin<{str: Token}, string>);
67 | optionallyRegistersAPlugin(someApp, singleDepPlugin);
68 |
69 | type SimplePluginDepsType = {
70 | str: Token,
71 | };
72 | type SimplePluginServiceType = string;
73 | const simplePlugin = createPlugin({
74 | deps: ({str: sampleStringToken}: SimplePluginDepsType),
75 | provides: ({str}: {str: string}) => {
76 | return str;
77 | },
78 | middleware: (deps: {str: string}, service: SimplePluginServiceType) => async (
79 | ctx,
80 | next
81 | ) => {
82 | return;
83 | },
84 | });
85 |
86 | /* Sanity Check: Middleware */
87 | /* - Case: Extract and invoke a dependency-less and service-less middleware */
88 | const simpleMiddleware: Middleware = async (
89 | ctx: Context,
90 | next: () => Promise
91 | ) => {};
92 |
93 | const noDepsWithSimpleMiddlewarePlugin = createPlugin({
94 | middleware: () => simpleMiddleware,
95 | });
96 | const extractedEmptyMiddleware = noDepsWithSimpleMiddlewarePlugin.middleware;
97 | if (extractedEmptyMiddleware) {
98 | /* refine to remove 'void' */
99 | extractedEmptyMiddleware(); // no deps
100 | }
101 |
102 | /* - Case: Extract and invoke a service-less middleware */
103 | const noServiceWithSimpleMiddlewarePlugin = createPlugin({
104 | deps: ({str: sampleStringToken}: SimplePluginDepsType),
105 | middleware: deps => simpleMiddleware,
106 | });
107 | const extractedServicelessMiddleware =
108 | noServiceWithSimpleMiddlewarePlugin.middleware;
109 | if (extractedServicelessMiddleware) {
110 | extractedServicelessMiddleware({str: 'hello'}); // no service
111 | }
112 |
113 | /* - Case: Extract and invoke a full middleware */
114 | const extractedFullMiddleware = simplePlugin.middleware;
115 | if (extractedFullMiddleware) {
116 | extractedFullMiddleware({str: 'hello'}, 'service');
117 | }
118 |
119 | /* - Case: Cleanup should be covered */
120 | async function cleanup() {
121 | await someApp.cleanup();
122 | }
123 |
124 | /* - Case: getEnv typing */
125 | async function checkEnv() {
126 | const {
127 | rootDir,
128 | env,
129 | prefix,
130 | assetPath,
131 | baseAssetPath,
132 | cdnUrl,
133 | webpackPublicPath,
134 | } = getEnv();
135 | return {
136 | rootDir,
137 | env,
138 | prefix,
139 | assetPath,
140 | baseAssetPath,
141 | cdnUrl,
142 | webpackPublicPath,
143 | };
144 | }
145 |
146 | /* - Case: sanitization typing */
147 | const sanitizedString = html`
148 | mystring
149 | `;
150 | consumeSanitizedHTML(sanitizedString);
151 |
--------------------------------------------------------------------------------
/src/get-env.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 | /* eslint-env node */
9 | import assert from 'assert';
10 |
11 | export default (__BROWSER__ ? () => {} : loadEnv());
12 |
13 | function load(key, value) {
14 | return process.env[key] || value;
15 | }
16 |
17 | export function loadEnv() {
18 | const rootDir = load('ROOT_DIR', '.');
19 | const env = load('NODE_ENV', 'development');
20 | if (!(env === 'development' || env === 'production' || env === 'test')) {
21 | throw new Error(`Invalid NODE_ENV loaded: ${env}.`);
22 | }
23 | const prefix = load('ROUTE_PREFIX', '');
24 | assert(!prefix.endsWith('/'), 'ROUTE_PREFIX must not end with /');
25 | const baseAssetPath = load('FRAMEWORK_STATIC_ASSET_PATH', `/_static`);
26 | assert(
27 | !baseAssetPath.endsWith('/'),
28 | 'FRAMEWORK_STATIC_ASSET_PATH must not end with /'
29 | );
30 | const cdnUrl = load('CDN_URL', '');
31 | assert(!cdnUrl.endsWith('/'), 'CDN_URL must not end with /');
32 |
33 | const assetPath = `${prefix}${baseAssetPath}`;
34 | return function loadEnv(): Env {
35 | return {
36 | rootDir,
37 | env,
38 | prefix,
39 | assetPath,
40 | baseAssetPath,
41 | cdnUrl,
42 | webpackPublicPath: cdnUrl || assetPath,
43 | };
44 | };
45 | }
46 |
47 | // Handle flow-types for export so browser export is ignored.
48 | type Env = {
49 | rootDir: string,
50 | env: string,
51 | prefix: string,
52 | assetPath: string,
53 | baseAssetPath: string,
54 | cdnUrl: string,
55 | webpackPublicPath: string,
56 | };
57 | declare export default () => Env;
58 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 | import type {
9 | Context,
10 | FusionPlugin,
11 | Middleware,
12 | Token,
13 | SSRBodyTemplate,
14 | RenderType as Render,
15 | } from './types.js';
16 |
17 | import BaseApp from './base-app';
18 | import serverApp from './server-app';
19 | import clientApp from './client-app';
20 | import getEnv from './get-env.js';
21 |
22 | export default (__BROWSER__ ? clientApp() : serverApp());
23 |
24 | export {compose} from './compose.js';
25 | export {memoize} from './memoize';
26 |
27 | // sanitization API
28 | export {
29 | html,
30 | dangerouslySetHTML,
31 | consumeSanitizedHTML,
32 | escape,
33 | unescape,
34 | } from './sanitization';
35 |
36 | // Virtual modules
37 | export {
38 | assetUrl,
39 | chunkId,
40 | syncChunkIds,
41 | syncChunkPaths,
42 | workerUrl,
43 | } from './virtual/index.js';
44 |
45 | export {
46 | RenderToken,
47 | ElementToken,
48 | SSRDeciderToken,
49 | HttpServerToken,
50 | SSRBodyTemplateToken,
51 | RoutePrefixToken,
52 | CriticalChunkIdsToken,
53 | } from './tokens';
54 | export {createPlugin} from './create-plugin';
55 | export {createToken} from './create-token';
56 | export {getEnv};
57 |
58 | type FusionApp = typeof BaseApp;
59 | declare export default typeof BaseApp;
60 | export type {
61 | Context,
62 | FusionApp,
63 | FusionPlugin,
64 | Middleware,
65 | Token,
66 | SSRBodyTemplate,
67 | Render,
68 | };
69 |
--------------------------------------------------------------------------------
/src/memoize.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import type {Context} from './types.js';
10 |
11 | type MemoizeFn = (ctx: Context) => A;
12 |
13 | function Container() {}
14 |
15 | export function memoize(fn: MemoizeFn): MemoizeFn {
16 | const memoizeKey = __NODE__ ? Symbol('memoize-key') : new Container();
17 | return function memoized(ctx: Context) {
18 | if (ctx.memoized.has(memoizeKey)) {
19 | return ctx.memoized.get(memoizeKey);
20 | }
21 | const result = fn(ctx);
22 | ctx.memoized.set(memoizeKey, result);
23 | return result;
24 | };
25 | }
26 |
--------------------------------------------------------------------------------
/src/plugins/client-hydrate.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | /* eslint-env browser */
10 |
11 | import type {Context} from '../types.js';
12 |
13 | export default function createClientHydrate({element}: {element: any}) {
14 | return function clientHydrate(ctx: Context, next: () => Promise) {
15 | ctx.prefix = window.__ROUTE_PREFIX__ || ''; // serialized by ./server
16 | ctx.element = element;
17 | ctx.preloadChunks = [];
18 | return next();
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/src/plugins/client-renderer.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import type {Context} from '../types.js';
10 |
11 | export default function createClientRenderer({render}: {render: any}) {
12 | return function renderer(ctx: Context, next: () => Promise) {
13 | const rendered = render(ctx.element, ctx);
14 | if (rendered instanceof Promise) {
15 | return rendered.then(r => {
16 | ctx.rendered = r;
17 | return next();
18 | });
19 | } else {
20 | ctx.rendered = rendered;
21 | return next();
22 | }
23 | };
24 | }
25 |
--------------------------------------------------------------------------------
/src/plugins/server-context.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import uuidv4 from 'uuid/v4';
10 | import UAParser from 'ua-parser-js';
11 | import getEnv from '../get-env.js';
12 |
13 | import type {Context} from '../types.js';
14 |
15 | const envVars = getEnv();
16 |
17 | export default function middleware(ctx: Context, next: () => Promise) {
18 | // env vars
19 | ctx.rootDir = envVars.rootDir;
20 | ctx.env = envVars.env;
21 | ctx.prefix = envVars.prefix;
22 | ctx.assetPath = envVars.assetPath;
23 | ctx.cdnUrl = envVars.cdnUrl;
24 |
25 | // webpack-related things
26 | ctx.preloadChunks = [];
27 | ctx.webpackPublicPath =
28 | ctx.webpackPublicPath || envVars.cdnUrl || envVars.assetPath;
29 |
30 | // these are set by fusion-cli, however since fusion-cli plugins are not added when
31 | // running simulation tests, it is good to default them here
32 | ctx.syncChunks = ctx.syncChunks || [];
33 | ctx.chunkUrlMap = ctx.chunkUrlMap || new Map();
34 |
35 | // fusion-specific things
36 | ctx.nonce = uuidv4();
37 | ctx.useragent = new UAParser(ctx.headers['user-agent']).getResult();
38 | ctx.element = null;
39 | ctx.rendered = null;
40 |
41 | return next();
42 | }
43 |
--------------------------------------------------------------------------------
/src/plugins/server-renderer.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import {now} from './timing';
10 |
11 | import type {Context} from '../types.js';
12 |
13 | export default function getRendererPlugin({
14 | render,
15 | timing,
16 | }: {
17 | render: any,
18 | timing: any,
19 | }) {
20 | return async function renderer(ctx: Context, next: () => Promise) {
21 | const timer = timing.from(ctx);
22 | timer.downstream.resolve(now() - timer.start);
23 |
24 | let renderTime = null;
25 | if (ctx.element && !ctx.body && ctx.respond !== false) {
26 | const renderStart = now();
27 | ctx.rendered = await render(ctx.element, ctx);
28 | renderTime = now() - renderStart;
29 | }
30 |
31 | timer.upstreamStart = now();
32 | await next();
33 |
34 | if (ctx.element && typeof renderTime === 'number') {
35 | timer.render.resolve(renderTime);
36 | }
37 | };
38 | }
39 |
--------------------------------------------------------------------------------
/src/plugins/ssr.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import {createPlugin} from '../create-plugin';
10 | import {escape, consumeSanitizedHTML} from '../sanitization';
11 | import type {
12 | Context,
13 | SSRDecider as SSRDeciderService,
14 | SSRBodyTemplate as SSRBodyTemplateService,
15 | } from '../types.js';
16 |
17 | const botRegex = /(bot|crawler|spider)/i;
18 | const SSRDecider = createPlugin<{}, SSRDeciderService>({
19 | provides: () => {
20 | return ctx => {
21 | // If the request has one of these extensions, we assume it's not something that requires server-side rendering of virtual dom
22 | // TODO(#46): this check should probably look at the asset manifest to ensure asset 404s are handled correctly
23 | if (ctx.path.match(/\.(js|js\.map|gif|jpg|png|pdf|json|svg)$/))
24 | return false;
25 |
26 | // Bots don't always include the accept header.
27 | if (ctx.headers['user-agent']) {
28 | const agent = ctx.headers['user-agent'];
29 | if (botRegex.test(agent) && ctx.method === 'GET') {
30 | return true;
31 | }
32 | }
33 |
34 | // The Accept header is a good proxy for whether SSR should happen
35 | // Requesting an HTML page via the browser url bar generates a request with `text/html` in its Accept headers
36 | // XHR/fetch requests do not have `text/html` in the Accept headers
37 | if (!ctx.headers.accept) return false;
38 | if (!ctx.headers.accept.includes('text/html')) return false;
39 | return true;
40 | };
41 | },
42 | });
43 | export {SSRDecider};
44 |
45 | export default function createSSRPlugin({
46 | element,
47 | ssrDecider,
48 | ssrBodyTemplate,
49 | }: {
50 | element: any,
51 | ssrDecider: SSRDeciderService,
52 | ssrBodyTemplate?: SSRBodyTemplateService,
53 | }) {
54 | return async function ssrPlugin(ctx: Context, next: () => Promise) {
55 | if (!ssrDecider(ctx)) return next();
56 |
57 | const template = {
58 | htmlAttrs: {},
59 | bodyAttrs: {},
60 | title: '',
61 | head: [],
62 | body: [],
63 | };
64 | ctx.element = element;
65 | ctx.rendered = '';
66 | ctx.template = template;
67 | ctx.type = 'text/html';
68 |
69 | await next();
70 |
71 | // Allow someone to override the ssr by setting ctx.body
72 | // This is especially useful for things like ctx.redirect
73 | if (ctx.body && ctx.respond !== false) {
74 | return;
75 | }
76 |
77 | if (ssrBodyTemplate) {
78 | ctx.body = ssrBodyTemplate(ctx);
79 | } else {
80 | ctx.body = legacySSRBodyTemplate(ctx);
81 | }
82 | };
83 | }
84 |
85 | function legacySSRBodyTemplate(ctx) {
86 | const {htmlAttrs, bodyAttrs, title, head, body} = ctx.template;
87 | const safeAttrs = Object.keys(htmlAttrs)
88 | .map(attrKey => {
89 | return ` ${escape(attrKey)}="${escape(htmlAttrs[attrKey])}"`;
90 | })
91 | .join('');
92 |
93 | const safeBodyAttrs = Object.keys(bodyAttrs)
94 | .map(attrKey => {
95 | return ` ${escape(attrKey)}="${escape(bodyAttrs[attrKey])}"`;
96 | })
97 | .join('');
98 |
99 | const safeTitle = escape(title);
100 | const safeHead = head.map(consumeSanitizedHTML).join('');
101 | const safeBody = body.map(consumeSanitizedHTML).join('');
102 |
103 | const preloadHintLinks = getPreloadHintLinks(ctx);
104 | const coreGlobals = getCoreGlobals(ctx);
105 | const chunkScripts = getChunkScripts(ctx);
106 | const bundleSplittingBootstrap = [
107 | preloadHintLinks,
108 | coreGlobals,
109 | chunkScripts,
110 | ].join('');
111 |
112 | return [
113 | '',
114 | ``,
115 | ``,
116 | ``,
117 | `${safeTitle}`,
118 | `${bundleSplittingBootstrap}${safeHead}`,
119 | ``,
120 | `${ctx.rendered}${safeBody}`,
121 | '',
122 | ].join('');
123 | }
124 |
125 | function getCoreGlobals(ctx) {
126 | const {webpackPublicPath, nonce} = ctx;
127 |
128 | return [
129 | ``,
134 | ].join('');
135 | }
136 |
137 | function getUrls({chunkUrlMap, webpackPublicPath}, chunks) {
138 | // cross origin is needed to get meaningful errors in window.onerror
139 | const isCrossOrigin = webpackPublicPath.startsWith('http');
140 | const crossOriginAttribute = isCrossOrigin ? ' crossorigin="anonymous"' : '';
141 | return [...new Set(chunks)].map(id => {
142 | let url = chunkUrlMap.get(id).get('es5');
143 | if (webpackPublicPath.endsWith('/')) {
144 | url = webpackPublicPath + url;
145 | } else {
146 | url = webpackPublicPath + '/' + url;
147 | }
148 | return {url, crossOriginAttribute};
149 | });
150 | }
151 |
152 | function getChunkScripts(ctx) {
153 | const sync = getUrls(ctx, ctx.syncChunks).map(
154 | ({url, crossOriginAttribute}) => {
155 | return ``;
158 | }
159 | );
160 | const preloaded = getUrls(
161 | ctx,
162 | ctx.preloadChunks.filter(item => !ctx.syncChunks.includes(item))
163 | ).map(({url, crossOriginAttribute}) => {
164 | return ``;
167 | });
168 | return [...preloaded, ...sync].join('');
169 | }
170 |
171 | function getPreloadHintLinks(ctx) {
172 | const chunks = [...ctx.preloadChunks, ...ctx.syncChunks];
173 | const hints = getUrls(ctx, chunks).map(({url, crossOriginAttribute}) => {
174 | return ``;
177 | });
178 | return hints.join('');
179 | }
180 |
--------------------------------------------------------------------------------
/src/plugins/timing.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 | import {createPlugin} from '../create-plugin';
9 | import {memoize} from '../memoize';
10 | import {createToken} from '../create-token';
11 | import type {Token} from '../types.js';
12 |
13 | type Deferred = {
14 | promise: Promise,
15 | resolve: (result: T) => void,
16 | reject: (error: Error) => void,
17 | };
18 |
19 | class Timing {
20 | start: number;
21 | render: Deferred;
22 | end: Deferred;
23 | downstream: Deferred;
24 | upstream: Deferred;
25 | upstreamStart: number;
26 | constructor() {
27 | this.start = now();
28 | this.render = deferred();
29 | this.end = deferred();
30 | this.downstream = deferred();
31 | this.upstream = deferred();
32 | this.upstreamStart = -1;
33 | }
34 | }
35 | type TimingPlugin = {
36 | from(ctx: Object): Timing,
37 | };
38 |
39 | const timing: TimingPlugin = {
40 | from: memoize(() => new Timing()),
41 | };
42 |
43 | export const TimingToken: Token = createToken('TimingToken');
44 |
45 | function middleware(ctx, next) {
46 | ctx.memoized = new Map();
47 | const {start, render, end, downstream, upstream} = timing.from(ctx);
48 | ctx.timing = {
49 | start,
50 | render: render.promise,
51 | end: end.promise,
52 | downstream: downstream.promise,
53 | upstream: upstream.promise,
54 | };
55 | return next()
56 | .then(() => {
57 | const upstreamTime = now() - timing.from(ctx).upstreamStart;
58 | upstream.resolve(upstreamTime);
59 | const endTime = now() - ctx.timing.start;
60 | end.resolve(endTime);
61 | })
62 | .catch(e => {
63 | // currently we only resolve upstream and downstream when the request does not error
64 | // we should however always resolve the request end timing
65 | if (e && e.status) {
66 | // this ensures any logging / metrics based on ctx.status will recieve the correct status code
67 | ctx.status = e.status;
68 | }
69 | const endTime = now() - ctx.timing.start;
70 | end.resolve(endTime);
71 | throw e;
72 | });
73 | }
74 |
75 | export default createPlugin<{}, typeof timing>({
76 | provides: () => timing,
77 | middleware: () => middleware,
78 | });
79 |
80 | export function now(): number {
81 | if (__NODE__) {
82 | const [seconds, ns] = process.hrtime();
83 | return Math.round(seconds * 1000 + ns / 1e6);
84 | } else {
85 | // eslint-disable-next-line cup/no-undef
86 | if (window.performance && window.performance.now) {
87 | // eslint-disable-next-line cup/no-undef
88 | return Math.round(window.performance.now());
89 | }
90 | return Date.now();
91 | }
92 | }
93 |
94 | function deferred(): Deferred {
95 | let resolve = () => {};
96 | let reject = () => {};
97 | const promise = new Promise((res, rej) => {
98 | resolve = res;
99 | reject = rej;
100 | });
101 | return {
102 | promise,
103 | resolve,
104 | reject,
105 | };
106 | }
107 |
--------------------------------------------------------------------------------
/src/sanitization.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 | /*
9 | We never want developers to be able to write `ctx.template.body.push(`${stuff}
`)`
10 | because that allows XSS attacks by default (e.g. if stuff === '')
11 | Instead, they should use html`{stuff}
` so interpolated data gets automatically escaped
12 | We trust the markup outside of interpolation because it's code written by a developer with commit permissions,
13 | which can be audited via code reviews
14 | */
15 |
16 | import type {SanitizedHTMLWrapper} from './types.js';
17 |
18 | // eslint-disable-next-line import/no-mutable-exports
19 | let html, dangerouslySetHTML, consumeSanitizedHTML, escape;
20 | if (__NODE__) {
21 | const forbiddenChars = {
22 | '<': '\\u003C',
23 | '>': '\\u003E',
24 | '"': '\\u0022',
25 | '&': '\\u0026',
26 | '\u2028': '\\u2028',
27 | '\u2029': '\\u2029',
28 | };
29 | const replaceForbidden = c => forbiddenChars[c];
30 |
31 | const key = Symbol('sanitized html');
32 | html = (
33 | [head, ...rest]: Array,
34 | ...values: Array
35 | ): SanitizedHTMLWrapper => {
36 | const obj = {};
37 | Object.defineProperty(obj, key, {
38 | enumerable: false,
39 | configurable: false,
40 | value: head + values.map((s, i) => escape(s) + rest[i]).join(''),
41 | });
42 | return obj;
43 | };
44 | dangerouslySetHTML = (str: string): Object => html([str]);
45 | escape = (str: any): string => {
46 | if (str && str[key]) return consumeSanitizedHTML(str);
47 | return String(str).replace(/[<>&"\u2028\u2029]/g, replaceForbidden);
48 | };
49 | consumeSanitizedHTML = (h: SanitizedHTMLWrapper): string => {
50 | if (typeof h === 'string') {
51 | throw new Error(`Unsanitized html. Use html\`${h}\``);
52 | }
53 | return h[key];
54 | };
55 | }
56 | const replaceEscaped = c => String.fromCodePoint(parseInt(c.slice(2), 16));
57 | const unescape = (str: string): string => {
58 | return str.replace(
59 | /\\u003C|\\u003E|\\u0022|\\u002F|\\u2028|\\u2029|\\u0026/g,
60 | replaceEscaped
61 | );
62 | };
63 |
64 | // These types are necessary due to not having an assignment in the __BROWSER__ environment
65 | const flowHtml = ((html: any): (
66 | strings: Array,
67 | ...expressions: Array
68 | ) => SanitizedHTMLWrapper);
69 |
70 | const flowDangerouslySetHTML = ((dangerouslySetHTML: any): (
71 | html: string
72 | ) => Object);
73 |
74 | const flowConsumeSanitizedHTML = ((consumeSanitizedHTML: any): (
75 | str: SanitizedHTMLWrapper
76 | ) => string);
77 |
78 | const flowEscape = ((escape: any): (str: string) => string);
79 |
80 | export {
81 | flowHtml as html,
82 | flowDangerouslySetHTML as dangerouslySetHTML,
83 | flowConsumeSanitizedHTML as consumeSanitizedHTML,
84 | flowEscape as escape,
85 | unescape,
86 | };
87 |
--------------------------------------------------------------------------------
/src/server-app.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 | /* eslint-env node */
9 | import {compose} from './compose.js';
10 | import Timing, {TimingToken} from './plugins/timing';
11 | import BaseApp from './base-app';
12 | import serverRenderer from './plugins/server-renderer';
13 | import {
14 | RenderToken,
15 | ElementToken,
16 | SSRDeciderToken,
17 | SSRBodyTemplateToken,
18 | } from './tokens';
19 | import ssrPlugin from './plugins/ssr';
20 | import contextMiddleware from './plugins/server-context.js';
21 |
22 | export default function(): typeof BaseApp {
23 | const Koa = require('koa');
24 |
25 | return class ServerApp extends BaseApp {
26 | _app: Koa;
27 | constructor(el, render) {
28 | super(el, render);
29 | this._app = new Koa();
30 | this._app.proxy = true;
31 | this.middleware(contextMiddleware);
32 | this.register(TimingToken, Timing);
33 | this.middleware(
34 | {
35 | element: ElementToken,
36 | ssrDecider: SSRDeciderToken,
37 | ssrBodyTemplate: SSRBodyTemplateToken.optional,
38 | },
39 | ssrPlugin
40 | );
41 | }
42 | resolve() {
43 | this.middleware(
44 | {timing: TimingToken, render: RenderToken},
45 | serverRenderer
46 | );
47 | return super.resolve();
48 | }
49 | callback() {
50 | this.resolve();
51 | this._app.use(compose(this.plugins));
52 | return this._app.callback();
53 | }
54 | };
55 | }
56 |
--------------------------------------------------------------------------------
/src/tokens.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import {createToken} from './create-token';
10 | import type {
11 | RenderType,
12 | SSRDecider,
13 | SSRBodyTemplate,
14 | Context,
15 | } from './types.js';
16 | import type {Server} from 'http';
17 |
18 | export const RenderToken = createToken('RenderToken');
19 | export const ElementToken = createToken('ElementToken');
20 | export const SSRDeciderToken = createToken('SSRDeciderToken');
21 | export const HttpServerToken = createToken('HttpServerToken');
22 | export const SSRBodyTemplateToken = createToken(
23 | 'SSRBodyTemplateToken'
24 | );
25 | export const RoutePrefixToken = createToken('RoutePrefixToken');
26 |
27 | export type CriticalChunkIds = Set;
28 |
29 | export type CriticalChunkIdsService = {
30 | from(ctx: Context): CriticalChunkIds,
31 | };
32 |
33 | export const CriticalChunkIdsToken = createToken(
34 | 'CriticalChunkIdsToken'
35 | );
36 |
--------------------------------------------------------------------------------
/src/types.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | import type {Context as KoaContext} from 'koa';
10 |
11 | export type Token = {
12 | (): T,
13 | optional: () => void | T,
14 | stacks: Array<{
15 | // eslint-disable-next-line
16 | type:
17 | | 'token'
18 | | 'plugin'
19 | | 'register'
20 | | 'enhance'
21 | | 'alias-from'
22 | | 'alias-to',
23 | stack: string,
24 | }>,
25 | };
26 |
27 | type ExtendedKoaContext = KoaContext & {memoized: Map};
28 |
29 | export type SanitizedHTMLWrapper = Object;
30 |
31 | export type SSRContext = {
32 | element: any,
33 | template: {
34 | htmlAttrs: Object,
35 | title: string,
36 | head: Array,
37 | body: Array,
38 | bodyAttrs: {[string]: string},
39 | },
40 | } & ExtendedKoaContext;
41 |
42 | export type Context = SSRContext | ExtendedKoaContext;
43 |
44 | export type Middleware = (
45 | ctx: Context,
46 | next: () => Promise
47 | ) => Promise<*>;
48 |
49 | export type MiddlewareWithDeps = (
50 | Deps: $ObjMap
51 | ) => Middleware;
52 |
53 | export type ExtractReturnType = (() => V) => V;
54 |
55 | export type FusionPlugin = {|
56 | __plugin__: boolean,
57 | stack: string,
58 | deps?: Deps,
59 | provides?: (Deps: $ObjMap) => Service,
60 | middleware?: (
61 | Deps: $ObjMap,
62 | Service: Service
63 | ) => Middleware,
64 | cleanup?: (service: Service) => Promise,
65 | |};
66 |
67 | export type SSRDecider = Context => boolean;
68 |
69 | export type aliaser = {
70 | alias: (sourceToken: TToken, destToken: TToken) => aliaser,
71 | };
72 |
73 | export type cleanupFn = (thing: any) => Promise;
74 |
75 | export type SSRBodyTemplate = Context => $PropertyType;
76 |
77 | export type RenderType = (any, Context) => any;
78 |
--------------------------------------------------------------------------------
/src/virtual/index.js:
--------------------------------------------------------------------------------
1 | /** Copyright (c) 2018 Uber Technologies, Inc.
2 | *
3 | * This source code is licensed under the MIT license found in the
4 | * LICENSE file in the root directory of this source tree.
5 | *
6 | * @flow
7 | */
8 |
9 | export function assetUrl(url: string): string {
10 | /**
11 | * PLEASE NOTE: a build step transforms
12 | * the arguments provided to this function
13 | */
14 | return url;
15 | }
16 |
17 | export function chunkId(filename: string): string {
18 | /**
19 | * PLEASE NOTE: a build step transforms
20 | * the arguments provided to this function
21 | */
22 | return filename;
23 | }
24 |
25 | export function syncChunkIds(argument: any): any {
26 | /**
27 | * PLEASE NOTE: a build step transforms
28 | * the arguments provided to this function
29 | */
30 | return argument;
31 | }
32 |
33 | export function syncChunkPaths(argument: any): any {
34 | /**
35 | * PLEASE NOTE: a build step transforms
36 | * the arguments provided to this function
37 | */
38 | return argument;
39 | }
40 |
41 | export function workerUrl(url: string): string {
42 | /**
43 | * PLEASE NOTE: a build step transforms
44 | * the arguments provided to this function
45 | */
46 | return url;
47 | }
48 |
--------------------------------------------------------------------------------