@ravishranjan/cart 2.1.5 → 2.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,199 +1,203 @@
1
- # @ravishranjan/cart
2
-
3
- A **lightweight, native frontend cart system** with optional **React hooks**.
4
-
5
- - 🧠 Works in **any JavaScript framework** — Vanilla JS, React, Vue, Svelte, etc.
6
- - ⚛️ Includes **React hooks** and `<CartProvider>` for easy React integration.
7
- - 💾 Uses **localStorage** or **sessionStorage** for persistence.
8
- - 🔌 Works both via **npm install** and **CDN** — no backend required.
9
-
10
- ---
11
-
12
- ## 📦 Installation
13
-
14
- ### Option 1 — NPM
15
-
16
- ```bash
17
- npm install @ravishranjan/cart
18
- ```
19
-
20
- ### Option 2 — CDN (no install)
21
-
22
- Use directly in your webpage:
23
-
24
- ```html
25
- <script src="https://cdn.jsdelivr.net/npm/@ravishranjan/cart/dist/cart.min.js"></script>
26
- ```
27
- ---
28
- ## Cart item type
29
- ```ts
30
- interface CartItem {
31
- id: string | number;
32
- name: string;
33
- price?: number;
34
- quantity?: number;
35
- category?: string;
36
- [key: string]: any;
37
- }
38
- ```
39
-
40
- ---
41
- ## 🧩 Usage Examples
42
-
43
- ### **1️⃣ Basic JavaScript (no framework)**
44
-
45
- ```html
46
- <script src="https://cdn.jsdelivr.net/npm/@ravishranjan/cart/dist/cart.min.js"></script>
47
- <script>
48
- const cart = new Cart({ storage: "localStorage" });
49
-
50
- cart.addItem({ id: 1, name: "Apple", price: 30, quantity: 2 });
51
- cart.addItem({ id: 2, name: "Orange", price: 25 });
52
-
53
- cart.removeItem(2);
54
-
55
- console.log("Total price:", cart.getTotal());
56
- console.log(cart.getItems());
57
-
58
- cart.clear();
59
- </script>
60
- ```
61
-
62
- ---
63
-
64
- ### **2️⃣ Node or Framework Projects (NPM install)**
65
-
66
- ```js
67
- import Cart from "@ravishranjan/cart";
68
-
69
- const cart = new Cart({ storage: "localStorage" });
70
-
71
- cart.addItem({ id: 101, name: "Book", price: 199 });
72
- cart.addItem({ id: 102, name: "Pen", price: 49, quantity: 2 });
73
-
74
- console.log(cart.getItems());
75
- console.log("Total Price:", cart.getTotal());
76
- ```
77
-
78
- **Available methods:**
79
- | Method | Description | Example |
80
- |---------|--------------|----------|
81
- | `addItem(item)` | Adds an item object | `cart.addItem({ id: 1, name: 'Apple', quantity: 2 })` |
82
- | `removeItem(id)` | Removes an item by id | `cart.removeItem(1)` |
83
- | `getItems()` | Returns all items | `cart.getItems()` |
84
- | `getItems(category)` | Returns items by given catefory | `cart.getItems("<category>")` |
85
- | `getTotal()` | Sum of all item prices × qty | `cart.getTotal()` |
86
- | `clear()` | Clears the entire cart | `cart.clear()` |
87
-
88
- ---
89
-
90
- ### **3️⃣ React Usage (with hooks + context)**
91
-
92
- #### Setup the Provider
93
-
94
- ```tsx
95
- import React from "react";
96
- import { CartProvider } from "@ravishranjan/cart/react";
97
-
98
- import App from "./App";
99
-
100
- export default function Root() {
101
- return (
102
- <CartProvider storage="localStorage">
103
- <App />
104
- </CartProvider>
105
- );
106
- }
107
- ```
108
-
109
- #### Use the Hook
110
-
111
- ```tsx
112
- import { useCart } from "@ravishranjan/cart/react";
113
-
114
- export default function Shop() {
115
- const { items, addItem, removeItem, getTotal, clear } = useCart();
116
-
117
- return (
118
- <div>
119
- <button
120
- onClick={() => addItem({ id: 1, name: "Apple", price: 30 })}
121
- >
122
- Add Apple
123
- </button>
124
- <button onClick={() => clear()}>Clear Cart</button>
125
-
126
- <ul>
127
- {items.map((item) => (
128
- <li key={item.id}>
129
- {item.name} - ₹{item.price}
130
- <button onClick={() => removeItem(item.id)}>❌</button>
131
- </li>
132
- ))}
133
- </ul>
134
-
135
- <h3>Total: ₹{getTotal()}</h3>
136
- </div>
137
- );
138
- }
139
- ```
140
-
141
- ---
142
-
143
- ## ⚙️ Storage Options
144
-
145
- | Option | Description |
146
- | ----------- | -------------------------------------------------------- |
147
- | `"localStorage"` | Persists cart across browser sessions (via localStorage) |
148
- | `"sessionStorage"` | Clears cart when the tab is closed (via sessionStorage) |
149
-
150
- Usage:
151
-
152
- ```js
153
- const cart = new Cart({ storage: "sessionStorage" });
154
- ```
155
-
156
- or in React:
157
-
158
- ```tsx
159
- <CartProvider storage="sessionStorage">
160
- <App />
161
- </CartProvider>
162
- ```
163
-
164
- ---
165
-
166
- ## 🌍 CDN Quick Demo
167
-
168
- ```html
169
- <!DOCTYPE html>
170
- <html>
171
- <head>
172
- <title>Cart Demo</title>
173
- </head>
174
- <body>
175
- <script src="https://cdn.jsdelivr.net/npm/@ravishranjan/cart/dist/cart.min.js"></script>
176
- <script>
177
- const cart = new Cart();
178
- cart.addItem({ id: 1, name: "Coffee", price: 120 });
179
- console.log(cart.getTotal()); // 120
180
- </script>
181
- </body>
182
- </html>
183
- ```
184
-
185
- ---
186
-
187
- ## 🧱 API Summary
188
-
189
- | API | Type | Description |
190
- | -------------- | --------------- | ------------------------------- |
191
- | `Cart` | Class | Core cart logic |
192
- | `CartProvider` | React Component | Context provider for cart state |
193
- | `useCart()` | React Hook | Access cart in React components |
194
-
195
- ---
196
-
197
- ## 🧾 License
198
-
199
- ISC © [Ravish Ranjan](https://npmjs.com/~ravishranjan)
1
+ # @ravishranjan/cart
2
+
3
+ A **lightweight, native frontend cart system** with optional **React hooks**.
4
+
5
+ - Works in **any JavaScript framework** — Vanilla JS, React, Vue, Svelte, etc.
6
+ - Includes **React hooks** and `<CartProvider>` for easy React integration.
7
+ - Uses **localStorage** or **sessionStorage** for persistence.
8
+ - Works both via **npm install** and **CDN** — no backend required.
9
+
10
+ ---
11
+
12
+ ## Installation
13
+
14
+ ### Option 1 — NPM
15
+
16
+ ```bash
17
+ npm install @ravishranjan/cart
18
+ ```
19
+
20
+ ### Option 2 — CDN (no install)
21
+
22
+ Use directly in your webpage:
23
+
24
+ ```html
25
+ <script src="https://cdn.jsdelivr.net/npm/@ravishranjan/cart/dist/cart.min.js"></script>
26
+ ```
27
+
28
+ ---
29
+
30
+ ## Cart item type
31
+
32
+ ```ts
33
+ interface CartItem {
34
+ id: string | number;
35
+ name: string;
36
+ price?: number;
37
+ quantity?: number;
38
+ category?: string;
39
+ [key: string]: any;
40
+ }
41
+ ```
42
+
43
+ ---
44
+
45
+ ## Usage Examples
46
+
47
+ ### **Basic JavaScript (no framework)**
48
+
49
+ ```html
50
+ <script src="https://cdn.jsdelivr.net/npm/@ravishranjan/cart/dist/cart.min.js"></script>
51
+ <script>
52
+ const cart = new Cart({ storage: "localStorage" });
53
+
54
+ cart.addItem({ id: 1, name: "Apple", price: 30, quantity: 2 });
55
+ cart.addItem({ id: 2, name: "Orange", price: 25 });
56
+
57
+ cart.removeItem(2);
58
+
59
+ console.log("Total price:", cart.getTotal());
60
+ console.log(cart.getItems());
61
+
62
+ cart.clear();
63
+ </script>
64
+ ```
65
+
66
+ ---
67
+
68
+ ### **Node or Framework Projects (NPM install)**
69
+
70
+ ```js
71
+ import Cart from "@ravishranjan/cart";
72
+
73
+ const cart = new Cart({ storage: "localStorage" });
74
+
75
+ cart.addItem({ id: 101, name: "Book", price: 199 });
76
+ cart.addItem({ id: 102, name: "Pen", price: 49, quantity: 2 });
77
+
78
+ console.log(cart.getItems());
79
+ console.log("Total Price:", cart.getTotal());
80
+ ```
81
+
82
+ **Available methods:**
83
+ | Method | Description | Example |
84
+ |---------|--------------|----------|
85
+ | `addItem(item)` | Adds an item object | `cart.addItem({ id: 1, name: 'Apple', quantity: 2 })` |
86
+ | `removeItem(id)` | Removes an item by id | `cart.removeItem(1)` |
87
+ | `getItems()` | Returns all items | `cart.getItems()` |
88
+ | `getItems(category)` | Returns items by given catefory | `cart.getItems("<category>")` |
89
+ | `getTotal()` | Sum of all item prices × qty | `cart.getTotal()` |
90
+ | `clear()` | Clears the entire cart | `cart.clear()` |
91
+
92
+ ---
93
+
94
+ ### **React Usage (with hooks + context)**
95
+
96
+ #### Setup the Provider
97
+
98
+ ```tsx
99
+ import React from "react";
100
+ import { CartProvider } from "@ravishranjan/cart/react";
101
+
102
+ import App from "./App";
103
+
104
+ export default function Root() {
105
+ return (
106
+ <CartProvider storage="localStorage">
107
+ <App />
108
+ </CartProvider>
109
+ );
110
+ }
111
+ ```
112
+
113
+ #### Use the Hook
114
+
115
+ ```tsx
116
+ import { useCart } from "@ravishranjan/cart/react";
117
+
118
+ export default function Shop() {
119
+ const { items, addItem, removeItem, getTotal, clear } = useCart();
120
+
121
+ return (
122
+ <div>
123
+ <button
124
+ onClick={() => addItem({ id: 1, name: "Apple", price: 30 })}
125
+ >
126
+ Add Apple
127
+ </button>
128
+ <button onClick={() => clear()}>Clear Cart</button>
129
+
130
+ <ul>
131
+ {items.map((item) => (
132
+ <li key={item.id}>
133
+ {item.name} - ₹{item.price}
134
+ <button onClick={() => removeItem(item.id)}>X</button>
135
+ </li>
136
+ ))}
137
+ </ul>
138
+
139
+ <h3>Total: ₹{getTotal()}</h3>
140
+ </div>
141
+ );
142
+ }
143
+ ```
144
+
145
+ ---
146
+
147
+ ## Storage Options
148
+
149
+ | Option | Description |
150
+ | ------------------ | -------------------------------------------------------- |
151
+ | `"localStorage"` | Persists cart across browser sessions (via localStorage) |
152
+ | `"sessionStorage"` | Clears cart when the tab is closed (via sessionStorage) |
153
+
154
+ Usage:
155
+
156
+ ```js
157
+ const cart = new Cart({ storage: "sessionStorage" });
158
+ ```
159
+
160
+ or in React:
161
+
162
+ ```tsx
163
+ <CartProvider storage="sessionStorage">
164
+ <App />
165
+ </CartProvider>
166
+ ```
167
+
168
+ ---
169
+
170
+ ## CDN Quick Demo
171
+
172
+ ```html
173
+ <!DOCTYPE html>
174
+ <html>
175
+ <head>
176
+ <title>Cart Demo</title>
177
+ </head>
178
+ <body>
179
+ <script src="https://cdn.jsdelivr.net/npm/@ravishranjan/cart/dist/cart.min.js"></script>
180
+ <script>
181
+ const cart = new Cart();
182
+ cart.addItem({ id: 1, name: "Coffee", price: 120 });
183
+ console.log(cart.getTotal()); // 120
184
+ </script>
185
+ </body>
186
+ </html>
187
+ ```
188
+
189
+ ---
190
+
191
+ ## API Summary
192
+
193
+ | API | Type | Description |
194
+ | -------------- | --------------- | ------------------------------- |
195
+ | `Cart` | Class | Core cart logic |
196
+ | `CartProvider` | React Component | Context provider for cart state |
197
+ | `useCart()` | React Hook | Access cart in React components |
198
+
199
+ ---
200
+
201
+ ## License
202
+
203
+ ISC © [Ravish Ranjan](https://npmjs.com/~ravishranjan)
package/package.json CHANGED
@@ -1,62 +1,62 @@
1
- {
2
- "name": "@ravishranjan/cart",
3
- "version": "2.1.5",
4
- "description": "A native cart system for web apps with optional React hooks",
5
- "main": "dist/index.js",
6
- "module": "dist/index.mjs",
7
- "types": "dist/types.d.ts",
8
- "files": [
9
- "dist"
10
- ],
11
- "scripts": {
12
- "build": "tsup src --format esm,cjs --dts",
13
- "dev": "tsup src --watch",
14
- "build:cdn": "esbuild src/core/cart.global.ts --bundle --minify --format=iife --global-name=Cart --platform=browser --outfile=dist/cart.min.js",
15
- "prepare": "npm run build && npm run build:cdn"
16
- },
17
- "keywords": [
18
- "cart",
19
- "react",
20
- "localstorage",
21
- "frontend",
22
- "native",
23
- "cdn"
24
- ],
25
- "exports": {
26
- ".": {
27
- "types": "./dist/index.d.ts",
28
- "import": "./dist/index.mjs",
29
- "require": "./dist/index.js"
30
- },
31
- "./react": {
32
- "types": "./dist/react/index.d.ts",
33
- "import": "./dist/react/index.mjs",
34
- "require": "./dist/react/index.js"
35
- }
36
- },
37
- "unpkg": "dist/cart.min.js",
38
- "jsdelivr": "dist/cart.min.js",
39
- "author": "Ravish Ranjan",
40
- "license": "ISC",
41
- "devDependencies": {
42
- "@types/react": "^19.2.2",
43
- "esbuild": "^0.25.10",
44
- "tsup": "^8.5.0",
45
- "typescript": "^5.9.3"
46
- },
47
- "peerDependencies": {
48
- "react": ">=18.0.0 <20.0.0",
49
- "react-dom": ">=18.0.0 <20.0.0"
50
- },
51
- "peerDependenciesMeta": {
52
- "react": {
53
- "optional": true
54
- },
55
- "react-dom": {
56
- "optional": true
57
- },
58
- "typescript": {
59
- "optional": true
60
- }
61
- }
62
- }
1
+ {
2
+ "name": "@ravishranjan/cart",
3
+ "version": "2.1.6",
4
+ "description": "A native cart system for web apps with optional React hooks",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/types.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "scripts": {
12
+ "build": "tsup src --format esm,cjs --dts",
13
+ "dev": "tsup src --watch",
14
+ "build:cdn": "esbuild src/core/cart.global.ts --bundle --minify --format=iife --global-name=Cart --platform=browser --outfile=dist/cart.min.js",
15
+ "prepare": "npm run build && npm run build:cdn"
16
+ },
17
+ "keywords": [
18
+ "cart",
19
+ "react",
20
+ "localstorage",
21
+ "frontend",
22
+ "native",
23
+ "cdn"
24
+ ],
25
+ "exports": {
26
+ ".": {
27
+ "types": "./dist/index.d.ts",
28
+ "import": "./dist/index.mjs",
29
+ "require": "./dist/index.js"
30
+ },
31
+ "./react": {
32
+ "types": "./dist/react/index.d.ts",
33
+ "import": "./dist/react/index.mjs",
34
+ "require": "./dist/react/index.js"
35
+ }
36
+ },
37
+ "unpkg": "dist/cart.min.js",
38
+ "jsdelivr": "dist/cart.min.js",
39
+ "author": "Ravish Ranjan",
40
+ "license": "ISC",
41
+ "devDependencies": {
42
+ "@types/react": "^19.2.2",
43
+ "esbuild": "^0.25.10",
44
+ "tsup": "^8.5.0",
45
+ "typescript": "^5.9.3"
46
+ },
47
+ "peerDependencies": {
48
+ "react": ">=18.0.0 <20.0.0",
49
+ "react-dom": ">=18.0.0 <20.0.0"
50
+ },
51
+ "peerDependenciesMeta": {
52
+ "react": {
53
+ "optional": true
54
+ },
55
+ "react-dom": {
56
+ "optional": true
57
+ },
58
+ "typescript": {
59
+ "optional": true
60
+ }
61
+ }
62
+ }
@@ -1,9 +0,0 @@
1
- // src/core/storage.ts
2
- function getStorage(type) {
3
- if (typeof window == "undefined") throw new Error("No window object found");
4
- return type == "localStorage" ? window.localStorage : window.sessionStorage;
5
- }
6
-
7
- export {
8
- getStorage
9
- };
@@ -1,15 +0,0 @@
1
- import {
2
- CartContext
3
- } from "./chunk-RBWMJEAD.mjs";
4
-
5
- // src/react/useCart.tsx
6
- import { useContext } from "react";
7
- function useCart() {
8
- const context = useContext(CartContext);
9
- if (!context) throw new Error("useCart must be used within CartProvider");
10
- return context;
11
- }
12
-
13
- export {
14
- useCart
15
- };
@@ -1,47 +0,0 @@
1
- import {
2
- Cart
3
- } from "./chunk-ZA6BU4XH.mjs";
4
-
5
- // src/react/CartContext.tsx
6
- import { createContext, useEffect, useState } from "react";
7
- import { jsx } from "react/jsx-runtime";
8
- var CartContext = createContext(null);
9
- var CartProvider = ({
10
- children,
11
- storage = "localStorage",
12
- key = "cart"
13
- }) => {
14
- const cartInstance = new Cart({ key, storage });
15
- const [items, setItems] = useState(cartInstance.getItems());
16
- const sync = () => setItems(cartInstance.getItems());
17
- const api = {
18
- cart: items,
19
- addItem: (item) => {
20
- cartInstance.addItem(item);
21
- sync();
22
- },
23
- removeItem: (id) => {
24
- cartInstance.removeItem(id);
25
- sync();
26
- },
27
- getItems: (category) => {
28
- cartInstance.getItems(category);
29
- },
30
- clear: () => {
31
- cartInstance.clear();
32
- sync();
33
- },
34
- total: cartInstance.getTotal()
35
- };
36
- useEffect(() => {
37
- const handleSync = () => sync();
38
- window.addEventListener("storage", handleSync);
39
- return () => window.removeEventListener("storage", handleSync);
40
- }, []);
41
- return /* @__PURE__ */ jsx(CartContext.Provider, { value: api, children });
42
- };
43
-
44
- export {
45
- CartContext,
46
- CartProvider
47
- };
@@ -1,15 +0,0 @@
1
- import {
2
- CartContext
3
- } from "./chunk-XPRNR6EK.mjs";
4
-
5
- // src/react/useCart.tsx
6
- import { useContext } from "react";
7
- function useCart() {
8
- const context = useContext(CartContext);
9
- if (!context) throw new Error("useCart must be used within CartProvider");
10
- return context;
11
- }
12
-
13
- export {
14
- useCart
15
- };
@@ -1,53 +0,0 @@
1
- import {
2
- getStorage
3
- } from "./chunk-7RBGBF5M.mjs";
4
-
5
- // src/core/cart.ts
6
- var Cart = class {
7
- constructor({
8
- storage = "localStorage",
9
- key = "cart"
10
- } = {}) {
11
- this.storage = getStorage(storage);
12
- this.key = key;
13
- }
14
- getCart() {
15
- const data = this.storage.getItem(this.key);
16
- return data ? JSON.parse(data) : [];
17
- }
18
- save(cart) {
19
- this.storage.setItem(this.key, JSON.stringify(cart));
20
- }
21
- addItem(newItem) {
22
- const cart = this.getCart();
23
- const exists = cart.find((item) => item.id === newItem.id);
24
- if (exists)
25
- exists.quantity = (exists.quantity || 1) + (newItem.quantity || 1);
26
- else cart.push({ ...newItem, quantity: newItem.quantity || 1 });
27
- this.save(cart);
28
- }
29
- removeItem(id) {
30
- this.save(this.getCart().filter((item) => item.id !== id));
31
- }
32
- clear() {
33
- this.save([]);
34
- }
35
- getItems(category) {
36
- const items = this.getCart();
37
- return category ? items.filter((item) => item.category === category) : items;
38
- }
39
- getTotal(category) {
40
- let items = this.getCart();
41
- if (category) {
42
- items = items.filter((item) => item.category === category);
43
- }
44
- return items.reduce(
45
- (sum, item) => sum + (item.price || 0) * (item.quantity || 1),
46
- 0
47
- );
48
- }
49
- };
50
-
51
- export {
52
- Cart
53
- };
@@ -1,47 +0,0 @@
1
- import {
2
- Cart
3
- } from "./chunk-TVKKRH3O.mjs";
4
-
5
- // src/react/CartContext.tsx
6
- import { createContext, useEffect, useState } from "react";
7
- import { jsx } from "react/jsx-runtime";
8
- var CartContext = createContext(null);
9
- var CartProvider = ({
10
- children,
11
- storage = "localStorage",
12
- key = "cart"
13
- }) => {
14
- const cartInstance = new Cart({ key, storage });
15
- const [items, setItems] = useState(cartInstance.getItems());
16
- const sync = () => setItems(cartInstance.getItems());
17
- const api = {
18
- cart: items,
19
- addItem: (item) => {
20
- cartInstance.addItem(item);
21
- sync();
22
- },
23
- removeItem: (id) => {
24
- cartInstance.removeItem(id);
25
- sync();
26
- },
27
- getItems: (category) => {
28
- cartInstance.getItems(category);
29
- },
30
- clear: () => {
31
- cartInstance.clear();
32
- sync();
33
- },
34
- total: cartInstance.getTotal()
35
- };
36
- useEffect(() => {
37
- const handleSync = () => sync();
38
- window.addEventListener("storage", handleSync);
39
- return () => window.removeEventListener("storage", handleSync);
40
- }, []);
41
- return /* @__PURE__ */ jsx(CartContext.Provider, { value: api, children });
42
- };
43
-
44
- export {
45
- CartContext,
46
- CartProvider
47
- };
@@ -1,55 +0,0 @@
1
- import {
2
- getStorage
3
- } from "./chunk-7RBGBF5M.mjs";
4
-
5
- // src/core/cart.ts
6
- var Cart = class {
7
- constructor({
8
- storage = "localStorage",
9
- key = "cart"
10
- } = {}) {
11
- this.storage = getStorage(storage);
12
- this.key = key;
13
- }
14
- getCart() {
15
- const data = this.storage.getItem(this.key);
16
- return data ? JSON.parse(data) : [];
17
- }
18
- save(cart) {
19
- this.storage.setItem(this.key, JSON.stringify(cart));
20
- }
21
- addItem(newItem) {
22
- const cart = this.getCart();
23
- const exists = cart.find((item) => item.id === newItem.id);
24
- if (exists)
25
- exists.quantity = (exists.quantity || 1) + (newItem.quantity || 1);
26
- else cart.push({ ...newItem, quantity: newItem.quantity || 1 });
27
- this.save(cart);
28
- }
29
- removeItem(id) {
30
- this.save(this.getCart().filter((item) => item.id !== id));
31
- }
32
- clear() {
33
- this.save([]);
34
- }
35
- getItems(category) {
36
- const items = this.getCart();
37
- return category ? items.filter((item) => item.category === category) : items;
38
- }
39
- getTotal(category) {
40
- let items = this.getCart();
41
- if (category) {
42
- items = items.filter((item) => item.category === category);
43
- }
44
- return items.reduce(
45
- (sum, item) => sum + (item.price || 0) * (item.quantity || 1),
46
- 0
47
- );
48
- }
49
- };
50
- var cart_default = Cart;
51
-
52
- export {
53
- Cart,
54
- cart_default
55
- };