@konfetti-js/svelte 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Andrea Bettich
+
+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.

package/README.md

@@ -0,0 +1,24 @@
+# @konfetti-js/svelte
+
+Svelte action and helpers for [konfetti.js](https://andreabettich.github.io/konfetti.js/). Works with Svelte 4 and 5, and installs `@konfetti-js/core` for you.
+
+```bash
+npm install @konfetti-js/svelte
+```
+
+```svelte
+<script>
+  import { konfettiAction, createKonfetti } from '@konfetti-js/svelte';
+
+  const { fire } = createKonfetti();
+</script>
+
+<!-- Fires from the element on click -->
+<button use:konfettiAction={{ preset: 'fireworks' }}>Fireworks!</button>
+
+<button onclick={() => fire({ particleCount: 100 })}>Celebrate!</button>
+```
+
+When `createKonfetti()` is called during component setup, its `continuous()` stream stops when the component is destroyed. See the [full documentation](https://github.com/andreabettich/konfetti.js#readme).
+
+MIT licensed.

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+import { FireFromElementOptions, KonfettiOptions } from '@konfetti-js/core';
+import { Action } from 'svelte/action';
+
+interface KonfettiActionOptions extends FireFromElementOptions {
+    /** Event to trigger konfetti (default: 'click') */
+    trigger?: string;
+}
+/**
+ * Svelte action for konfetti.js. Fires from the element on click (or `trigger`).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { konfettiAction } from '@konfetti-js/svelte';
+ * </script>
+ *
+ * <!-- Basic usage -->
+ * <button use:konfettiAction>Click me!</button>
+ *
+ * <!-- With options -->
+ * <button use:konfettiAction={{ particleCount: 100, spread: 70 }}>
+ *   Celebrate!
+ * </button>
+ *
+ * <!-- With preset -->
+ * <button use:konfettiAction={{ preset: 'fireworks' }}>
+ *   Fireworks!
+ * </button>
+ * ```
+ */
+declare const konfettiAction: Action<HTMLElement, KonfettiActionOptions | undefined>;
+
+type FireFn = (options?: KonfettiOptions) => void;
+interface KonfettiStore {
+    /** Fire konfetti with optional options */
+    fire: FireFn;
+    /** Fire cannon preset */
+    cannon: FireFn;
+    /** Fire explosion preset */
+    explosion: FireFn;
+    /** Fire fireworks preset */
+    fireworks: FireFn;
+    /** Fire rain preset */
+    rain: FireFn;
+    /** Fire snow preset */
+    snow: FireFn;
+    /** Fire side cannons preset */
+    sideCannons: FireFn;
+    /** Fire pride preset */
+    pride: FireFn;
+    /** Start a stream (stopped automatically on destroy); returns a stop function */
+    continuous: (options?: KonfettiOptions, interval?: number) => () => void;
+    /** Clear all konfetti and stop streams */
+    reset: () => void;
+}
+/**
+ * Create konfetti controls for Svelte. When called while a component
+ * initializes, its stream stops automatically when the component is destroyed.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createKonfetti } from '@konfetti-js/svelte';
+ *
+ *   const konfetti = createKonfetti();
+ * </script>
+ *
+ * <button onclick={() => konfetti.fire({ particleCount: 100 })}>
+ *   Celebrate!
+ * </button>
+ * ```
+ */
+declare function createKonfetti(): KonfettiStore;
+
+export { type KonfettiActionOptions, type KonfettiStore, createKonfetti, konfettiAction };

package/dist/index.js

@@ -0,0 +1,74 @@
+// src/action.ts
+import { fireFromElement } from "@konfetti-js/core";
+var konfettiAction = (node, initialOptions = {}) => {
+  let current = initialOptions;
+  let trigger = current.trigger ?? "click";
+  const handler = () => {
+    const { trigger: _trigger, ...options } = current;
+    fireFromElement(node, options);
+  };
+  node.addEventListener(trigger, handler);
+  return {
+    update(nextOptions = {}) {
+      current = nextOptions;
+      const nextTrigger = nextOptions.trigger ?? "click";
+      if (nextTrigger !== trigger) {
+        node.removeEventListener(trigger, handler);
+        node.addEventListener(nextTrigger, handler);
+        trigger = nextTrigger;
+      }
+    },
+    destroy() {
+      node.removeEventListener(trigger, handler);
+    }
+  };
+};
+
+// src/createKonfetti.ts
+import {
+  cannon,
+  continuous as coreContinuous,
+  reset as coreReset,
+  explosion,
+  fire,
+  fireworks,
+  pride,
+  rain,
+  sideCannons,
+  snow
+} from "@konfetti-js/core";
+import { onDestroy } from "svelte";
+function createKonfetti() {
+  let stop = null;
+  const stopStream = () => {
+    stop?.();
+    stop = null;
+  };
+  try {
+    onDestroy(stopStream);
+  } catch {
+  }
+  return {
+    fire,
+    cannon,
+    explosion,
+    fireworks,
+    rain,
+    snow,
+    sideCannons,
+    pride,
+    continuous: (options, interval) => {
+      stopStream();
+      stop = coreContinuous(options, interval);
+      return stop;
+    },
+    reset: () => {
+      stopStream();
+      coreReset();
+    }
+  };
+}
+export {
+  createKonfetti,
+  konfettiAction
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@konfetti-js/svelte",
+  "version": "0.3.0",
+  "description": "Svelte wrapper for konfetti.js",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "keywords": [
+    "konfetti",
+    "confetti",
+    "svelte",
+    "animation"
+  ],
+  "author": "Andrea Bettich",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andreabettich/konfetti.js.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://andreabettich.github.io/konfetti.js/",
+  "bugs": {
+    "url": "https://github.com/andreabettich/konfetti.js/issues"
+  },
+  "dependencies": {
+    "@konfetti-js/core": "^0.3.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=4.0.0"
+  },
+  "devDependencies": {
+    "svelte": "^5.55.7",
+    "tsup": "^8.3.0",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome lint src",
+    "check": "biome check src --write"
+  }
+}