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

@mlz/video

v1.2.2

Published

```tsx <Player ref={videoRef} src={videoUrl} onPause={handleVideoonPause} onPlay={handleVideoPlay} poster={videoImgUrl} onTouch={handleVideoTouch} progressStyle={fullscreen ? {} : progressStyle}

Downloads

9

Readme

Player

    <Player
        ref={videoRef}
        src={videoUrl}
        onPause={handleVideoonPause}
        onPlay={handleVideoPlay}
        poster={videoImgUrl}
        onTouch={handleVideoTouch}
        progressStyle={fullscreen ? {} : progressStyle}
        fullscreen={fullscreen}
    />
    // 系统全屏,进入全屏后ui和交互不可控
    // 且退出全屏后,不一定都能监听到退出事件,onSystemFullscreen不一定都护触发
    <Player
        className="back"
        ref={videoRef2}
        src={videoUrl}
        onPause={handleVideoonPause}
        onPlay={handleVideoPlay}
        poster={videoImgUrl}
        onTouch={handleVideoTouch}
        hasSystemFullscreen
        onSystemFullscreen={handleSystemFullscreen}
    />    

npm库模版

使用npm模版来使得开发库更简单,不用自己搭建开发环境的配置库的打包。

特性

  • 零配置, 在npm install之后使用postinstall钩子运行init脚本设置库的名字用于发布和打包
  • 使用rollup来打包为umdcommonjs两种形式
  • 集成jest来做单元测试
  • 使用@mlz/lint来规范代码风格
  • 使用standard-version自动发布生成版本号和生成changelog
  • 配置了github actions来在代码push到master时候自动发布npm包

开发

npm run start: rollup -c rollup.config.js -w & npm run example 使用rollup来打包库的源文件到dist文件夹下,运行npm run example启动一个react项目来调试。

测试

  1. test: jest跑项目中的所有测试文件,并输出测试覆盖率
  2. test:watch: watch模式
  3. test:prod: 推到远程仓库前执行test

打包和输出

npm run build

dist
├── lib //commonjs版本,webpack等打包工具使用
│   └── pkgName.js
├── types //类型定义
│   └── index.d.ts
└── umd //umd版本,可直接使用script标签引入
    └── pkgName.js

注::使用package.json中的files文件来代替.npmignore

发布

  1. 本地运行npm run release更新版本号和自动生成CHANGELOG.md
  2. git push推送代码到master分支。触发npmpublishaction,会自动运行build test:prod然后执行npm publish 所以开发流程应该是在特性分支进行开发,合并到master分支的触发github action进行自动发版。

注意 需要配置自己的仓库的secrets.npm_token.github/workflows/npmpublish.yml中,配置路径为settings中的secrets。