jonathan/combine.fm
jonathan/combine.fm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Upgrade React and React Router

Browse source
This commit is contained in:
Jonathan Cremin 2016-01-09 15:10:28 +00:00
parent ef8e8ca59e
commit c96b4b624b
12 changed files with 218 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app.js
View file

@ -17,7 +17,6 @@ import itunesProxy from './routes/itunes-proxy';
import React from 'react'; import React from 'react';
import { routes } from './views/app'; import { routes } from './views/app';
import createHandler from './lib/react-handler';
import errorHandler from './lib/error-handler'; import errorHandler from './lib/error-handler';
import debuglog from 'debug'; import debuglog from 'debug';

16
lib/error-handler.js
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import createHandler from './react-handler'; import { renderPage } from './react-handler';
import debuglog from 'debug'; import debuglog from 'debug';
const debug = debuglog('match.audio'); const debug = debuglog('match.audio');
@ -11,12 +11,7 @@ export default function (routes) {
yield next; yield next;
} catch (err) { } catch (err) {
if (err.status === 404) { if (err.status === 404) {
let Handler = yield createHandler(routes, this.request.url); this.body = yield renderPage(routes, this.request.url, {});
let App = React.createFactory(Handler);
let content = React.renderToString(new App());
this.body = '<!doctype html>\n' + content;
} else { } else {
debug('Error: %o', err); debug('Error: %o', err);
throw err; throw err;
@ -28,12 +23,7 @@ export default function (routes) {
switch (this.accepts('html', 'json')) { switch (this.accepts('html', 'json')) {
case 'html': case 'html':
this.type = 'html'; this.type = 'html';
let Handler = yield createHandler(routes, this.request.url); this.body = yield renderPage(routes, this.request.url, {});
let App = React.createFactory(Handler);
let content = React.renderToString(new App());
this.body = '<!doctype html>\n' + content;
break; break;
case 'json': case 'json':
this.body = { this.body = {

45
lib/react-handler.js vendored
View file

@ -1,19 +1,34 @@
import Router from 'react-router'; import React from 'react';
import { renderToString } from 'react-dom/server';
import { RoutingContext, match } from 'react-router';
import createLocation from 'history/lib/createLocation';
export default function* (routes, url) { export function matchRoute(routes, url) {
let router = Router.create({ const location = createLocation(url);
location: url, return new Promise((resolve, reject) => {
routes: routes, match({ routes, location }, (error, redirectLocation, renderProps) => {
onAbort(aborted) { resolve({error, redirectLocation, renderProps});
let { to, params, query } = aborted;
this.redirect(Router.makePath(to, params, query));
}
});
return new Promise(function(resolve) {
router.run((Handler) => {
resolve(Handler);
}); });
}); });
} }
export function* renderPage(routes, url, state) {
const { error, redirectLocation, renderProps } = yield matchRoute(routes, url);
if (error) {
throw new Error(error.message);
} else if (redirectLocation) {
return redirectLocation.pathname + redirectLocation.search;
} else if (renderProps === null) {
return false;
}
const content = renderToString(<RoutingContext {...renderProps} />);
return '<!doctype html>\n' + content.replace('</body></html>', `<script>window.STATE = ${JSON.stringify(state)}</script>
<script src='/jspm_packages/system.js'></script>
<script src='/config.js'></script>
<script>System.import('babel/external-helpers')</script>
<script>System.import('views/app')</script>
</body></html>`);
}

18
package.json
View file

@ -44,6 +44,7 @@
"bluebird": "~2.0.7", "bluebird": "~2.0.7",
"co": "~4.6.0", "co": "~4.6.0",
"debug": "~2.2.0", "debug": "~2.2.0",
"history": "^1.12.3",
"jspm": "~0.16.13", "jspm": "~0.16.13",
"kcors": "^1.0.1", "kcors": "^1.0.1",
"koa": "~1.1.2", "koa": "~1.1.2",
@ -57,9 +58,10 @@
"mongodb-promisified": "~1.0.2", "mongodb-promisified": "~1.0.2",
"node-uuid": "~1.4.2", "node-uuid": "~1.4.2",
"playmusic": "~2.1.0", "playmusic": "~2.1.0",
"react": "~0.13.3", "react": "~0.14.5",
"react-dom": "~0.14.5",
"react-google-analytics": "~0.2.0", "react-google-analytics": "~0.2.0",
"react-router": "~0.13.3", "react-router": "~1.0.0",
"spotify": "~0.3.0", "spotify": "~0.3.0",
"superagent": "~1.4.0", "superagent": "~1.4.0",
"superagent-bluebird-promise": "~2.1.0" "superagent-bluebird-promise": "~2.1.0"
@ -79,12 +81,18 @@
"baseURL": "public" "baseURL": "public"
}, },
"dependencies": { "dependencies": {
"react": "npm:react@~0.13.3", "history": "npm:history@^1.12.3",
"react": "npm:react@~0.14.5",
"react-dom": "npm:react-dom@~0.14.5",
"react-google-analytics": "npm:react-google-analytics@~0.2.0", "react-google-analytics": "npm:react-google-analytics@~0.2.0",
"react-router": "npm:react-router@~0.13.3", "react-router": "npm:react-router@~1.0.0",
"superagent": "npm:superagent@~1.2.0" "superagent": "npm:superagent@~1.2.0"
}, },
"devDependencies": {}, "devDependencies": {
"babel": "npm:babel-core@^5.8.24",
"babel-runtime": "npm:babel-runtime@^5.8.24",
"core-js": "npm:core-js@^1.1.4"
},
"buildConfig": { "buildConfig": {
"minify": true, "minify": true,
"transpileES6": true "transpileES6": true

194
public/config.js
View file

@ -1,28 +1,42 @@
System.config({ System.config({
baseURL: "/", baseURL: "/",
defaultJSExtensions: true, defaultJSExtensions: true,
transpiler: "none", transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: { paths: {
"github:*": "jspm_packages/github/*", "github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*" "npm:*": "jspm_packages/npm/*"
}, },
map: { map: {
"react": "npm:react@0.13.3", "babel": "npm:babel-core@5.8.34",
"babel-runtime": "npm:babel-runtime@5.8.34",
"core-js": "npm:core-js@1.2.6",
"history": "npm:history@1.17.0",
"react": "npm:react@0.14.6",
"react-dom": "npm:react-dom@0.14.6",
"react-google-analytics": "npm:react-google-analytics@0.2.0", "react-google-analytics": "npm:react-google-analytics@0.2.0",
"react-router": "npm:react-router@0.13.4", "react-router": "npm:react-router@1.0.3",
"superagent": "npm:superagent@1.2.0", "superagent": "npm:superagent@1.2.0",
"github:jspm/nodelibs-assert@0.1.0": { "github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.3.0" "assert": "npm:assert@1.3.0"
}, },
"github:jspm/nodelibs-buffer@0.1.0": { "github:jspm/nodelibs-buffer@0.1.0": {
"buffer": "npm:buffer@3.5.1" "buffer": "npm:buffer@3.6.0"
}, },
"github:jspm/nodelibs-constants@0.1.0": { "github:jspm/nodelibs-constants@0.1.0": {
"constants-browserify": "npm:constants-browserify@0.0.1" "constants-browserify": "npm:constants-browserify@0.0.1"
}, },
"github:jspm/nodelibs-crypto@0.1.0": { "github:jspm/nodelibs-crypto@0.1.0": {
"crypto-browserify": "npm:crypto-browserify@3.10.0" "crypto-browserify": "npm:crypto-browserify@3.11.0"
},
"github:jspm/nodelibs-domain@0.1.0": {
"domain-browser": "npm:domain-browser@1.1.7"
}, },
"github:jspm/nodelibs-events@0.1.1": { "github:jspm/nodelibs-events@0.1.1": {
"events": "npm:events@1.0.2" "events": "npm:events@1.0.2"
@ -67,7 +81,7 @@ System.config({
"string_decoder": "npm:string_decoder@0.10.31" "string_decoder": "npm:string_decoder@0.10.31"
}, },
"github:jspm/nodelibs-timers@0.1.0": { "github:jspm/nodelibs-timers@0.1.0": {
"timers-browserify": "npm:timers-browserify@1.4.1" "timers-browserify": "npm:timers-browserify@1.4.2"
}, },
"github:jspm/nodelibs-tty@0.1.0": { "github:jspm/nodelibs-tty@0.1.0": {
"tty-browserify": "npm:tty-browserify@0.0.0" "tty-browserify": "npm:tty-browserify@0.0.0"
@ -90,9 +104,13 @@ System.config({
"path": "github:jspm/nodelibs-path@0.1.0", "path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2" "process": "github:jspm/nodelibs-process@0.1.2"
}, },
"npm:asn1.js@2.2.1": { "npm:asap@2.0.3": {
"domain": "github:jspm/nodelibs-domain@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:asn1.js@4.3.0": {
"assert": "github:jspm/nodelibs-assert@0.1.0", "assert": "github:jspm/nodelibs-assert@0.1.0",
"bn.js": "npm:bn.js@2.2.0", "bn.js": "npm:bn.js@4.6.2",
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"inherits": "npm:inherits@2.0.1", "inherits": "npm:inherits@2.0.1",
"minimalistic-assert": "npm:minimalistic-assert@1.0.0", "minimalistic-assert": "npm:minimalistic-assert@1.0.0",
@ -105,6 +123,9 @@ System.config({
"process": "github:jspm/nodelibs-process@0.1.2", "process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0" "systemjs-json": "github:systemjs/plugin-json@0.1.0"
}, },
"npm:babel-runtime@5.8.34": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:browserify-aes@1.0.5": { "npm:browserify-aes@1.0.5": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"buffer-xor": "npm:buffer-xor@1.0.3", "buffer-xor": "npm:buffer-xor@1.0.3",
@ -130,23 +151,23 @@ System.config({
"des.js": "npm:des.js@1.0.0", "des.js": "npm:des.js@1.0.0",
"inherits": "npm:inherits@2.0.1" "inherits": "npm:inherits@2.0.1"
}, },
"npm:browserify-rsa@2.0.1": { "npm:browserify-rsa@4.0.0": {
"bn.js": "npm:bn.js@2.2.0", "bn.js": "npm:bn.js@4.6.2",
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"constants": "github:jspm/nodelibs-constants@0.1.0", "constants": "github:jspm/nodelibs-constants@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0",
"randombytes": "npm:randombytes@2.0.1" "randombytes": "npm:randombytes@2.0.1"
}, },
"npm:browserify-sign@3.0.8": { "npm:browserify-sign@4.0.0": {
"bn.js": "npm:bn.js@2.2.0", "bn.js": "npm:bn.js@4.6.2",
"browserify-rsa": "npm:browserify-rsa@2.0.1", "browserify-rsa": "npm:browserify-rsa@4.0.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2", "create-hash": "npm:create-hash@1.1.2",
"create-hmac": "npm:create-hmac@1.1.4", "create-hmac": "npm:create-hmac@1.1.4",
"crypto": "github:jspm/nodelibs-crypto@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0",
"elliptic": "npm:elliptic@3.1.0", "elliptic": "npm:elliptic@6.0.2",
"inherits": "npm:inherits@2.0.1", "inherits": "npm:inherits@2.0.1",
"parse-asn1": "npm:parse-asn1@3.0.2", "parse-asn1": "npm:parse-asn1@5.0.0",
"stream": "github:jspm/nodelibs-stream@0.1.0" "stream": "github:jspm/nodelibs-stream@0.1.0"
}, },
"npm:browserify-zlib@0.1.4": { "npm:browserify-zlib@0.1.4": {
@ -154,17 +175,20 @@ System.config({
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"pako": "npm:pako@0.2.8", "pako": "npm:pako@0.2.8",
"process": "github:jspm/nodelibs-process@0.1.2", "process": "github:jspm/nodelibs-process@0.1.2",
"readable-stream": "npm:readable-stream@1.0.27-1", "readable-stream": "npm:readable-stream@2.0.5",
"util": "github:jspm/nodelibs-util@0.1.0" "util": "github:jspm/nodelibs-util@0.1.0"
}, },
"npm:buffer-xor@1.0.3": { "npm:buffer-xor@1.0.3": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"systemjs-json": "github:systemjs/plugin-json@0.1.0" "systemjs-json": "github:systemjs/plugin-json@0.1.0"
}, },
"npm:buffer@3.5.1": { "npm:buffer@3.6.0": {
"base64-js": "npm:base64-js@0.0.8", "base64-js": "npm:base64-js@0.0.8",
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"ieee754": "npm:ieee754@1.1.6", "ieee754": "npm:ieee754@1.1.6",
"is-array": "npm:is-array@1.0.1" "isarray": "npm:isarray@1.0.0",
"process": "github:jspm/nodelibs-process@0.1.2"
}, },
"npm:cipher-base@1.0.2": { "npm:cipher-base@1.0.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
@ -181,14 +205,20 @@ System.config({
"npm:constants-browserify@0.0.1": { "npm:constants-browserify@0.0.1": {
"systemjs-json": "github:systemjs/plugin-json@0.1.0" "systemjs-json": "github:systemjs/plugin-json@0.1.0"
}, },
"npm:core-util-is@1.0.1": { "npm:core-js@1.2.6": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:core-util-is@1.0.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0" "buffer": "github:jspm/nodelibs-buffer@0.1.0"
}, },
"npm:create-ecdh@2.0.2": { "npm:create-ecdh@4.0.0": {
"bn.js": "npm:bn.js@2.2.0", "bn.js": "npm:bn.js@4.6.2",
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0",
"elliptic": "npm:elliptic@3.1.0" "elliptic": "npm:elliptic@6.0.2"
}, },
"npm:create-hash@1.1.2": { "npm:create-hash@1.1.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
@ -206,16 +236,16 @@ System.config({
"inherits": "npm:inherits@2.0.1", "inherits": "npm:inherits@2.0.1",
"stream": "github:jspm/nodelibs-stream@0.1.0" "stream": "github:jspm/nodelibs-stream@0.1.0"
}, },
"npm:crypto-browserify@3.10.0": { "npm:crypto-browserify@3.11.0": {
"browserify-cipher": "npm:browserify-cipher@1.0.0", "browserify-cipher": "npm:browserify-cipher@1.0.0",
"browserify-sign": "npm:browserify-sign@3.0.8", "browserify-sign": "npm:browserify-sign@4.0.0",
"create-ecdh": "npm:create-ecdh@2.0.2", "create-ecdh": "npm:create-ecdh@4.0.0",
"create-hash": "npm:create-hash@1.1.2", "create-hash": "npm:create-hash@1.1.2",
"create-hmac": "npm:create-hmac@1.1.4", "create-hmac": "npm:create-hmac@1.1.4",
"diffie-hellman": "npm:diffie-hellman@3.0.2", "diffie-hellman": "npm:diffie-hellman@5.0.0",
"inherits": "npm:inherits@2.0.1", "inherits": "npm:inherits@2.0.1",
"pbkdf2": "npm:pbkdf2@3.0.4", "pbkdf2": "npm:pbkdf2@3.0.4",
"public-encrypt": "npm:public-encrypt@2.0.1", "public-encrypt": "npm:public-encrypt@4.0.0",
"randombytes": "npm:randombytes@2.0.1" "randombytes": "npm:randombytes@2.0.1"
}, },
"npm:debug@2.2.0": { "npm:debug@2.2.0": {
@ -235,16 +265,19 @@ System.config({
"inherits": "npm:inherits@2.0.1", "inherits": "npm:inherits@2.0.1",
"minimalistic-assert": "npm:minimalistic-assert@1.0.0" "minimalistic-assert": "npm:minimalistic-assert@1.0.0"
}, },
"npm:diffie-hellman@3.0.2": { "npm:diffie-hellman@5.0.0": {
"bn.js": "npm:bn.js@2.2.0", "bn.js": "npm:bn.js@4.6.2",
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0",
"miller-rabin": "npm:miller-rabin@2.0.1", "miller-rabin": "npm:miller-rabin@4.0.0",
"randombytes": "npm:randombytes@2.0.1", "randombytes": "npm:randombytes@2.0.1",
"systemjs-json": "github:systemjs/plugin-json@0.1.0" "systemjs-json": "github:systemjs/plugin-json@0.1.0"
}, },
"npm:elliptic@3.1.0": { "npm:domain-browser@1.1.7": {
"bn.js": "npm:bn.js@2.2.0", "events": "github:jspm/nodelibs-events@0.1.1"
},
"npm:elliptic@6.0.2": {
"bn.js": "npm:bn.js@4.6.2",
"brorand": "npm:brorand@1.0.5", "brorand": "npm:brorand@1.0.5",
"hash.js": "npm:hash.js@1.0.3", "hash.js": "npm:hash.js@1.0.3",
"inherits": "npm:inherits@2.0.1", "inherits": "npm:inherits@2.0.1",
@ -264,6 +297,14 @@ System.config({
"create-hash": "npm:create-hash@1.1.2", "create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0" "crypto": "github:jspm/nodelibs-crypto@0.1.0"
}, },
"npm:fbjs@0.6.1": {
"core-js": "npm:core-js@1.2.6",
"loose-envify": "npm:loose-envify@1.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"promise": "npm:promise@7.1.1",
"ua-parser-js": "npm:ua-parser-js@0.7.10",
"whatwg-fetch": "npm:whatwg-fetch@0.9.0"
},
"npm:form-data@0.2.0": { "npm:form-data@0.2.0": {
"async": "npm:async@0.9.2", "async": "npm:async@0.9.2",
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
@ -295,12 +336,25 @@ System.config({
"npm:hash.js@1.0.3": { "npm:hash.js@1.0.3": {
"inherits": "npm:inherits@2.0.1" "inherits": "npm:inherits@2.0.1"
}, },
"npm:history@1.17.0": {
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"deep-equal": "npm:deep-equal@1.0.1",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"invariant": "npm:invariant@2.2.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"query-string": "npm:query-string@3.0.0",
"warning": "npm:warning@2.1.0"
},
"npm:https-browserify@0.0.0": { "npm:https-browserify@0.0.0": {
"http": "github:jspm/nodelibs-http@1.7.1" "http": "github:jspm/nodelibs-http@1.7.1"
}, },
"npm:inherits@2.0.1": { "npm:inherits@2.0.1": {
"util": "github:jspm/nodelibs-util@0.1.0" "util": "github:jspm/nodelibs-util@0.1.0"
}, },
"npm:invariant@2.2.0": {
"loose-envify": "npm:loose-envify@1.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:jstransform@10.1.0": { "npm:jstransform@10.1.0": {
"base62": "npm:base62@0.1.1", "base62": "npm:base62@0.1.1",
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
@ -309,11 +363,17 @@ System.config({
"process": "github:jspm/nodelibs-process@0.1.2", "process": "github:jspm/nodelibs-process@0.1.2",
"source-map": "npm:source-map@0.1.31" "source-map": "npm:source-map@0.1.31"
}, },
"npm:loose-envify@1.1.0": {
"js-tokens": "npm:js-tokens@1.0.2",
"process": "github:jspm/nodelibs-process@0.1.2",
"stream": "github:jspm/nodelibs-stream@0.1.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:methods@1.0.1": { "npm:methods@1.0.1": {
"http": "github:jspm/nodelibs-http@1.7.1" "http": "github:jspm/nodelibs-http@1.7.1"
}, },
"npm:miller-rabin@2.0.1": { "npm:miller-rabin@4.0.0": {
"bn.js": "npm:bn.js@2.2.0", "bn.js": "npm:bn.js@4.6.2",
"brorand": "npm:brorand@1.0.5" "brorand": "npm:brorand@1.0.5"
}, },
"npm:mime-db@1.12.0": { "npm:mime-db@1.12.0": {
@ -336,8 +396,8 @@ System.config({
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2" "process": "github:jspm/nodelibs-process@0.1.2"
}, },
"npm:parse-asn1@3.0.2": { "npm:parse-asn1@5.0.0": {
"asn1.js": "npm:asn1.js@2.2.1", "asn1.js": "npm:asn1.js@4.3.0",
"browserify-aes": "npm:browserify-aes@1.0.5", "browserify-aes": "npm:browserify-aes@1.0.5",
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2", "create-hash": "npm:create-hash@1.1.2",
@ -357,43 +417,58 @@ System.config({
"process": "github:jspm/nodelibs-process@0.1.2", "process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0" "systemjs-json": "github:systemjs/plugin-json@0.1.0"
}, },
"npm:process-nextick-args@1.0.6": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:process@0.11.2": { "npm:process@0.11.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0" "assert": "github:jspm/nodelibs-assert@0.1.0"
}, },
"npm:public-encrypt@2.0.1": { "npm:promise@7.1.1": {
"bn.js": "npm:bn.js@2.2.0", "asap": "npm:asap@2.0.3",
"browserify-rsa": "npm:browserify-rsa@2.0.1", "fs": "github:jspm/nodelibs-fs@0.1.2"
},
"npm:public-encrypt@4.0.0": {
"bn.js": "npm:bn.js@4.6.2",
"browserify-rsa": "npm:browserify-rsa@4.0.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"create-hash": "npm:create-hash@1.1.2", "create-hash": "npm:create-hash@1.1.2",
"crypto": "github:jspm/nodelibs-crypto@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0",
"parse-asn1": "npm:parse-asn1@3.0.2", "parse-asn1": "npm:parse-asn1@5.0.0",
"randombytes": "npm:randombytes@2.0.1" "randombytes": "npm:randombytes@2.0.1"
}, },
"npm:punycode@1.3.2": { "npm:punycode@1.3.2": {
"process": "github:jspm/nodelibs-process@0.1.2" "process": "github:jspm/nodelibs-process@0.1.2"
}, },
"npm:query-string@3.0.0": {
"strict-uri-encode": "npm:strict-uri-encode@1.1.0"
},
"npm:randombytes@2.0.1": { "npm:randombytes@2.0.1": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"crypto": "github:jspm/nodelibs-crypto@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2" "process": "github:jspm/nodelibs-process@0.1.2"
}, },
"npm:react-dom@0.14.6": {
"react": "npm:react@0.14.6"
},
"npm:react-google-analytics@0.2.0": { "npm:react-google-analytics@0.2.0": {
"react": "npm:react@0.13.3" "react": "npm:react@0.14.6"
}, },
"npm:react-router@0.13.4": { "npm:react-router@1.0.3": {
"object-assign": "npm:object-assign@2.1.1", "child_process": "github:jspm/nodelibs-child_process@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"history": "npm:history@1.17.0",
"invariant": "npm:invariant@2.2.0",
"process": "github:jspm/nodelibs-process@0.1.2", "process": "github:jspm/nodelibs-process@0.1.2",
"qs": "npm:qs@2.4.1", "warning": "npm:warning@2.1.0"
"react": "npm:react@0.13.3"
}, },
"npm:react@0.13.3": { "npm:react@0.14.6": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"envify": "npm:envify@3.4.0", "envify": "npm:envify@3.4.0",
"fbjs": "npm:fbjs@0.6.1",
"process": "github:jspm/nodelibs-process@0.1.2" "process": "github:jspm/nodelibs-process@0.1.2"
}, },
"npm:readable-stream@1.0.27-1": { "npm:readable-stream@1.0.27-1": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"core-util-is": "npm:core-util-is@1.0.1", "core-util-is": "npm:core-util-is@1.0.2",
"events": "github:jspm/nodelibs-events@0.1.1", "events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1", "inherits": "npm:inherits@2.0.1",
"isarray": "npm:isarray@0.0.1", "isarray": "npm:isarray@0.0.1",
@ -401,6 +476,17 @@ System.config({
"stream": "github:jspm/nodelibs-stream@0.1.0", "stream": "github:jspm/nodelibs-stream@0.1.0",
"string_decoder": "npm:string_decoder@0.10.31" "string_decoder": "npm:string_decoder@0.10.31"
}, },
"npm:readable-stream@2.0.5": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"core-util-is": "npm:core-util-is@1.0.2",
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"isarray": "npm:isarray@0.0.1",
"process": "github:jspm/nodelibs-process@0.1.2",
"process-nextick-args": "npm:process-nextick-args@1.0.6",
"string_decoder": "npm:string_decoder@0.10.31",
"util-deprecate": "npm:util-deprecate@1.0.2"
},
"npm:ripemd160@1.0.1": { "npm:ripemd160@1.0.1": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2" "process": "github:jspm/nodelibs-process@0.1.2"
@ -452,21 +538,31 @@ System.config({
"process": "github:jspm/nodelibs-process@0.1.2", "process": "github:jspm/nodelibs-process@0.1.2",
"stream": "github:jspm/nodelibs-stream@0.1.0" "stream": "github:jspm/nodelibs-stream@0.1.0"
}, },
"npm:timers-browserify@1.4.1": { "npm:timers-browserify@1.4.2": {
"process": "npm:process@0.11.2" "process": "npm:process@0.11.2"
}, },
"npm:ua-parser-js@0.7.10": {
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:url@0.10.3": { "npm:url@0.10.3": {
"assert": "github:jspm/nodelibs-assert@0.1.0", "assert": "github:jspm/nodelibs-assert@0.1.0",
"punycode": "npm:punycode@1.3.2", "punycode": "npm:punycode@1.3.2",
"querystring": "npm:querystring@0.2.0", "querystring": "npm:querystring@0.2.0",
"util": "github:jspm/nodelibs-util@0.1.0" "util": "github:jspm/nodelibs-util@0.1.0"
}, },
"npm:util-deprecate@1.0.2": {
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:util@0.10.3": { "npm:util@0.10.3": {
"inherits": "npm:inherits@2.0.1", "inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2" "process": "github:jspm/nodelibs-process@0.1.2"
}, },
"npm:vm-browserify@0.0.4": { "npm:vm-browserify@0.0.4": {
"indexof": "npm:indexof@0.0.1" "indexof": "npm:indexof@0.0.1"
},
"npm:warning@2.1.0": {
"loose-envify": "npm:loose-envify@1.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
} }
} }
}); });

11
routes/index.js
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import createHandler from '../lib/react-handler'; import { renderPage } from '../lib/react-handler';
import { routes } from '../views/app'; import { routes } from '../views/app';
export default function* () { export default function* () {
@ -15,12 +15,5 @@ export default function* () {
}); });
}); });
const Handler = yield createHandler(routes, this.request.url); yield renderPage(routes, this.request.url, {recents: recents});
const App = React.createFactory(Handler);
let content = React.renderToString(new App({recents: recents}));
content = content.replace('</body></html>', '<script>var recents = ' + JSON.stringify(recents) + '</script></body></html>');
this.body = '<!doctype html>\n' + content;
}; };

9
routes/share.js
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import createHandler from '../lib/react-handler'; import { renderPage } from '../lib/react-handler';
import { routes } from '../views/app'; import { routes } from '../views/app';
import services from '../lib/services'; import services from '../lib/services';
import co from 'co'; import co from 'co';
@ -68,10 +68,5 @@ export default function* (serviceId, type, itemId, format, next) {
return this.body = {shares: shares}; return this.body = {shares: shares};
} }
const Handler = yield createHandler(routes, this.request.url); this.body = yield renderPage(routes, this.request.url, {shares: shares});
const App = React.createFactory(Handler);
let content = React.renderToString(new App({shares: shares}));
content = content.replace('</body></html>', '<script>var shares = ' + JSON.stringify(shares) + '</script></body></html>');
this.body = '<!doctype html>\n' + content;
}; };

25
views/app.js
View file

@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import Router, { Route, DefaultRoute, NotFoundRoute, RouteHandler } from 'react-router'; import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import ga, { Initializer as GAInitiailizer } from 'react-google-analytics'; import ga, { Initializer as GAInitiailizer } from 'react-google-analytics';
import Home from './home'; import Home from './home';
import Share from './share'; import Share from './share';
@ -13,11 +15,8 @@ const App = React.createClass({
<html> <html>
<Head {...this.props} /> <Head {...this.props} />
<body className='home'> <body className='home'>
<RouteHandler {...this.props} /> {this.props.children}
<GAInitiailizer /> <GAInitiailizer />
<script src='/jspm_packages/system.src.js'></script>
<script src='/config.js'></script>
<script dangerouslySetInnerHTML={{__html: 'System.import(\'views/app\');'}}></script>
</body> </body>
</html> </html>
); );
@ -25,22 +24,16 @@ const App = React.createClass({
}); });
const routes = ( const routes = (
<Route name='home' handler={App} path='/'> <Route path='/' component={App}>
<DefaultRoute handler={Home} /> <IndexRoute component={Home} />
<Route name='share' path=':service/:type/:id' handler={Share}/> <Route path=':service/:type/:id' component={Share}/>
<NotFoundRoute handler={NotFound}/> <Route path='*' component={NotFound}/>
</Route> </Route>
); );
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
console.info('Time since page started rendering: ' + (Date.now() - timerStart) + 'ms'); // eslint-disable-line no-undef console.info('Time since page started rendering: ' + (Date.now() - timerStart) + 'ms'); // eslint-disable-line no-undef
Router.run(routes, Router.HistoryLocation, function (Handler) { ReactDOM.render(<Router history={createBrowserHistory()}>{routes}</Router>, document);
if (typeof window.recents !== 'undefined') {
React.render(<Handler recents={window.recents} />, document);
} else if (typeof shares !== 'undefined') {
React.render(<Handler shares={window.shares} />, document);
}
});
ga('create', 'UA-66209-8', 'auto'); ga('create', 'UA-66209-8', 'auto');
ga('send', 'pageview'); ga('send', 'pageview');
} }

5
views/head.js
View file

@ -4,13 +4,10 @@ import { State } from 'react-router';
export default React.createClass({ export default React.createClass({
mixins: [ State ], mixins: [ State ],
contextTypes: {
router: React.PropTypes.func.isRequired
},
render: function() { render: function() {
const image = this.props.shares ? this.props.shares[0].artwork.large : 'https://match.audio/images/logo-512.png'; const image = this.props.shares ? this.props.shares[0].artwork.large : 'https://match.audio/images/logo-512.png';
const title = this.props.shares ? this.props.shares[0].name + ' by ' + this.props.shares[0].artist.name : 'Match Audio'; const title = this.props.shares ? this.props.shares[0].name + ' by ' + this.props.shares[0].artist.name : 'Match Audio';
const shareUrl = 'https://match.audio/' + this.getParams().service + '/' + this.getParams().type + '/' + this.getParams().id; const shareUrl = 'https://match.audio/' + this.props.params.service + '/' + this.props.params.type + '/' + this.props.params.id;
return ( return (
<head> <head>
<script dangerouslySetInnerHTML={{__html: 'var timerStart = Date.now();'}}></script> <script dangerouslySetInnerHTML={{__html: 'var timerStart = Date.now();'}}></script>

14
views/home.js
View file

@ -1,11 +1,10 @@
import React from 'react'; import React from 'react';
import request from 'superagent'; import request from 'superagent';
import { Navigation, State, Link } from 'react-router'; import { History, State, Link } from 'react-router';
import Faq from './faq'; import Faq from './faq';
import Foot from './foot'; import Foot from './foot';
const Recent = React.createClass({ const Recent = React.createClass({
render: function() { render: function() {
return (<div className='row'> return (<div className='row'>
<div className='col-md-6 col-md-offset-3'> <div className='col-md-6 col-md-offset-3'>
@ -29,7 +28,7 @@ const RecentItem = React.createClass({
} }
return ( return (
<div className='col-sm-4 col-xs-6'> <div className='col-sm-4 col-xs-6'>
<Link to='share' params={this.props.item}> <Link to={`/${this.props.item.service}/${this.props.item.type}/${this.props.item.id}`}>
<div className={this.props.item.service === 'youtube' ? 'artwork-youtube artwork' : 'artwork'} style={{backgroundImage: 'url(' + this.props.item.artwork.small + ')'}}></div> <div className={this.props.item.service === 'youtube' ? 'artwork-youtube artwork' : 'artwork'} style={{backgroundImage: 'url(' + this.props.item.artwork.small + ')'}}></div>
</Link> </Link>
</div> </div>
@ -40,7 +39,7 @@ const RecentItem = React.createClass({
const SearchForm = React.createClass({ const SearchForm = React.createClass({
mixins: [ Navigation, State ], mixins: [ History, State ],
getInitialState: function () { getInitialState: function () {
return { return {
@ -54,7 +53,7 @@ const SearchForm = React.createClass({
this.setState({ this.setState({
submitting: true submitting: true
}); });
const url = this.refs.url.getDOMNode().value.trim(); const url = this.refs.url.value.trim();
if (!url) { if (!url) {
this.setState({ this.setState({
submitting: false submitting: false
@ -68,7 +67,8 @@ const SearchForm = React.createClass({
if (res.body.error) { if (res.body.error) {
this.setState({error: res.body.error.message}); this.setState({error: res.body.error.message});
} }
this.transitionTo('share', res.body); const item = res.body;
this.history.pushState(null, `/${item.service}/${item.type}/${item.id}`);
}); });
}, },
@ -127,7 +127,7 @@ export default React.createClass({
<div> <div>
<div className='page-wrap'> <div className='page-wrap'>
<header> <header>
<h1><Link to='home'>match<span className='audio-lighten'>.audio</span></Link></h1> <h1><Link to='/'>match<span className='audio-lighten'>.audio</span></Link></h1>
</header> </header>
<div className='container'> <div className='container'>
<div className='row share-form'> <div className='row share-form'>

4
views/notfound.js
View file

@ -12,7 +12,7 @@ export default React.createClass({
<div className='row'> <div className='row'>
<div className='col-md-12'> <div className='col-md-12'>
<div className='error-logo'> <div className='error-logo'>
<Link to='home'><img src='/images/logo-full-300.png' width='50' /></Link> <Link to='/'><img src='/images/logo-full-300.png' width='50' /></Link>
</div> </div>
</div> </div>
</div> </div>
@ -20,7 +20,7 @@ export default React.createClass({
<div className='col-md-12'> <div className='col-md-12'>
<h2>404</h2> <h2>404</h2>
<h1>Sorry, it looks like the page you asked for is gone.</h1> <h1>Sorry, it looks like the page you asked for is gone.</h1>
<Link to='home'>Take Me Home</Link> or <a href='https://www.youtube.com/watch?v=gnnIrTLlLyA' target='_blank'>Take Me to the Wubs</a> <Link to='/'>Take Me Home</Link> or <a href='https://www.youtube.com/watch?v=gnnIrTLlLyA' target='_blank'>Take Me to the Wubs</a>
</div> </div>
</div> </div>
</div> </div>

10
views/share.js
View file

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import request from 'superagent'; import request from 'superagent';
import { State, Link } from 'react-router'; import { Link } from 'react-router';
import Foot from './foot'; import Foot from './foot';
const MusicItem = React.createClass({ const MusicItem = React.createClass({
@ -62,10 +62,8 @@ const MusicItem = React.createClass({
export default React.createClass({ export default React.createClass({
mixins: [ State ],
getInitialState: function () { getInitialState: function () {
if (this.props.shares && this.props.shares[0].id === this.getParams().id) { if (this.props.shares && this.props.shares[0].id === this.props.params.id) {
return { return {
name: this.props.shares[0].name, name: this.props.shares[0].name,
artist: this.props.shares[0].artist.name, artist: this.props.shares[0].artist.name,
@ -97,7 +95,7 @@ export default React.createClass({
}); });
const getShares = () => { const getShares = () => {
request.get(this.getPathname() + '.json').end((err, res) => { request.get(this.props.location.pathname + '.json').end((err, res) => {
const shares = res.body.shares; const shares = res.body.shares;
complete = true; complete = true;
shares.forEach(function(share) { shares.forEach(function(share) {
@ -162,7 +160,7 @@ export default React.createClass({
<div className='container'> <div className='container'>
<div className='row'> <div className='row'>
<div className='col-md-12'> <div className='col-md-12'>
<h1><Link to='home'>match<span className='audio-lighten'>.audio</span></Link></h1> <h1><Link to='/'>match<span className='audio-lighten'>.audio</span></Link></h1>
</div> </div>
</div> </div>
</div> </div>