npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ractive-route

v0.3.11

Published

Routing library for Ractive.js

Downloads

26

Readme

ractive-route

Simple routing library for Ractive.js with support for two way (model <-> URI) data binding.

See it in action! (source)

Get started

https://cdn.jsdelivr.net/npm/[email protected]/ractive-route.min.js

ractive-route will always expose itself as Ractive.Router. Additionally, you can load it using AMD or CommonJS module loader.

API

new Router(options)

options Object:

el HTMLElement|string|jQuery-like collection

el that will be passed to your Ractive components.

data function

A function that will be invoked every time a new component is created and the returned data will be passed to your component.

basePath string (default: '')

Path to your application.

history Object (default: window.history)

Custom History API to use. It has to implement pushState() and replaceState() methods.

strictMode boolean (default: false)

If set to false, URLs are case insensitive and starting and trailing slashes are ignored.

reloadOnClick boolean (default: false)

If set to true, clicking on a link will always force a dispatch().

addRoute(pattern, Handler[, observe])

pattern string

Can contain required or optional variables:

/users/:id/ - required
/users/:id?/ - optional

By default, every variable will match anything except /. You can specify a pattern for each variable if you want:

/users/:id(\d+)/
/users/:id(\d+)?/

Handler function

Ractive component or function to handle the requests.

Observe Object

This object can contain one or more of the following properties:

  • qs - a list of keys that will be observed and synced with query string.
  • hash - a list of keys that will be observed and synced with hash.
  • state - a list of keys that will be observed and synced with the History API.

dispatch(request[, options])

Dispatch the request to the first route matching the request. If there is no such route, redirect to the requested URI.

request string

Either a relative or an absolute URI.

options Object:

reload boolean (default: false)

If set to false, then the request will be dispatched only if there is a difference between the new and the current URI.

noHistory boolean (default: false)

If set to false, then replaceState() will be used instead of pushState().

qs Object

Additional query string data. These two lines will do exactly the same:

router.dispatch('/users/123/?search=a');
router.dispatch('/users/123/', { qs: { search: 'a' } });

hash Object

Additional hash data. These two lines will do exactly the same:

router.dispatch('/users/123#!{"search":"a"}');
router.dispatch('/users/123/', { hash: { search: 'a' } });

state Object

State data that will be passed to pushState() function.

getUri()

Returns a current URI relative to basePath.

init(options)

A shorthand for:

router.dispatch(router.getUri(), { noHistory: true });

match(request)

Returns a first route matching the request or null.

watchLinks([pattern])

Watch all links that don't have router-ignore class and match the pattern and perform dispatch() on click. The default pattern matches all internal links.

pattern RegExp (default: new RegExp('^((https?:)?\\/\\/' + location.hostname.replace(/\./g, '\\.') + '.*|((?!\\/\\/)[^:]+))$');)

unwatchLinks()

Stop listening to click events.

watchState()

Perform dispatch() on popstate.

unwatchState()

Stop listening to popstate events.

License

Copyright (c) 2014 - 2017 Martin Kolárik. Released under the MIT license.