scssyworks / silkrouter Goto Github PK

View Code? Open in Web Editor NEW

40.0 3.0 8.0 6.18 MB

Silk router is a reactive library for creating SPAs

Home Page: https://scssyworks.github.io/silkrouter/

License: MIT License

JavaScript 96.03% TypeScript 3.97%

router jquery silk-router reactive rxjs routing plugin hash-routing jquery-router

silkrouter's Introduction

Silk router

Silk router is a reactive and light-weight (1.5kb gzipped) routing library.

Installation

npm install --save silkrouter rxjs

Silk router is dependant on rxjs for classes such as Observable and Subscription. Please install this package as a separate (peer) dependency.

Usage

Import Router class

import { Router } from 'silkrouter';
...

Create an instance

const router = new Router();

Add a route handler

router.subscribe((e) => {
  // Listens to changes to route
});

Navigate to a route

router.set("/path/to/route"); // Route should always start with a '/'

Hash router

Silkrouter also adds hash routing capability. Hash routes are useful when back-end doesn't have a way to support page paths. Hash routing can be enabled via hashRouting flag.

const router = new Router({
  hashRouting: true,
});

Please note that silkrouter replaces the current path with a hash path by default. To disable this behaviour you need to preserve the current path.

const router = new Router({
  hashRouting: true,
  preservePath: true,
});

Path preservation only works for hash routing.

Disable initialization

Silkrouter automatically calls the handler as soon as it is attached. This behaviour allow consumers to mount components on page load. To attach the listeners silently, you can disable this behaviour.

const router = new Router({
  init: false,
});

Please note that disabling initialization doesn't effect the routing functionality. Route changes are still caught by the handlers.

Operators

From version 5 onwards silkrouter does not ship its own operators. You can create your own operators as needed, or use the ones built by the awesome JavaScript community.

const router = new Router();

router.pipe(myOperator()).subscribe((event) => {
  // ...
});

myOperator.js

export function myOperator() {
  return (observable) =>
    new Observable((subscriber) => {
      const currSubscription = observable.subscribe({
        next(value) {
          // ...
          subscriber.next(/* updated value */);
        },
        error: subscriber.error,
        complete: subscriber.complete,
      });
      // ...
      return () => {
        return currSubscription.unsubscribe();
      };
    });
}

Contribution

We invite you all to contribute to silkrouter and make it better. Please feel free to open discussions, fork this repository and raise PRs.

silkrouter's People

Contributors

Stargazers

Watchers

Forkers

snsanich isszz lim2481284 podra02 zhaohuatai youssef103 abrhambas01 tuxpoll

silkrouter's Issues

Refresh Page with Browser Refresh Button

I am testing this plugin and note, when using the browser refresh to refresh the page, only the ajax part of the page shows?

Is there a method for stopping this. I have gone through the docs and see no resolve for this?

How to set a default case for 404.

Hi, is there a way to catch undefined routes? (I'm using jquery version)

I have for example the routes /a and /b. I would like to be able to handle anything diferent from those 2 routes to go to a 404 page. Something like:

$.route('?', (e) => {
    // show 404 page
});

is it possible?
Thanks!

Exact route / ver3

Hi @scssyworks

I'm using the jquery version of silkrouter 3.5.9 and i have a problem with the find and return the exact route. ejm:

if i have in my definition one route "father" /names and others "sub"routes ejem: /names/jhonDoe | /names/Peter and try to goTo the sub route "/names/Peter" the router find me 2 coincidance the subroute and the route father,

I have any solution for this case and return only the exact route in this case only the subroute /names/Peter?

Regards

Case insensitivity of route handlers

Would it be possible to specify that we want route handlers to be triggered without caring about the case sensitivity of the url?

For example, if we have route("#/my/route", function () { ... }), I would want it to be triggered by navigating to "#/mY/ROUte" as well as "#/my/route".

To extend to this, it would be great if you could supply a function when defining routes that determines whether or not a particular url will trigger that route. For example:

route(
  function(route) {
    return route.toLowerCase() === "#/my/route"; // return true to trigger the route handler
  },
  function(config) { ... }
);

Uncaught TypeError: deparam is not a function

Hi I'm using the jquery version of silkrouter and am running into this error code:

Uncaught TypeError: deparam is not a function

I'm binding the following router event but then when I set the route I get this error. Any ideas what the issue could be?

$.route('/path/to/route', (e) => {
        alert('functional');
});

$.router.set('/path/to/route');

Do you know how to use this project with Laravel

What is your workflow in donig this ?

Uncaught TypeError

in the example page: https://scssyworks.github.io/silkrouter/

demo page is missing

Hello,
the demo page https://jqueryrouter.herokuapp.com/ is no longer visible.
could you reupload it please?

Request for demo repo

Congrats on the (near) release of version 4!

Do you have a demo repo anywhere that uses either version? I'd love to see the proper way to use silkrouter, especially within a class/module. My current code is a bunch of onClick handlers which I'm slowly converting to silkrouter, but it doesn't feel very clean, I'm sure there's a better way.

Thanks.

I am not able to access the params

the Url I am firing
/app/trip/t-123 It is going to the defined router /app/trip/:tripId

But i am not able to access the params, in the function

$.route('/app/trip/:tripId', function (data, params) {
    console.log(params.tripId); // Here i am not able to see the data
});