@mintjamsinc/ichigojs 0.1.5 → 0.1.7
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 +117 -18
- package/dist/ichigo.esm.js +260 -15
- package/dist/ichigo.esm.js.map +1 -1
- package/dist/ichigo.esm.min.js +1 -1
- package/dist/ichigo.esm.min.js.map +1 -1
- package/dist/ichigo.umd.js +260 -15
- package/dist/ichigo.umd.js.map +1 -1
- package/dist/ichigo.umd.min.js +1 -1
- package/dist/ichigo.umd.min.js.map +1 -1
- package/dist/types/ichigo/VNode.d.ts +15 -0
- package/dist/types/ichigo/directives/StandardDirectiveName.d.ts +2 -1
- package/dist/types/ichigo/directives/VDirective.d.ts +2 -1
- package/dist/types/ichigo/directives/VOnDirective.d.ts +1 -1
- package/dist/types/ichigo/directives/VResizeDirective.d.ts +84 -0
- package/package.json +1 -1
@@ -84,6 +84,13 @@ export declare class VNode {
|
|
84
84
|
*/
|
85
85
|
get dependentIdentifiers(): string[];
|
86
86
|
get preparableIdentifiers(): string[];
|
87
|
+
/**
|
88
|
+
* Gets the user data storage for this virtual node.
|
89
|
+
* This is lazily initialized and provides a Proxy-free space for storing
|
90
|
+
* arbitrary data associated with lifecycle directives.
|
91
|
+
* @returns A Map for storing user data.
|
92
|
+
*/
|
93
|
+
get userData(): Map<string, any>;
|
87
94
|
/**
|
88
95
|
* The DOM path of this virtual node.
|
89
96
|
* This is a string representation of the path from the root to this node,
|
@@ -123,6 +130,14 @@ export declare class VNode {
|
|
123
130
|
/**
|
124
131
|
* Cleans up any resources used by this virtual node.
|
125
132
|
* This method is called when the virtual node is no longer needed.
|
133
|
+
*
|
134
|
+
* Cleanup order:
|
135
|
+
* 1. Call onUnmount lifecycle hooks
|
136
|
+
* 2. Auto-cleanup userData (close() on Closeable objects)
|
137
|
+
* 3. Recursively destroy child nodes
|
138
|
+
* 4. Unregister dependencies
|
139
|
+
* 5. Clean up directive manager
|
140
|
+
* 6. Call onUnmounted lifecycle hooks
|
126
141
|
*/
|
127
142
|
destroy(): void;
|
128
143
|
}
|
@@ -84,7 +84,8 @@ export interface VDirective {
|
|
84
84
|
get onUnmount(): (() => void) | undefined;
|
85
85
|
/**
|
86
86
|
* Lifecycle hook called after the directive is unmounted from the DOM.
|
87
|
-
* This is called once, after
|
87
|
+
* This is called once, after VNode cleanup is complete.
|
88
|
+
* The element reference is still available at this point.
|
88
89
|
*/
|
89
90
|
get onUnmounted(): (() => void) | undefined;
|
90
91
|
/**
|
@@ -20,7 +20,7 @@ import { VDOMUpdater } from "../VDOMUpdater";
|
|
20
20
|
* @update="onUpdate" - Called before the element is updated
|
21
21
|
* @updated="onUpdated" - Called after the element is updated
|
22
22
|
* @unmount="onUnmount" - Called before the element is removed from the DOM
|
23
|
-
* @unmounted="onUnmounted" - Called after
|
23
|
+
* @unmounted="onUnmounted" - Called after VNode cleanup is complete (element reference still available)
|
24
24
|
*
|
25
25
|
* This directive is essential for handling user interactions and lifecycle events in your application.
|
26
26
|
* Note that the methods referenced in the directive should be defined in the component's methods object.
|
@@ -0,0 +1,84 @@
|
|
1
|
+
import { VNode } from "../VNode";
|
2
|
+
import { VBindingsPreparer } from "../VBindingsPreparer";
|
3
|
+
import { VDirective } from "./VDirective";
|
4
|
+
import { VDirectiveParseContext } from "./VDirectiveParseContext";
|
5
|
+
import { VDOMUpdater } from "../VDOMUpdater";
|
6
|
+
/**
|
7
|
+
* Directive for observing element resize events using ResizeObserver.
|
8
|
+
* The `v-resize` directive allows you to respond to changes in an element's size.
|
9
|
+
*
|
10
|
+
* Example usage:
|
11
|
+
* <div v-resize="handleResize">Resizable content</div>
|
12
|
+
*
|
13
|
+
* The handler receives ResizeObserverEntry array as the first argument and $ctx as the second:
|
14
|
+
* handleResize(entries, $ctx) {
|
15
|
+
* const { width, height } = entries[0].contentRect;
|
16
|
+
* console.log(`Size: ${width}x${height}`);
|
17
|
+
* }
|
18
|
+
*
|
19
|
+
* This directive is useful for responsive layouts, charts, and other components
|
20
|
+
* that need to adapt to size changes.
|
21
|
+
*/
|
22
|
+
export declare class VResizeDirective implements VDirective {
|
23
|
+
#private;
|
24
|
+
/**
|
25
|
+
* @param context The context for parsing the directive.
|
26
|
+
*/
|
27
|
+
constructor(context: VDirectiveParseContext);
|
28
|
+
/**
|
29
|
+
* @inheritdoc
|
30
|
+
*/
|
31
|
+
get name(): string;
|
32
|
+
/**
|
33
|
+
* @inheritdoc
|
34
|
+
*/
|
35
|
+
get vNode(): VNode;
|
36
|
+
/**
|
37
|
+
* @inheritdoc
|
38
|
+
*/
|
39
|
+
get needsAnchor(): boolean;
|
40
|
+
/**
|
41
|
+
* @inheritdoc
|
42
|
+
*/
|
43
|
+
get bindingsPreparer(): VBindingsPreparer | undefined;
|
44
|
+
/**
|
45
|
+
* @inheritdoc
|
46
|
+
*/
|
47
|
+
get domUpdater(): VDOMUpdater | undefined;
|
48
|
+
/**
|
49
|
+
* @inheritdoc
|
50
|
+
*/
|
51
|
+
get templatize(): boolean;
|
52
|
+
/**
|
53
|
+
* @inheritdoc
|
54
|
+
*/
|
55
|
+
get dependentIdentifiers(): string[];
|
56
|
+
/**
|
57
|
+
* @inheritdoc
|
58
|
+
*/
|
59
|
+
get onMount(): (() => void) | undefined;
|
60
|
+
/**
|
61
|
+
* @inheritdoc
|
62
|
+
*/
|
63
|
+
get onMounted(): (() => void) | undefined;
|
64
|
+
/**
|
65
|
+
* @inheritdoc
|
66
|
+
*/
|
67
|
+
get onUpdate(): (() => void) | undefined;
|
68
|
+
/**
|
69
|
+
* @inheritdoc
|
70
|
+
*/
|
71
|
+
get onUpdated(): (() => void) | undefined;
|
72
|
+
/**
|
73
|
+
* @inheritdoc
|
74
|
+
*/
|
75
|
+
get onUnmount(): (() => void) | undefined;
|
76
|
+
/**
|
77
|
+
* @inheritdoc
|
78
|
+
*/
|
79
|
+
get onUnmounted(): (() => void) | undefined;
|
80
|
+
/**
|
81
|
+
* @inheritdoc
|
82
|
+
*/
|
83
|
+
destroy(): void;
|
84
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@mintjamsinc/ichigojs",
|
3
|
-
"version": "0.1.
|
3
|
+
"version": "0.1.7",
|
4
4
|
"description": "ichigo.js - Simple and intuitive reactive framework. Lightweight, fast, and user-friendly virtual DOM library",
|
5
5
|
"main": "./dist/ichigo.umd.js",
|
6
6
|
"module": "./dist/ichigo.esm.js",
|