Basefill

Project Title: Basefill – The Baseline-Aware Polyfill CDN

Problem Statement

The web evolves faster than teams can adapt. Developers still waste bandwidth and time shipping outdated or unnecessary polyfills, often bloating bundles by hundreds of KB. Existing solutions like Polyfill.io and Core-JS either:

• Over-serve polyfills (shipping features already universally available).
• Require manual configuration (error-prone and time-consuming).
• Fail to adapt as the Baseline expands, leaving developers locked to yesterday’s assumptions.

This creates a polyfill debt: projects remain heavy, fragile, and stuck in the past instead of benefiting from modern browser capabilities.

Solution – Basefill

Basefill is the world’s first Baseline-aware Polyfill CDN.

Developers include a single script tag or import, and Basefill dynamically serves only the minimal set of polyfills required, based on:

1. Baseline Data (from web-features + Web Platform Dashboard).
2. Runtime Feature Detection (browser UA + lightweight in-browser checks).
3. Automatic Updates → As Baseline grows, polyfills shrink until they disappear entirely.

Tagline: “Polyfills that vanish as the web evolves.”

Why Basefill is Unique

• Baseline-Native → Directly powered by official Baseline definitions.
• Self-Healing → Unlike traditional polyfill services, Basefill continuously reduces its footprint.
• Plug & Play → Works out-of-the-box in React, Vue, Svelte, Vite, Next.js, or vanilla JS.
• Security First → Bundles are signed + integrity-checked to prevent supply-chain risks.
• Monorepo Architecture → Scalable, modular, and future-ready.
• Future-Proof → Developers never need to think about polyfills again.

Example Usage

Vanilla HTML

<script src="https://cdn.basefill.dev/polyfills.js" crossorigin="anonymous"></script>

React / Vue / Svelte / Vite

// vite.config.ts
import { defineConfig } from "vite";
import basefill from "vite-plugin-basefill";

export default defineConfig({
  plugins: [basefill()],
});

Result: Your build ships only what’s needed beyond Baseline, and nothing more.

Tech Stack

Core Infrastructure:

• TypeScript everywhere for safety + DX.
• pnpm Monorepo with workspaces (/cdn, /bundler, /cli, /dashboard).
• Cloudflare Workers + KV Storage for edge distribution and fast UA-based responses.
• Fastify (Node backend) for management APIs.

Baseline Integration:

• web-features npm package → authoritative source of Baseline support.
• Web Platform Dashboard API → real-time sync of feature adoption.

Polyfills:

• Core-JS as primary polyfill source.
• Custom bundling pipeline using Rollup + esbuild.

Security:

• SRI (Subresource Integrity) for served bundles.
• Automatic dependency audit via pnpm audit.
• Content-Security-Policy (CSP) hardened headers for CDN responses.

DX (Developer Experience):

• CLI Tool (npx basefill scan) → Scans your project and previews polyfills served.
• Framework Plugins → vite-plugin-basefill, next-basefill, sveltekit-basefill.
• CI Integration → GitHub Action that fails builds if non-baseline features are used without fallback.

Testing & Quality:

• Jest + Playwright for polyfill validation under simulated browsers.
• ESLint + Prettier + Husky for clean, consistent TypeScript.
• Vitest for fast unit testing of bundler logic.

Stretch Features (Post-MVP)

1. Dashboard UI → Analytics on polyfills served, bytes saved, baseline adoption progress.

   • Built with React + Vite + Tailwind + shadcn/ui.

2. Baseline Heatmap → Visualize feature usage in your repo.

3. Baseline+1 Mode → Future-looking config to target features just beyond Baseline.

4. Smart Polyfill Splitting → Load polyfills lazily by feature group (e.g., only CSS, only DOM APIs).

🎯 Impact

• For Developers: Save time, avoid compatibility guesswork.
• For Teams: Smaller bundles, lower infra costs, better performance.
• For the Web: Encourages adoption of modern features without breaking older browsers.

In short: Basefill accelerates the future of the web by making polyfills disappear.

📝 Contributing

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

📄 License

MIT License - see LICENSE for details.

---

Created by Kasim Lyee | lyee@codewithlyee.com