@mintjamsinc/ichigojs 0.1.22 → 0.1.24

package/README.md

@@ -27,6 +27,46 @@ A simple and intuitive reactive framework. Lightweight, fast, and user-friendly
 npm install @mintjamsinc/ichigojs
 ```
 
+### Bundle Formats
+
+ichigo.js provides multiple bundle formats to suit different use cases:
+
+#### ESM (ES Modules)
+Use with modern bundlers or native ES modules:
+```javascript
+import { VDOM } from '@mintjamsinc/ichigojs';
+```
+
+**Files:**
+- `dist/ichigo.esm.js` - Development build with source maps
+- `dist/ichigo.esm.min.js` - Production build (minified)
+
+#### CommonJS
+Use with Node.js or older bundlers:
+```javascript
+const { VDOM } = require('@mintjamsinc/ichigojs');
+```
+
+**Files:**
+- `dist/ichigo.cjs` - Development build with source maps
+- `dist/ichigo.min.cjs` - Production build (minified)
+
+#### UMD (Universal Module Definition)
+Use via `<script>` tag in browser:
+```html
+<script src="node_modules/@mintjamsinc/ichigojs/dist/ichigo.umd.js"></script>
+<script>
+  const { VDOM } = window.ichigo;
+  // Use VDOM here
+</script>
+```
+
+**Files:**
+- `dist/ichigo.umd.js` - Development build with source maps
+- `dist/ichigo.umd.min.js` - Production build (minified)
+
+**Note:** The UMD build exposes `window.ichigo` with all exports (`VDOM`, `ReactiveProxy`, `VComponent`, `VComponentRegistry`).
+
 ## Quick Start
 
 ```html
@@ -90,6 +130,51 @@ VDOM.createApp({
 }).mount('#app');
 ```
 
+### Marking Objects as Non-Reactive
+
+Use `$markRaw()` to prevent objects from being wrapped in a reactive proxy. This is useful when storing third-party library instances or large data structures that don't need reactivity.
+
+```javascript
+VDOM.createApp({
+  data() {
+    return {
+      // Regular reactive data
+      count: 0,
+
+      // Mark as non-reactive
+      chart: null,
+      bigData: null
+    };
+  },
+  methods: {
+    initChart($ctx) {
+      // Create Chart.js instance and mark as non-reactive
+      const chartInstance = new Chart(canvas, { /* ... */ });
+      this.chart = this.$markRaw(chartInstance);
+
+      // Large dataset that doesn't need reactivity
+      const data = fetchLargeDataset();
+      this.bigData = this.$markRaw(data);
+    }
+  }
+}).mount('#app');
+```
+
+**When to use `$markRaw()`:**
+
+- Third-party library instances (Chart.js, Three.js, etc.)
+- Large arrays or objects that don't need change detection
+- Objects with complex internal state that shouldn't be proxied
+- DOM elements or other built-in objects with internal slots
+
+**Note:** Objects marked with `$markRaw()` won't trigger updates when modified. Use reactive properties to trigger updates when needed:
+
+```javascript
+// Update reactive trigger after modifying non-reactive data
+this.bigData.push(newItem);  // Won't trigger update
+this.count++;                // Triggers update
+```
+
 ### Computed Properties
 
 Computed properties automatically track their dependencies and re-evaluate when dependencies change.