From a087e8bbab2a347a92c5b4d5aaf6904cb9bf4441 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Mon, 3 Aug 2026 23:49:00 +0530 Subject: [PATCH 1/7] feat: Add Google Maps Embed, Google Tag Manager, and YouTube Embed components - Implemented GoogleMapsEmbed component for embedding Google Maps with customizable options. - Created GoogleTagManager component to facilitate Google Tag Manager integration with support for dataLayer and custom parameters. - Developed YouTubeEmbed component for embedding YouTube videos with preconnect and script loading optimizations. - Introduced ThirdPartyScriptEmbed component for rendering third-party scripts and HTML. - Added TweetEmbed component for rendering tweets with theme support. - Implemented Script component for optimized script loading strategies. - Added utility functions for handling script attributes and idle callbacks. - Created tests for all new components to ensure functionality and integration. - Updated tsconfig for TypeScript support in the third-parties package. --- .../.changeset/README.md | 8 + .../.changeset/config.json | 11 + .../rspress-plugin-third-parties/.gitignore | 54 + .../.vscode/settings.json | 3 + .../rspress-plugin-third-parties/CHANGELOG.md | 25 + packages/rspress-plugin-third-parties/LICENSE | 21 + .../rspress-plugin-third-parties/Readme.md | 353 ++ .../rspress-plugin-third-parties/biome.json | 34 + .../docs/demo.mdx | 90 + .../docs/index.mdx | 40 + .../rspress-plugin-third-party-hero.png | Bin 0 -> 1884482 bytes .../rspress-plugin-third-party-icon.png | Bin 0 -> 366719 bytes .../docs/readme.mdx | 355 ++ .../rspress-plugin-third-parties/package.json | 94 + .../pnpm-lock.yaml | 4580 +++++++++++++++++ .../pnpm-workspace.yaml | 4 + .../rslib.config.ts | 32 + .../rspress.config.ts | 59 + .../rstest.browser.config.mts | 14 + .../GoogleAnalytics/GlobalGoogleAnalytics.tsx | 29 + .../src/components/GoogleAnalytics/index.tsx | 59 + .../src/components/GoogleMapsEmbed.tsx | 33 + .../src/components/GoogleTagManager.tsx | 81 + .../src/components/Script.tsx | 337 ++ .../src/components/ThirdPartyScripts.tsx | 31 + .../src/components/TweetEmbed.tsx | 21 + .../src/components/YouTubeEmbed.tsx | 69 + .../src/components/utils.ts | 67 + .../rspress-plugin-third-parties/src/index.ts | 6 + .../src/plugin.ts | 45 + .../tests/GoogleAnalytics.test.tsx | 114 + .../tests/GoogleTagManager.test.tsx | 119 + .../tests/Script.test.tsx | 167 + .../tests/TweetEmbed.test.tsx | 64 + .../tests/YoutubeEmbed.test.tsx | 69 + .../tsconfig.json | 15 + pnpm-lock.yaml | 1591 +++++- 37 files changed, 8495 insertions(+), 199 deletions(-) create mode 100644 packages/rspress-plugin-third-parties/.changeset/README.md create mode 100644 packages/rspress-plugin-third-parties/.changeset/config.json create mode 100644 packages/rspress-plugin-third-parties/.gitignore create mode 100644 packages/rspress-plugin-third-parties/.vscode/settings.json create mode 100644 packages/rspress-plugin-third-parties/CHANGELOG.md create mode 100644 packages/rspress-plugin-third-parties/LICENSE create mode 100644 packages/rspress-plugin-third-parties/Readme.md create mode 100644 packages/rspress-plugin-third-parties/biome.json create mode 100644 packages/rspress-plugin-third-parties/docs/demo.mdx create mode 100644 packages/rspress-plugin-third-parties/docs/index.mdx create mode 100644 packages/rspress-plugin-third-parties/docs/public/rspress-plugin-third-party-hero.png create mode 100644 packages/rspress-plugin-third-parties/docs/public/rspress-plugin-third-party-icon.png create mode 100644 packages/rspress-plugin-third-parties/docs/readme.mdx create mode 100644 packages/rspress-plugin-third-parties/package.json create mode 100644 packages/rspress-plugin-third-parties/pnpm-lock.yaml create mode 100644 packages/rspress-plugin-third-parties/pnpm-workspace.yaml create mode 100644 packages/rspress-plugin-third-parties/rslib.config.ts create mode 100644 packages/rspress-plugin-third-parties/rspress.config.ts create mode 100644 packages/rspress-plugin-third-parties/rstest.browser.config.mts create mode 100644 packages/rspress-plugin-third-parties/src/components/GoogleAnalytics/GlobalGoogleAnalytics.tsx create mode 100644 packages/rspress-plugin-third-parties/src/components/GoogleAnalytics/index.tsx create mode 100644 packages/rspress-plugin-third-parties/src/components/GoogleMapsEmbed.tsx create mode 100644 packages/rspress-plugin-third-parties/src/components/GoogleTagManager.tsx create mode 100644 packages/rspress-plugin-third-parties/src/components/Script.tsx create mode 100644 packages/rspress-plugin-third-parties/src/components/ThirdPartyScripts.tsx create mode 100644 packages/rspress-plugin-third-parties/src/components/TweetEmbed.tsx create mode 100644 packages/rspress-plugin-third-parties/src/components/YouTubeEmbed.tsx create mode 100644 packages/rspress-plugin-third-parties/src/components/utils.ts create mode 100644 packages/rspress-plugin-third-parties/src/index.ts create mode 100644 packages/rspress-plugin-third-parties/src/plugin.ts create mode 100644 packages/rspress-plugin-third-parties/tests/GoogleAnalytics.test.tsx create mode 100644 packages/rspress-plugin-third-parties/tests/GoogleTagManager.test.tsx create mode 100644 packages/rspress-plugin-third-parties/tests/Script.test.tsx create mode 100644 packages/rspress-plugin-third-parties/tests/TweetEmbed.test.tsx create mode 100644 packages/rspress-plugin-third-parties/tests/YoutubeEmbed.test.tsx create mode 100644 packages/rspress-plugin-third-parties/tsconfig.json 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..d66dee8 --- /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/.vscode/settings.json b/packages/rspress-plugin-third-parties/.vscode/settings.json new file mode 100644 index 0000000..d09e100 --- /dev/null +++ b/packages/rspress-plugin-third-parties/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.words": ["rspress"] +} 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..6e40034 --- /dev/null +++ b/packages/rspress-plugin-third-parties/Readme.md @@ -0,0 +1,353 @@ +# `rspress-plugin-third-parties` + +
+ +[![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) + - [` +``` + +#### ` +``` + +#### `