@miurajs/miura-render 0.1.0 → 0.2.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 +6 -6
- package/dist/index.d.ts +14 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +13 -0
- package/dist/index.js.map +1 -0
- package/dist/src/binding-manager/binding-manager.d.ts +30 -0
- package/dist/src/binding-manager/binding-manager.d.ts.map +1 -0
- package/dist/src/binding-manager/binding-manager.js +245 -0
- package/dist/src/binding-manager/binding-manager.js.map +1 -0
- package/dist/src/binding-manager/binding-type.d.ts +24 -0
- package/dist/src/binding-manager/binding-type.d.ts.map +1 -0
- package/dist/src/binding-manager/binding-type.js +25 -0
- package/dist/src/binding-manager/binding-type.js.map +1 -0
- package/dist/src/binding-manager/bindings/async-binding.d.ts +23 -0
- package/dist/src/binding-manager/bindings/async-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/async-binding.js +67 -0
- package/dist/src/binding-manager/bindings/async-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/attribute-binding.d.ts +41 -0
- package/dist/src/binding-manager/bindings/attribute-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/attribute-binding.js +79 -0
- package/dist/src/binding-manager/bindings/attribute-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/bind-binding.d.ts +30 -0
- package/dist/src/binding-manager/bindings/bind-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/bind-binding.js +81 -0
- package/dist/src/binding-manager/bindings/bind-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/binding.d.ts +6 -0
- package/dist/src/binding-manager/bindings/binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/binding.js +2 -0
- package/dist/src/binding-manager/bindings/binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/boolean-binding.d.ts +18 -0
- package/dist/src/binding-manager/bindings/boolean-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/boolean-binding.js +65 -0
- package/dist/src/binding-manager/bindings/boolean-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/class-binding.d.ts +10 -0
- package/dist/src/binding-manager/bindings/class-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/class-binding.js +68 -0
- package/dist/src/binding-manager/bindings/class-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/directive-binding.d.ts +15 -0
- package/dist/src/binding-manager/bindings/directive-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/directive-binding.js +70 -0
- package/dist/src/binding-manager/bindings/directive-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/event-binding.d.ts +14 -0
- package/dist/src/binding-manager/bindings/event-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/event-binding.js +73 -0
- package/dist/src/binding-manager/bindings/event-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/node-binding.d.ts +36 -0
- package/dist/src/binding-manager/bindings/node-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/node-binding.js +235 -0
- package/dist/src/binding-manager/bindings/node-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/object-class-binding.d.ts +16 -0
- package/dist/src/binding-manager/bindings/object-class-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/object-class-binding.js +42 -0
- package/dist/src/binding-manager/bindings/object-class-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/object-style-binding.d.ts +16 -0
- package/dist/src/binding-manager/bindings/object-style-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/object-style-binding.js +38 -0
- package/dist/src/binding-manager/bindings/object-style-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/property-binding.d.ts +12 -0
- package/dist/src/binding-manager/bindings/property-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/property-binding.js +44 -0
- package/dist/src/binding-manager/bindings/property-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/reference-binding.d.ts +14 -0
- package/dist/src/binding-manager/bindings/reference-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/reference-binding.js +44 -0
- package/dist/src/binding-manager/bindings/reference-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/spread-binding.d.ts +16 -0
- package/dist/src/binding-manager/bindings/spread-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/spread-binding.js +40 -0
- package/dist/src/binding-manager/bindings/spread-binding.js.map +1 -0
- package/dist/src/binding-manager/bindings/style-binding.d.ts +10 -0
- package/dist/src/binding-manager/bindings/style-binding.d.ts.map +1 -0
- package/dist/src/binding-manager/bindings/style-binding.js +44 -0
- package/dist/src/binding-manager/bindings/style-binding.js.map +1 -0
- package/dist/src/compiler/code-factory.d.ts +45 -0
- package/dist/src/compiler/code-factory.d.ts.map +1 -0
- package/dist/src/compiler/code-factory.js +211 -0
- package/dist/src/compiler/code-factory.js.map +1 -0
- package/dist/src/compiler/compiler.d.ts +77 -0
- package/dist/src/compiler/compiler.d.ts.map +1 -0
- package/dist/src/compiler/compiler.js +77 -0
- package/dist/src/compiler/compiler.js.map +1 -0
- package/dist/src/compiler/constants.d.ts +5 -0
- package/dist/src/compiler/constants.d.ts.map +1 -0
- package/dist/src/compiler/constants.js +9 -0
- package/dist/src/compiler/constants.js.map +1 -0
- package/dist/src/css-result.d.ts +27 -0
- package/dist/src/css-result.d.ts.map +1 -0
- package/dist/src/css-result.js +56 -0
- package/dist/src/css-result.js.map +1 -0
- package/dist/src/css.d.ts +26 -0
- package/dist/src/css.d.ts.map +1 -0
- package/dist/src/css.js +62 -0
- package/dist/src/css.js.map +1 -0
- package/dist/src/directives/animate.directive.d.ts +42 -0
- package/dist/src/directives/animate.directive.d.ts.map +1 -0
- package/dist/src/directives/animate.directive.js +349 -0
- package/dist/src/directives/animate.directive.js.map +1 -0
- package/dist/src/directives/await.d.ts +68 -0
- package/dist/src/directives/await.d.ts.map +1 -0
- package/dist/src/directives/await.js +70 -0
- package/dist/src/directives/await.js.map +1 -0
- package/dist/src/directives/choose.d.ts +28 -0
- package/dist/src/directives/choose.d.ts.map +1 -0
- package/dist/src/directives/choose.js +30 -0
- package/dist/src/directives/choose.js.map +1 -0
- package/dist/src/directives/decorator-example.d.ts +8 -0
- package/dist/src/directives/decorator-example.d.ts.map +1 -0
- package/dist/src/directives/decorator-example.js +32 -0
- package/dist/src/directives/decorator-example.js.map +1 -0
- package/dist/src/directives/decorators.d.ts +3 -0
- package/dist/src/directives/decorators.d.ts.map +1 -0
- package/dist/src/directives/decorators.js +17 -0
- package/dist/src/directives/decorators.js.map +1 -0
- package/dist/src/directives/directive-manager.d.ts +26 -0
- package/dist/src/directives/directive-manager.d.ts.map +1 -0
- package/dist/src/directives/directive-manager.js +114 -0
- package/dist/src/directives/directive-manager.js.map +1 -0
- package/dist/src/directives/directive.d.ts +38 -0
- package/dist/src/directives/directive.d.ts.map +1 -0
- package/dist/src/directives/directive.js +18 -0
- package/dist/src/directives/directive.js.map +1 -0
- package/dist/src/directives/focus.directive.d.ts +16 -0
- package/dist/src/directives/focus.directive.d.ts.map +1 -0
- package/dist/src/directives/focus.directive.js +29 -0
- package/dist/src/directives/focus.directive.js.map +1 -0
- package/dist/src/directives/gesture.directive.d.ts +58 -0
- package/dist/src/directives/gesture.directive.d.ts.map +1 -0
- package/dist/src/directives/gesture.directive.js +331 -0
- package/dist/src/directives/gesture.directive.js.map +1 -0
- package/dist/src/directives/index.d.ts +34 -0
- package/dist/src/directives/index.d.ts.map +1 -0
- package/dist/src/directives/index.js +35 -0
- package/dist/src/directives/index.js.map +1 -0
- package/dist/src/directives/intersection.directive.d.ts +18 -0
- package/dist/src/directives/intersection.directive.d.ts.map +1 -0
- package/dist/src/directives/intersection.directive.js +50 -0
- package/dist/src/directives/intersection.directive.js.map +1 -0
- package/dist/src/directives/keyed-diff.d.ts +30 -0
- package/dist/src/directives/keyed-diff.d.ts.map +1 -0
- package/dist/src/directives/keyed-diff.js +185 -0
- package/dist/src/directives/keyed-diff.js.map +1 -0
- package/dist/src/directives/lazy-setup.d.ts +3 -0
- package/dist/src/directives/lazy-setup.d.ts.map +1 -0
- package/dist/src/directives/lazy-setup.js +55 -0
- package/dist/src/directives/lazy-setup.js.map +1 -0
- package/dist/src/directives/lazy.directive.d.ts +19 -0
- package/dist/src/directives/lazy.directive.d.ts.map +1 -0
- package/dist/src/directives/lazy.directive.js +73 -0
- package/dist/src/directives/lazy.directive.js.map +1 -0
- package/dist/src/directives/media.directive.d.ts +31 -0
- package/dist/src/directives/media.directive.d.ts.map +1 -0
- package/dist/src/directives/media.directive.js +105 -0
- package/dist/src/directives/media.directive.js.map +1 -0
- package/dist/src/directives/mutation.directive.d.ts +11 -0
- package/dist/src/directives/mutation.directive.d.ts.map +1 -0
- package/dist/src/directives/mutation.directive.js +56 -0
- package/dist/src/directives/mutation.directive.js.map +1 -0
- package/dist/src/directives/repeat.d.ts +50 -0
- package/dist/src/directives/repeat.d.ts.map +1 -0
- package/dist/src/directives/repeat.js +47 -0
- package/dist/src/directives/repeat.js.map +1 -0
- package/dist/src/directives/resize.directive.d.ts +14 -0
- package/dist/src/directives/resize.directive.d.ts.map +1 -0
- package/dist/src/directives/resize.directive.js +81 -0
- package/dist/src/directives/resize.directive.js.map +1 -0
- package/dist/src/directives/setup.d.ts +9 -0
- package/dist/src/directives/setup.d.ts.map +1 -0
- package/dist/src/directives/setup.js +9 -0
- package/dist/src/directives/setup.js.map +1 -0
- package/dist/src/directives/structural/async.directive.d.ts +39 -0
- package/dist/src/directives/structural/async.directive.d.ts.map +1 -0
- package/dist/src/directives/structural/async.directive.js +115 -0
- package/dist/src/directives/structural/async.directive.js.map +1 -0
- package/dist/src/directives/structural/for.directive.d.ts +37 -0
- package/dist/src/directives/structural/for.directive.d.ts.map +1 -0
- package/dist/src/directives/structural/for.directive.js +209 -0
- package/dist/src/directives/structural/for.directive.js.map +1 -0
- package/dist/src/directives/structural/if.directive.d.ts +54 -0
- package/dist/src/directives/structural/if.directive.d.ts.map +1 -0
- package/dist/src/directives/structural/if.directive.js +210 -0
- package/dist/src/directives/structural/if.directive.js.map +1 -0
- package/dist/src/directives/structural/structural.directive.d.ts +11 -0
- package/dist/src/directives/structural/structural.directive.d.ts.map +1 -0
- package/dist/src/directives/structural/structural.directive.js +29 -0
- package/dist/src/directives/structural/structural.directive.js.map +1 -0
- package/dist/src/directives/structural/switch.directive.d.ts +12 -0
- package/dist/src/directives/structural/switch.directive.d.ts.map +1 -0
- package/dist/src/directives/structural/switch.directive.js +69 -0
- package/dist/src/directives/structural/switch.directive.js.map +1 -0
- package/dist/src/directives/structural/virtual-scroll.directive.d.ts +50 -0
- package/dist/src/directives/structural/virtual-scroll.directive.d.ts.map +1 -0
- package/dist/src/directives/structural/virtual-scroll.directive.js +165 -0
- package/dist/src/directives/structural/virtual-scroll.directive.js.map +1 -0
- package/dist/src/directives/utils.d.ts +61 -0
- package/dist/src/directives/utils.d.ts.map +1 -0
- package/dist/src/directives/utils.js +121 -0
- package/dist/src/directives/utils.js.map +1 -0
- package/dist/src/directives/validate.directive.d.ts +41 -0
- package/dist/src/directives/validate.directive.d.ts.map +1 -0
- package/dist/src/directives/validate.directive.js +161 -0
- package/dist/src/directives/validate.directive.js.map +1 -0
- package/dist/src/directives/virtual-scroll.d.ts +91 -0
- package/dist/src/directives/virtual-scroll.d.ts.map +1 -0
- package/dist/src/directives/virtual-scroll.js +78 -0
- package/dist/src/directives/virtual-scroll.js.map +1 -0
- package/dist/src/directives/when.d.ts +24 -0
- package/dist/src/directives/when.d.ts.map +1 -0
- package/dist/src/directives/when.js +25 -0
- package/dist/src/directives/when.js.map +1 -0
- package/dist/src/html.d.ts +23 -0
- package/dist/src/html.d.ts.map +1 -0
- package/dist/src/html.js +37 -0
- package/dist/src/html.js.map +1 -0
- package/dist/src/modifiers/capture-modifier.d.ts +6 -0
- package/dist/src/modifiers/capture-modifier.d.ts.map +1 -0
- package/dist/src/modifiers/capture-modifier.js +14 -0
- package/dist/src/modifiers/capture-modifier.js.map +1 -0
- package/dist/src/modifiers/event-modifiers.d.ts +38 -0
- package/dist/src/modifiers/event-modifiers.d.ts.map +1 -0
- package/dist/src/modifiers/event-modifiers.js +90 -0
- package/dist/src/modifiers/event-modifiers.js.map +1 -0
- package/dist/src/modifiers/key-modifiers.d.ts +8 -0
- package/dist/src/modifiers/key-modifiers.d.ts.map +1 -0
- package/dist/src/modifiers/key-modifiers.js +29 -0
- package/dist/src/modifiers/key-modifiers.js.map +1 -0
- package/dist/src/modifiers/mouse-modifiers.d.ts +8 -0
- package/dist/src/modifiers/mouse-modifiers.d.ts.map +1 -0
- package/dist/src/modifiers/mouse-modifiers.js +15 -0
- package/dist/src/modifiers/mouse-modifiers.js.map +1 -0
- package/dist/src/modifiers/once-modifier.d.ts +6 -0
- package/dist/src/modifiers/once-modifier.d.ts.map +1 -0
- package/dist/src/modifiers/once-modifier.js +11 -0
- package/dist/src/modifiers/once-modifier.js.map +1 -0
- package/dist/src/modifiers/passive-modifier.d.ts +6 -0
- package/dist/src/modifiers/passive-modifier.d.ts.map +1 -0
- package/dist/src/modifiers/passive-modifier.js +14 -0
- package/dist/src/modifiers/passive-modifier.js.map +1 -0
- package/dist/src/processor/parser.d.ts +74 -0
- package/dist/src/processor/parser.d.ts.map +1 -0
- package/dist/src/processor/parser.js +345 -0
- package/dist/src/processor/parser.js.map +1 -0
- package/dist/src/processor/processor.d.ts +68 -0
- package/dist/src/processor/processor.d.ts.map +1 -0
- package/dist/src/processor/processor.js +138 -0
- package/dist/src/processor/processor.js.map +1 -0
- package/dist/src/processor/template-result.d.ts +74 -0
- package/dist/src/processor/template-result.d.ts.map +1 -0
- package/dist/src/processor/template-result.js +53 -0
- package/dist/src/processor/template-result.js.map +1 -0
- package/dist/src/processor/types.d.ts +16 -0
- package/dist/src/processor/types.d.ts.map +1 -0
- package/dist/src/processor/types.js +13 -0
- package/dist/src/processor/types.js.map +1 -0
- package/dist/src/utils/debug.d.ts +7 -0
- package/dist/src/utils/debug.d.ts.map +1 -0
- package/dist/src/utils/debug.js +7 -0
- package/dist/src/utils/debug.js.map +1 -0
- package/dist/src/utils/performance.d.ts +50 -0
- package/dist/src/utils/performance.d.ts.map +1 -0
- package/dist/src/utils/performance.js +51 -0
- package/dist/src/utils/performance.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/package.json +8 -10
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { StructuralDirective } from './structural.directive';
|
|
2
|
+
/**
|
|
3
|
+
* Enhanced If directive with #else and #elseif support.
|
|
4
|
+
*
|
|
5
|
+
* Usage:
|
|
6
|
+
* ```html
|
|
7
|
+
* <div #if=${condition1}>Shown when condition1 is truthy</div>
|
|
8
|
+
* <div #elseif=${condition2}>Shown when condition2 is truthy</div>
|
|
9
|
+
* <div #else>Shown when all conditions are falsy</div>
|
|
10
|
+
* ```
|
|
11
|
+
*
|
|
12
|
+
* The IfDirective owns the entire chain. ElseIfDirectives register
|
|
13
|
+
* themselves via registerElseIf(). #else elements (static attribute)
|
|
14
|
+
* are detected and claimed during mount().
|
|
15
|
+
*/
|
|
16
|
+
export declare class IfDirective extends StructuralDirective {
|
|
17
|
+
private condition;
|
|
18
|
+
private chain;
|
|
19
|
+
mount(element: Element): void;
|
|
20
|
+
/**
|
|
21
|
+
* Scan forward from the #if comment to find an #else sibling element.
|
|
22
|
+
* Skips over text nodes and #elseif elements (they register themselves).
|
|
23
|
+
*/
|
|
24
|
+
private collectElseBranch;
|
|
25
|
+
/**
|
|
26
|
+
* Called by ElseIfDirective to register itself in the chain.
|
|
27
|
+
*/
|
|
28
|
+
registerElseIf(directive: ElseIfDirective, element: Element, comment: Comment): void;
|
|
29
|
+
/**
|
|
30
|
+
* Called when a registered ElseIfDirective's condition changes.
|
|
31
|
+
*/
|
|
32
|
+
updateElseIfCondition(directive: ElseIfDirective, condition: boolean): void;
|
|
33
|
+
protected updateContent(value: unknown): void;
|
|
34
|
+
/**
|
|
35
|
+
* Evaluate the if/elseif/else chain and show exactly one branch.
|
|
36
|
+
*/
|
|
37
|
+
private evaluateChain;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* ElseIf directive — registers with the preceding IfDirective.
|
|
41
|
+
*
|
|
42
|
+
* Usage:
|
|
43
|
+
* ```html
|
|
44
|
+
* <div #if=${condition1}>A</div>
|
|
45
|
+
* <div #elseif=${condition2}>B</div>
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
export declare class ElseIfDirective extends StructuralDirective {
|
|
49
|
+
private parentIf;
|
|
50
|
+
private condition;
|
|
51
|
+
mount(element: Element): void;
|
|
52
|
+
protected updateContent(value: unknown): void;
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=if.directive.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"if.directive.d.ts","sourceRoot":"","sources":["../../../../src/directives/structural/if.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAiB7D;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,mBAAmB;IAChD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,KAAK,CAAgB;IAE7B,KAAK,CAAC,OAAO,EAAE,OAAO;IA6BtB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAoCzB;;OAEG;IACH,cAAc,CAAC,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IAuBpF;;OAEG;IACH,qBAAqB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI;IAQ3E,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAM7C;;OAEG;IACH,OAAO,CAAC,aAAa;CA6BxB;AAED;;;;;;;;GAQG;AACH,qBAAa,eAAgB,SAAQ,mBAAmB;IACpD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAAS;IAE1B,KAAK,CAAC,OAAO,EAAE,OAAO;IAgDtB,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;CAMhD"}
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
import { StructuralDirective } from './structural.directive';
|
|
2
|
+
import { debugLog } from '../../utils/debug';
|
|
3
|
+
/**
|
|
4
|
+
* Enhanced If directive with #else and #elseif support.
|
|
5
|
+
*
|
|
6
|
+
* Usage:
|
|
7
|
+
* ```html
|
|
8
|
+
* <div #if=${condition1}>Shown when condition1 is truthy</div>
|
|
9
|
+
* <div #elseif=${condition2}>Shown when condition2 is truthy</div>
|
|
10
|
+
* <div #else>Shown when all conditions are falsy</div>
|
|
11
|
+
* ```
|
|
12
|
+
*
|
|
13
|
+
* The IfDirective owns the entire chain. ElseIfDirectives register
|
|
14
|
+
* themselves via registerElseIf(). #else elements (static attribute)
|
|
15
|
+
* are detected and claimed during mount().
|
|
16
|
+
*/
|
|
17
|
+
export class IfDirective extends StructuralDirective {
|
|
18
|
+
condition = false;
|
|
19
|
+
chain = [];
|
|
20
|
+
mount(element) {
|
|
21
|
+
debugLog('if', 'Mounting if directive with chain support');
|
|
22
|
+
// Create comment placeholder for this #if element
|
|
23
|
+
this.comment = document.createComment('if');
|
|
24
|
+
this.content = element;
|
|
25
|
+
const parent = element.parentNode;
|
|
26
|
+
if (!parent)
|
|
27
|
+
return;
|
|
28
|
+
parent.replaceChild(this.comment, element);
|
|
29
|
+
// Store reference on comment so ElseIfDirective can find us
|
|
30
|
+
this.comment.__ifDirective = this;
|
|
31
|
+
// First branch is always the #if itself
|
|
32
|
+
this.chain.push({
|
|
33
|
+
type: 'if',
|
|
34
|
+
element,
|
|
35
|
+
comment: this.comment,
|
|
36
|
+
showing: false,
|
|
37
|
+
condition: false,
|
|
38
|
+
});
|
|
39
|
+
// Scan forward siblings for #else (static attribute).
|
|
40
|
+
// #elseif elements register themselves later via registerElseIf().
|
|
41
|
+
this.collectElseBranch(this.comment);
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Scan forward from the #if comment to find an #else sibling element.
|
|
45
|
+
* Skips over text nodes and #elseif elements (they register themselves).
|
|
46
|
+
*/
|
|
47
|
+
collectElseBranch(startNode) {
|
|
48
|
+
let sibling = startNode.nextSibling;
|
|
49
|
+
while (sibling) {
|
|
50
|
+
if (sibling.nodeType === Node.ELEMENT_NODE) {
|
|
51
|
+
const el = sibling;
|
|
52
|
+
if (el.hasAttribute('#else')) {
|
|
53
|
+
debugLog('if', 'Found #else sibling');
|
|
54
|
+
el.removeAttribute('#else');
|
|
55
|
+
const elseComment = document.createComment('else');
|
|
56
|
+
const nextSibling = sibling.nextSibling;
|
|
57
|
+
sibling.parentNode.replaceChild(elseComment, sibling);
|
|
58
|
+
this.chain.push({
|
|
59
|
+
type: 'else',
|
|
60
|
+
element: el,
|
|
61
|
+
comment: elseComment,
|
|
62
|
+
showing: false,
|
|
63
|
+
condition: true, // else is always "true" as fallback
|
|
64
|
+
});
|
|
65
|
+
break; // #else is always last
|
|
66
|
+
}
|
|
67
|
+
else if (el.hasAttribute('#elseif') || el.getAttribute('#elseif') !== null) {
|
|
68
|
+
// Skip — ElseIfDirective will register itself
|
|
69
|
+
sibling = sibling.nextSibling;
|
|
70
|
+
continue;
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
break; // Not part of the chain
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
// Skip text/comment nodes (whitespace between elements)
|
|
77
|
+
sibling = sibling.nextSibling;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Called by ElseIfDirective to register itself in the chain.
|
|
82
|
+
*/
|
|
83
|
+
registerElseIf(directive, element, comment) {
|
|
84
|
+
debugLog('if', 'Registering #elseif branch');
|
|
85
|
+
const branch = {
|
|
86
|
+
type: 'elseif',
|
|
87
|
+
element,
|
|
88
|
+
comment,
|
|
89
|
+
showing: false,
|
|
90
|
+
directive,
|
|
91
|
+
condition: false,
|
|
92
|
+
};
|
|
93
|
+
// Insert before #else (if present), otherwise append
|
|
94
|
+
const elseIdx = this.chain.findIndex(b => b.type === 'else');
|
|
95
|
+
if (elseIdx !== -1) {
|
|
96
|
+
this.chain.splice(elseIdx, 0, branch);
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
this.chain.push(branch);
|
|
100
|
+
}
|
|
101
|
+
this.evaluateChain();
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Called when a registered ElseIfDirective's condition changes.
|
|
105
|
+
*/
|
|
106
|
+
updateElseIfCondition(directive, condition) {
|
|
107
|
+
const branch = this.chain.find(b => b.directive === directive);
|
|
108
|
+
if (branch) {
|
|
109
|
+
branch.condition = condition;
|
|
110
|
+
this.evaluateChain();
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
updateContent(value) {
|
|
114
|
+
this.condition = Boolean(value);
|
|
115
|
+
this.chain[0].condition = this.condition;
|
|
116
|
+
this.evaluateChain();
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Evaluate the if/elseif/else chain and show exactly one branch.
|
|
120
|
+
*/
|
|
121
|
+
evaluateChain() {
|
|
122
|
+
let activeBranch = null;
|
|
123
|
+
for (const branch of this.chain) {
|
|
124
|
+
if (branch.condition) {
|
|
125
|
+
activeBranch = branch;
|
|
126
|
+
break;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
debugLog('if', 'Evaluating chain', {
|
|
130
|
+
chainLength: this.chain.length,
|
|
131
|
+
activeBranch: activeBranch?.type,
|
|
132
|
+
});
|
|
133
|
+
for (const branch of this.chain) {
|
|
134
|
+
const shouldShow = branch === activeBranch;
|
|
135
|
+
if (shouldShow && !branch.showing) {
|
|
136
|
+
// Show: replace comment with element
|
|
137
|
+
branch.comment.parentNode?.replaceChild(branch.element, branch.comment);
|
|
138
|
+
branch.showing = true;
|
|
139
|
+
}
|
|
140
|
+
else if (!shouldShow && branch.showing) {
|
|
141
|
+
// Hide: replace element with comment
|
|
142
|
+
branch.element.parentNode?.replaceChild(branch.comment, branch.element);
|
|
143
|
+
branch.showing = false;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
/**
|
|
149
|
+
* ElseIf directive — registers with the preceding IfDirective.
|
|
150
|
+
*
|
|
151
|
+
* Usage:
|
|
152
|
+
* ```html
|
|
153
|
+
* <div #if=${condition1}>A</div>
|
|
154
|
+
* <div #elseif=${condition2}>B</div>
|
|
155
|
+
* ```
|
|
156
|
+
*/
|
|
157
|
+
export class ElseIfDirective extends StructuralDirective {
|
|
158
|
+
parentIf = null;
|
|
159
|
+
condition = false;
|
|
160
|
+
mount(element) {
|
|
161
|
+
debugLog('elseif', 'Mounting elseif directive');
|
|
162
|
+
this.content = element;
|
|
163
|
+
this.comment = document.createComment('elseif');
|
|
164
|
+
// Remove the static #elseif attribute if present
|
|
165
|
+
if (element.hasAttribute('#elseif')) {
|
|
166
|
+
element.removeAttribute('#elseif');
|
|
167
|
+
}
|
|
168
|
+
// Scan backward to find the parent IfDirective's comment
|
|
169
|
+
let prev = element.previousSibling;
|
|
170
|
+
while (prev) {
|
|
171
|
+
if (prev.nodeType === Node.COMMENT_NODE && prev.__ifDirective) {
|
|
172
|
+
this.parentIf = prev.__ifDirective;
|
|
173
|
+
break;
|
|
174
|
+
}
|
|
175
|
+
// Also check if prev is a comment left by another elseif
|
|
176
|
+
// (in case of multiple elseif in a row)
|
|
177
|
+
if (prev.nodeType === Node.COMMENT_NODE && prev.nodeValue === 'elseif') {
|
|
178
|
+
// Keep scanning backward
|
|
179
|
+
prev = prev.previousSibling;
|
|
180
|
+
continue;
|
|
181
|
+
}
|
|
182
|
+
// Skip whitespace text nodes
|
|
183
|
+
if (prev.nodeType === Node.TEXT_NODE && prev.textContent?.trim() === '') {
|
|
184
|
+
prev = prev.previousSibling;
|
|
185
|
+
continue;
|
|
186
|
+
}
|
|
187
|
+
// If we hit a non-matching element or comment, stop
|
|
188
|
+
break;
|
|
189
|
+
}
|
|
190
|
+
// Replace element with comment
|
|
191
|
+
const parent = element.parentNode;
|
|
192
|
+
if (parent) {
|
|
193
|
+
parent.replaceChild(this.comment, element);
|
|
194
|
+
}
|
|
195
|
+
// Register with parent IfDirective
|
|
196
|
+
if (this.parentIf) {
|
|
197
|
+
this.parentIf.registerElseIf(this, element, this.comment);
|
|
198
|
+
}
|
|
199
|
+
else {
|
|
200
|
+
console.warn('#elseif used without a preceding #if directive');
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
updateContent(value) {
|
|
204
|
+
this.condition = Boolean(value);
|
|
205
|
+
if (this.parentIf) {
|
|
206
|
+
this.parentIf.updateElseIfCondition(this, this.condition);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
//# sourceMappingURL=if.directive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"if.directive.js","sourceRoot":"","sources":["../../../../src/directives/structural/if.directive.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { BaseDirective } from '../directive';
|
|
2
|
+
export declare abstract class StructuralDirective extends BaseDirective {
|
|
3
|
+
protected comment: Comment | null;
|
|
4
|
+
protected content: Element | null;
|
|
5
|
+
constructor(element: Element);
|
|
6
|
+
mount(element: Element): void;
|
|
7
|
+
protected abstract updateContent(value: unknown): void;
|
|
8
|
+
update(value: unknown): void;
|
|
9
|
+
unmount(): void;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=structural.directive.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"structural.directive.d.ts","sourceRoot":"","sources":["../../../../src/directives/structural/structural.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,8BAAsB,mBAAoB,SAAQ,aAAa;IAC3D,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAQ;IACzC,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAQ;gBAE7B,OAAO,EAAE,OAAO;IAK5B,KAAK,CAAC,OAAO,EAAE,OAAO;IAOtB,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAEtD,MAAM,CAAC,KAAK,EAAE,OAAO;IAKrB,OAAO;CAQV"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { BaseDirective } from '../directive';
|
|
2
|
+
import { debugLog } from '../../utils/debug';
|
|
3
|
+
export class StructuralDirective extends BaseDirective {
|
|
4
|
+
comment = null;
|
|
5
|
+
content = null;
|
|
6
|
+
constructor(element) {
|
|
7
|
+
super(element);
|
|
8
|
+
debugLog('structural', 'Creating structural directive');
|
|
9
|
+
}
|
|
10
|
+
mount(element) {
|
|
11
|
+
// Create a comment node as placeholder
|
|
12
|
+
this.comment = document.createComment('structural-directive');
|
|
13
|
+
element.parentNode?.replaceChild(this.comment, element);
|
|
14
|
+
this.content = element;
|
|
15
|
+
}
|
|
16
|
+
update(value) {
|
|
17
|
+
debugLog('structural', 'Updating content', { value });
|
|
18
|
+
this.updateContent(value);
|
|
19
|
+
}
|
|
20
|
+
unmount() {
|
|
21
|
+
debugLog('structural', 'Unmounting');
|
|
22
|
+
if (this.content && this.comment?.parentNode) {
|
|
23
|
+
this.comment.parentNode.removeChild(this.comment);
|
|
24
|
+
}
|
|
25
|
+
this.content = null;
|
|
26
|
+
this.comment = null;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=structural.directive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"structural.directive.js","sourceRoot":"","sources":["../../../../src/directives/structural/structural.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAgB,mBAAoB,SAAQ,aAAa;IACjD,OAAO,GAAmB,IAAI,CAAC;IAC/B,OAAO,GAAmB,IAAI,CAAC;IAEzC,YAAY,OAAgB;QACxB,KAAK,CAAC,OAAO,CAAC,CAAC;QACf,QAAQ,CAAC,YAAY,EAAE,+BAA+B,CAAC,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,OAAgB;QAClB,uCAAuC;QACvC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC9D,OAAO,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACxD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IAC3B,CAAC;IAID,MAAM,CAAC,KAAc;QACjB,QAAQ,CAAC,YAAY,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,OAAO;QACH,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;YAC3C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACtD,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACxB,CAAC;CACJ"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BaseDirective } from '../directive';
|
|
2
|
+
export declare class SwitchDirective extends BaseDirective {
|
|
3
|
+
private value;
|
|
4
|
+
private cases;
|
|
5
|
+
private defaultCase;
|
|
6
|
+
private activeCase;
|
|
7
|
+
mount(element: Element): void;
|
|
8
|
+
update(value: unknown): void;
|
|
9
|
+
private updateActiveCase;
|
|
10
|
+
unmount(): void;
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=switch.directive.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.directive.d.ts","sourceRoot":"","sources":["../../../../src/directives/structural/switch.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,qBAAa,eAAgB,SAAQ,aAAa;IAC9C,OAAO,CAAC,KAAK,CAAiB;IAC9B,OAAO,CAAC,KAAK,CAA+C;IAC5D,OAAO,CAAC,WAAW,CAAoC;IACvD,OAAO,CAAC,UAAU,CAAoC;IAEtD,KAAK,CAAC,OAAO,EAAE,OAAO;IAmBtB,MAAM,CAAC,KAAK,EAAE,OAAO;IAQrB,OAAO,CAAC,gBAAgB;IA6BxB,OAAO;CAWV"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { BaseDirective } from '../directive';
|
|
2
|
+
import { debugLog } from '../../utils/debug';
|
|
3
|
+
export class SwitchDirective extends BaseDirective {
|
|
4
|
+
value = null;
|
|
5
|
+
cases = new Map();
|
|
6
|
+
defaultCase = null;
|
|
7
|
+
activeCase = null;
|
|
8
|
+
mount(element) {
|
|
9
|
+
debugLog('switch', 'Mounting switch directive');
|
|
10
|
+
this.element = element;
|
|
11
|
+
// Find all template elements and register their cases
|
|
12
|
+
const templates = Array.from(element.querySelectorAll('template'));
|
|
13
|
+
templates.forEach(template => {
|
|
14
|
+
if (template.hasAttribute('default')) {
|
|
15
|
+
this.defaultCase = template;
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
const caseValue = template.getAttribute('case');
|
|
19
|
+
if (caseValue) {
|
|
20
|
+
debugLog('switch', 'Registering case', { caseValue });
|
|
21
|
+
this.cases.set(caseValue, template);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
update(value) {
|
|
27
|
+
if (this.value === value)
|
|
28
|
+
return;
|
|
29
|
+
debugLog('switch', 'Update content', { oldValue: this.value, newValue: value });
|
|
30
|
+
this.value = value;
|
|
31
|
+
this.updateActiveCase();
|
|
32
|
+
}
|
|
33
|
+
updateActiveCase() {
|
|
34
|
+
if (!this.element)
|
|
35
|
+
return;
|
|
36
|
+
const valueStr = String(this.value);
|
|
37
|
+
const newCase = this.cases.get(valueStr) || this.defaultCase;
|
|
38
|
+
debugLog('switch', 'Updating active case', {
|
|
39
|
+
value: valueStr,
|
|
40
|
+
hasCase: !!newCase,
|
|
41
|
+
availableCases: Array.from(this.cases.keys()),
|
|
42
|
+
hasDefault: !!this.defaultCase
|
|
43
|
+
});
|
|
44
|
+
if (this.activeCase !== newCase) {
|
|
45
|
+
// Remove old content
|
|
46
|
+
const nonTemplates = Array.from(this.element.children)
|
|
47
|
+
.filter(child => !(child instanceof HTMLTemplateElement));
|
|
48
|
+
nonTemplates.forEach(child => child.remove());
|
|
49
|
+
// Add new content
|
|
50
|
+
if (newCase instanceof HTMLTemplateElement) {
|
|
51
|
+
const content = newCase.content.cloneNode(true);
|
|
52
|
+
this.element.appendChild(content);
|
|
53
|
+
}
|
|
54
|
+
this.activeCase = newCase;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
unmount() {
|
|
58
|
+
if (this.element) {
|
|
59
|
+
const nonTemplates = Array.from(this.element.children)
|
|
60
|
+
.filter(child => !(child instanceof HTMLTemplateElement));
|
|
61
|
+
nonTemplates.forEach(child => child.remove());
|
|
62
|
+
}
|
|
63
|
+
this.cases.clear();
|
|
64
|
+
this.defaultCase = null;
|
|
65
|
+
this.activeCase = null;
|
|
66
|
+
this.element = null;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=switch.directive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.directive.js","sourceRoot":"","sources":["../../../../src/directives/structural/switch.directive.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { StructuralDirective } from './structural.directive';
|
|
2
|
+
import { TemplateResult } from '../../processor/template-result';
|
|
3
|
+
/**
|
|
4
|
+
* Configuration passed to the #virtualScroll directive.
|
|
5
|
+
*/
|
|
6
|
+
export interface VirtualScrollDirectiveConfig<T = unknown> {
|
|
7
|
+
/** Full list of items */
|
|
8
|
+
items: readonly T[];
|
|
9
|
+
/** Fixed height of each item in pixels */
|
|
10
|
+
itemHeight: number;
|
|
11
|
+
/** Height of the scrollable container in pixels */
|
|
12
|
+
containerHeight: number;
|
|
13
|
+
/** Render function for each visible item */
|
|
14
|
+
render: (item: T, index: number) => TemplateResult;
|
|
15
|
+
/** Extra items above/below the visible area (default: 3) */
|
|
16
|
+
overscan?: number;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Structural directive that virtualizes a list, rendering only the visible
|
|
20
|
+
* items. Manages its own scroll container, spacer, and content region.
|
|
21
|
+
*
|
|
22
|
+
* Usage:
|
|
23
|
+
* ```html
|
|
24
|
+
* <div #virtualScroll=${{
|
|
25
|
+
* items: this.items,
|
|
26
|
+
* itemHeight: 40,
|
|
27
|
+
* containerHeight: 400,
|
|
28
|
+
* render: (item, i) => html`<div class="row">${item.name}</div>`,
|
|
29
|
+
* overscan: 3
|
|
30
|
+
* }}></div>
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export declare class VirtualScrollDirective extends StructuralDirective {
|
|
34
|
+
private scrollContainer;
|
|
35
|
+
private spacer;
|
|
36
|
+
private contentWrapper;
|
|
37
|
+
private childInstances;
|
|
38
|
+
private config;
|
|
39
|
+
private scrollTop;
|
|
40
|
+
private rafId;
|
|
41
|
+
private get processor();
|
|
42
|
+
mount(element: Element): void;
|
|
43
|
+
update(value: unknown): Promise<void>;
|
|
44
|
+
unmount(): void;
|
|
45
|
+
protected updateContent(_value: unknown): void;
|
|
46
|
+
private onScroll;
|
|
47
|
+
private renderSlice;
|
|
48
|
+
private clearChildren;
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=virtual-scroll.directive.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"virtual-scroll.directive.d.ts","sourceRoot":"","sources":["../../../../src/directives/structural/virtual-scroll.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAIjE;;GAEG;AACH,MAAM,WAAW,4BAA4B,CAAC,CAAC,GAAG,OAAO;IACrD,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,eAAe,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;IACnD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAAa,sBAAuB,SAAQ,mBAAmB;IAC3D,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,cAAc,CAAa;IACnC,OAAO,CAAC,MAAM,CAA6C;IAC3D,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,KAAK,CAAuB;IAEpC,OAAO,KAAK,SAAS,GAEpB;IAID,KAAK,CAAC,OAAO,EAAE,OAAO;IAiChB,MAAM,CAAC,KAAK,EAAE,OAAO;IA+B3B,OAAO;IAqBP,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAI9C,OAAO,CAAC,QAAQ,CAcd;YAEY,WAAW;IA2CzB,OAAO,CAAC,aAAa;CAcxB"}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import { StructuralDirective } from './structural.directive';
|
|
2
|
+
import { TemplateResult } from '../../processor/template-result';
|
|
3
|
+
import { getDefaultProcessor } from '../../processor/types';
|
|
4
|
+
import { debugLog } from '../../utils/debug';
|
|
5
|
+
/**
|
|
6
|
+
* Structural directive that virtualizes a list, rendering only the visible
|
|
7
|
+
* items. Manages its own scroll container, spacer, and content region.
|
|
8
|
+
*
|
|
9
|
+
* Usage:
|
|
10
|
+
* ```html
|
|
11
|
+
* <div #virtualScroll=${{
|
|
12
|
+
* items: this.items,
|
|
13
|
+
* itemHeight: 40,
|
|
14
|
+
* containerHeight: 400,
|
|
15
|
+
* render: (item, i) => html`<div class="row">${item.name}</div>`,
|
|
16
|
+
* overscan: 3
|
|
17
|
+
* }}></div>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export class VirtualScrollDirective extends StructuralDirective {
|
|
21
|
+
scrollContainer = null;
|
|
22
|
+
spacer = null;
|
|
23
|
+
contentWrapper = null;
|
|
24
|
+
childInstances = [];
|
|
25
|
+
config = null;
|
|
26
|
+
scrollTop = 0;
|
|
27
|
+
rafId = null;
|
|
28
|
+
get processor() {
|
|
29
|
+
return getDefaultProcessor();
|
|
30
|
+
}
|
|
31
|
+
// ── Lifecycle ────────────────────────────────────────
|
|
32
|
+
mount(element) {
|
|
33
|
+
super.mount(element);
|
|
34
|
+
// Build the DOM skeleton:
|
|
35
|
+
// <comment:structural-directive>
|
|
36
|
+
// <div.vs-container>
|
|
37
|
+
// <div.vs-spacer>
|
|
38
|
+
// <div.vs-content>
|
|
39
|
+
// ...visible items...
|
|
40
|
+
// </div>
|
|
41
|
+
// </div>
|
|
42
|
+
// </div>
|
|
43
|
+
this.scrollContainer = document.createElement('div');
|
|
44
|
+
this.scrollContainer.style.cssText = 'overflow-y:auto;position:relative;';
|
|
45
|
+
this.spacer = document.createElement('div');
|
|
46
|
+
this.spacer.style.cssText = 'position:relative;';
|
|
47
|
+
this.contentWrapper = document.createElement('div');
|
|
48
|
+
this.contentWrapper.style.cssText = 'position:absolute;left:0;right:0;top:0;';
|
|
49
|
+
this.spacer.appendChild(this.contentWrapper);
|
|
50
|
+
this.scrollContainer.appendChild(this.spacer);
|
|
51
|
+
// Insert after the comment placeholder
|
|
52
|
+
this.comment.parentNode.insertBefore(this.scrollContainer, this.comment.nextSibling);
|
|
53
|
+
// Native scroll listener — updates only the visible slice, no reactive cycle
|
|
54
|
+
this.scrollContainer.addEventListener('scroll', this.onScroll, { passive: true });
|
|
55
|
+
debugLog('virtualScroll', 'Mounted virtual scroll directive');
|
|
56
|
+
}
|
|
57
|
+
async update(value) {
|
|
58
|
+
if (!value || typeof value !== 'object') {
|
|
59
|
+
debugLog('virtualScroll', 'Invalid config', { value });
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
const cfg = value;
|
|
63
|
+
// Validate required fields
|
|
64
|
+
if (!Array.isArray(cfg.items) || typeof cfg.itemHeight !== 'number' ||
|
|
65
|
+
typeof cfg.containerHeight !== 'number' || typeof cfg.render !== 'function') {
|
|
66
|
+
debugLog('virtualScroll', 'Missing required config fields', { value });
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
this.config = cfg;
|
|
70
|
+
// Apply container height
|
|
71
|
+
if (this.scrollContainer) {
|
|
72
|
+
this.scrollContainer.style.height = `${cfg.containerHeight}px`;
|
|
73
|
+
}
|
|
74
|
+
// Apply total height
|
|
75
|
+
const totalHeight = cfg.items.length * cfg.itemHeight;
|
|
76
|
+
if (this.spacer) {
|
|
77
|
+
this.spacer.style.height = `${totalHeight}px`;
|
|
78
|
+
}
|
|
79
|
+
await this.renderSlice();
|
|
80
|
+
}
|
|
81
|
+
unmount() {
|
|
82
|
+
if (this.rafId !== null) {
|
|
83
|
+
cancelAnimationFrame(this.rafId);
|
|
84
|
+
this.rafId = null;
|
|
85
|
+
}
|
|
86
|
+
if (this.scrollContainer) {
|
|
87
|
+
this.scrollContainer.removeEventListener('scroll', this.onScroll);
|
|
88
|
+
this.scrollContainer.parentNode?.removeChild(this.scrollContainer);
|
|
89
|
+
}
|
|
90
|
+
this.clearChildren();
|
|
91
|
+
this.scrollContainer = null;
|
|
92
|
+
this.spacer = null;
|
|
93
|
+
this.contentWrapper = null;
|
|
94
|
+
this.config = null;
|
|
95
|
+
super.unmount();
|
|
96
|
+
}
|
|
97
|
+
// ── Internal ─────────────────────────────────────────
|
|
98
|
+
updateContent(_value) {
|
|
99
|
+
// Not used — we override update() directly
|
|
100
|
+
}
|
|
101
|
+
onScroll = () => {
|
|
102
|
+
if (!this.scrollContainer)
|
|
103
|
+
return;
|
|
104
|
+
const newTop = this.scrollContainer.scrollTop;
|
|
105
|
+
if (newTop === this.scrollTop)
|
|
106
|
+
return;
|
|
107
|
+
this.scrollTop = newTop;
|
|
108
|
+
// Coalesce with rAF to avoid layout thrashing
|
|
109
|
+
if (this.rafId === null) {
|
|
110
|
+
this.rafId = requestAnimationFrame(() => {
|
|
111
|
+
this.rafId = null;
|
|
112
|
+
this.renderSlice();
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
async renderSlice() {
|
|
117
|
+
if (!this.config || !this.contentWrapper)
|
|
118
|
+
return;
|
|
119
|
+
const { items, itemHeight, containerHeight, render, overscan = 3 } = this.config;
|
|
120
|
+
const totalCount = items.length;
|
|
121
|
+
// Compute visible range
|
|
122
|
+
const rawStart = Math.floor(this.scrollTop / itemHeight);
|
|
123
|
+
const visibleCount = Math.ceil(containerHeight / itemHeight);
|
|
124
|
+
const startIndex = Math.max(0, rawStart - overscan);
|
|
125
|
+
const endIndex = Math.min(totalCount, rawStart + visibleCount + overscan);
|
|
126
|
+
// Position the content wrapper
|
|
127
|
+
this.contentWrapper.style.top = `${startIndex * itemHeight}px`;
|
|
128
|
+
// Clear previous children
|
|
129
|
+
this.clearChildren();
|
|
130
|
+
// Render visible items
|
|
131
|
+
const fragment = document.createDocumentFragment();
|
|
132
|
+
for (let i = startIndex; i < endIndex; i++) {
|
|
133
|
+
const result = render(items[i], i);
|
|
134
|
+
if (result instanceof TemplateResult && this.processor) {
|
|
135
|
+
const instance = await this.processor.createInstance(result, { item: items[i], index: i });
|
|
136
|
+
this.childInstances.push(instance);
|
|
137
|
+
fragment.appendChild(instance.getFragment());
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
fragment.appendChild(document.createTextNode(String(result)));
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
this.contentWrapper.appendChild(fragment);
|
|
144
|
+
debugLog('virtualScroll', 'Rendered slice', {
|
|
145
|
+
startIndex,
|
|
146
|
+
endIndex,
|
|
147
|
+
total: totalCount,
|
|
148
|
+
rendered: endIndex - startIndex,
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
clearChildren() {
|
|
152
|
+
for (const instance of this.childInstances) {
|
|
153
|
+
if (instance.disconnect) {
|
|
154
|
+
instance.disconnect();
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
this.childInstances = [];
|
|
158
|
+
if (this.contentWrapper) {
|
|
159
|
+
while (this.contentWrapper.firstChild) {
|
|
160
|
+
this.contentWrapper.removeChild(this.contentWrapper.firstChild);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
//# sourceMappingURL=virtual-scroll.directive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"virtual-scroll.directive.js","sourceRoot":"","sources":["../../../../src/directives/structural/virtual-scroll.directive.ts"],"names":[],"mappings":"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"}
|