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

w7

v0.0.5

Published

serves the pure htmls, Updates the browser on changes.

Downloads

29

Readme

Features

  • Pure HTML without any built process.
  • Hot code reloading.
  • Automatically transforms JS files using Babel (Vue & React).
  • Built-in boilerplates.

Install

npm i w7 -g

Usage

  w7                                     # Default entry: './index.html'   
  w7 --entry app.html                    # Custom entry (alias: -c)
  w7 app.html                            # Shortcut
  w7 --entry ./app.html --port 1994      # Custom port (alias: -p)
  w7 app.html --cwd src                  # Custom cwd (alias: -c)
  w7 src/app.html --cwd src              # Ditto 
  w7 app.html --open-in-browser          # Open browser when server started (alias: -o)
  w7 dist                                # If giving a directory, will serve for 'dist/index.html'

All options:

  COMMAND OPTIONS

    -c, --cwd            Current working directory.
    -e, --entry          Entry html file.
    -p, --port           Dev server's port [Default: 4000]
    -o, --openInBrowser  Whether to open browser when server started.

  GLOBAL OPTIONS

    -v, --version  Display version
    -h, --help     Display help

Q & A

  • Is this project not the opposite of front-end engineering?

    Of course not, on the contrary, I am an fanatic front-end engineering supporter, the reason for the birth of this project is not to resist front-end engineering. It is only for the excessive development of front-end engineering, we often need a lot of construction processes to test a very simple function:

    If you just want to test a Counter with vue, why spend so much time on starting a project with vue-cli?

    With this project, it will be very simple to test some simple prototype features. In other words, it is more like an offline version of codepan.

Boilerplate

From [email protected], some preset boilerplates for you to kick off your project quickly.

  w7 init              # Generate a simple html file with random filename (includes git user name.)
  w7 init --lib vue    # Generate a Counter boilerplate with vue.
  w7 init --lib react  # Generate a Counter boilerplate with React+JSX.

Built-in boilerplates for now:

  • vue
  • react
  • rxjs

Unbuilt libraries will be injected from unpkg directly:

  w7 init -lib jquery   # <script src="http://unpkg.com/jquery"></script> will be injected.

Free free to tell me what your want to be built in. :)

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

w7 © ulivz, Released under the MIT License. Authored and maintained by ulivz with help from contributors (list).

github.com/ulivz · GitHub @ulivz