Skip to content

add replaceRoute api #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
albertalquisola wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add replaceRoute api #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
node_modules
npm-debug.log
.DS_Store
build

/test/browser/browserified-bundle.js
78 changes: 49 additions & 29 deletions lib/browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*
*/

import historyPolyfill from 'html5-history-api';
Copy link

@SpaceK33z SpaceK33z Feb 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you need to support old browsers, you could also load this separately and put it in the global namespace. Many users don't have to support old browsers so this would add extra weight.

Copy link
Author

@albertalquisola albertalquisola Feb 6, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, not sure i follow about the global namespace implementation? not sure how that would make the build smaller if were still requiring it in? Mind explaining in a little more detail?

And i just assumed since this library supports legacy browsers that new APIs should do the same. I think it would be inconsistent behavior if some APIs supported legacy browsers while others did not.

eg. setRoute vs. replaceRoute. setRoute supports older versions of IE but without the history polyfill, replaceRoute would only support up to IE 10 or 11 I think.

What do you think?

Copy link

@SpaceK33z SpaceK33z Feb 6, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure how that would make the build smaller if were still requiring it in?

It wouldn't make the build smaller for users that choose to include the polyfill, but it would make the build smaller for users who don't have to support these old browsers because they just won't include it. I don't like including a 10kb polyfill (minified) in my app that I don't even need. That would make Tarantino twice as big.

You're right in that Tarantino does support legacy browsers, but that is only for the hash-based router since basic support for that is already present in those browsers (albeit with some inconsistencies, which this library fixes).

Note that I'm also new to this library, so bear with me if I made any mistakes.

Copy link
Author

@albertalquisola albertalquisola Feb 6, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I think I see what you're saying. Just to clarify and make sure we're on the same page, you want each individual project to require in the polyfill (if they need it) vs. tarantino doing it by default?

And then inside tarantino, it would either use the polyfill or default to the window.history.replaceState or something of that sort correct?

eg.

replaceHash: function(s) {
  if (window.historyPolyfill) {
    window.historyPolyfill.replaceState({}, document.title, s);
  } else {
    window.history.replaceState({}, document.title, s);
  }

  this.fire();

  return this;
}

Am I understanding this correctly? If I am, the only caveat is that we need to provide explicit instructions on how to inject the polyfill into the global namespace.

eg.

import historyPolyfill from 'html5-history-api;

// will not work and will trigger null pointer at window.history.replaceState
window.polyfill = historyPolyfill;

Thoughts?

Copy link

@SpaceK33z SpaceK33z Feb 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd recommend users to overwrite window.history with the polyfill if the object is undefined. The polyfill you found, html5-history-api, is spec compliant, so this wouldn't cause any issues. This is how most libraries handle polyfills now AFAIK.

import { Router as BaseRouter } from './tarantino/router';

var dloc = document.location;
Expand All @@ -16,6 +17,31 @@ function dlocHashEmpty() {
return dloc.hash === '' || dloc.hash === '#';
}

function applyUrlLogicGates(url, i, v, val) {
// Remove and insert:
if (typeof i === 'number' && typeof v === 'number' && typeof val === 'string') {
if (i < url.length) {
url.splice(i, v, val);
}
}
// Remove:
else if (typeof i === 'number' && typeof v === 'number') {
if (i < url.length) {
url.splice(i, v);
}
}
// Replace:
else if (typeof i === 'number' && typeof v === 'string') {
url[i] = v;
}
// Do nothing:
else {
url = [i];
}

return url;
}

var listener = {
mode: 'modern',
hash: dloc.hash,
Expand All @@ -30,12 +56,13 @@ var listener = {
},

fire: function () {
if (this.mode === 'modern') {
this.history === true ? window.onpopstate() : window.onhashchange();
}
else {
this.onHashChanged();
}
if (this.mode === 'modern' && this.history)
return window.onpopstate();

if (this.mode === 'modern' && !this.history)
return window.onhashchange();

return this.onHashChanged();
},

init: function (fn, history) {
Expand Down Expand Up @@ -125,6 +152,13 @@ var listener = {
return this;
},

replaceHash: function (s) {
historyPolyfill.replaceState({}, document.title, s);
this.fire();

return this;
},

writeFrame: function (s) {
// IE support...
var f = document.getElementById('state-frame');
Expand Down Expand Up @@ -215,33 +249,19 @@ Router.prototype.explode = function () {
};

Router.prototype.setRoute = function (i, v, val) {
var url = this.explode();

// Remove and insert:
if (typeof i === 'number' && typeof v === 'number' && typeof val === 'string') {
if (i < url.length) {
url.splice(i, v, val);
}
}
// Remove:
else if (typeof i === 'number' && typeof v === 'number') {
if (i < url.length) {
url.splice(i, v);
}
}
// Replace:
else if (typeof i === 'number' && typeof v === 'string') {
url[i] = v;
}
// Do nothing:
else {
url = [i];
}

var url = applyUrlLogicGates(this.explode(), i, v , val);
listener.setHash(url.join('/'));

return url;
};

Router.prototype.replaceRoute = function(i, v, val) {
var url = applyUrlLogicGates(this.explode(), i, v , val);
listener.replaceHash(url.join('/'));

return url;
}

//
// ### function insertEx(method, path, route, parent)
// #### @method {string} Method to insert the specific `route`.
Expand Down
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"request": "^2.79.0",
"rollup": "^0.36.4",
"rollup-plugin-commonjs": "^5.0.5",
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-uglify": "^1.0.1",
"uglify-js": "^2.7.4",
"vows": "^0.8.1"
Expand All @@ -48,5 +49,8 @@
"test-hash": "opn ./test/browser/routes-harness.html",
"preversion": "npm run -s build",
"version": "git add -A build"
},
"dependencies": {
"html5-history-api": "^4.2.7"
}
}
5 changes: 5 additions & 0 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var commonjs = require('rollup-plugin-commonjs');
var nodeResolve = require('rollup-plugin-node-resolve');

module.exports = {
entry: './lib/browser.js',
Expand All @@ -8,5 +9,9 @@ module.exports = {
moduleName: 'tarantino',
plugins: [
commonjs(),
nodeResolve({
jsnext: true,
main: true
}),
],
};