李瑞豪修改

2025-08-30 23:40:19

auto-changelog-plus

中文 | English

从 git 提交历史自动生成 changelog 的命令行工具。

基于 auto-changelog 和 约定式提交 规范。

📦 安装

npm install -g auto-changelog-plus

🚀 用法

在 git 仓库根目录运行 auto-changelog-plus 或者 acp。工具会在后台运行 git log 来解析提交历史。

Usage: auto-changelog-plus [options]

Options:
  -o, --output [file]                 # output file, default: CHANGELOG.md
  -c, --config [file]                 # config file location, default: .auto-changelog
  -t, --template [template]           # specify template to use [compact, keepachangelog, json], default: compact
  -r, --remote [remote]               # specify git remote to use for links, default: origin
  -p, --package                       # use version from package.json as latest release
  -v, --latest-version [version]      # use specified version as latest release
  -u, --unreleased                    # include section for unreleased changes
  -l, --commit-limit [count]          # number of commits to display per release, default: 3
  -b, --backfill-limit [count]        # number of commits to backfill empty releases with, default: 3
      --commit-url [url]              # override url for commits, use {id} for commit id
      --issue-url [url]               # override url for issues, use {id} for issue id
      --merge-url [url]               # override url for merges, use {id} for merge id
      --compare-url [url]             # override url for compares, use {from} and {to} for tags
      --issue-pattern [regex]         # override regex pattern for issues in commit messages
      --breaking-pattern [regex]      # regex pattern for breaking change commits
      --merge-pattern [regex]         # add custom regex pattern for merge commits
      --commit-pattern [regex]        # pattern to include when parsing commits
      --ignore-commit-pattern [regex] # pattern to ignore when parsing commits
      --tag-pattern [regex]           # override regex pattern for version tags
      --tag-prefix [prefix]           # prefix used in version tags, default: v
      --starting-version [tag]        # specify earliest version to include in changelog
      --starting-date [yyyy-mm-dd]    # specify earliest date to include in changelog
      --ending-version [tag]          # specify latest version to include in changelog
      --sort-commits [property]       # sort commits by property [relevance, date, date-desc, subject, subject-desc], default: relevance
      --release-summary               # display tagged commit message body as release summary
      --unreleased-only               # only output unreleased changes
      --hide-empty-releases           # hide empty releases
      --hide-credit                   # hide auto-changelog credit
      --handlebars-setup [file]       # handlebars setup file
      --append-git-log [string]       # string to append to git log command
      --append-git-tag [string]       # string to append to git tag command
      --prepend                       # prepend changelog to output file
      --stdout                        # output changelog to stdout
  -V, --version                       # output the version number
  -h, --help                          # output usage information

以下是一些常见的使用示例：

# 在当前目录写入日志到 CHANGELOG.md
auto-changelog-plus

# 使用 keepachangelog 模板写入日志到 HISTORY.md
auto-changelog-plus --output HISTORY.md --template keepachangelog

# 禁用提交限制，渲染每个发布的所有提交
auto-changelog-plus --commit-limit false

执行 auto-changelog-plus -h 获取帮助或者参考 auto-changelog 文档。

📝 约定式提交

基于 约定式提交 规范，支持以下类型的提交：

• feat: 新功能
• fix: 修复问题
• perf: 性能优化
• refactor: 代码重构
• docs: 文档变更
• test: 测试相关
• style: 代码格式调整
• chore: 构建过程或辅助工具的变动
• build: 构建系统变动
• ci: 持续集成配置变动
• revert: 代码回滚
• 支持 scope：feat(api):, fix(ui): 等
• 支持 emoji：:sparkles: feat:, ✨ feat: 等
• 支持 Breaking Changes：feat!:, feat(scope)!:, BREAKING CHANGE: 等格式
• 自动忽略 WIP 提交：wip:, Wip: 等临时提交不会包含在变更日志中

⚙️ 自动化使用

将 auto-changelog-plus 安装到开发依赖：

npm install auto-changelog-plus --save-dev
# 或
yarn add auto-changelog-plus --dev
# 或
pnpm add -D auto-changelog-plus

在你的 package.json 的 version 脚本中添加 auto-changelog-plus -p && git add CHANGELOG.md：

{
  "devDependencies": {
    "auto-changelog-plus": "*"
  },
  "name": "my-awesome-package",
  "scripts": {
    "version": "auto-changelog-plus -p \u0026\u0026 git add CHANGELOG.md"
  },
  "version": "1.0.0"
}

使用 -p 或 --package 将 package.json 中的 version 用作最新发布，这样以前发布和现在之间的所有提交都成为该发布的一部分。基本上任何通常被解析为 Unreleased 的内容现在都会出现在 package.json 的 version 下。

现在每次运行 npm version 时，changelog 将自动更新并成为版本提交的一部分。

在不是 NPM 包的项目中，可以使用 npx 或 pnpx 来运行 auto-changelog-plus，例如：

npx auto-changelog-plus
# 或
pnpx auto-changelog-plus

在 GitHub Actions 中，你可以使用以下工作流来自动生成发布说明：

name: Release for new tag

on:
  push:
    tags:
      - 'v*.*.*'
  workflow_dispatch:

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v5
        with:
          fetch-depth: 0 # Fetch all history for generating release notes

      - name: Setup Node.js
        uses: actions/setup-node@v5
        with:
          node-version: 'lts/*'

      - name: Generate release notes
        run: |
          npx auto-changelog-plus --starting-version ${{ github.ref_name }}
          sed -i '1,4d' CHANGELOG.md

      - name: GitHub Release
        uses: softprops/action-gh-release@v2
        with:
          draft: true
          body_path: CHANGELOG.md

🔄 和 auto-changelog 的区别

auto-changelog-plus 是 auto-changelog 的上层封装，完全兼容 auto-changelog 的所有用法和配置。

主要改进：

• 优化默认模板：更好地适配 约定式提交 规范
• 调整默认配置：提供更合理的开箱即用体验
• 扩展模板功能：提供额外的模板辅助函数

如果你正在使用 auto-changelog，可以直接替换为 auto-changelog-plus，无需修改任何配置。

📄 许可证

MIT

2025-08-16 12:37:49

Mermaid 是目前最流行的「文本即图表」渲染库，但它对「系统深浅色自动切换」的支持一直暧昧不明。官方 Roadmap 里偶有提及，却始终没有一个简单、稳定、文档化的 API。
不过社区里已有大量站点（mermaid.live、Obsidian、Notion-like 产品等）实现了丝滑的 Light/Dark 自适应。本文把目前能落地的三条路线一次性梳理出来，并给出最小可运行示例，方便你按需取用。

背景：Mermaid 主题机制与痛点

flowchart LR
  A(["Start"])
  A --> B{"Decision"}
  B -->|Yes| C["Option A"]
  B -->|No| D["Option B"]

2025-08-05 11:31:52

江湖传言，西土浏览器界有隐世高人，名曰“原生老祖”。老祖膝下三徒，各执一柄钥匙，开得了黑盒，锁得住乾坤。今日大话，诸位英雄且把耳洞放大，听我一一道来！

第一折・黑盒现世

昔日，React 少侠仗虚拟 DOM 之剑，Vue 剑仙携响应式绫罗，双雄争霸，血溅前端。

忽一日，电闪雷鸣，Chrome 山、Firefox 谷、Safari 崖三地同时金光乍现——一只乌漆嘛黑的小盒破空而出，盒上无门无派，只刻八字：

不拜山头，自成一派。

盒盖一开，三股真气冲天而起，惊得 React 剑锋一抖，Vue 绫罗乱颤。众修士齐呼：

“此乃何物？”

盒中悠悠传出一声：

“Web Components——浏览器亲儿子，江湖诨号：黑盒扫地僧。”

第二折・三把钥匙镇山门

铸兵符・Custom Elements

凡得此符者，可铸自家神兵。

<my-dog food="hotpot" mood="happy"></my-dog>

今日起，标签随你姓，语义随你编，浏览器照单全收，不查户口。

影分身・Shadow DOM

此术一开，样式、DOM、事件皆入黑屋，外头 CSS 千军万马，休想踏进半步。

“兄弟，你的 !important 呢？”
“抱歉，进了影分身，天王老子也得排队。”

袖里乾坤・HTML Templates & Slots

袖中一抖，模板千军万马；插槽轻点，内容各就各位。

无需编译，无需打包，一颗 <template> 漂洋过海，落地即插即用。

这是真正意义上的“一次编写，到处运行”——比 Java 当年喊的口号还真。

第三折・风云再起

黑盒既出，江湖格局瞬变：

• 微前端：Vue2、Vue3、React18、Angular 同屏共舞，互不打脸。
• 设计系统：按钮、输入框、LOGO 化身“原子暗器”，任何门派伸手即取。
• 长尾奇袭：Chrome 插件、VS Code 插件、微信小程序、低代码山寨，皆呼“真香”。
• 长寿秘籍：框架蜜月三年，黑盒随浏览器升级十年，npm 弃坑它不弃。

第四折・范式转移・浏览器登堂入室

当日头西斜，江湖忽然风起。众侠回头一看，浏览器老馆主身披龙袍、脚踏赤霄，一步跨上金銮殿。

旧朝遗诏：从“虚拟机”到“原生执政”

过去二十年，前端史是一部“夺权史”：

• jQuery 夺的是 DOM 的刀；
• Angular 夺的是模块的印；
• React 夺的是渲染的剑；
• Vue 夺的是状态的符。

四把大印加身，浏览器反成“空壳天子”。

而今，老馆主一声令下：“朕即框架，诸卿退班！”

三权分立：新标准下的江湖秩序

Web Components 正是老馆主钦点的 “锦衣卫”。

去框架化的三重暗涌

1. 编译终点迁移

   昨日：Babel/Vite → React/Vue 运行时；

   今日：Babel/Vite → Web Components 原生指令。

   框架退居“DX 大臣”，不再染指最终字节码。

2. 生态颗粒度下沉

   UI 库不再打包成“全家桶”，而是 CDN 单文件组件：

   https://unpkg.com/@ui/button.js

   按需即取，HTTP 缓存即版本管理，npm install 沦为可选项。

3. 生命周期归一

   React 的 useEffect、Vue 的 onMounted、Svelte 的 onMount，

   最终都得翻译成同一套浏览器生命周期：

   connectedCallback、disconnectedCallback、attributeChangedCallback。

   框架语法糖越甜，底层 API 越收敛，直至“糖衣”可有可无。

未来图景：十年后的登基大典

• 2027：浏览器内置 signals 提案落地，状态管理回归原生；
• 2029：CSS @scope + @state 双剑合璧，Shadow DOM 自带响应式；
• 2031：HTTP/4 多路复用 + Import Map 2.0，让“一行 <script type=importmap> 即 CDN 全图”成为标配。

届时，开发者只需写：

<my-app></my-app>
<script type="module" src="app.js"></script>

框架？

“哦，那是旧朝遗老，偶尔进宫讲史罢了。”

老馆主抚须长笑：
“昔日你们借我地基起高楼，今日我把高楼收归国有。

范式逆流，不是革命，是回家。”

尾声・血雨腥风

“老衲不挑框架，不拒工具，但有一语相赠：
十年之后，你迁移的是框架，还是我？”

江湖血雨腥风，黑盒已开。

要么守着旧山门，十年后再为迁移埋单；

要么此刻随扫地僧下山，让代码像 HTML 一样长青。

下回分解：

“5 分钟，一指定乾坤——纯原生撸一只可复用计数器，再扔进 React、Vue、Svelte 乱炖！”

2025-08-04 11:37:24

以下是常见的在线代码演示和开发环境服务，适合不同场景使用：

2025-07-22 11:40:45

<caniuse-embed> Element

A lightweight, customizable web component that embeds caniuse.com browser compatibility data for specific web features. Built with Lit and designed to seamlessly integrate into any web project.

🌟 Live Demo

✨ Features

• 🎯 Easy Integration: Drop-in web component that works with any framework or vanilla HTML
• 🎨 Theme Support: Auto, light, and dark themes that adapt to your design
• 📱 Responsive: Automatically adjusts height based on content
• ⚡ Lightweight: Built with Lit for minimal bundle size
• 🛠️ Customizable: Configure data source, time range, and appearance
• 🔒 Type Safe: Full TypeScript support with comprehensive type definitions

🚀 Quick Start

CDN (Recommended)

Add the script tag to your HTML:

<script src="https://unpkg.com/@cell-x/caniuse-embed-element/dist/caniuse-embed-element.iife.js"></script>

Then use the component:

<caniuse-embed feature="css-grid"></caniuse-embed>

NPM Installation

npm install @cell-x/caniuse-embed-element

import '@cell-x/caniuse-embed-element'

📖 Usage Examples

Basic Usage

<caniuse-embed feature="css-grid"></caniuse-embed>

With Custom Configuration

<caniuse-embed
  feature="flexbox"
  theme="dark"
  past="3"
  future="2"
  origin="https://caniuse.lruihao.cn"
></caniuse-embed>

Framework Integration

Here’s an example using Vue.js. For more framework integration examples, see FRAMEWORK_INTEGRATION.md.

<script setup>
import '@cell-x/caniuse-embed-element'
</script>

<template>
  <div>
    <caniuse-embed
      feature="css-grid"
      theme="dark"
      :past="3"
      :future="2"
    />
  </div>
</template>

⚙️ API Reference

Attributes/Properties

Finding Feature Names

Feature names correspond to the identifiers used on caniuse.com. You can find them in:

• The URL path: https://caniuse.com/css-grid → feature name is css-grid
• The search results on caniuse.lruihao.cn
• The caniuse-db repository

Common Feature Examples

• css-grid - CSS Grid Layout
• flexbox - Flexible Box Layout
• arrow-functions - Arrow Functions
• webp - WebP Image Format
• css-variables - CSS Custom Properties
• async-functions - Async/Await Functions
• …

CSS Classes

• .ciu-embed-iframe - The embedded iframe element
• .ciu-embed-empty - Empty state when no feature is specified

🌐 Browser Support

This web component works in all modern browsers that support:

• Custom Elements v1
• Shadow DOM v1
• ES2015+ features

🔧 Development

Prerequisites

• Node.js 20+
• pnpm 10+

Setup

# Clone the repository
git clone https://github.com/Lruihao/caniuse-embed-element.git
cd caniuse-embed-element

# Install dependencies
pnpm install

# Start development server
pnpm dev

Build

# Build all formats
pnpm build:all

# Build specific formats
pnpm build:lib    # ES modules and types
pnpm build:iife   # IIFE for CDN usage
pnpm build        # Demo build

Scripts

• pnpm dev - Start development server
• pnpm build - Build demo
• pnpm build:lib - Build library (ES modules + types)
• pnpm build:iife - Build IIFE bundle for CDN
• pnpm build:all - Build all formats
• pnpm lint - Run ESLint
• pnpm preview - Preview built demo

📦 Distribution

The package provides multiple build formats:

• ES Modules (dist/) - For modern bundlers
• IIFE Bundle (dist/caniuse-embed-element.iife.js) - For CDN usage
• TypeScript Definitions (dist/types/) - For TypeScript projects

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

🙏 Acknowledgements

• pengzhanbo/caniuse-embed
• mdn-browser-compat-data - Comprehensive browser compatibility data from MDN
• Fyrd/caniuse - The raw browser support data

Made with ❤️ by Lruihao

2025-07-19 15:05:07

<json-viewer> Element

🌈 一个轻量、现代的 JSON 可视化与交互 Web 组件

功能特性

• 🌟 Web 组件：原生，无框架依赖
• 🎨 主题：支持明暗模式
• 📦 盒装：可选边框与内边距
• 📋 可复制：一键复制 JSON
• 🔑 排序：支持键排序
• 🔍 展开深度：可控初始展开层级
• 🧩 自定义复制按钮：slot 插槽支持
• 🧬 类型高亮：丰富多彩的类型高亮
• 🛠️ 自定义事件：支持 copy/toggle 事件监听

使用方法

安装

npm install json-viewer-element

引入

作为模块

import 'json-viewer-element'

UMD (CDN)

<script src="https://unpkg.com/json-viewer-element/dist/json-viewer-element.umd.js"></script>

基本用法

手动绑定 value：

<json-viewer id="viewer" boxed copyable sort expand-depth="2" theme="dark"></json-viewer>
<script>
  document.getElementById('viewer').value = { hello: "world", arr: [1,2,3] };
</script>

直接在标签上绑定 value：

<json-viewer value='{"hello":"world","arr":[1,2,3]}' boxed copyable sort expand-depth="2" theme="dark"></json-viewer>

在 Vue 框架中使用：

<template>
  <json-viewer :value="JSON.stringify(json)" boxed copyable sort expand-depth="2" theme="dark"></json-viewer>
</template>

<script>
export default {
  data() {
    return {
      json: { hello: "world", arr: [1,2,3] },
    }
  },
}
</script>

属性

CopyableOptions

事件

插槽

自定义复制按钮：

<json-viewer copyable>
  <button slot="copy-button">复制 JSON</button>
</json-viewer>

License

MIT

Copyright (c) 2025-present Lruihao