Solid (#22)

* Push

* Delete rogue chaangelog

* Bump

* Update readme

* Bump deps

* Fix

* Add changeset

.changeset/plenty-trainers-lie.md

@@ -0,0 +1,9 @@
+---
+'@neoconfetti/core': patch
+'@neoconfetti/react': patch
+'@neoconfetti/svelte': patch
+'@neoconfetti/vanilla': patch
+'@neoconfetti/vue': patch
+---
+
+Fix particleShape rectangles

README.md

@@ -8,12 +8,13 @@ This is a monorepo containing the following packages:
 - [@neoconfetti/react](https://github.com/PuruVJ/neoconfetti/tree/main/packages/react#readme)
 - [@neoconfetti/vue](https://github.com/PuruVJ/neoconfetti/tree/main/packages/vue#readme)
 - [@neoconfetti/vanilla](https://github.com/PuruVJ/neoconfetti/tree/main/packages/vanilla#readme)
+- [@neoconfetti/solid](https://github.com/PuruVJ/neoconfetti/tree/main/packages/solid#readme)
 
 ## Roadmap
 
 - [x] @neoconfetti/svelte
 - [x] @neoconfetti/react
 - [x] @neoconfetti/vue
 - [x] @neoconfetti/vanilla
-- [ ] @neoconfetti/solid
+- [x] @neoconfetti/solid
 - [ ] @neoconfetti/lit

package.json

@@ -27,17 +27,18 @@
 		"@types/react-dom": "^18.2.18",
 		"brotli-size": "^4.0.0",
 		"brotli-size-cli": "^1.0.0",
-		"esbuild": "^0.19.9",
+		"esbuild": "^0.19.10",
 		"fast-glob": "^3.3.2",
 		"lightningcss": "^1.22.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"solid-js": "^1.8.7",
 		"svelte": "^4.2.8",
 		"terser": "^5.26.0",
 		"tsup": "^8.0.1",
 		"tsx": "^4.7.0",
 		"typescript": "^5.3.3",
-		"vue": "^3.2.47"
+		"vue": "^3.3.13"
 	},
 	"dependencies": {
 		"@changesets/cli": "^2.27.1"

packages/core/demo/package.json

@@ -13,7 +13,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@tsconfig/svelte": "^5.0.2",
 		"svelte": "^4.2.8",
-		"svelte-preprocess": "^5.1.2",
+		"svelte-preprocess": "^5.1.3",
 		"tslib": "^2.4.0",
 		"typescript": "^5.3.3",
 		"vite": "^5.0.10"

packages/core/src/index.ts

@@ -120,7 +120,8 @@ export function confetti(container: HTMLElement, options: ConfettiOptions = {})
 
 	const calc_rotation_transform = () => math_round(random() * (POSSIBLE_ROTATION_TRANSFORMS - 1));
 	const get_is_circle = (particle_shape: ParticleShape, rotation_transform: number) =>
-		particle_shape === 'circles' || should_be_circle(rotation_transform);
+		particleShape !== 'rectangles' &&
+		(particle_shape === 'circles' || should_be_circle(rotation_transform));
 
 	function confetti_styles(node: HTMLElement, degree: number) {
 		// Crazy calculations for generating styles

packages/solid/README.md

@@ -0,0 +1,277 @@
+# @neoconfetti/solid
+
+Let's party 🎊🎊 with Solid! `@neoconfetti/solid` allows you to show an awesome confetti explosion on your page, with SolidJS!
+
+## Features
+
+- 🤏 Tiny - 1.55KB min+br.
+- 🐇 Simple - Quite simple to use, and effectively no-config required!
+- 🧙‍♀️ Elegant - Directive `use:confetti`.
+- 🗃️ Customizable - Offers tons of options that you can modify to get different behaviors.
+- 🖥️ SSR friendly - Works seamlessly in SolidStart!
+
+<!-- [Try it in Svelte REPL](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24) -->
+
+## Installing
+
+```bash
+# pnpm
+pnpm add @neoconfetti/solid
+
+# npm
+npm install @neoconfetti/solid
+
+# yarn
+yarn add @neoconfetti/solid
+```
+
+## Usage
+
+Basic usage:
+
+```tsx
+import { createConfetti } from '@neoconfetti/solid';
+
+function App() {
+	const { confetti } = createConfetti();
+
+	return <div use:confetti />;
+}
+```
+
+Customizing behavior with options:
+
+```tsx
+<div use:confetti={{ particleCount: 200, force: 0.3 }} />
+```
+
+## Props
+
+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.
+
+### particleCount
+
+Number of confetti particles to create.
+
+**type:** `number`
+
+**Default value:** 150
+
+**Example:**
+
+```tsx
+<div use:confetti={{ particleCount: 200 }} />
+```
+
+### particleSize
+
+Size of the confetti particles in pixels
+
+**type:** `number`
+
+**Default value:** 12
+
+**Example:**
+
+```tsx
+<div use:confetti={{ particleSize: 20 }} />
+```
+
+### particleShape
+
+Shape of particles to use. Can be `mix`, `circles` or `rectangles`
+
+`mix` will use both circles and rectangles
+`circles` will use only circles
+`rectangles` will use only rectangles
+
+**type:** `'mix' | 'circles' | 'rectangles'`
+
+**Default value:** `'mix'`
+
+**Example:**
+
+```tsx
+<div use:confetti={{ particleShape: 'circles' }} />
+```
+
+### duration
+
+Duration of the animation in milliseconds
+
+**type:** `number`
+
+**Default value:** 3500
+
+**Example:**
+
+```tsx
+<div use:confetti={{ duration: 5000 }} />
+```
+
+### 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:**
+
+```tsx
+<div use:confetti={{ 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:**
+
+```tsx
+<div use:confetti={{ force: 0.3 }} />
+```
+
+### stageHeight
+
+Height of the stage in pixels. Confetti will only fall within this height.
+
+**type:** `number`
+
+**Default value:** 800
+
+**Example:**
+
+```tsx
+<div use:confetti={{ stageHeight: 500 }} />
+```
+
+### stageWidth
+
+Width of the stage in pixels. Confetti will only fall within this width.
+
+**type:** `number`
+
+**Default value:** 1600
+
+**Example:**
+
+```tsx
+<div use:confetti={{ stageWidth: 500 }} />
+```
+
+### destroyAfterDone
+
+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:**
+
+```tsx
+<div use:confetti={{ destroyAfterDone: false }} />
+```
+
+<!-- ## Examples
+
+[Basic Example](https://svelte.dev/repl/4e41a080739a4427a1f2c98b7f5d4b24?version=3.50.1)
+
+[Confetti where mouse click](https://svelte.dev/repl/dbe0ab06c34f4f25aa6f948fdd1982c7?version=3.50.1) -->
+
+## TypeScript
+
+This library ships with proper TypeScript typings, for the best Developer Experience, whether authoring JS or TS.
+
+However, if you destructure the result of `createConfetti()` to something other than `confetti`, you will get errors.
+If you rename it, like this:
+
+```tsx
+import { createConfetti } from '@neoconfetti/solid';
+
+const { confetti: myCustomConfetti } = createConfetti();
+
+<div use:myCustomConfetti />;
+```
+
+It will give an error
+
+```plaintext
+Property 'use:myCustomConfetti' does not exist on type 'HTMLAttributes<HTMLDivElement>'.
+```
+
+In that case, you have to manually add to your `globals.d.ts` file this snippet:
+
+```ts
+import { ConfettiOptions } from '@neoconfetti/solid';
+import 'solid-js';
+
+declare module 'solid-js' {
+	namespace JSX {
+		interface Directives {
+			myCustomConfetti: ConfettiOptions;
+		}
+	}
+}
+```
+
+## Fine-grained reactivity
+
+Changing the options will destroy the existing confetti mid-flight, and create a new one with the new options. Exception: If `particlesCount` isn't changed, and properties like `colors` or `particleShape` is changed, the confetti particles will change their colors or shape mid-flight.
+
+## 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 `destroyAfterDone` to `false`.
+
+## Future plans
+
+Right now, if you look at the syntax, it looks like this:
+
+```tsx
+import { createConfetti } from '@neoconfetti/solid';
+
+const { confetti } = createConfetti();
+
+<div
+	use:confetti={
+		{
+			/* options */
+		}
+	}
+/>;
+```
+
+If you look closely, the `createConfetti` is completely useless. It could've just been:
+
+```tsx
+import { confetti } from '@neoconfetti/solid';
+
+<div
+	use:confetti={
+		{
+			/* options */
+		}
+	}
+/>;
+```
+
+So why an extra function? Because `use:confetti`, after compiled, is just treated as a string. This means, the typescript compiler/rollup will just remove the import named `confetti` completely, breaking the whole code. Hence a wrapper function is needed.
+
+In future, if SolidJS introduces a mechanism similar to [Svelte's actions](https://svelte.dev/tutorial/actions), I'll be able to get rid of that extra call entirely! So if you find this syntax a little more verbose, bear with me, it might become better :)
+
+## Credits
+
+This library is the port of the amazing [react-confetti-explosion](https://www.npmjs.com/package//react-confetti-explosion) package, just **10X** smaller and faster. All the logic is from that package only, optimisation and Svelte code are mine 😉
+
+## License
+
+MIT License
+© [Puru Vijay](https://twitter.com/puruvjdev)

packages/solid/demo/README.md

@@ -0,0 +1,34 @@
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

packages/solid/demo/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<title>Solid App</title>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+
+		<script src="/src/index.tsx" type="module"></script>
+	</body>
+</html>