diff --git a/README.md b/README.md index 7368b5e..edf118f 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ A collection of plugins to extend the capabilities of [rspress](https://rspress. - [rspress-plugin-google-analytics](./packages/rspress-plugin-google-analytics), integrate Google Analytics in your site. - [rspress-plugin-vercel-analytics](./packages/rspress-plugin-vercel-analytics), integrate Vercel Analytics in your site. +- [rspress-plugin-third-parties](./packages/rspress-plugin-third-parties), optimized third-party script loading and component embeds (YouTube, Twitter/X, Google Analytics, GTM). - [ ] rspress-plugin-sitemap - [ ] rspress-plugin-pwa diff --git a/packages/rspress-plugin-third-parties/.changeset/README.md b/packages/rspress-plugin-third-parties/.changeset/README.md new file mode 100644 index 0000000..654c6d4 --- /dev/null +++ b/packages/rspress-plugin-third-parties/.changeset/README.md @@ -0,0 +1,8 @@ +# Changesets + +Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works +with multi-package repos, or single-package repos to help you version and publish your code. You can +find the full documentation for it [in our repository](https://github.com/changesets/changesets). + +We have a quick list of common questions to get you started engaging with this project in +[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md). diff --git a/packages/rspress-plugin-third-parties/.changeset/config.json b/packages/rspress-plugin-third-parties/.changeset/config.json new file mode 100644 index 0000000..5c58ec9 --- /dev/null +++ b/packages/rspress-plugin-third-parties/.changeset/config.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://unpkg.com/@changesets/config@3.1.4/schema.json", + "changelog": "@changesets/cli/changelog", + "commit": false, + "fixed": [], + "linked": [], + "access": "restricted", + "baseBranch": "main", + "updateInternalDependencies": "patch", + "ignore": [] +} diff --git a/packages/rspress-plugin-third-parties/.gitignore b/packages/rspress-plugin-third-parties/.gitignore new file mode 100644 index 0000000..0991441 --- /dev/null +++ b/packages/rspress-plugin-third-parties/.gitignore @@ -0,0 +1,54 @@ +# Dependencies +node_modules/ +.pnpm-store/ + +# Build & Compilation Outputs +dist/ +build/ +.out/ +.rsbuild/ +.rspress/ +*.tsbuildinfo + +# Logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Environment & Local Configuration +.env +.env.local +.env.development.local +.env.test.local +.env.production.local +.env*.local + +# IDEs & Code Editors +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.idea/ +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# Operating System Files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +# Testing & Cache +coverage/ +.nyc_output/ +.cache/ + +.urai-cache diff --git a/packages/rspress-plugin-third-parties/CHANGELOG.md b/packages/rspress-plugin-third-parties/CHANGELOG.md new file mode 100644 index 0000000..cfbc686 --- /dev/null +++ b/packages/rspress-plugin-third-parties/CHANGELOG.md @@ -0,0 +1,25 @@ +# rspress-plugin-third-parties + +## 2.1.2 + +### Patch Changes + +- fix: assign script id in DOM, dynamic IDs for GTM and GA to prevent LoadCache collisions, and add React Compiler compliant useEffect state initialization + +## 2.1.1 + +### Patch Changes + +- update caption prop type from string to ReactNode to allow rich JSX formatting + +## 2.1.0 + +### Minor Changes + +- Add TweetEmbed component powered by react-tweet, add jsdelivr preconnect optimization for YouTubeEmbed, and update documentation. + +## 2.0.0 + +### Major Changes + +- Initial release with React Compiler, YouTubeEmbed, GoogleMapsEmbed, GA4, GTM, and custom Script components. diff --git a/packages/rspress-plugin-third-parties/LICENSE b/packages/rspress-plugin-third-parties/LICENSE new file mode 100644 index 0000000..333bbb8 --- /dev/null +++ b/packages/rspress-plugin-third-parties/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 Sanjaiyan Parthipan (https://github.com/sanjaiyan-dev) + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/rspress-plugin-third-parties/Readme.md b/packages/rspress-plugin-third-parties/Readme.md new file mode 100644 index 0000000..a4962a0 --- /dev/null +++ b/packages/rspress-plugin-third-parties/Readme.md @@ -0,0 +1,358 @@ +# `rspress-plugin-third-parties` + +
+ +rspress-plugin-third-parties banner + +
+
+ +[![npm version](https://img.shields.io/npm/v/rspress-plugin-third-parties.svg?style=for-the-badge&color=A855F7&labelColor=1F2937)](https://www.npmjs.com/package/rspress-plugin-third-parties) +[![npm downloads](https://img.shields.io/npm/dm/rspress-plugin-third-parties.svg?style=for-the-badge&color=3B82F6&labelColor=1F2937)](https://www.npmjs.com/package/rspress-plugin-third-parties) +[![license](https://img.shields.io/npm/l/rspress-plugin-third-parties.svg?style=for-the-badge&color=10B981&labelColor=1F2937)](./LICENSE) +[![React 19](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react&logoColor=black&labelColor=1F2937)](https://react.dev/) +[![Rspress](https://img.shields.io/badge/Rspress-Plugin-FF4154?style=for-the-badge&logo=rspack&logoColor=white&labelColor=1F2937)](https://rspress.rs/) +[![Docs & Demo](https://img.shields.io/badge/Docs_%26_Demo-Explore_Site-34268A?style=for-the-badge&logo=githubpages&logoColor=white&labelColor=0C1D48)](https://sanjaiyan-dev.github.io/rspress-plugin-third-parties) + +

+ High-performance third-party embeds, Google Tag Manager, analytics, and non-blocking script strategies for Rspress sites. +

+ +

+ πŸ“– Read the Documentation Β· + πŸš€ View Interactive Demo Β· + πŸ“¦ NPM Package +

+ +
+ +--- + +## ⚑ Overview + +**`rspress-plugin-third-parties`** brings Next.js-style third-party optimizations (`@next/third-parties`) directly to **Rspress**. + +External embeds (like YouTube, Google Maps, and Twitter/X posts) and script tags (like GA4 and GTM) are notorious for blocking the main thread, lowering Lighthouse performance scores, and causing layout shifts. This plugin solves that by providing: + +- ⚑ **React Compiler Pre-Optimized**: Ships fully compiled with automated auto-memoization at build-time. Zero unnecessary re-renders. +- πŸš€ **Non-Blocking Execution**: Lazy loading scripts using `requestIdleCallback` and fine-grained loading strategies. +- ⚑ **React 19 Resource Pre-initialization**: Leverages native `ReactDOM.preinit` and `ReactDOM.preload` during SSG/SSR. +- 🧠 **Smart Memory Caching**: Built-in script deduplication and stylesheet cache registry. +- πŸ› οΈ **Zero-Config Global GA**: Inject Google Analytics across all documentation pages automatically via your `rspress.config.ts`. +- πŸ“¦ **Zero-Weight Embeds**: Powered by `third-party-capital` for lightweight HTML generation. + +--- + +## πŸ“‘ Table of Contents + +- [Installation](#installation) +- [Plugin Registration](#plugin-registration) +- [Component Reference](#component-reference) + - [` +``` + +#### ` +``` + +#### `