v2 (#13)

* Push

* Add changeset

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/four-lizards-fly.md

@@ -0,0 +1,8 @@
+---
+'@neoconfetti/core': major
+---
+
+- Remove runtime validation. Rely on TypeScript's checking
+- BREAKING: Use `translate` and `rotate` CSS properties instead of transform.
+- Size reduction of 300bytes. Now 1.36kb min_brotli
+- By defauly ships unminified build. To use minified build, use dist/min/index.js

.changeset/shiny-oranges-film.md

@@ -0,0 +1,8 @@
+---
+'@neoconfetti/svelte': major
+---
+
+- Remove runtime validation. Rely on TypeScript's checking
+- BREAKING: Use `translate` and `rotate` CSS properties instead of transform.
+- Size reduction of 300bytes. Now 1.36kb min_brotli
+- By defauly ships unminified build. To use minified build, use dist/min/index.js

.github/workflows/release.yml

@@ -0,0 +1,52 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+permissions: {}
+jobs:
+  release:
+    # prevents this action from running on forks
+    if: github.repository == 'puruvj/neoconfetti'
+    permissions:
+      contents: write # to create release (changesets/action)
+      pull-requests: write # to create pull request (changesets/action)
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+      - uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 8
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Package
+        run: pnpm package
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: pnpm ci:release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      # TODO alert discord
+      # - name: Send a Slack notification if a publish happens
+      #   if: steps.changesets.outputs.published == 'true'
+      #   # You can do something when a publish happens.
+      #   run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"

package.json

@@ -1,10 +1,12 @@
 {
-	"name": "svelte-confetti-explosion",
+	"name": "neoconfetti",
 	"version": "1.0.0",
 	"description": "",
 	"main": "index.js",
 	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
+		"changeset": "changeset",
+		"ci:version": "changeset version",
+		"ci:release": "changeset publish"
 	},
 	"repository": {
 		"type": "git",
@@ -18,17 +20,19 @@
 	},
 	"homepage": "https://github.com/puruvj/neoconfetti#readme",
 	"devDependencies": {
-		"@rollup/plugin-node-resolve": "^14.1.0",
-		"@rollup/pluginutils": "^4.2.1",
-		"@types/node": "^18.7.18",
+		"@rollup/pluginutils": "^5.1.0",
+		"@types/node": "^20.10.5",
+		"brotli-size": "^4.0.0",
 		"brotli-size-cli": "^1.0.0",
-		"esbuild": "^0.15.8",
-		"lightningcss": "^1.15.1",
-		"rollup": "^2.79.0",
-		"rollup-plugin-dts": "^4.2.2",
-		"rollup-plugin-esbuild": "^4.10.1",
-		"rollup-plugin-terser": "^7.0.2",
-		"svelte": "^3.50.1",
-		"typescript": "^4.8.3"
+		"bun-types": "^1.0.18",
+		"esbuild": "^0.19.9",
+		"lightningcss": "^1.22.1",
+		"svelte": "^4.2.8",
+		"terser": "^5.26.0",
+		"tsup": "^8.0.1",
+		"typescript": "^5.3.3"
+	},
+	"dependencies": {
+		"@changesets/cli": "^2.27.1"
 	}
 }

packages/config/index.ts

@@ -0,0 +1,85 @@
+import { dataToEsm } from '@rollup/pluginutils';
+import { Plugin } from 'esbuild';
+import { transform } from 'lightningcss';
+import fs from 'node:fs';
+import { resolve } from 'node:path';
+import { defineConfig } from 'tsup';
+
+export const coreConfig = ({ dtsBanner }: { dtsBanner: string } = { dtsBanner: '' }) =>
+	defineConfig([
+		{
+			entry: ['./src/index.ts'],
+			format: 'esm',
+			external: ['vue', 'react', 'solid-js', 'svelte'],
+			target: 'es2022',
+			dts: { resolve: true, banner: dtsBanner },
+			clean: true,
+			treeshake: 'smallest',
+			esbuildPlugins: [processCSS()],
+		},
+		{
+			entry: ['./src/index.ts'],
+			minify: 'terser',
+			external: ['vue', 'react', 'solid-js', 'svelte'],
+			format: 'esm',
+			target: 'es2022',
+			clean: true,
+			outDir: 'dist/min',
+			treeshake: 'smallest',
+			esbuildPlugins: [processCSS()],
+		},
+	]);
+
+const processCSS: () => Plugin = () => {
+	const idMap: Map<string, import('lightningcss').TransformResult> = new Map();
+
+	return {
+		name: 'process-css',
+		setup(build) {
+			build.onResolve({ filter: /\.module.css/ }, (args) => {
+				return {
+					path: resolve(args.resolveDir, args.path),
+					namespace: 'process-css',
+					pluginData: {
+						isInline: args.path.includes('?inline'),
+						isMap: args.path.includes('?map'),
+					},
+				};
+			});
+
+			build.onLoad({ filter: /.*/, namespace: 'process-css' }, async (args) => {
+				const filePath = args.path.replace(/\?.*$/, '');
+				const isInline = !!args.pluginData.isInline;
+
+				if (!idMap.has(filePath)) {
+					// Run CSS parser
+					const cssContents = fs.readFileSync(filePath);
+
+					const result = transform({
+						filename: args.path.split('/').pop() || 'style.module.css',
+						code: cssContents,
+						minify: true,
+						cssModules: true,
+					});
+
+					idMap.set(filePath, result);
+				}
+
+				const { code = '', exports } = idMap.get(filePath) ?? {};
+
+				if (isInline) return { contents: `export default ${JSON.stringify(code.toString())}` };
+
+				if (!exports) return;
+
+				const cssModulesExports = Object.entries(exports).reduce((acc, [ogSelector, { name }]) => {
+					acc[ogSelector] = name;
+					return acc;
+				}, {});
+
+				return {
+					contents: dataToEsm(cssModulesExports, { namedExports: true, preferConst: true }),
+				};
+			});
+		},
+	};
+};

packages/core/demo/package.json

@@ -10,13 +10,12 @@
 	},
 	"devDependencies": {
 		"@neoconfetti/core": "workspace:*",
-		"@sveltejs/vite-plugin-svelte": "^1.0.2",
-		"@tsconfig/svelte": "^3.0.0",
-		"svelte": "^3.49.0",
-		"svelte-confetti-explosion": "0.4.0",
-		"svelte-preprocess": "^4.10.7",
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@tsconfig/svelte": "^5.0.2",
+		"svelte": "^4.2.8",
+		"svelte-preprocess": "^5.1.2",
 		"tslib": "^2.4.0",
-		"typescript": "^4.6.4",
-		"vite": "^3.1.0"
+		"typescript": "^5.3.3",
+		"vite": "^5.0.10"
 	}
 }

packages/core/package.json

@@ -12,17 +12,21 @@
 	"sideEffects": false,
 	"exports": {
 		".": {
-			"import": "./dist/index.js",
-			"module": "./dist/index.js"
+			"types": "./dist/index.d.ts",
+			"import": {
+				"production": "./dist/index.js",
+				"development": "./dist/index.js"
+			},
+			"default": "./dist/index.js"
 		},
 		"./package.json": "./package.json"
 	},
 	"scripts": {
-		"dev": "rollup -cw",
-		"build": "rollup -c",
-		"size": "brotli-size dist/index.js"
+		"compile:watch": "tsup --watch",
+		"compile": "tsup",
+		"size": "brotli-size dist/min/index.js"
 	},
-	"description": "Let's party 🎊🎊 with Svelte! svelte-confetti-explosion allows you to show an awesome confetti explosion on your page, with Svelte!",
+	"description": "Let's party 🎊🎊 with Svelte! @neodrag/core allows you to show an awesome confetti explosion on your page, with Svelte!",
 	"keywords": [],
 	"author": "Puru Vijay",
 	"license": "MIT"

packages/core/src/global.d.ts

@@ -1,6 +1,7 @@
-declare module '*.module.css' {
-	const mapping: { [key: string]: string };
-	export default mapping;
+declare module '*.module.css?map' {
+	const container: string;
+	const particle: string;
+	export { container, particle };
 }
 
 declare module '*?inline' {