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

hut

v0.1.1

Published

A minimal framework for isomorphic apps with react and redux

Downloads

5

Readme

hut

Build Status

A minimal framework for isomorphic apps with react and redux.

Usage

This package contains both server and client code. Both sides expose a simple object-oriented interface.

import HutServer from 'hut/lib/server'

// Create the app.
const opts = {}
const app = new HutServer(opts)
// Start serving requests asynchronously.
app.run(() => console.log('running'))

// You can also stop the server asynchronously.
app.stop(() => console.log('stopped'))
import HutClient from 'hut/lib/client'

// Create the app.
const opts = {}
const app = new HutClient(opts)
// Start rendering components synchronously.
app.run()

Options

Some options are shared between both sides, while others are specific to each environment. For shared options, it is recommended to use a single definition and use Object.assign to derive server and client options.

const commonOpts = {foo: 'x'}
const serverOpts = Object.assign({}, commonOpts, {bar: 'y'})
const clientOpts = Object.assign({}, commonOpts, {baz: 'z'})

Common

mountPoint: string

default: 'app'

The id of the HTML element where the application will be rendered and mounted.

stateVariable: string

default: 'initialState'

The name of the global variable where the redux store state will be serialized. The state that is used to render the page on the server is serialized and sent to the client. The client uses this initial state to seed the store in the browser.

routes: react-router Routes

default: []

This route or array of routes is passed directly to the react-router library as-is. The default value is not very useful as it will not match any paths.

See react-router documentation for more details about configuring routes.

reducer: redux reducer function

default: state => return state || {}

This reducer is passed directly to the redux library as-is. The default value is not very useful as it ignores every action, creating a stateless app.

See redux documentation for more details about reducers.

Server

port: integer

default: process.env.PORT || 3000

The port to listen on.

middleware: array of koa middleware

default: []

An array of middleware that is applied directly to the koa server as-is, and in the specified order.

See koa documentation for more details about middleware.

getTitle: function

default: () => ''

A function that is called to generate the page title during rendering. The default value is not very useful as it creates an empty title.

scripts: array of strings

default: []

An array of URLs that are inserted as script tags into the page header. The scripts are inserted with a defer tag so they will not block rendering.

If the script is a relative URL, you must also register middleware to actually serve it.

styles: array of strings

default: []

An array of URLs that are inserted as link tags into the page header.

If the style is a relative URL, you must also register middleware to actually serve it.

Client

createHistory: function

default: history.createBrowserHistory

A function that is called to control navigation and save history for the app. The return value is passed directly to react-router as-is. The default value creates a history that uses the HTML5 history API.

See history documentation for more details about histories.