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

@sifrr/route

v0.0.9

Published

History API based Routing library for sifrr in browser.

Downloads

9

Readme

sifrr-route · npm version Doscify

History API based Routing library for building One Page Applications with sifrr.

Browser API support needed for

| APIs | caniuse | polyfills | | :---------- | :---------------------------------- | :------------------------------------------- | | History API | https://caniuse.com/#feat=history | https://github.com/browserstate/history.js |

How to use

Note sifrr-route only works inside another wrapper sifrr element, since it uses prop path

  1. Copy contents of dist/sifrr.route.js to elements/sifrr/route.js folder in your sifrr app. And use Sifrr.Dom.load('sifrr-route') to load sifrr-route.
  2. Or you can directly import in html:
<!-- Using ES6 modules and NPM -->
import '@sifrr/route';
<!-- OR ES6 modules and using CDN -->
<script
  src="https://unpkg.com/@sifrr/route@{version}/dist/sifrr.route.min.js"
  charset="utf-8"
  type="module"
></script>
<!-- OR without module -->
<script
  src="https://unpkg.com/@sifrr/route@{version}/dist/sifrr.route.min.js"
  charset="utf-8"
></script>
  • You also need to take care in your server configuration that correct html file is served for all sifrr-routes.

Good way can be to serve index.html to all routes and define all routes in this file.

Routing

Add sifrr-route tag in your html, this will only be shown when window.location.pathname is same as path prop unless it has target attribute and it is not equal to _self or link is of some other domain.

<sifrr-route :path="/some-path">
  <!-- Contents -->
</sifrr-route>

Note that when sifrr-route is loaded, clicking on a link a won't reload the page, but only show sifrr-routes with matching pathname. If you want the page to reload add target='_top' to a tag.

  • You can use sifrr-route inside another sifrr-route.

  • path prop can be a sifrr-dom binding as well, and it should work without any problems

  • you can also use regex in path but it will be shown only if it is exact match of pathname, eg: /(.*)/abcd will match /qwert/abcd but not /qwert/abcd/efgh

  • URL Query string is not matched

  • You can also you special syntax if you want to parse pathname and use it:

    • :alphanumeric matches anything without / as alphanumeric variable.

    • * matches anything without / as star variable.

    • ** matches everything eg. /:x/*/**/mnop/*/:k will match /new/def/ghi/klm/mnop/sdf/klm and parse it as

      {
        '*': [ "def", "sdf" ],
        '**': [ "ghi/klm" ],
        x: "new",
        k: "klm"
      }

    and make sifrr-route tag with :path="/:x/*/**/mnop/*/:k"'s state equal to this parsed data

Class

  • Sifrr-routes matching window.location.pathname will have active class
  • Sifrr-routes not matching window.location.pathname will not have active class. You can add animations etc, based on this.

State of element

Is equal to data parsed using special syntax as mentioned above

Changing title

Clicking on

<a href="/" title="Home">HOME</a>

Will change document's title to Home (title attribute) and shows sifrr-routes which are active. If you want to do any complex operation, you can either add a onStateChange() method on sifrr-route or use a click event listener on links.

Passing state

Any child elements with [data-sifrr-route-state="true"] will get passed state from parent sifrr-route. eg.

<sifrr-route id="complex" path="/test/:id" data-sifrr-elements="sifrr-test">
  Route state check
  <sifrr-test data-sifrr-route-state="true"></sifrr-test>
</sifrr-route>

When window location path is /test/1, sifrr-route's state will be { id: 1 } and sifrr-test's state will be { route: { id: 1 } }

Animating

CSS

sifrr-route {
}
sifrr-route.active {
  opacity: 0;
  animation: anim 0.3s ease forwards;
}
@keyframes anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

JS

using sifrr-animate

// all sifrr-routes
Sifrr.Dom.Event.addListener('activate', 'sifrr-route', (e, t) => {
  Sifrr.animate({
    target: t,
    to: {
      style: {
        opacity: ['0', '1'],
        transform: ['scale3d(0.5,0.5,0.5)', 'scale3d(1,1,1)']
      }
    }
  });
});
// particular sifrr-route
Sifrr.Dom.Event.addListener('activate', document.$('sifrr-route#animated'), (e, t) => {
  Sifrr.animate({
    target: t,
    to: {
      style: {
        opacity: ['0', '1'],
        transform: ['scale3d(0.5,0.5,0.5)', 'scale3d(1,1,1)']
      }
    }
  });
});