← All work

Package2024 to present

Internal shared packages, one script loader and the integrations built on it

Packages I built for the team at SilverAssist: one shared script loader under the vendor integrations, plus tooling for testing, performance and UI.

RoleDeveloper

  • TypeScript
  • React 19
  • Next.js
  • npm
A diagram on a dark page. The package @silverassist/next-script-loader sits in the centre, with five vendor integration packages around it: recaptcha, trusted-form, quirobot, leadgen-app and leadcapture-form. The tooling packages are listed at the bottom.

Overview

At SilverAssist I built a set of packages under the @silverassist scope for the team. They are internal. Their source repositories are private, and the packages are not published for anyone outside the organization. They are not a collection of unrelated tools. One of them, @silverassist/next-script-loader, is the shared base: a singleton, reference-counted loader for third-party scripts. Five packages are integrations with vendors, and each one is built on that base instead of loading its own script. The rest are tooling, testing and UI packages.

This case describes the architecture of the internal packages. It does not show their code or give installation steps.

The challenge

Vendor integrations for forms, compliance and chat each need a third-party script. Each script must load once per page, even when several components need it, and the code that loads it should not be written again for every vendor. A single loader that tracks how many components use a script gives every integration the same behavior.

Key features

  • One shared base: @silverassist/next-script-loader, a singleton and reference-counted loader for third-party scripts. The other vendor packages depend on it.
  • Five vendor integrations: @silverassist/recaptcha for reCAPTCHA v3 with Next.js Server Actions support, and @silverassist/trusted-form, @silverassist/quirobot, @silverassist/leadgen-app and @silverassist/leadcapture-form, which are lead-form and compliance or chat integrations.
  • Performance checks: @silverassist/performance-toolkit, which runs PageSpeed Insights v5 and Lighthouse CI, and detects the Core Web Vitals and the LCP element.
  • Integration tests for Next.js packages: @silverassist/next-testing-toolkit, a harness for packages that a Next.js app consumes, which checks the React Server Components boundary.
  • Consent and icons: @silverassist/consent-banner, an accessible GDPR and cookie consent banner, and @silverassist/icons, a React icon library that works in Next.js.
  • Shared standards: @silverassist/npm-package-standards, the ESLint, Prettier and tsconfig base that the packages use.

Public packages

Four packages that I wrote are public. They are separate from the internal set above, and each one has its own page.

  • @silverassist/agents-toolkit: AI agent workflow prompts, from ticket to pull request, for Claude Code, Copilot and Codex.
  • jsdoc-to-tsdoc: a CLI that migrates JSDoc comments to TSDoc in TypeScript projects, with a CI check.
  • docs-sitekit: one command that gives a repository a documentation site, built from its own docs and published to GitHub Pages.
  • recaptcha-next: a React field and a server function that stop spam on Next.js forms, with reCAPTCHA v3.

Technologies used

  • Packages: TypeScript, React 19 and the Next.js App Router, with Server Components and Server Actions.
  • Tooling: npm, Jest with React Testing Library, ESLint and Prettier, and Lighthouse CI for the performance checks.

Outcome

The five integrations load their scripts through the same base, so a change to how scripts load is made once, in @silverassist/next-script-loader. The shared ESLint, Prettier and tsconfig base in @silverassist/npm-package-standards gives the packages one configuration.