@mintjamsinc/ichigojs 0.1.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.
Files changed (53) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +292 -0
  3. package/dist/ichigo.esm.js +9517 -0
  4. package/dist/ichigo.esm.js.map +1 -0
  5. package/dist/ichigo.esm.min.js +2 -0
  6. package/dist/ichigo.esm.min.js.map +1 -0
  7. package/dist/ichigo.umd.js +9525 -0
  8. package/dist/ichigo.umd.js.map +1 -0
  9. package/dist/ichigo.umd.min.js +2 -0
  10. package/dist/ichigo.umd.min.js.map +1 -0
  11. package/dist/types/ichigo/VApplication.d.ts +66 -0
  12. package/dist/types/ichigo/VApplicationOptions.d.ts +28 -0
  13. package/dist/types/ichigo/VBindings.d.ts +9 -0
  14. package/dist/types/ichigo/VBindingsPreparer.d.ts +23 -0
  15. package/dist/types/ichigo/VCloser.d.ts +9 -0
  16. package/dist/types/ichigo/VComponent.d.ts +2 -0
  17. package/dist/types/ichigo/VComponentRegistry.d.ts +2 -0
  18. package/dist/types/ichigo/VDOM.d.ts +30 -0
  19. package/dist/types/ichigo/VDOMUpdater.d.ts +17 -0
  20. package/dist/types/ichigo/VNode.d.ts +102 -0
  21. package/dist/types/ichigo/VNodeInit.d.ts +29 -0
  22. package/dist/types/ichigo/VTextEvaluator.d.ts +29 -0
  23. package/dist/types/ichigo/VUpdateContext.d.ts +21 -0
  24. package/dist/types/ichigo/components/VComponent.d.ts +2 -0
  25. package/dist/types/ichigo/components/VComponentRegistry.d.ts +2 -0
  26. package/dist/types/ichigo/directives/StandardDirectiveName.d.ts +10 -0
  27. package/dist/types/ichigo/directives/VBindDirective.d.ts +61 -0
  28. package/dist/types/ichigo/directives/VBindingsPreparer.d.ts +24 -0
  29. package/dist/types/ichigo/directives/VConditionalDirective.d.ts +47 -0
  30. package/dist/types/ichigo/directives/VConditionalDirectiveContext.d.ts +19 -0
  31. package/dist/types/ichigo/directives/VDOMUpdater.d.ts +17 -0
  32. package/dist/types/ichigo/directives/VDirective.d.ts +48 -0
  33. package/dist/types/ichigo/directives/VDirectiveManager.d.ts +39 -0
  34. package/dist/types/ichigo/directives/VDirectiveParseContext.d.ts +19 -0
  35. package/dist/types/ichigo/directives/VDirectiveParser.d.ts +31 -0
  36. package/dist/types/ichigo/directives/VDirectiveParserRegistry.d.ts +26 -0
  37. package/dist/types/ichigo/directives/VElseDirective.d.ts +21 -0
  38. package/dist/types/ichigo/directives/VElseIfDirective.d.ts +20 -0
  39. package/dist/types/ichigo/directives/VForDirective.d.ts +51 -0
  40. package/dist/types/ichigo/directives/VIfDirective.d.ts +20 -0
  41. package/dist/types/ichigo/directives/VModelDirective.d.ts +47 -0
  42. package/dist/types/ichigo/directives/VOnDirective.d.ts +49 -0
  43. package/dist/types/ichigo/directives/VShowDirective.d.ts +57 -0
  44. package/dist/types/ichigo/directives/VStandardDirectiveParser.d.ts +20 -0
  45. package/dist/types/ichigo/util/BindingsUtils.d.ts +10 -0
  46. package/dist/types/ichigo/util/ExpressionUtils.d.ts +15 -0
  47. package/dist/types/ichigo/util/LogLevel.d.ts +9 -0
  48. package/dist/types/ichigo/util/ReactiveProxy.d.ts +34 -0
  49. package/dist/types/ichigo/util/VLogLevel.d.ts +9 -0
  50. package/dist/types/ichigo/util/VLogManager.d.ts +9 -0
  51. package/dist/types/ichigo/util/VLogger.d.ts +9 -0
  52. package/dist/types/index.d.ts +1 -0
  53. package/package.json +64 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 MintJams Inc.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,292 @@
1
+ # ichigo.js 🍓
2
+
3
+ A simple and intuitive reactive framework. Lightweight, fast, and user-friendly virtual DOM library inspired by Vue.js.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@mintjamsinc/ichigojs.svg)](https://www.npmjs.com/package/@mintjamsinc/ichigojs)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
7
+
8
+ ## Features
9
+
10
+ - ✨ **Vue-like API** - Familiar syntax for Vue developers
11
+ - ⚡ **Reactive Proxy System** - Automatic change detection without manual triggers
12
+ - 🎯 **Computed Properties** - Automatic dependency tracking and re-evaluation
13
+ - 🔄 **Two-way Binding** - `v-model` with modifiers (`.lazy`, `.number`, `.trim`)
14
+ - 📦 **Lightweight** - Minimal bundle size
15
+ - 🚀 **High Performance** - Efficient batched updates via microtask queue
16
+ - 💪 **TypeScript** - Written in TypeScript with full type support
17
+ - 🎨 **Directives** - `v-if`, `v-for`, `v-show`, `v-bind`, `v-on`, `v-model`
18
+
19
+ ## Installation
20
+
21
+ ```bash
22
+ npm install @mintjamsinc/ichigojs
23
+ ```
24
+
25
+ ## Quick Start
26
+
27
+ ```html
28
+ <!DOCTYPE html>
29
+ <html>
30
+ <body>
31
+ <div id="app">
32
+ <h1>{{ message }}</h1>
33
+ <input v-model="message">
34
+ <p>Count: {{ count }}</p>
35
+ <button @click="increment">Increment</button>
36
+ </div>
37
+
38
+ <script type="module">
39
+ import { VDOM } from '@mintjamsinc/ichigojs';
40
+
41
+ VDOM.createApp({
42
+ data() {
43
+ return {
44
+ message: 'Hello ichigo.js!',
45
+ count: 0
46
+ };
47
+ },
48
+ methods: {
49
+ increment() {
50
+ this.count++;
51
+ }
52
+ }
53
+ }).mount('#app');
54
+ </script>
55
+ </body>
56
+ </html>
57
+ ```
58
+
59
+ ## Core Concepts
60
+
61
+ ### Reactive Data
62
+
63
+ All data properties are automatically reactive. Changes are detected and DOM updates are scheduled automatically.
64
+
65
+ ```javascript
66
+ VDOM.createApp({
67
+ data() {
68
+ return {
69
+ count: 0,
70
+ user: {
71
+ name: 'Alice',
72
+ age: 25
73
+ },
74
+ items: [1, 2, 3]
75
+ };
76
+ },
77
+ methods: {
78
+ updateData() {
79
+ // All of these trigger automatic DOM updates
80
+ this.count++;
81
+ this.user.name = 'Bob';
82
+ this.items.push(4);
83
+ }
84
+ }
85
+ }).mount('#app');
86
+ ```
87
+
88
+ ### Computed Properties
89
+
90
+ Computed properties automatically track their dependencies and re-evaluate when dependencies change.
91
+
92
+ ```javascript
93
+ VDOM.createApp({
94
+ data() {
95
+ return {
96
+ firstName: 'John',
97
+ lastName: 'Doe'
98
+ };
99
+ },
100
+ computed: {
101
+ fullName() {
102
+ return `${this.firstName} ${this.lastName}`;
103
+ }
104
+ }
105
+ }).mount('#app');
106
+ ```
107
+
108
+ ### Directives
109
+
110
+ #### v-if / v-else-if / v-else
111
+
112
+ Conditional rendering:
113
+
114
+ ```html
115
+ <div v-if="count > 10">Count is greater than 10</div>
116
+ <div v-else-if="count > 5">Count is greater than 5</div>
117
+ <div v-else>Count is 5 or less</div>
118
+ ```
119
+
120
+ #### v-for
121
+
122
+ List rendering:
123
+
124
+ ```html
125
+ <ul>
126
+ <li v-for="(item, index) in items" :key="item.id">
127
+ {{ index }}: {{ item.name }}
128
+ </li>
129
+ </ul>
130
+ ```
131
+
132
+ #### v-show
133
+
134
+ Toggle visibility:
135
+
136
+ ```html
137
+ <div v-show="isVisible">This can be toggled</div>
138
+ ```
139
+
140
+ #### v-bind (`:`)
141
+
142
+ Bind attributes:
143
+
144
+ ```html
145
+ <img :src="imageUrl" :alt="imageAlt">
146
+ <div :class="{ active: isActive }"></div>
147
+ ```
148
+
149
+ #### v-on (`@`)
150
+
151
+ Event handling with modifiers:
152
+
153
+ ```html
154
+ <button @click="handleClick">Click me</button>
155
+ <form @submit.prevent="handleSubmit">Submit</form>
156
+ <div @click.stop="handleClick">Stop propagation</div>
157
+ ```
158
+
159
+ Supported modifiers: `.stop`, `.prevent`, `.capture`, `.self`, `.once`
160
+
161
+ #### v-model
162
+
163
+ Two-way data binding:
164
+
165
+ ```html
166
+ <!-- Text input -->
167
+ <input v-model="message">
168
+
169
+ <!-- With modifiers -->
170
+ <input v-model.lazy="message"> <!-- Update on change instead of input -->
171
+ <input v-model.number="age"> <!-- Convert to number -->
172
+ <input v-model.trim="username"> <!-- Trim whitespace -->
173
+
174
+ <!-- Checkbox -->
175
+ <input type="checkbox" v-model="isChecked">
176
+
177
+ <!-- Select -->
178
+ <select v-model="selected">
179
+ <option value="a">Option A</option>
180
+ <option value="b">Option B</option>
181
+ </select>
182
+ ```
183
+
184
+ ### Methods
185
+
186
+ Methods have access to data and computed properties via `this`:
187
+
188
+ ```javascript
189
+ VDOM.createApp({
190
+ data() {
191
+ return {
192
+ count: 0
193
+ };
194
+ },
195
+ methods: {
196
+ increment() {
197
+ this.count++;
198
+ },
199
+ reset() {
200
+ this.count = 0;
201
+ }
202
+ }
203
+ }).mount('#app');
204
+ ```
205
+
206
+ ### $nextTick
207
+
208
+ Execute code after DOM updates:
209
+
210
+ ```javascript
211
+ methods: {
212
+ updateData() {
213
+ this.message = 'Updated';
214
+
215
+ this.$nextTick(() => {
216
+ console.log('DOM has been updated');
217
+ });
218
+ }
219
+ }
220
+ ```
221
+
222
+ ## Performance
223
+
224
+ ichigo.js uses several optimization techniques:
225
+
226
+ - **Microtask batching**: Multiple synchronous changes result in a single DOM update
227
+ - **Efficient change tracking**: Only changed properties trigger re-evaluation
228
+ - **Smart computed caching**: Computed properties only re-evaluate when dependencies change
229
+
230
+ Benchmark (1000 item list update): **~6.8ms** ⚡
231
+
232
+ ## Browser Support
233
+
234
+ - Modern browsers with ES2020+ support
235
+ - Requires `Proxy`, `queueMicrotask`, and other modern JavaScript features
236
+
237
+ ## TypeScript Support
238
+
239
+ ichigo.js is written in TypeScript and provides full type definitions:
240
+
241
+ ```typescript
242
+ import { VDOM } from '@mintjamsinc/ichigojs';
243
+
244
+ interface AppData {
245
+ count: number;
246
+ message: string;
247
+ }
248
+
249
+ VDOM.createApp<AppData>({
250
+ data() {
251
+ return {
252
+ count: 0,
253
+ message: 'Hello'
254
+ };
255
+ }
256
+ }).mount('#app');
257
+ ```
258
+
259
+ ## Examples
260
+
261
+ See the [examples](./examples) directory for more usage examples.
262
+
263
+ ## API Reference
264
+
265
+ ### VDOM.createApp(options)
266
+
267
+ Creates a new application instance.
268
+
269
+ **Options:**
270
+
271
+ - `data()`: Function that returns the initial data object
272
+ - `computed`: Object containing computed property definitions
273
+ - `methods`: Object containing method definitions
274
+ - `logLevel`: Logging level (`'debug'` | `'info'` | `'warn'` | `'error'`)
275
+
276
+ **Returns:** Application instance with `mount(selector)` method
277
+
278
+ ## Contributing
279
+
280
+ Contributions are welcome! Please feel free to submit a Pull Request.
281
+
282
+ ## License
283
+
284
+ MIT License - Copyright (c) 2025 MintJams Inc.
285
+
286
+ ## Credits
287
+
288
+ Inspired by [Vue.js](https://vuejs.org/) - A progressive JavaScript framework.
289
+
290
+ ---
291
+
292
+ Built with ❤️ by [MintJams Inc.](https://github.com/mintjamsinc)