前端UI组件【免费下载链接】react-intersection-observerReact implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.项目地址https://gitcode.com/gh_mirrors/re/react-intersection-observer点击查看免费下载react-intersection-observer是一个基于 TypeScript、采用 PNPM workspaces 管理的 React 开源仓库其核心交付物是通过 Intersection Observer API 为骨架结合仓库内真实的配置文件、源码与测试用例完整梳理一条贡献者路径从搭建本地开发环境、编写与测试代码、遵循提交规范到最终由 CI 自动发布到 npm 的全过程。读完本文你将掌握该仓库的开发命令、测试架构、代码规范与发布机制能够直接上手提交高质量的 PR。仓库概览三个 workspace 应用的分工整个仓库是一个 PNPM monorepo由根目录 pnpm-workspace.yaml 声明apps/*与packages/*两个包分组packages: - apps/* - packages/*CONTRIBUTING.md 明确划分了三个工作区packages/react-intersection-observer对外发布的正式包包含useInViewHook 和InView组件。从源码 packages/react-intersection-observer/src/index.tsx 可以看到它实际导出四样东西InView渲染属性组件、useInView状态型 Hook、useOnInView副作用回调型 Hook以及底层observe工具函数。apps/storybook用于开发与测试的 Storybook 项目端口固定为 9000其dev脚本为storybook dev -p 9000见 apps/storybook/package.json存放于 apps/storybook/stories 的 stories 覆盖了InView、useInView、useOnInView三种用法。apps/docs基于 Blume 构建的文档站点开发命令为blume dev见 apps/docs/package.json其内容目录在 apps/docs/docs。根目录 package.json 中的脚本把这三个工作区串成统一的开发入口同时 turbo.json 为build、test、lint、typecheck、dev等任务定义了缓存与依赖关系例如test依赖^builddev关闭缓存并标记为persistent。本地开发环境搭建1. 克隆与安装依赖贡献的第一步是 fork 仓库、克隆到本地然后用PNPM安装依赖pnpm install仓库根目录 package.json 通过packageManager字段锁定了pnpm10.5.2并在pnpm-workspace.yaml中声明了onlyBuiltDependenciesbiomejs/biome、esbuild、msw、simple-git-hooks确保安装阶段需要执行构建脚本的依赖被正确允许。2. 启动开发服务器CONTRIBUTING.md 推荐直接启动全部应用pnpm dev该命令实际展开为见根目录 package.jsondev: pnpm --parallel --filter react-intersection-observer --filter storybook --filter docs dev即并行启动包源码、Storybook 与文档站点三个dev任务。如果只想启动其中一个可以分开执行pnpm dev:storybook pnpm dev:docspnpm dev:storybook对应pnpm --filter storybook devpnpm dev:docs对应pnpm --filter docs dev。包自身的 watch 构建则通过pnpm --filter react-intersection-observer dev:package内部为tsup src/index.tsx --watch完成。语义化版本管理CONTRIBUTING.md 声明项目遵循Semantic Versioning 2.0版本号格式为major.minor.patchmajor破坏性变更Breaking changes或新功能minor向后兼容的功能增强patchBug 修复与文档变更。这一约定在仓库中有两处直接体现。一是 packages/react-intersection-observer/package.json 中当前版本为11.0.0二是发布工作流 .github/workflows/release.yml 用pnpm exec bumpp ${{ inputs.version }} --yes执行版本号提升——version输入的可选项正是patch、minor、major以及prepatch、preminor、premajor、prerelease等预发布变体与 SemVer 规范一一对应。Pull Request 流程与提交规范CONTRIBUTING.md 要求在每个 fork 分支上完成改动后按以下清单提交 PR为改动添加测试确保全部测试通过若改动影响文档同步更新README.md遵循下述提交信息约定。Commit message 约定Conventional Commits提交信息遵循 Conventional Commits 规范格式为type: subjecttype表示变更类型feat用于新功能fix用于 Bug 修复docs用于文档chore用于不触碰代码本身的改动如依赖更新subject是对变更的简短描述。这种格式化的提交信息让 CI 生成的发布说明release notes保持可读。仓库根目录还通过simple-git-hooks与lint-staged配置了 pre-commit 钩子对*.{js,json,css,md,ts,tsx}文件自动执行biome check --fix见根目录 package.json从源头保证提交进度的代码已经过格式化。代码风格与静态检查BiomeCONTRIBUTING.md 指定项目使用Biome做格式化与 lint打开 PR 前必须用 Biome 格式化改动。仓库的 biome.json 给出了实际配置启用 formatterindentStyle: space空格缩进启用 linter采用recommended规则集并针对该库做了少量豁免例如关闭noForEach、将noUnusedVariables降级为 warn、关闭noSvgWithoutTitle等。对应的检查命令在包内为biome check .见 packages/react-intersection-observer/package.json仓库根目录提供聚合的pnpm lint。测试Vitest Playwright Browser Mode Node SSR 双项目CONTRIBUTING.md 说明测试框架是Vitest并强调了两点关键事实组件测试运行在 Vitest Browser Mode基于 PlaywrightSSR 测试则运行在独立的 Node 项目中。执行pnpm test其背后是 packages/react-intersection-observer/vitest.config.ts 中定义的两个测试项目projects: [ { test: { name: node, environment: node, include: [src/**/*.ssr.test.ts], }, }, { test: { name: browser, include: [src/**/*.test.{ts,tsx}], exclude: [src/**/*.ssr.test.ts], browser: { enabled: true, provider: playwright(), headless: true, instances: [{ browser: chromium }], }, }, }, ],也就是说文件名以.ssr.test.ts结尾的测试如 src/tests/useInView.ssr.test.ts验证useInView在renderToString下无警告地渲染出false走 Node 环境其余.test.{ts,tsx}文件如 src/tests/useOnInView.test.tsx、src/tests/observe.test.ts走 Chromium 浏览器的 Browser Mode由 Playwright 驱动。内置的 IntersectionObserver 测试工具该仓库为测试做了专门的工程化铺垫包额外导出一个react-intersection-observer/test-utils入口见 packages/react-intersection-observer/package.json 的exports字段源码位于 packages/react-intersection-observer/src/test-utils.ts。它提供setupIntersectionMocking(mockFn)把window.IntersectionObserver替换为可记录的 mock并跟踪被观察的元素集合resetIntersectionMocking()重置 mock 与观察状态mockAllIsIntersecting(value)/mockIsIntersecting(element, value)模拟所有或指定元素进入/离开视口value既可以是布尔值也可以是表示intersectionRatio的数字intersectionMockInstance(element)拿到某个元素对应的mockObserver 实例用于断言observe/unobserve调用。测试环境Jest 或 Vitest下该工具会在beforeEach中自动启用 mock、在afterEach中自动重置非测试环境调用时会输出一段提示指导在测试 setup 文件中手动配置。这让「先写测试再提交」在仓库里有了现成的脚手架支撑。底层实现与测试的呼应observe.test.ts印证了 packages/react-intersection-observer/src/observe.ts 的核心设计——相同选项的 Observer 会被复用optionsToId(options)把root、rootMargin、threshold、scrollMargin、trackVisibility、delay等选项排序后拼成唯一字符串 ID测试断言如optionsToId({ rootMargin: 10px 10px, threshold: [0, 1] })得到root_0,rootMargin_10px 10px,threshold_0,1同一 ID 对应的IntersectionObserver实例存放在全局observerMap中复用每个元素维护自己的回调数组observe()返回的清理函数具备幂等性重复调用只清理一次只有当元素的回调全部移除后才unobserve只有当实例没有任何元素时才disconnect并从observerMap删除。测试should only clean up each observer callback once正是对这一行为的验证。此外由于useOnInView见 packages/react-intersection-observer/src/useOnInView.tsx与useInView见 packages/react-intersection-observer/src/useInView.tsx都经由useIntersectionObserverRef见 packages/react-intersection-observer/src/useIntersectionObserverRef.ts调用底层observe测试文件里还覆盖了 ref 生命周期、Strict Mode 下的重复挂载清理、ref 合并、同一元素多回调等边界场景这些都可以作为新增测试的参考范式。构建产物验证CONTRIBUTING.md 建议在提交前构建包与两个应用pnpm build:all该命令的完整展开为根目录 package.jsonbuild:all: pnpm build pnpm --filter storybook build pnpm --filter docs build其中pnpm build指pnpm --filter react-intersection-observer build。包的构建由 packages/react-intersection-observer/tsup.config.ts 驱动基于 tsup 同时产出esm/cjs双格式与类型声明dts: true主入口src/index.tsx输出到dist测试工具入口src/test-utils.ts输出到test-utils。构建后还会执行attw --pack、publint与 size-limit 校验——packages/react-intersection-observer/package.json 中为InView、useInView、useOnInView、observe分别设置了1.5 kB、1.36 kB、1.12 kB、0.9 kB的体积预算防止贡献导致包体膨胀。发布流程CI 上的 npm Trusted PublishingCONTRIBUTING.md 特别强调发布只发生在 CI本地没有发布步骤。原因是仓库采用 npm 的 trusted publishing信任发布者机制仓库内不存在任何 npm token发布时自动附加 provenance来源证明从本地执行npm publish会被拒绝。手动触发 Release 工作流要发布一个版本维护者在仓库的Actions选项卡中选择Release工作流并从要发布的分支运行它。工作流有两个输入参数见 .github/workflows/release.ymlversion选择版本增量可选patch、minor、major以及prepatch、preminor、premajor、prerelease默认patchtag指定 npm dist-tag默认latest预发布版本使用beta。工作流的完整执行链条release.yml中的 job 完整呈现了 CONTRIBUTING.md 描述的流程铸造 GitHub App token因为main分支受保护而 GitHub Actions 应用不能作为用户仓库 ruleset 的 bypass actor工作流通过actions/create-github-app-tokenv2使用vars.RELEASE_APP_ID与secrets.RELEASE_APP_KEY铸造一个短期 token用于推送版本提交该 token 在 job 结束时自动失效。检出代码以fetch-depth: 0全量检出方便生成版本与发布说明。环境准备启用 corepack、安装 Node.js 24、更新 npmtrusted publishing 要求 npm 11.5.1、pnpm install --frozen-lockfile锁定依赖。提升版本并提交执行pnpm exec bumpp ${{ inputs.version }} --yes在 bump 版本号的同时完成 commit 与 tag。构建在packages/react-intersection-observer目录执行pnpm build。发布到 npmnpm publish --tag ${{ inputs.tag }}。注释明确写到 No NODE_AUTH_TOKEN: npm authenticates through the OIDC token即通过 job 的id-token: write权限完成 OIDC 认证provenance 由 trusted publishing 自动证明。创建 GitHub Releasegh release create v${{ steps.version.outputs.version }} --generate-notes基于 Conventional Commits 自动生成发布说明pre*版本还会追加--prerelease标记。这解释了 CONTRIBUTING.md 中「版本提交由 GitHub App 铸造的短期 token 推送App ID 存放于RELEASE_APP_ID变量、私钥存放于RELEASE_APP_KEYsecret」的完整工程背景。小结对react-intersection-observer的贡献者而言完整的工作流可以浓缩为四条主线开发pnpm install后用pnpm dev或pnpm dev:storybook/pnpm dev:docs并行启动包、Storybook 与文档站点提交遵循type: subject的 Conventional Commits 规范交给 pre-commit 钩子与 Biome 统一格式测试pnpm test同时运行 Browser ModePlaywright Chromium与 Node SSR 两套 Vitest 项目借助react-intersection-observer/test-utils内置的 IntersectionObserver mock 编写确定性测试提交前用pnpm build:all验证构建与体积预算发布无需本地 npm token在 Actions 中运行 Release 工作流选择version与tag后CI 完成 bump、构建、trusted publishing 与 GitHub Release 生成。对源码级细节感兴趣的读者可以继续深入 packages/react-intersection-observer/src/observe.ts 理解共享 Observer 机制翻阅 packages/react-intersection-observer/src/tests学习测试范式或对照 .github/workflows/release.yml 复现完整的发布流水线。赞分享前端UI组件【免费下载链接】react-intersection-observerReact implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.项目地址https://gitcode.com/gh_mirrors/re/react-intersection-observer点击查看免费下载相关推荐React-Rails 贡献实战指南从 Bug 报告、本地开发到测试与发布全流程React Rails 贡献实战指南从 Bug 报告、本地开发到测试与发布全流程 React Rails 是连接 React 与 Rails 视图、控制器、资后端前端MAS 激活脚本完整指南免费激活 Windows 和 Office 的三种方式MAS 激活脚本完整指南免费激活 Windows 和 Office 的三种方式 MASMicrosoft Activation Scripts是一个开源激操作系统trackerslist 公共 BT 追踪器列表4 步给种子下载提速trackerslist 公共 BT 追踪器列表4 步给种子下载提速 下载卡在 99.9%做种只剩 1 个速度个位数 KB——问题多半不在带宽而是种子自上一篇markitdown5 分钟把办公文档变成可检索文本下一篇MTEB项目中的可复现工作流详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
