Skip to content

feat(plugin-third-parties): add rspress-plugin-third-parties 🎉 - #33

Open
sanjaiyan-dev wants to merge 6 commits into
rstackjs:mainfrom
sanjaiyan-dev:sanjaiyan-third-party-plugins
Open

feat(plugin-third-parties): add rspress-plugin-third-parties 🎉 #33
sanjaiyan-dev wants to merge 6 commits into
rstackjs:mainfrom
sanjaiyan-dev:sanjaiyan-third-party-plugins

Conversation

@sanjaiyan-dev

@sanjaiyan-dev sanjaiyan-dev commented Aug 3, 2026

Copy link
Copy Markdown

Summary

This PR adds rspress-plugin-third-parties to the official rspress-plugins monorepo under packages/rspress-plugin-third-parties.

Following up on the documentation PR (web-infra-dev/rspress#3546) and review from @SoonIter, this plugin brings optimized third-party component embeds and script loading strategies to the Rspress ecosystem.

👉 Live Interactive Playground: https://sanjaiyan-dev.github.io/rspress-plugin-third-parties


🚀 Key Features

  • Google Analytics (<GoogleAnalytics />): Lightweight GA4 script injection and event tracking.
  • Google Tag Manager (<GoogleTagManager />): Optimized GTM container initialization.
  • YouTube Embeds (<YouTubeEmbed />): Fast, accessible YouTube embeds using third-party-capital and React 19 resource preloading (ReactDOM.preconnect).
  • Twitter / X Embeds (<TweetEmbed />): Auto-detects Rspress dark/light mode themes and renders tweets via react-tweet.
  • Custom Script Strategy (<Script />): Flexible script loading strategies (beforeInteractive, afterInteractive, lazyOnload).

📦 Package Details

  • Location: packages/rspress-plugin-third-parties
  • Exports:
    • ".": Components (GoogleAnalytics, GoogleTagManager, YouTubeEmbed, TweetEmbed, Script)
    • "./plugin": Rspress Plugin Configuration (pluginThirdParties)
  • Documentation: Flattened into packages/rspress-plugin-third-parties/docs (pnpm docs:dev)

🧪 Testing & Verification

  • Unit & Browser Tests (rstest): 25 passed across 5 test suites (GoogleAnalytics, GoogleTagManager, Script, TweetEmbed, YoutubeEmbed).
  • Builds Cleanly (pnpm build): Dual ESM/CJS build generated via rslib.
  • Root README Updated: Listed under the ### Site category.
# Run tests inside the package
cd packages/rspress-plugin-third-parties
pnpm test

# Run demo locally
pnpm docs:dev

…mponents

- 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.
- Updated import statements to use single quotes consistently.
- Reformatted code for better readability and consistency.
- Adjusted test descriptions for clarity and consistency.
- Ensured proper cleanup in tests to avoid side effects.
- Updated TypeScript configuration formatting for consistency.
@@ -0,0 +1,3 @@
{
"cSpell.words": ["rspress"]

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These modifications can be discarded.

It does not meet the infrastructure standards of this repository, perhaps after merging in the PR at #31

- ⚡ **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.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this repository, we do not maintain an official website; all the demo files in the docs folder are only used for e2e testing.

So if you migrate to this repository, it means your official website will be modified to become an e2e case and will not be deployed.

If you want to keep this official website, it may be better to deploy it in your personal repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants