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

riouter

v2.0.0

Published

Riot.js router.

Downloads

9

Readme

GitHub Repository License agreement Open issues on GitHub npm @latest version

Riouter

Riot.js router.

Differences with @riot/route

  • Riouter can have multiple router instances on a single page. Even a router within a route is possible.
  • Riouter can control whether the browsers session history is changed by the router.
  • Riouter does not have a initDomListeners method. (It is trivial to write a solution yourself, see the usage example below or the example/src/app.html's onRouterStart function.)

Install

npm install riouter

OR

yarn add riouter

Usage

<app>
  <router base="{ window.location.href }" onStarted="{ onRouterStarted }">
    <nav>
      <button route="home">
        Home
      </button>

      <button route="about">
        About
      </button>
    </nav>

    <route path="home">
      Home page
    </route>

    <route path="about">
      About page
    </route>
  </router>

  <script>
    // Import router components.
    import { router, route } from 'riouter'

    export default {
      components: {
        // Router.
        route: route,
        router: router,
      },
      onRouterStarted(routerComponent, router) {
        this.$('router')
          .addEventListener('click', (event) => {
            // Check if click is relevant.
            const target = event.target.closest('button[route]')
            if (!target) {
              return
            }
            event.preventDefault()

            // Check if route is not already active.
            const targetRoute = target.getAttribute('route')
            if (targetRoute === this.state.activeRoute) {
              return
            }

            // Invoke route change.
            this.state.activeRoute = targetRoute
            router.push(this.state.activeRoute)
          })

        // Set initial router path to 'home'.
        this.state.activeRoute = 'home'
        router.push(this.state.activeRoute)
      },
    }
  </script>
</app>

API

router (component)

The router component wraps the <route>s and will manage whether they are active or not based on the state of the router. The component has the following attributes:

  • base: Base path of the application.
    • Default: ''
    • Type: String
  • updateHistory: Whether to update the History API.
    • Default: false
    • Type: Boolean
  • onBeforeStart: Called after the router is set up, but before the slot is mounted.
    • Default: null
    • Type: Function
    • Parameters:
      • Router component.
      • Router instance used by router.
  • onStarted: Called after the slot has been mouted.
    • Default: null
    • Type: Function
    • Parameters:
      • Router component.
      • Router instance used by router.

route (component)

The route component wraps the content that should be visible when the acompyoning route is active. The component has the following attributes:

  • path: The path to which the URL should match for this route to become active.
    • Required: true
    • Type: String
  • onBeforeMount: Lifecycle function called before the rout is mounted.
    • Default: null
    • Type: Function
    • Parameters:
      • Route component.
      • Router instance used by router.
      • Route's path.
  • onMounted: Lifecycle function called after the rout is mounted.
    • Default: null
    • Type: Function
    • Parameters:
      • Route component.
      • Router instance used by router.
      • Route's path.
  • onBeforeUnmount: Lifecycle function called before the rout is unmounted.
    • Default: null
    • Type: Function
    • Parameters:
      • Route component.
      • Router instance used by router.
      • Route's path.
  • onUnmounted: Lifecycle function called after the rout is unmounted.
    • Default: null
    • Type: Function
    • Parameters:
      • Route component.
      • Router instance used by router.
      • Route's path.

Router

Underneath the router and route components use a router to manage its state. The instance used can be interacted with by listening to the events of the components. The router extends the Dispatcher and has the following functions:

  • constructor: Creates a router instance.
    • Parameters
      • options: Options for the router.
        • Default: null
        • Type: Object
        • Properties:
          • basePath: Base path of the application.
            • Default: ''
            • Type: String
          • updateHistory: Whether to update the History API.
            • Default: false
            • Type: Boolean
          • pathToRegexp: Options for path-to-regexp.
            • Default: {}
            • Type: Object
  • destroy: Destory instance.
  • getPath: Get the current path.
    • Returns: The current path.
      • Type: String
  • getRoute: Get the current route.
    • Returns: The current route.
      • Type: String
  • addRoute: Add route to router.
    • Parameters
      • path: Route's path.
        • Required: true
        • Type: String
      • options: Options for path-to-regexp.
        • Default: {}
        • Type: Object
  • removeRoute: Remove route from router.
    • Parameters
      • path: Route's path.
        • Required: true
        • Type: String
  • getRoutes: Get all routes part of the router.
    • Returns: Array of strings, all paths of routes in router.
  • push: Push path to router, potentially changing active router.
    • Parameters
      • path: Path to push.
        • Required: true
        • Type: String
    • Returns: Boolean, whether a matching route was found.

The router dispatches the following events:

  • added: Dispatched when a new route has been added to the router using addRoute.
    • Data:
      • route: The path of the added route.
        • Type: String
      • router: The router instance to which the route has been added.
        • Type: Router
  • pushed: Dispatched when a new path has been pushed to the router using push.
    • Data:
      • path: The path which has been pushed.
        • Type: String
      • router: The router instance to which the path has been pushed.
        • Type: Router
      • route: The route matching the path.
        • Type: String

The router can be used seperatly from the components by importing the Router.js file in the root of the project: import Router from 'riouter/Router.js'.

Dispatcher

The Dispatcher class is extended by the Router class and deals with handling and dispatching events. It has the following functions:

  • constructor: Creates a dispatcher instance.
  • destroy: Destory instance.
  • addListener: Start listening to the named event.
    • Parameters
      • name: Event name.
        • Required: true
        • Type: String
      • callback: Callback function.
        • Required: true
        • Type: Function
  • removeListener: Stop listening to the named event.
    • Parameters
      • name: Event name.
        • Required: true
        • Type: String
      • callback: Callback function.
        • Required: true
        • Type: Function
  • removeAllListeners: Remove all listeners listening to the dispatcher or just the named events.
    • Parameters
      • name: Event name.
        • Default: null
        • Type: String
  • dispatch: Invokes the callback functions matching the event name.
    • Parameters
      • name: Event name.
        • Required: true
        • Type: String
      • ...data: Data for callback.
        • Required: false
        • Type: Any

Lazy loading with @riotjs/lazy

The router also supports lazy loading. Simply use @riotjs/lazy as you would otherwise. The components will be lazily loaded once the route they are part of becomes active.

<app>
  <router base="{ window.location.href }" onStarted="{ onRouterStarted }">
    <nav>
      <button route="home">
        Home
      </button>

      <button route="about">
        About
      </button>
    </nav>

    <route path="home">
      <home />
    </route>

    <route path="about">
      <about />
    </route>
  </router>

  <script>
    // Import riot lazy.
    import lazy from '@riotjs/lazy'

    // Import router components.
    import { router, route } from 'riouter'

    export default {
      components: {
        // Router.
        route: route,
        router: router,
        // Pages.
        home: lazy(() => import('./home.riot')),
        about: lazy(() => import('./about.riot')),
      },
      onRouterStarted(routerComponent, router) {
        // Listen to clicks and update router. See example above.
      }
    }
  </script>
</app>