ignite Svelte Themes

Ignite

Eliminate serverless cold starts by bridging hover intent with infrastructure pre-warming

Ignite

Serverless cold starts add seconds of latency. Ignite warms your functions before the user clicks.

When a user hovers over a button, Ignite sends a lightweight warm-up signal to your serverless backend. By the time they click, the container is already hot -- zero cold start.


Quick Start

React

npm install @farhanmansuri/ignite-react @farhanmansuri/ignite-core
import { IgniteProvider, useIgnite } from '@farhanmansuri/ignite-react';

function App() {
  return (
    <IgniteProvider serverBaseURL="https://us-central1-myapp.cloudfunctions.net">
      <CreateProjectButton />
    </IgniteProvider>
  );
}

function CreateProjectButton() {
  const ignite = useIgnite('createProject');
  return <button {...ignite} onClick={handleSubmit}>Create Project</button>;
}

Vue 3

npm install @farhanmansuri/ignite-vue @farhanmansuri/ignite-core
// main.ts
import { createIgnitePlugin } from '@farhanmansuri/ignite-vue';
app.use(createIgnitePlugin({ serverBaseURL: 'https://us-central1-myapp.cloudfunctions.net' }));
<template>
  <button @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @click="submit">
    Create Project
  </button>
</template>

<script setup>
import { useIgnite } from '@farhanmansuri/ignite-vue';
const { onMouseEnter, onMouseLeave } = useIgnite('createProject');
</script>

Svelte

npm install @farhanmansuri/ignite-svelte @farhanmansuri/ignite-core
<script>
  import { ignite } from '@farhanmansuri/ignite-svelte';
</script>

<button use:ignite={{ functionName: 'createProject', serverBaseURL: 'https://us-central1-myapp.cloudfunctions.net' }} on:click={handleSubmit}>
  Create Project
</button>

Vanilla JS

npm install @farhanmansuri/ignite-js
import { configureIgnite } from '@farhanmansuri/ignite-js';

const ignite = configureIgnite({
  serverBaseURL: 'https://us-central1-myapp.cloudfunctions.net',
});

document.querySelector('#submit-btn').addEventListener('mouseenter', () => {
  ignite.warm('createProject');
});

How It Works

1. User hovers over a button       (intent detected)
2. Ignite sends a warm-up signal   (sendBeacon -- non-blocking)
3. Serverless function receives it  (container spins up)
4. User clicks                      (function is already warm)
5. Response is instant              (no cold start)

The warm signal sends { __ignite: true } in the POST body. Your server detects this and returns early -- the container is now warm but no business logic runs.


Server-Side Detection

Any serverless function can detect and short-circuit warm signals:

// Express / any Node.js server
app.post('/myFunction', (req, res) => {
  if (req.body?.__ignite) {
    return res.json({ status: 'ignited' });
  }
  // ... your actual function logic
});

This works with any backend -- Firebase, AWS Lambda, Vercel, Railway, or a plain Express server. The client sends a POST with __ignite: true; the server checks for it and exits early.


Packages

Package Description
@farhanmansuri/ignite-core Framework-agnostic signal logic (sendBeacon + fetch fallback, 5-min warm cache)
@farhanmansuri/ignite-react React hook -- IgniteProvider + useIgnite
@farhanmansuri/ignite-vue Vue 3 composable -- createIgnitePlugin + useIgnite
@farhanmansuri/ignite-svelte Svelte action -- setIgniteConfig + use:ignite
@farhanmansuri/ignite-js Vanilla JS -- configureIgnite + warm
@farhanmansuri/ignite-firebase Firebase middleware for early-exit warm detection
@farhanmansuri/ignite-proxy Rust/Wasm Cloudflare Worker with auth, allowlist, and rate limiting

Advanced

Firebase Middleware

If you use Firebase Cloud Functions, the @farhanmansuri/ignite-firebase package provides drop-in wrappers:

import { igniteWrapper, igniteMiddleware } from '@farhanmansuri/ignite-firebase';

// onCall
export const createProject = igniteWrapper(async (req) => {
  // your logic -- skipped on warm signals
}, process.env.IGNITE_SECRET);

// onRequest
export const processPayment = igniteMiddleware(async (req, res) => {
  res.json({ success: true });
}, process.env.IGNITE_SECRET);

Edge Proxy

For production setups that need auth, allowlisting, and rate limiting, deploy @farhanmansuri/ignite-proxy -- a Rust Cloudflare Worker that sits between your frontend and backend:

cd packages/proxy
wrangler secret put IGNITE_SECRET
wrangler secret put FIREBASE_BASE_URL
wrangler secret put ALLOWED_FUNCTIONS   # comma-separated: createProject,processPayment
wrangler deploy

Then point serverBaseURL at your proxy URL instead of directly at your backend.


Development

pnpm install
pnpm build
pnpm test

# Proxy tests (requires Rust)
cd packages/proxy && cargo test

See CONTRIBUTING.md for full guidelines.


License

MIT

Top categories

Loading Svelte Themes