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

@sme.up/ketchup

v11.0.0-SNAPSHOT-20241220155415

Published

Sme.UP web components library

Downloads

8,371

Readme

Ketchup: super-rich components for web applications

License

About Ketchup

Ketchup is a web components library, built with Ionic’s Stencil, a TypeScript based web component compiler.

Web Components is a suite of different technologies allowing to create reusable custom elements that you can use in your web apps. For more information visit this link: https://developer.mozilla.org/en-US/docs/Web/Web_Components

The primary focus of Ketchup is to provide a suite of powerful and customizable Web Components, whose main objective is abstracting complex and recurrent programming patterns.

Built with

How the repo is organized

Ketchup repository is a monorepo multi-package repository managed with Lerna.

  • packages/ketchup contains the Stencil web components library
  • packages/ketchup_showcase contains the code of the components showcase (a Vue application built using Vue CLI)
  • docs contains documentation(back to top)

Showcase

Go to Ketchup Showcase to see our components live.(back to top)

Getting started

All information for developers is to be found in the Development guide.

How to use Ketchup in your project

  • Add the dependency:
npm install "@sme.up/ketchup" --save
  • Define Ketchup custom elements in your pages:
import { defineCustomElements } from '@sme.up/ketchup/dist/loader';
defineCustomElements(window);
  • Use Ketchup components in your pages. About components and their props and events see Ketchup Showcase. A simple sample for a Ketchup button can be:
<kup-button label="I'm a button" @kup-button-click="myButtonAction" />

Contributing

In order to keep the code under control, if you want to contribute you must have knowledge of the following fundamentals:

  • Git (how branching works, scoped commits and clear pull requests);
  • Deep understanding of TypeScript, Sass and JSX (the core of the library);
  • Basic understanding of Vue2 (this is only for the showcase, yet still important because components must be showcased once created).

If you respect this prerequisites and you wish to contribute to this project, you're welcome to do so. Check out our style guide for more details about our coding practices.

Issues

If you run into an error or an unexpected behavior, or you just want to give us feedback on how to improve, feel free to use the issues page.(back to top)

License

Distributed under the Apache 2.0 License. Click here for more information.(back to top)

Credits

List of open source libraries/resources we used and which we'd like to thank: