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

web-vcore

v0.0.110

Published

Core code shared between my projects, for web-app frontends.

Downloads

198

Readme

web-vcore

Core code shared between my projects, for web-app frontends.

IMPORTANT NOTE: Many of the instructions below are outdated/incomplete, due (partly) to having been written prior to web-vcore being relocated into the debate-map monorepo.

Installation

todo: update these instructions (see source for old, incomplete instructions)

Creating package patches

Regular: patch-package patch MY_PACKAGE With package.json: patch-package patch MY_PACKAGE --exclude 'nothing'

If including package.json, modify the diff file afterward to omit the npm-install-related noise.

For details on how the patch files are parsed, see here: https://github.com/ds300/patch-package/blob/5c2c92bf504885fba4840870a23fc8999c00e572/src/patch/parse.ts

Usage of yalc/zalc with subdeps

todo: ensure these instructions are up-to-date

Steps to newly-link subdep:

  • 1) Run zalc push in subdep's source repo.
  • 2) Run zalc link SUBDEP_NAME in web-vcore repo.
  • 3) Open package.json, and set the version for that subdep (back to) the current version number. (must update this when version changes in subdep's source repo)
  • 4) Run yarn in web-vcore repo.
  • 5) Run zalc push in web-vcore repo.
  • 6) Run yarn in user project.
  • Note: If you need to repair the linkage manually fsr, use a tool like Hard Link Shell Extension to create a Junction from node_modules/X to .yalc/X.

Troubleshooting

  • Note: Because using yalc results in different contents for yarn.lock, developers who are using yalc should refrain from committing changes to that file while yalc is in use (else the "proper" yalc.lock contents that are generated by other devs would keep getting overwritten, causing a back and forth process). To make this more convenient, it's recommended to add the following script to package.json, and run it instead of yarn install: "yalc-i": "yarn install && git checkout HEAD -- yarn.lock"

Documentation

For the most part, web-vcore is meant to be learned/used based on referencing the codebase of existing projects using it (eg. Debate Map). This is because the package is only intended/expected to be used for projects I'm building, so there's not that much benefit to creating full-fledged documentation.

That said, there are some things (eg. particularly complex components) for which documentation is worth creating, both for collaborators on projects I've made, as well as for my own reference in the future.

What is the purpose of web-vcore? And why is web-vcore updated so frequently?

There are two primary functions of the web-vcore package:

  1. Serve as a "container of subdependencies", such that by adding web-vcore to a project, you get a set of subdependencies with it that are known to work well together, with consistent versions that are used across my web projects.
  2. Because my web projects use a lot of custom libraries, and because I frequently make small "micro changes" to those libraries, I've found it helpful to combine web-vcore with use of yalc (or in some cases, a fork of it called zalc). Specifically, I use yalc as a way to have local changes made to custom libraries (ie. subdependencies of web-vcore that I've written myself) propagated up to the higher-level web projects, without needing to constantly be making npm publishes of both the subdependencies and the web-vcore container package; I yalc-push from the subdep into the web-vcore package, then yalc-push from there into the larger web project(s).

Due to local library changes being propagated to my web projects without needing npm-publishes, this of course raises the concern of me neglecting to actually push those changes to a place where other developers of my web projects can access them. The middle-ground I've settled on for now is:

  • Include the .yalc folder of web-vcore in the contents that npm publishes for the web-vcore package. Thus, as long as I remember to do an npm-publish of the web-vcore package each time I make subdependency changes, I don't need to bother about comprehensively tracking down what subdependencies were changed during each web-project commit, in order to make additional library publishes. (I do of course eventually make npm publishes for those subdependencies, but this way I can do so at convenient times and with greater care.)

While this approach is non-standard, and not perfect, it has been very helpful from a practical standpoint, in terms of letting me iterate quickly while still maintaining the separation of logic into lots of small components/libraries.