webc.com 0.1.22 → 0.1.24

package/README.md

@@ -12,7 +12,65 @@
 
 点击组件右上角的『在线调试』可以调试无打包的组件。
 
-如基于 vite 构建器打包项目，
+## 使用
+
+### 1. CDN 直接引用 (无需打包)
+
+对于无需打包、直接在浏览器中引用的使用场景，你可以通过 CDN 直接引用 JS 与 CSS 文件。
+
+以 `Scroll` 组件（虚拟滚动条）为例：
+
+#### 使用 jsdelivr:
+
+```html
+<link href="//cdn.jsdelivr.net/npm/webc.site@0.1.23/Scroll.css" rel="stylesheet" />
+<script type="module">
+  import "//cdn.jsdelivr.net/npm/webc.site@0.1.23/Scroll.js";
+</script>
+```
+
+#### 使用 淘宝镜像 npmmirror（对中国大陆线路友好）:
+
+```html
+<link href="//registry.npmmirror.com/webc.site/0.1.23/files/Scroll.css" rel="stylesheet" />
+<script type="module">
+  import "//registry.npmmirror.com/webc.site/0.1.23/files/Scroll.js";
+</script>
+```
+
+---
+
+### 2. 按需添加至本地项目 (用于构建打包)
+
+项目支持类似于 [shadcn](https://ui.shadcn.com) 的按需添加组件机制。如果你使用构建工具，可在你的项目中直接运行以下命令将组件下载并添加至本地：
+
+```bash
+bunx webc.add <组件名>
+```
+
+例如添加 `Scroll` 组件（虚拟滚动条）：
+
+```bash
+bunx webc.add Scroll
+```
+
+**命令行实现机制：**
+
+- 运行该命令时，它会向 npm 注册表查询并解析 `webc.com` 对应的包源。
+- 自动下载包源文件并提取对应的组件源码，将其按需编译并输出到本地项目中对应的 `lib/组件名` 目录下，且会把组件相关的 Stylus 自动编译成 CSS 放入公共样式中。
+
+---
+
+### 3. 配合 `vite-plugin-svg-var` 优化 SVG 资源
+
+为了优化打包体积并大幅减少网络请求，建议在 Vite 构建器中配合使用 [vite-plugin-svg-var](https://www.npmjs.com/package/vite-plugin-svg-var) 插件。
+
+#### 插件的用途与核心特性：
+
+- **智能去重**：自动对 `public/svg` 下的所有 SVG 内容进行 MD5 哈希计算。即使不同路径或文件名对应同一个 SVG 内容，也只会在 CSS 中生成单一变量，所有引用都将映射到该变量，避免冗余打包。
+- **UTF-8 安全编码**：将 SVG 直接转换为更轻量、体积更小的 UTF-8 编码 `data:image/svg+xml` URL 写入 CSS 变量，比传统的 Base64 编码方式体积更小、压缩率更高。
+- **自动注入与替换**：在构建或运行开发服务器时，它会自动在项目入口 JS（如匹配 `/page/entry/**/*.js`）中注入虚拟的 CSS 变量样式，并将 CSS/Stylus/Svelte 中原本引用的 `url("/svg/xxx.svg")` 自动替换为 CSS 变量形式（如 `var(--xxxSvg)`）。这意味着所有 SVG 将被直接内联合并在 CSS 中，页面加载时无需发起任何多余的 SVG 图片 HTTP 请求。
+- **开发阶段热更新 (HMR)**：自动监听 `public/svg` 文件夹，当新增、删除或修改 SVG 文件时，插件会自动重新扫描并生成 CSS 变量，且触发模块热重载，方便高效调试。
 
 ## 初衷
 

package/index.js

@@ -1,4 +1 @@
-export default [
-  "Wait",
-  "Scroll"
-];
+export default ["Wait","Scroll"];

package/package.json

@@ -1 +1 @@
-{"name":"webc.com","version":"0.1.22","description":"","keywords":[],"homepage":"https://webc-zh.github.io","license":"MulanPSL-2.0","author":"i18n.site@gmail.com","repository":{"type":"git","url":"git+https://github.com/webc-zh/webc-zh.github.io.git"},"bin":{"webc-i":"./cli.js"},"files":["./*"],"type":"module","exports":{"./*":"./*"},"scripts":{},"dependencies":{"@3-/read":"^0.1.4","stylus":"^0.64.0","tar":"^7.5.15","yargs":"^18.0.0"},"devDependencies":{}}
+{"name":"webc.com","version":"0.1.24","description":"","keywords":[],"homepage":"https://webc-zh.github.io","license":"MulanPSL-2.0","author":"i18n.site@gmail.com","repository":{"type":"git","url":"git+https://github.com/webc-zh/webc-zh.github.io.git"},"bin":{"webc-i":"./cli.js"},"files":["./*"],"type":"module","exports":{"./*":"./*"},"scripts":{},"dependencies":{"@3-/read":"^0.1.4","ansis":"^4.3.0","stylus":"^0.64.0","tar":"^7.5.15","yargs":"^18.0.0"},"devDependencies":{}}

package/styl/reset.styl

@@ -0,0 +1,273 @@
+/*
+Please read: https://github.com/unocss/unocss/blob/main/packages-presets/reset/tailwind-compat.md
+*/
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
+*/
+*, ::before, ::after
+  border-color var(--un-default-border-color, #e5e7eb) /* 2 */
+  border-style solid /* 2 */
+  border-width 0 /* 2 */
+  box-sizing border-box /* 1 */
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS.
+*/
+html, :host
+  font-family ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' /* 4 */
+  font-feature-settings normal /* 5 */
+  font-variation-settings normal /* 6 */
+  line-height 1.5 /* 1 */
+  tab-size 4 /* 3 */
+  -moz-tab-size 4 /* 3 */
+  -webkit-tap-highlight-color transparent /* 7 */
+  -webkit-text-size-adjust 100% /* 2 */
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+body
+  line-height inherit /* 2 */
+  margin 0 /* 1 */
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+hr
+  border-top-width 1px /* 3 */
+  color inherit /* 2 */
+  height 0 /* 1 */
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+abbr:where([title])
+  text-decoration underline dotted
+
+/*
+Remove the default font size and weight for headings.
+*/
+h1, h2, h3, h4, h5, h6
+  font-size inherit
+  font-weight inherit
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+a
+  color inherit
+  text-decoration inherit
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+b, strong
+  font-weight bolder
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+code, kbd, samp, pre
+  font-family ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace /* 1 */
+  font-feature-settings normal /* 2 */
+  font-size 1em /* 4 */
+  font-variation-settings normal /* 3 */
+
+/*
+Add the correct font size in all browsers.
+*/
+small
+  font-size 80%
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+sub, sup
+  font-size 75%
+  line-height 0
+  position relative
+  vertical-align baseline
+
+sub
+  bottom -0.25em
+
+sup
+  top -0.5em
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+table
+  border-collapse collapse /* 3 */
+  border-color inherit /* 2 */
+  text-indent 0 /* 1 */
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+button, input, optgroup, select, textarea
+  color inherit /* 1 */
+  font-family inherit /* 1 */
+  font-feature-settings inherit /* 1 */
+  font-size 100% /* 1 */
+  font-variation-settings inherit /* 1 */
+  font-weight inherit /* 1 */
+  line-height inherit /* 1 */
+  margin 0 /* 2 */
+  padding 0 /* 3 */
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+button, select
+  text-transform none
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+button, [type='button'], [type='reset'], [type='submit']
+  /* Will affect the button style of most component libraries, so disable it */
+  /* https://github.com/unocss/unocss/issues/2127 */
+  /* background-color: transparent; !* 2 *! */
+  background-image none /* 2 */
+  -webkit-appearance button /* 1 */
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+:-moz-focusring
+  outline auto
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+:-moz-ui-invalid
+  box-shadow none
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+progress
+  vertical-align baseline
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button
+  height auto
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+[type='search']
+  outline-offset -2px /* 2 */
+  -webkit-appearance textfield /* 1 */
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+::-webkit-search-decoration
+  -webkit-appearance none
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+::-webkit-file-upload-button
+  font inherit /* 2 */
+  -webkit-appearance button /* 1 */
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+summary
+  display list-item
+
+/*
+Removes the default spacing for appropriate elements.
+*/
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre
+  margin 0
+
+fieldset
+  margin 0
+  padding 0
+
+legend
+  padding 0
+
+ol, ul, menu
+  list-style none
+  margin 0
+  padding 0
+
+dialog
+  padding 0
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+textarea
+  resize vertical
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+input::placeholder, textarea::placeholder
+  color #9ca3af /* 2 */
+  opacity 1 /* 1 */
+
+/*
+Set the default cursor for buttons.
+*/
+button, [role='button']
+  cursor pointer
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled
+  cursor default
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+img, svg, video, canvas, audio, iframe, embed, object
+  display block /* 1 */
+  vertical-align middle /* 2 */
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+img, video
+  height auto
+  max-width 100%
+
+/*
+Make elements with the HTML hidden attribute stay hidden by default.
+*/
+[hidden]:where(:not([hidden='until-found']))
+  display none