@moneybar.online/moneybar 3.8.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 +48 -99
- 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)
|
|
@@ -21,7 +42,7 @@ npm install @moneybar.online/moneybar
|
|
|
21
42
|
import { MoneyBar } from '@moneybar.online/moneybar';
|
|
22
43
|
|
|
23
44
|
const moneyBar = new MoneyBar({
|
|
24
|
-
actionFunction: 'generatePDF',
|
|
45
|
+
actionFunction: 'generatePDF',
|
|
25
46
|
appId: 'my-pdf-app',
|
|
26
47
|
freeAttemptLimit: 3,
|
|
27
48
|
supabase: {
|
|
@@ -35,14 +56,8 @@ const moneyBar = new MoneyBar({
|
|
|
35
56
|
}]
|
|
36
57
|
});
|
|
37
58
|
|
|
38
|
-
moneyBar.attachToButton('#action-btn',
|
|
39
|
-
// Call the specified action function
|
|
40
|
-
if (typeof window[moneyBar.config.actionFunction] === 'function') {
|
|
41
|
-
window[moneyBar.config.actionFunction](userContext);
|
|
42
|
-
}
|
|
43
|
-
});
|
|
59
|
+
moneyBar.attachToButton('#action-btn', generatePDF);
|
|
44
60
|
|
|
45
|
-
// Define the function specified in actionFunction
|
|
46
61
|
function generatePDF(userContext) {
|
|
47
62
|
if (userContext.isPremium) {
|
|
48
63
|
alert('Premium PDF generated with all features!');
|
|
@@ -52,47 +67,20 @@ function generatePDF(userContext) {
|
|
|
52
67
|
}
|
|
53
68
|
```
|
|
54
69
|
|
|
55
|
-
### Option 2: CDN
|
|
70
|
+
### Option 2: CDN (Recommended for HTML projects)
|
|
71
|
+
|
|
72
|
+
**index.html** (Business logic only):
|
|
56
73
|
```html
|
|
57
74
|
<!DOCTYPE html>
|
|
58
75
|
<html>
|
|
59
76
|
<body>
|
|
60
77
|
<button id="action-btn">Try Action</button>
|
|
61
78
|
|
|
62
|
-
<!--
|
|
63
|
-
<script type="
|
|
64
|
-
{
|
|
65
|
-
"imports": {
|
|
66
|
-
"@supabase/supabase-js": "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm"
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
</script>
|
|
79
|
+
<!-- Include MoneyBar configuration -->
|
|
80
|
+
<script type="module" src="moneybar-config.js"></script>
|
|
70
81
|
|
|
71
|
-
<!--
|
|
72
|
-
<script
|
|
73
|
-
import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.browser.js';
|
|
74
|
-
|
|
75
|
-
const moneyBar = new MoneyBar({
|
|
76
|
-
actionFunction: 'myAction', // Function name that gets called
|
|
77
|
-
appId: 'my-app',
|
|
78
|
-
freeAttemptLimit: 3,
|
|
79
|
-
supabase: {
|
|
80
|
-
url: 'your-supabase-url',
|
|
81
|
-
anonKey: 'your-anon-key'
|
|
82
|
-
},
|
|
83
|
-
payment: {
|
|
84
|
-
productId: 'your-product-id'
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
moneyBar.attachToButton('#action-btn', (userContext) => {
|
|
89
|
-
// Call the specified action function
|
|
90
|
-
if (typeof window[moneyBar.config.actionFunction] === 'function') {
|
|
91
|
-
window[moneyBar.config.actionFunction](userContext);
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
// Define the function specified in actionFunction
|
|
82
|
+
<!-- Your business logic only -->
|
|
83
|
+
<script>
|
|
96
84
|
function myAction(userContext) {
|
|
97
85
|
if (userContext.isPremium) {
|
|
98
86
|
alert('Premium features unlocked!');
|
|
@@ -105,65 +93,26 @@ function generatePDF(userContext) {
|
|
|
105
93
|
</html>
|
|
106
94
|
```
|
|
107
95
|
|
|
108
|
-
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
<html>
|
|
112
|
-
<body>
|
|
113
|
-
<button id="action-btn">Try Action</button>
|
|
114
|
-
|
|
115
|
-
<!-- Single file - no dependencies needed -->
|
|
116
|
-
<script type="module">
|
|
117
|
-
import { MoneyBar } from 'https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.bundle.js';
|
|
118
|
-
|
|
119
|
-
const moneyBar = new MoneyBar({
|
|
120
|
-
actionFunction: 'myAction', // Function name that gets called
|
|
121
|
-
appId: 'my-app',
|
|
122
|
-
freeAttemptLimit: 3,
|
|
123
|
-
supabase: {
|
|
124
|
-
url: 'your-supabase-url',
|
|
125
|
-
anonKey: 'your-anon-key'
|
|
126
|
-
},
|
|
127
|
-
payment: {
|
|
128
|
-
productId: 'your-product-id'
|
|
129
|
-
}
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
moneyBar.attachToButton('#action-btn', (userContext) => {
|
|
133
|
-
// Call the specified action function
|
|
134
|
-
if (typeof window[moneyBar.config.actionFunction] === 'function') {
|
|
135
|
-
window[moneyBar.config.actionFunction](userContext);
|
|
136
|
-
}
|
|
137
|
-
});
|
|
138
|
-
|
|
139
|
-
// Define the function specified in actionFunction
|
|
140
|
-
function myAction(userContext) {
|
|
141
|
-
// Your business logic here
|
|
142
|
-
alert(`Action executed! Premium: ${userContext.isPremium}, Remaining: ${userContext.remaining}`);
|
|
143
|
-
}
|
|
144
|
-
</script>
|
|
145
|
-
</body>
|
|
146
|
-
</html>
|
|
147
|
-
```
|
|
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';
|
|
148
99
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
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
|
+
});
|
|
155
114
|
|
|
156
|
-
|
|
157
|
-
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
|
|
158
|
-
<script src="https://cdn.jsdelivr.net/npm/@moneybar.online/moneybar/dist/index.umd.js"></script>
|
|
159
|
-
<script>
|
|
160
|
-
const moneyBar = new MoneyBar.MoneyBar({
|
|
161
|
-
appId: 'my-app',
|
|
162
|
-
// ... configuration
|
|
163
|
-
});
|
|
164
|
-
</script>
|
|
165
|
-
</body>
|
|
166
|
-
</html>
|
|
115
|
+
moneyBar.attachToButton('#action-btn', myAction);
|
|
167
116
|
```
|
|
168
117
|
|
|
169
118
|
### Quick Start Template
|