svelte-confetti-explosion 0.0.4 → 0.1.0

package/ConfettiExplosion.svelte

@@ -110,6 +110,18 @@ function validate(particleCount, duration, colors, particleSize, force, floorHei
  * ```
  */
 export let particleCount = PARTICLE_COUNT;
+/**
+ * Size of the confetti particles in pixels
+ *
+ * @default 12
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion particleSize={20} />
+ * ```
+ */
+export let particleSize = SIZE;
 /**
  * Duration of the animation in milliseconds
  *
@@ -135,18 +147,6 @@ export let duration = DURATION;
  * ```
  */
 export let colors = COLORS;
-/**
- * Size of the confetti particles in pixels
- *
- * @default 12
- *
- * @example
- *
- * ```svelte
- * <ConfettiExplosion particleSize={20} />
- * ```
- */
-export let particleSize = SIZE;
 /**
  * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
  *
@@ -160,7 +160,7 @@ export let particleSize = SIZE;
  */
 export let force = FORCE;
 /**
- * Height of the floor in pixels. Confetti will only fall within this height.
+ * Height of the stage in pixels. Confetti will only fall within this height.
  *
  * @default 800
  *
@@ -170,9 +170,9 @@ export let force = FORCE;
  * <ConfettiExplosion floorHeight={500} />
  * ```
  */
-export let floorHeight = FLOOR_HEIGHT;
+export let stageHeight = FLOOR_HEIGHT;
 /**
- * Width of the floor in pixels. Confetti will only fall within this width.
+ * Width of the stage in pixels. Confetti will only fall within this width.
  *
  * @default 1600
  *
@@ -182,7 +182,7 @@ export let floorHeight = FLOOR_HEIGHT;
  * <ConfettiExplosion floorWidth={1000} />
  * ```
  */
-export let floorWidth = FLOOR_WIDTH;
+export let stageWidth = FLOOR_WIDTH;
 /**
  * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
  *
@@ -197,7 +197,11 @@ export let floorWidth = FLOOR_WIDTH;
 export let shouldDestroyAfterDone = true;
 let isVisible = true;
 $: particles = createParticles(particleCount, colors);
-$: isValid = validate(particleCount, duration, colors, particleSize, force, floorHeight, floorWidth);
+// FOR FUN!!!
+$: particleCount > 300 &&
+    console.log("[SVELTE-CONFETTI-EXPLOSION] That's a lot of confetti, you sure about that? A lesser number" +
+        ' like 200 will still give off the party vibes while still not bricking the device 😉');
+$: isValid = validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth);
 onMount(async () => {
     await waitFor(duration);
     if (shouldDestroyAfterDone) {
@@ -206,7 +210,7 @@ onMount(async () => {
 });
 function confettiStyles(node, { degree }) {
     // Get x landing point for it
-    const landingPoint = mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -floorWidth / 2, floorWidth / 2);
+    const landingPoint = mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -stageWidth / 2, stageWidth / 2);
     // Crazy calculations for generating styles
     const rotation = Math.random() * (ROTATION_SPEED_MAX - ROTATION_SPEED_MIN) + ROTATION_SPEED_MIN;
     const rotationIndex = Math.round(Math.random() * (rotationTransforms.length - 1));
@@ -248,7 +252,7 @@ function confettiStyles(node, { degree }) {
 </script>
 
 {#if isVisible && isValid}
-	<div class="container" style="--floor-height: {floorHeight}px;">
+	<div class="container" style="--floor-height: {stageHeight}px;">
 		{#each particles as { color, degree }}
 			<div class="particle" use:confettiStyles={{ degree }}>
 				<div style="--bgcolor: {color};" />
@@ -277,6 +281,7 @@ function confettiStyles(node, { degree }) {
   height: 0;
   overflow: visible;
   position: relative;
+  transform: translate3d(var(--x, 0), var(--y, 0), 0);
   z-index: 1200;
 }
 

package/ConfettiExplosion.svelte.d.ts

@@ -12,6 +12,17 @@ declare const __propDef: {
              * <ConfettiExplosion particleCount={200} />
              * ```
              */ particleCount?: number;
+        /**
+             * Size of the confetti particles in pixels
+             *
+             * @default 12
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion particleSize={20} />
+             * ```
+             */ particleSize?: number;
         /**
              * Duration of the animation in milliseconds
              *
@@ -35,17 +46,6 @@ declare const __propDef: {
              * <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
              * ```
              */ colors?: string[];
-        /**
-             * Size of the confetti particles in pixels
-             *
-             * @default 12
-             *
-             * @example
-             *
-             * ```svelte
-             * <ConfettiExplosion particleSize={20} />
-             * ```
-             */ particleSize?: number;
         /**
              * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
              *
@@ -58,7 +58,7 @@ declare const __propDef: {
              * ```
              */ force?: number;
         /**
-             * Height of the floor in pixels. Confetti will only fall within this height.
+             * Height of the stage in pixels. Confetti will only fall within this height.
              *
              * @default 800
              *
@@ -67,9 +67,9 @@ declare const __propDef: {
              * ```svelte
              * <ConfettiExplosion floorHeight={500} />
              * ```
-             */ floorHeight?: number;
+             */ stageHeight?: number;
         /**
-             * Width of the floor in pixels. Confetti will only fall within this width.
+             * Width of the stage in pixels. Confetti will only fall within this width.
              *
              * @default 1600
              *
@@ -78,7 +78,7 @@ declare const __propDef: {
              * ```svelte
              * <ConfettiExplosion floorWidth={1000} />
              * ```
-             */ floorWidth?: number;
+             */ stageWidth?: number;
         /**
              * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
              *

package/README.md

@@ -1,38 +1,187 @@
-# create-svelte
+# svelte-confetti-explosion
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+Let's party 🎊🎊 with Svelte! svelte-confetti-explosion allows you to show an awesome confetti explosion on your page, with Svelte!
 
-## Creating a project
+> This library is the svelte port of the amazing [@reonomy/react-confetti-explosion](https://www.npmjs.com/package/@reonomy/react-confetti-explosion) package. All the logic is from that package only, optimisation and Svelte code are mine 😉
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Features
+
+- 🤏 Tiny - Less than 2.5KB min+gzip.
+- 🐇 Simple - Quite simple to use, and effectively no-config required!
+- 🧙‍♀️ Elegant - Use a Svelte component rather than setting things up in `onMount` hook.
+- 🗃️ Highly customizable - Offers tons of options that you can modify to get different behaviors.
+- 🖥️ SSR friendly - Works seamlessly in Sveltekit and other Server Side Rendering environments!
+
+[Try it in Svelte REPL](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24?version=3.44.2)
+
+## Installing
 
 ```bash
-# create a new project in the current directory
-npm init svelte@next
+# pnpm
+pnpm add svelte-confetti-explosion
 
-# create a new project in my-app
-npm init svelte@next my-app
+# npm
+npm install svelte-confetti-explosion
+
+# yarn
+yarn add svelte-confetti-explosion
 ```
 
-> Note: the `@next` is temporary
+## Usage
 
-## Developing
+Basic usage:
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+```html
+<script>
+	import { ConfettiExplosion } from 'svelte-confetti-explosion';
+</script>
 
-```bash
-npm run dev
+<ConfettiExplosion />
+```
+
+Customizing behavior with options:
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```svelte
+<ConfettiExplosion particleCount={200} force={0.3} />
 ```
 
-## Building
+## Props
 
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+There's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.
 
-```bash
-npm run build
+### particleCount
+
+Number of confetti particles to create.
+
+**type:** `number`
+
+**Default value:** 150
+
+**Example:**
+
+```svelte
+<ConfettiExplosion particleCount={200} />
+```
+
+### particleSize
+
+Size of the confetti particles in pixels
+
+**type:** `number`
+
+**Default value:** 12
+
+**Example:**
+
+```svelte
+<ConfettiExplosion particleSize={20} />
+```
+
+### duration
+
+Duration of the animation in milliseconds
+
+**type:** `number`
+
+**Default value:** 3500
+
+**Example:**
+
+```svelte
+<ConfettiExplosion duration={5000} />
 ```
 
-> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+### colors
+
+Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.
+
+**type:** `Array<string>`
+
+**Default value:** `['#FFC700', '#FF0000', '#2E3191', '#41BBC7']`
+
+**Example:**
+
+```svelte
+<ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
+```
+
+### force
+
+Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
+
+**type:** `number`
+
+**Default value:** 0.5
+
+**Example:**
+
+```svelte
+<ConfettiExplosion force={0.3} />
+```
+
+### stageHeight
+
+Height of the stage in pixels. Confetti will only fall within this height.
+
+**type:** `number`
+
+**Default value:** 800
+
+**Example:**
+
+```svelte
+<ConfettiExplosion stageHeight={500} />
+```
+
+### stageWidth
+
+Width of the stage in pixels. Confetti will only fall within this width.
+
+**type:** `number`
+
+**Default value:** 1600
+
+**Example:**
+
+```svelte
+<ConfettiExplosion stageWidth={500} />
+```
+
+### shouldDestroyAfterDone
+
+Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to free up memory.
+
+**type:** `boolean`
+
+**Default value:** `true`
+
+**Example:**
+
+```svelte
+<ConfettiExplosion shouldDestroyAfterDone={false} />
+```
+
+## Style Props
+
+You can specify two style props on the component: `--x` and `--y`. These will shift the confetti particles on the x and y axis. by how much you specify, These can be in `px`, `em`, `rem`, `vh`, `vw`, literally any valid CSS unit.
+
+**USAGE:**
+
+```svelte
+<ConfettiExplosion --x="10px" --y="10px" />
+```
+
+## Performance
+
+This library functions by creating 2 DOM nodes for every single confetti. By default, if the `particlesCount` is set to 150, it will create 300 nodes. This is a lot of nodes. For most devices, these many nodes are not a big issue, but I recommend checking your target devices' performance if you choose to go with a higher number, like 400 or 500.
+
+Also, after the specified `duration`, all the confetti DOM nodes will be destroyed. This is to free up memory. If you wish to keep them around, set `shouldDestroyAfterDone` to `false`.
+
+## License
+
+MIT License
+© [Puru Vijay](https://twitter.com/puruvjdev)
+
+```
+
+```

package/package.json

@@ -1,26 +1,34 @@
 {
   "name": "svelte-confetti-explosion",
-  "version": "0.0.4",
-  "devDependencies": {
-    "@sveltejs/kit": "^1.0.0-next.197",
-    "prettier": "^2.4.1",
-    "prettier-plugin-svelte": "^2.5.0",
-    "sass": "^1.43.4",
-    "svelte": "^3.44.2",
-    "svelte-check": "^2.2.10",
-    "svelte-preprocess": "^4.9.8",
-    "svelte2tsx": "^0.4.10",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.2"
+  "version": "0.1.0",
+  "description": "Confetti explosion in Svelte 🎉🎊",
+  "author": "Puru Vijay",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/PuruVJ/svelte-confetti-explosion/issues"
   },
-  "type": "module",
-  "dependencies": {
-    "svelte-confetti-explosion": "0.0.3"
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PuruVJ/svelte-confetti-explosion.git"
   },
+  "svelte": "index.js",
+  "keywords": [
+    "confetti",
+    "party",
+    "fun",
+    "badass",
+    "badassery",
+    "svelte",
+    "sveltekit",
+    "small",
+    "tiny",
+    "performant"
+  ],
+  "type": "module",
   "exports": {
     "./package.json": "./package.json",
     "./ConfettiExplosion.svelte": "./ConfettiExplosion.svelte",
     ".": "./index.js"
-  },
-  "svelte": "./index.js"
+  }
 }