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

@selenite/commons

v0.30.8

Published

This typescript package provides a set of frequently used utilities, types and svelte actions for building projects with Typescript and Svelte.

Downloads

6,580

Readme

Selenite Commons

This typescript package provides a set of frequently used utilities, types and svelte actions for building projects with Typescript and Svelte.

It is part of the Selenite initiative.

Documentation

Usage

This package can be installed in your project with any package manager :

npm i @selenite/commons
yarn add @selenite/commons
pnpm i @selenite/commons
bun i @selenite/commons

Be careful that some of the functions use WASM code from an associated package : selenite-commons-rs. Therefore, if you use tools like Vite or Rollup, you need to add a plugin to the configuration.

An example of such a plugin is : https://github.com/nshen/vite-plugin-wasm-pack. It is used like this :

// vite.config.ts
import wasmPack from 'vite-plugin-wasm-pack'
export default defineConfig({
	plugins: [
		wasmPack([], ['@selenite/commons-rs']),
...

Development

The project is developed with Typescript and uses vitest for testing. It uses Bun as a package manager and builder. Be aware that at the time of writing, Bun is still unstable on Windows.

If you need to works on Windows and encounter issues, don't hesitate to edit the project to use another package manager like pnpm. Do note that you will need to update the github action to reflect that change so that lockfiles match between dev and build.

You can start the dev server with :

bun dev

Documentation

The documentation is generated with TypeDoc and can be built with the following command :

bun docgen

It will then be accessible in the docs folder.

Publishing

The package will automatically be built and published (if there's a version change) when pushed to the main branch.

You can manually publish it on npm with the following command :

npm publish --access public
# rust code (selenite-commons-rs)
bun wasm-pack publish --access public

TODO

  • Document everything
  • Create action to use text content as title | and which adds truncate by default (with css)
  • Try removing newline at end of xml format
  • Add Portal Component
  • Make custom tailwind plugin regrouping all the tailwind plugins used and the configuration