chrisdavies / rlite Goto Github PK

Simple and flexible. Thank you for querystring param support.

I'm getting undefined error. What is going wrong ? Please help.

Not sure if this counts as a bug, but

(require('.')(() => console.log('404'), {
  '/foo/*bar': () => console.log('1'),
  '/foo/:baz/qux': () => console.log('2'),
}))('/foo/something');

logs 404. When I comment the second route, it goes to the first as expected.

Routes with uppercase letters are not handled correctly since you're lowercasing all the pieces in the run function:

var piece = decode(pieces[i]),
    rule = rules[piece.toLowerCase()];

I know it's not considered good practice, but it would be great to support that!

When using a route like /users/:name and name contains a /, like for example a/b, the route will no longer match. I wonder if a token could be introduced that matches greedly across slashes.

Express for example allows these route via a regex route like /(.+), thought for rlite, I could see something simpler work, like /users/::name.

Apologies if this is not the place to put this, but I have spent some time trying to work around this issue and I'd like to share the solution so others don't waste their time.

There is no 'real' issue here (the rlite code is fine). It is more my lack of understanding of how it works, and in particular, of a part of the documentation.

The documentation proposes this to enable hash routing

// Hash-based routing
function processHash() {
  const hash = location.hash || '#';

  // Do something useful with the result of the route
  document.body.textContent = route(hash.slice(1));
}

window.addEventListener('hashchange', processHash);
processHash();

And the issue is that the function gets called on the root location immediately after you call processHash(), so if you had something displayed in the page, it all goes away and gets replaced by "" (nothing).

// on the root location, hash.slice(1) == ""
// so "" gets injected on the page and whatever you had on it goes away
document.body.textContent = route(hash.slice(1));

I found out that you only need to modify that a little to 'leave alone the root location'.

// Hash-based routing
function processHash() {
  const hash = location.hash || '#';


  var afterHash=hash.slice(1);
  console.log(`processHash has been called by "${afterHash}"`);
  
  // Do something useful with the result of the route
  // v1: The --output-- of the function gets injected on the page
  //document.body.textContent = route(hash.slice(1));

  // Do something useful with the result of the route unless is the Root location
  // v2: Just run the function assigned to the route
  if (afterHash!=""){
    route(afterHash);
  }
}

window.addEventListener('hashchange', processHash);
processHash();

Hi, what do I have to do to let rlite handle hashbang routes?

Hi @chrisdavies, have you published the package to npm already? Unfortunately rlite seems to be taken. It will make it much easier to handle it as a dependency... Thanks :) Darío

First of all -- fantastic package!

I was just wondering -- do you have any example documentation on how to use rlite without hash-based routing? For example, I'd like to be able to go to https://myApp/MyRoute rather than https://myApp/#myRoute

I got it working doing this:

history.pushState = ( f => function pushState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('pushstate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.pushState);

history.replaceState = ( f => function replaceState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('replacestate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.replaceState);

window.addEventListener('popstate',()=>{
    window.dispatchEvent(new Event('locationchange'))
});

(location change example taken from here )
Then defining my routes

Then using this to hook into the custom event.

  function processNoHash() {
    // Do something useful with the result of the route
    console.log(window.location.pathname);
    document.body.textContent = route(window.location.pathname);
  }

window.addEventListener('locationchange', processNoHash);
processNoHash();

It seems to work well, but I was wondering if there was a different recommended approach, and if perhaps an example could be added to the readme.

Hey man, you forgot to enclose the code in the code segment (it's the key point, but hard to find).

window.addEventListener('hashchange', processHash); processHash();

I sounds like rlite doesn't support history api (browser address bar changes)?
Is there a example / extension how to do browser address bar / history handling?

Given these two registrations:

const route = rlite(notFound, {
  'foo/bar/baz': someHandler,
  'foo/:name/bing': someOtherHandler
});

This will 404: route('foo/bar/bing');

Example:

(require('rlite-router')(() => console.log('404'), {
  '/foo': () => console.log('foo'),
}))('/a%b');

Results in

URIError: URI malformed
    at decodeURIComponent (<anonymous>)
    at recurseUrl (node_modules/rlite-router/rlite.js:65:19)
    at recurseUrl (node_modules/rlite-router/rlite.js:67:14)
    at lookup (node_modules/rlite-router/rlite.js:99:42)
    at run (node_modules/rlite-router/rlite.js:119:20)

Do I need to pass URL-encoded values, or is it a possible bug?

Dumb question: what is routing? I read the README and I'm still mystified.

When I try to use the lib I get this error:

Uncaught TypeError: Cannot read property 'define' of undefined
    at routes (index.js:723)
    at Object.<anonymous> (index.js:732)
    at __webpack_require__ (index.js:20)
    at Object.<anonymous> (index.js:623)
    at __webpack_require__ (index.js:20)
    at Object.<anonymous> (index.js:53)
    at __webpack_require__ (index.js:20)
    at index.js:40
    at index.js:43

Basically it's on this line:
var define = root.define;

It's trying to get define of root but root is undefined

for example
not suported urls /aaa/bbb-:ccc

Routes such as "hey/:hello/:world" don't seem to be supported anymore in the newer versions. Looking at the source, it seems that the "rules" object in the "add" function only includes the first parameter ("hello" in the example).

Would be great if the latest version on bower includes this functionality again!

Is there any way to easily use middleware with rlite, i do i have do add the method call in each of the callbacks?

Maybe related to #26 because I'm new with modules and just try to use it as "script"...

Loaded by

<script src="https://cdn.rawgit.com/chrisdavies/rlite/d025c663/rlite.min.js"></script>

I get following error

Uncaught ReferenceError: rlite is not defined

And also tested as module

<script type="module" src="https://cdn.rawgit.com/chrisdavies/rlite/d025c663/rlite.min.js"></script>

with error:

Uncaught ReferenceError: rlite is not defined
rlite.js:15 Uncaught TypeError: Cannot set property 'Rlite' of undefined

How to load rlite the right way in a html file as js?