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

@open-wc/create

v0.38.151

Published

Easily setup all the tools of Open Web Components.

Downloads

1,723

Readme


permalink: 'init/index.html' title: Create Open Web Components section: guides tags:

  • guides

Create Open Web Components

Web component project scaffolding.

Usage

npm init @open-wc

This will kickstart a menu guiding you through all available actions.

$ npm init @open-wc
npx: installed 14 in 4.074s
        _.,,,,,,,,,._
     .d''           ``b.       Open Web Components Recommendations
   .p'      Open       `q.
 .d'    Web Components  `b.    Start or upgrade your web component project with
 .d'                     `b.   ease. All our recommendations at your fingertips.
 ::   .................   ::
 `p.                     .q'   See more details at https://open-wc.org/docs/development/generator/
  `p.    open-wc.org    .q'
   `b.     @openWc     .d'
     `q..            ..,'      Note: you can exit any time with Ctrl+C or Esc
        '',,,,,,,,,,''


? What would you like to do today? › - Use arrow-keys. Return to submit.
❯  Scaffold a new project
   Upgrade an existing project

Our generators are very modular you can pick and choose as you see fit.

Options

You may pass options to skip the CLI wizard in part or in whole.

| Option | Type | Description | | | ----------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --- | | --destinationPath | path | The path the generator will write files to | | | --type | scaffold|upgrade | Choose scaffold to create a new project or upgrade to add features to an existing project | | | --scaffoldType | wc|app | The type of project to scaffold. wc for a single published component, app for an application | | | --features | linting|testing|demoing|building | Which features to include. linting, testing, demoing, or building | | | --typescript | true|false | Whether to use TypeScript in your project | | | --tagName | string | The tag name for the web component or app shell element | | | --installDependencies | yarn|npm|false | Whether to install dependencies. Choose npm or yarn to install with those package managers, or false to skip installation | | | --writeToDisk | true|false | Whether or not to actually write the files to disk | | | --help | | This help message | |

Scaffold generators

These generators help you kickstart a new app or web component. They will create a new folder and set up everything you need to get started immediately.

Example usage:

npm init @open-wc
# Select "Scaffold a new project"

Available scaffold generators:

  • Web Component This generator scaffolds a starting point for a web component. We recommend using this generator when you want to develop and publish a single web component.

  • Application This generator scaffolds a new starter application. We recommend using this generator at the start of your web component project.

Features

The above generators are the perfect playgrounds to prototype. Add linting, testing, demoing and building whenever the need arises.

Example usage:

cd existing-web-component
npm init @open-wc
# select "Upgrade an existing project" or add features while scaffolding

Available Upgrade features

  • Linting This generator adds a complete linting setup with ESLint, Prettier, Husky and commitlint.

  • Testing This generator adds a complete testing setup with Web Test Runner.

  • Demoing This generator adds a complete demoing setup with Storybook.

  • Building This generator adds a complete building setup with Rollup.

For information on how to extend and customize the generator, see the docs page

Commands