@moneybar.online/moneybar 3.9.0 → 4.0.0
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 +49 -19
- package/dist/index.bundle.js +1 -1
- package/dist/index.bundle.js.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +34 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +34 -4
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +2 -0
- package/dist/types.d.ts.map +1 -1
- package/moneybar-config-template.js +3 -0
- package/package.json +1 -1
- package/src/index.ts +32 -4
- package/src/types.ts +3 -0
package/README.md
CHANGED
|
@@ -10,6 +10,27 @@ MoneyBar fixes the 3 critical money-blocking stages that prevent revenue from re
|
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
+
## 🏗️ Architecture Guidelines
|
|
14
|
+
|
|
15
|
+
**Keep your code clean with proper separation:**
|
|
16
|
+
|
|
17
|
+
### ✅ Recommended File Structure
|
|
18
|
+
```
|
|
19
|
+
index.html // Only your custom business functions
|
|
20
|
+
moneybar-config.js // All MoneyBar configuration and setup
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### 🚫 Avoid This
|
|
24
|
+
- Don't mix MoneyBar configuration directly in HTML files
|
|
25
|
+
- Don't put business logic in config files
|
|
26
|
+
- Keep concerns separated for maintainability
|
|
27
|
+
|
|
28
|
+
### 📋 Template Prompt
|
|
29
|
+
When creating MoneyBar projects, follow this structure:
|
|
30
|
+
> "HTML should contain only custom business functions. All MoneyBar configuration, initialization, and attachToButton calls should be in a separate config file."
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
13
34
|
## 🚀 Installation & Usage
|
|
14
35
|
|
|
15
36
|
### Option 1: NPM Install (For projects with bundlers)
|
|
@@ -47,32 +68,19 @@ function generatePDF(userContext) {
|
|
|
47
68
|
```
|
|
48
69
|
|
|
49
70
|
### Option 2: CDN (Recommended for HTML projects)
|
|
71
|
+
|
|
72
|
+
**index.html** (Business logic only):
|
|
50
73
|
```html
|
|
51
74
|
<!DOCTYPE html>
|
|
52
75
|
<html>
|
|
53
76
|
<body>
|
|
54
77
|
<button id="action-btn">Try Action</button>
|
|
55
78
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
const moneyBar = new MoneyBar({
|
|
60
|
-
actionFunction: 'myAction',
|
|
61
|
-
appId: 'my-app',
|
|
62
|
-
freeAttemptLimit: 3,
|
|
63
|
-
supabase: {
|
|
64
|
-
url: 'your-supabase-url',
|
|
65
|
-
anonKey: 'your-anon-key'
|
|
66
|
-
},
|
|
67
|
-
payment: [{
|
|
68
|
-
provider: 'dodo',
|
|
69
|
-
productId: 'your-product-id',
|
|
70
|
-
mode: 'test'
|
|
71
|
-
}]
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
moneyBar.attachToButton('#action-btn', myAction);
|
|
79
|
+
<!-- Include MoneyBar configuration -->
|
|
80
|
+
<script type="module" src="moneybar-config.js"></script>
|
|
75
81
|
|
|
82
|
+
<!-- Your business logic only -->
|
|
83
|
+
<script>
|
|
76
84
|
function myAction(userContext) {
|
|
77
85
|
if (userContext.isPremium) {
|
|
78
86
|
alert('Premium features unlocked!');
|
|
@@ -85,6 +93,28 @@ function generatePDF(userContext) {
|
|
|
85
93
|
</html>
|
|
86
94
|
```
|
|
87
95
|
|
|
96
|
+
**moneybar-config.js** (MoneyBar configuration):
|
|
97
|
+
```javascript
|
|
98
|
+
import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar@latest/dist/index.bundle.js';
|
|
99
|
+
|
|
100
|
+
const moneyBar = new MoneyBar({
|
|
101
|
+
actionFunction: 'myAction',
|
|
102
|
+
appId: 'my-app',
|
|
103
|
+
freeAttemptLimit: 3,
|
|
104
|
+
supabase: {
|
|
105
|
+
url: 'your-supabase-url',
|
|
106
|
+
anonKey: 'your-anon-key'
|
|
107
|
+
},
|
|
108
|
+
payment: [{
|
|
109
|
+
provider: 'dodo',
|
|
110
|
+
productId: 'your-product-id',
|
|
111
|
+
mode: 'test'
|
|
112
|
+
}]
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
moneyBar.attachToButton('#action-btn', myAction);
|
|
116
|
+
```
|
|
117
|
+
|
|
88
118
|
### Quick Start Template
|
|
89
119
|
Copy `moneybar-config-template.js` and `example-template.html` from this package for a ready-to-use template.
|
|
90
120
|
|