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 🙏

© 2026 – Pkg Stats / Ryan Hefner

khatran-test-event

v0.4.10

Published

Lightweight frontend event logger — POST JSON to baseUrl paths with Bearer auth

Readme

khatran-test-event

Lightweight frontend helper to send analytics-style events as POST JSON to your API, with a shared base URL, bearer token, and default fields.

Install

pnpm add khatran-test-event
# or: npm install khatran-test-event / yarn add khatran-test-event

Requires a global fetch (browser or Node 18+).

Quick start

Call initEvent once when your app boots (for example after reading env), then call logEvent wherever you need to record an event.

import { initEvent, logEvent } from "khatran-test-event";

initEvent({
  token: import.meta.env.VITE_EVENT_TOKEN,
  baseUrl: import.meta.env.VITE_EVENT_BASE_URL,
  defaultParams: { app: "my-app", env: import.meta.env.MODE },
});

logEvent("page_view", { path: "/home" });

That sends:

  • URL: {baseUrl}/page_view (slashes are normalized so you do not get double slashes)
  • Method: POST
  • Headers: Content-Type: application/json, Authorization: Bearer {token}, plus any extra headers from config
  • Body: { ...defaultParams, ...params } (shallow merge; per-call keys override defaults)

API

initEvent(config)

| Field | Required | Description | |-------|----------|-------------| | baseUrl | yes | API base URL; each event path is appended to this | | token | yes | Bearer token for Authorization | | defaultParams | no | Object merged into every request body | | headers | no | Extra headers merged with defaults | | fetchImpl | no | Custom fetch (tests or non-browser environments) | | onError | no | Called when the request fails; if omitted, failures are logged with console.warn |

If logEvent runs before initEvent, the call is ignored and a one-time console.warn is emitted. If fetch is missing, sends are skipped after a warning from initEvent.

logEvent(url, params?)

  • url — Path segment(s) under baseUrl, e.g. "page_view" or "segment/nested".
  • params — Optional object merged into the JSON body on top of defaultParams.

Product events

Product-specific helpers post under a fixed service path. For example, productViewed sends to {baseUrl}/product-service/product-viewed (see the package source for the exact segment and path).

import { productViewed } from "khatran-test-event";

productViewed({
  product_id: "…",
  product_name: "…",
  product_price: 0,
  product_image: "…",
  product_url: "…",
  product_category: "…",
  product_subcategory: "…",
  product_brand: "…",
  product_variant: "…",
});

Types for the payload are exported as ProductViewedParams.

TypeScript

The package ships TypeScript declarations (types in package.json). Use InitEventConfig, EventParams, and ProductViewedParams when you need explicit typing.

Developing this package

Clone the repo, install dependencies, and build:

pnpm install
pnpm run build

Use pnpm run dev for a watch build while you change src/. Before publishing, prepublishOnly runs pnpm run build so dist/ is up to date.

For linking this package into another app locally, see docs/local-development.md in the repository.

CI

Pull requests open a workflow that runs pnpm install and pnpm build. Pushes to main run the same build plus the Changesets GitHub Action to open a Version PR when needed and run pnpm exec changeset publish when a release is ready (the action versions via PRs; it must not run pnpm release, which includes changeset version and can fail when there are no pending changesets).

Add a repository secret NPM_TOKEN: an npm automation token with permission to publish this package.

Versioning

This repo uses Changesets.

  1. After code changes, run pnpm changeset and pick the semver bump plus a short summary (this adds a file under .changeset/).
  2. Merge to main (often via the “Version Packages” PR from CI). When versions are ready, CI publishes with changeset publish ( prepublishOnly runs pnpm run build first).

Locally, pnpm release runs changeset version then changeset publish. To also git push after versioning, use pnpm release:full.

To only bump versions locally without publishing, use pnpm version-packages.

Plain pnpm publish only uploads the current version from package.json; it does not create a new version from changesets.

License

MIT