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

@focuson-nw/pages

v2.0.37

Published

Used when we want a simple many page application

Downloads

8

Readme

Many applications are not so complex that they need a sophisticated paging system

Here we just have the idea of 'pages' and that there is a single page displayed at once.

Features

  • Pages can have messages on them: from other pages, from actions, or from apis
  • Loading of pages is important
  • Pages might just be 'show this api result' (i.e. 'show customer account details'). Here the state for the page is just from an api
    • This is such a common situation it has 'simpler configuration'
  • Pages can also have 'some of the state from the api, some local'. A good example here is a search page with a search query and the results of the search
  • Pages need to get their data from the backend, and some fetchers are provided that integrate smoothly with the pages

Current Page

We have a component that displays the current selected page. There is always a current selected page (even if it is an 'empty page')

The current page is stored in the state as a

export interface PageSelection<Details> {
  pageName: keyof Details,
  firstTime?: boolean
}

First time is set to true when the page changes, and reset to undefined when the 'processing of the first page' has been completed.

Note the details: that is an object that has keys (page name) and values. It's for page configuration. This interface knows nothing other than the details has legal page names as keys.

In many places we use PageSelection just to avoid threading that Details through the application

export interface HasPageSelection<Details> {
  pageSelection: PageSelection<Details>
}
function pageSelectionlens<S extends HasPageSelection<any>, Details> (): Lens<S, PageSelection<Details>>{}

These are useful when the main state has the page selection as a HasPageSelection

Modal Pages

It is quite common to want 'popup' a modal page over the top of another page. This is very easy to do

Page configuration