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

@gooddollar/usedeepmemo

v1.0.0

Published

useMemo hook and memo for components using deep compare

Downloads

9

Readme

TypeScript Boilerplate for 2022

Build and test status

TypeScript project boilerplate with modern tooling, for Node.js programs, libraries and browser modules. Get started quickly and right-footed 🚀

See also the introduction blog post: Starting a TypeScript Project in 2021.

Getting Started

# Clone the repository (you can also click "Use this template")
git clone https://github.com/metachris/typescript-boilerplate.git your_project_name
cd your_project_name

# Edit `package.json` and `tsconfig.json` to your liking
...

# Install dependencies
yarn install

# Now you can run various yarn commands:
yarn cli
yarn lint
yarn test
yarn build-all
yarn ts-node <filename>
yarn esbuild-browser
...
  • Take a look at all the scripts in package.json
  • For publishing to npm, use yarn publish (or npm publish)

esbuild

esbuild is an extremely fast bundler that supports a large part of the TypeScript syntax. This project uses it to bundle for browsers (and Node.js if you want).

# Build for browsers
yarn esbuild-browser:dev
yarn esbuild-browser:watch

# Build the cli for node
yarn esbuild-node:dev
yarn esbuild-node:watch

You can generate a full clean build with yarn build-all (which uses both tsc and esbuild).

  • package.json includes scripts for various esbuild commands: see here
  • esbuild has a --global-name=xyz flag, to store the exports from the entry point in a global variable. See also the esbuild "Global name" docs.
  • Read more about the esbuild setup here.
  • esbuild for the browser uses the IIFE (immediately-invoked function expression) format, which executes the bundled code on load (see also https://github.com/evanw/esbuild/issues/29)

Tests with Jest

You can write Jest tests like this:

import { greet } from './main'

test('the data is peanut butter', () => {
  expect(1).toBe(1)
});

test('greeting', () => {
  expect(greet('Foo')).toBe('Hello Foo')
});

Run the tests with yarn test, no separate compile step is necessary.

Documentation, published with CI

You can auto-generate API documentation from the TypeScript source files using TypeDoc. The generated documentation can be published to GitHub / GitLab pages through the CI.

Generate the documentation, using src/main.ts as entrypoint (configured in package.json):

yarn docs

The resulting HTML is saved in docs/.

You can publish the documentation through CI:

This is the documentation for this boilerplate project: https://metachris.github.io/typescript-boilerplate/

References

Feedback

Reach out with feedback and ideas: