@mintjamsinc/ichigojs 0.1.7 → 0.1.8

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.
@@ -7,5 +7,6 @@ export declare enum StandardDirectiveName {
7
7
  V_ON = "v-on",
8
8
  V_BIND = "v-bind",
9
9
  V_MODEL = "v-model",
10
- V_RESIZE = "v-resize"
10
+ V_RESIZE = "v-resize",
11
+ V_INTERSECTION = "v-intersection"
11
12
  }
@@ -58,6 +58,15 @@ export declare class VBindDirective implements VDirective {
58
58
  * If this directive is binding the "key" attribute, it will be handled by the VForDirective.
59
59
  */
60
60
  get isKey(): boolean;
61
+ /**
62
+ * Indicates if this directive is binding the "options" attribute or any of its sub-properties (e.g., "options.intersection").
63
+ * The "options" attribute is special and is used for passing options to certain directives like VIntersectionDirective.
64
+ */
65
+ get isOptions(): boolean;
66
+ /**
67
+ * Gets the name of the attribute being bound (e.g., "src", "class", "options", "options.intersection").
68
+ */
69
+ get attributeName(): string | undefined;
61
70
  /**
62
71
  * Gets the original expression string from the directive.
63
72
  */
@@ -3,6 +3,11 @@ import { VNode } from "../VNode";
3
3
  import { VBindingsPreparer } from "../VBindingsPreparer";
4
4
  import { VDOMUpdater } from "../VDOMUpdater";
5
5
  import { VBindDirective } from "./VBindDirective";
6
+ /**
7
+ * Manages directives associated with a virtual node (VNode).
8
+ * This class is responsible for parsing, storing, and managing the lifecycle of directives.
9
+ * It also provides access to bindings preparers and DOM updaters from the associated directives.
10
+ */
6
11
  export declare class VDirectiveManager {
7
12
  #private;
8
13
  constructor(vNode: VNode);
@@ -32,6 +37,19 @@ export declare class VDirectiveManager {
32
37
  * If no such directive exists, this returns undefined.
33
38
  */
34
39
  get keyDirective(): VBindDirective | undefined;
40
+ /**
41
+ * Gets a record of VBindDirectives for options specific to certain directives.
42
+ * The keys are directive names (e.g., 'options', 'options.intersection').
43
+ */
44
+ get optionsDirectives(): Record<string, VBindDirective | undefined>;
45
+ /**
46
+ * Gets the VBindDirective for options specific to the given directive name.
47
+ * Searches in order: `:options.{directive}` -> `:options`
48
+ *
49
+ * @param directive The directive name (e.g., 'intersection', 'resize')
50
+ * @returns The VBindDirective instance or undefined
51
+ */
52
+ optionsDirective(directive: string): VBindDirective | undefined;
35
53
  /**
36
54
  * Cleans up any resources used by the directive handler.
37
55
  */
@@ -0,0 +1,91 @@
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 intersection with viewport or ancestor elements using IntersectionObserver.
8
+ * The `v-intersection` directive allows you to respond to changes in an element's visibility.
9
+ *
10
+ * Example usage:
11
+ * <div v-intersection="handleIntersection">Observable content</div>
12
+ * <div v-intersection="handleIntersection" :options.intersection="{threshold: 0.5}">Observable content</div>
13
+ *
14
+ * The handler receives IntersectionObserverEntry array as the first argument and $ctx as the second:
15
+ * handleIntersection(entries, $ctx) {
16
+ * const entry = entries[0];
17
+ * if (entry.isIntersecting) {
18
+ * console.log('Element is visible!');
19
+ * }
20
+ * }
21
+ *
22
+ * Options can be provided via :options or :options.intersection attribute:
23
+ * :options="{root: null, threshold: 0.5, rootMargin: '0px'}"
24
+ * :options.intersection="{root: null, threshold: 0.5, rootMargin: '0px'}"
25
+ *
26
+ * This directive is useful for lazy-loading, infinite scrolling, animation triggers,
27
+ * and other features that depend on element visibility.
28
+ */
29
+ export declare class VIntersectionDirective implements VDirective {
30
+ #private;
31
+ /**
32
+ * @param context The context for parsing the directive.
33
+ */
34
+ constructor(context: VDirectiveParseContext);
35
+ /**
36
+ * @inheritdoc
37
+ */
38
+ get name(): string;
39
+ /**
40
+ * @inheritdoc
41
+ */
42
+ get vNode(): VNode;
43
+ /**
44
+ * @inheritdoc
45
+ */
46
+ get needsAnchor(): boolean;
47
+ /**
48
+ * @inheritdoc
49
+ */
50
+ get bindingsPreparer(): VBindingsPreparer | undefined;
51
+ /**
52
+ * @inheritdoc
53
+ */
54
+ get domUpdater(): VDOMUpdater | undefined;
55
+ /**
56
+ * @inheritdoc
57
+ */
58
+ get templatize(): boolean;
59
+ /**
60
+ * @inheritdoc
61
+ */
62
+ get dependentIdentifiers(): string[];
63
+ /**
64
+ * @inheritdoc
65
+ */
66
+ get onMount(): (() => void) | undefined;
67
+ /**
68
+ * @inheritdoc
69
+ */
70
+ get onMounted(): (() => void) | undefined;
71
+ /**
72
+ * @inheritdoc
73
+ */
74
+ get onUpdate(): (() => void) | undefined;
75
+ /**
76
+ * @inheritdoc
77
+ */
78
+ get onUpdated(): (() => void) | undefined;
79
+ /**
80
+ * @inheritdoc
81
+ */
82
+ get onUnmount(): (() => void) | undefined;
83
+ /**
84
+ * @inheritdoc
85
+ */
86
+ get onUnmounted(): (() => void) | undefined;
87
+ /**
88
+ * @inheritdoc
89
+ */
90
+ destroy(): void;
91
+ }
@@ -19,7 +19,7 @@ import { VDOMUpdater } from "../VDOMUpdater";
19
19
  * @mounted="onMounted" - Called after the element is inserted into the DOM
20
20
  * @update="onUpdate" - Called before the element is updated
21
21
  * @updated="onUpdated" - Called after the element is updated
22
- * @unmount="onUnmount" - Called before the element is removed from the DOM
22
+ * @unmount="onUnmount" - Called before VNode cleanup begins
23
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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mintjamsinc/ichigojs",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
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",