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

@kjetil-hoel/design-system-svelte

v0.0.121

Published

WIP Component library for Statsforvalternes Fellesorganisasjon

Downloads

28

Readme

WIP Component library for Statsforvalternes Fellesorganisasjon

Adding or updating dependencies

  1. In the terminal, navigate to the /packages/svelte folder
  2. Run yarn install

Creating new component

  1. Examine the React code of the equivalent React component 0a. If there is no React code, use your own intuition on how to implement the component and skip to step 4.
  2. You will have to understand the React implementation in order to create an equivalent implementation in Svelte. You might not be able to use the exact same markup or Javascript logic.
  3. In the conversion process, ensure to allow for the same props except those props which are React-specific or otherwise not possible/sensible to implement in a Svelte component
  4. The ComponentName.module.css from the React-equivalent can be directly copy-pasted into the Svelte component's style block
  5. Add your component's information in the package.json file in the /packages/svelte folder, under the "exports" key. Looking at existing exported components should be enough to understand the pattern to follow.
  6. Ensure your component is exported from the index.js inside /lib/components

Testing your component

  1. Add your component to the homepage or a route of your choosing
  2. Navigate to the /packages/svelte folder
  3. Run npm run dev
  4. In your browser, navigate to the route you placed the component
  5. You should now be able to iterate over and test your component as you would in a regular Svelte application

Publishing to NPM

  1. Navigate to the /packages/svelte folder.
  2. Bump the version number of the package in package.json: 0.0.x + 1.
  3. Commit and push your changes.
  4. Use this terminal command to publish: npm publish --access public. (This step requires you to be logged in with NPM credentials if you haven't already done so)

Build & Publish Design Tokens

  1. Navigate to the root folder
  2. Run yarn build 1a. You may get errors related to yarn.lock file. You can try to remove the yarn.lock file, and/or run yarn install
  3. In the /packages/tokens folder, bump the version number of the package in package.json: 0.0.x + 1.
  4. Navigate to the /packages/tokens folder
  5. Use this terminal command to publish: npm publish --access public. (This step requires you to be logged in with NPM credentials if you haven't already done so)