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

@artalk/plugin-kit

v1.0.7

Published

The plugin kit for Artalk

Downloads

134

Readme

Artalk Plugin Kit

Artalk Plugin Kit 是 Artalk 的插件开发工具包,提供了一系列的工具函数和组件,帮助开发者更方便的开发插件。

安装

pnpm add artalk
pnpm add @artalk/plugin-kit -D

工具包中提供了 Vite 的集成插件,使用 Vite 开发能够开箱即用地构建 Artalk 插件,简化 Vite 的配置。

// vite.config.js
import { ViteArtalkPluginKit } from '@artalk/plugin-kit'

export default {
  plugins: [ViteArtalkPluginKit()],
}

开发

在开发插件前,你需要在 package.json 设置插件名字,修改 name 字段,以 artalk-plugin- 开头。

插件入口文件默认为 src/main.ts,你需要在入口文件导出名为 ArtalkDemoPluginArtalkPlugin 类型的对象。

// src/main.ts
import type { ArtalkPlugin } from 'artalk'

export const ArtalkDemoPlugin: ArtalkPlugin = (ctx) => {
  ctx.on('mounted', () => {
    // Your plugin code here
  })
}

执行 pnpm dev 开发插件,Vite 将会启动开发服务器。浏览器访问 ViteArtalkPluginKit 插件提供的内置 Artalk 调试页面,该页面已自动注入并启用了你当前正在开发的插件。

构建

执行 pnpm build 构建插件,构建产物为 dist/artalk-plugin-demo.js,以及 .mjs.cjs.d.ts 等文件。

ViteArtalkPluginKit 将帮助你自动生成合并的 .d.ts 文件,并自动在 package.json 中填充 exportstypes 等字段。

ViteArtalkPluginKit 会进行一系列代码检查,以确保 Artalk 的插件符合开发规范。

发布

执行 pnpm publish 发布插件,你可以在 package.json 中配置 "files": ["dist"] 只推送需要发布的构建产物。

配置

可以通过配置 artalkInitOptions 控制 Artalk 的初始化参数。

// vite.config.js
import { ViteArtalkPluginKit } from '@artalk/plugin-kit'

export default {
  plugins: [
    ViteArtalkPluginKit({
      artalkInitOptions: {
        // Your Artalk init options here
      },
    }),
  ],
}