ladrillosjs 2.0.0-beta.10 → 2.0.0-beta.11.1
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 +158 -14
- package/dist/core/configure.d.ts +24 -0
- package/dist/core/html/controlTagEscape.d.ts +47 -0
- package/dist/core/js/moduleExecutor.d.ts +19 -0
- package/dist/core/js/scriptParser.d.ts +35 -1
- package/dist/core.js +1 -1
- package/dist/core.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/lazy.js +1 -1
- package/dist/shared-B9h4a1Iw.js +3 -0
- package/dist/shared-B9h4a1Iw.js.map +1 -0
- package/dist/types/index.d.ts +6 -0
- package/dist/utils/directives.d.ts +10 -0
- package/dist/utils/jsevents.d.ts +5 -0
- package/dist/utils/sandbox.d.ts +11 -0
- package/package.json +6 -3
- package/dist/shared-CCPr4_4R.js +0 -3
- package/dist/shared-CCPr4_4R.js.map +0 -1
- package/dist/shared-cwUZzSZ7.js +0 -2
- package/dist/shared-cwUZzSZ7.js.map +0 -1
package/README.md
CHANGED
|
@@ -26,14 +26,17 @@
|
|
|
26
26
|
- [Quick Start](#-quick-start)
|
|
27
27
|
- [Installation](#-installation)
|
|
28
28
|
- [Core Concepts](#-core-concepts)
|
|
29
|
-
- [Directives](#-directives)
|
|
29
|
+
- [Built-in Elements & Directives](#-built-in-elements--directives)
|
|
30
30
|
- [Event Bus](#-event-bus)
|
|
31
31
|
- [Element References](#-element-references)
|
|
32
32
|
- [Lazy Loading](#-lazy-loading)
|
|
33
33
|
- [API Reference](#-api-reference)
|
|
34
34
|
- [Using with Vite](#-using-with-vite)
|
|
35
35
|
- [Browser Support](#-browser-support)
|
|
36
|
+
- [Benchmarks](#-benchmarks)
|
|
36
37
|
- [Examples](#-examples)
|
|
38
|
+
- [Documentation](#-documentation)
|
|
39
|
+
- [Security & Trust Model](#-security--trust-model)
|
|
37
40
|
- [Contributing](#-contributing)
|
|
38
41
|
- [License](#-license)
|
|
39
42
|
|
|
@@ -41,16 +44,7 @@
|
|
|
41
44
|
|
|
42
45
|
## 🚀 Quick Start
|
|
43
46
|
|
|
44
|
-
### 1.
|
|
45
|
-
|
|
46
|
-
```html
|
|
47
|
-
<script type="module">
|
|
48
|
-
import ladrillosjs from "https://cdn.jsdelivr.net/npm/ladrillosjs@2/dist/index.js";
|
|
49
|
-
window.ladrillosjs = ladrillosjs;
|
|
50
|
-
</script>
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### 2. Create a Component
|
|
47
|
+
### 1. Create a Component
|
|
54
48
|
|
|
55
49
|
Save this as `counter.html`:
|
|
56
50
|
|
|
@@ -86,7 +80,10 @@ Save this as `counter.html`:
|
|
|
86
80
|
</style>
|
|
87
81
|
```
|
|
88
82
|
|
|
89
|
-
###
|
|
83
|
+
### 2. Register and Use It
|
|
84
|
+
|
|
85
|
+
In your `index.html`, import LadrillosJS from the CDN, register the
|
|
86
|
+
component, and drop the tag anywhere on the page:
|
|
90
87
|
|
|
91
88
|
```html
|
|
92
89
|
<!DOCTYPE html>
|
|
@@ -103,8 +100,21 @@ Save this as `counter.html`:
|
|
|
103
100
|
</html>
|
|
104
101
|
```
|
|
105
102
|
|
|
103
|
+
### 3. Serve It
|
|
104
|
+
|
|
105
|
+
Components are fetched over HTTP, so serve the folder with any static server
|
|
106
|
+
(opening the file directly via `file://` won't work — browsers block `fetch`
|
|
107
|
+
from local files):
|
|
108
|
+
|
|
109
|
+
```bash
|
|
110
|
+
npx serve # or: python -m http.server 8080
|
|
111
|
+
```
|
|
112
|
+
|
|
106
113
|
That's it! Your reactive component is ready. 🎉
|
|
107
114
|
|
|
115
|
+
> 📚 **Want more?** The [full documentation](docs/README.md) covers every
|
|
116
|
+
> feature step by step, from your first component to building a design system.
|
|
117
|
+
|
|
108
118
|
---
|
|
109
119
|
|
|
110
120
|
## 📦 Installation
|
|
@@ -205,6 +215,20 @@ Attach events directly in HTML with inline expressions or function calls:
|
|
|
205
215
|
<form onsubmit="handleSubmit(event)">...</form>
|
|
206
216
|
```
|
|
207
217
|
|
|
218
|
+
Or use the `$on:` directive with **modifiers** — dot-separated flags for
|
|
219
|
+
common patterns like `preventDefault`, key filtering, and modifier keys:
|
|
220
|
+
|
|
221
|
+
```html
|
|
222
|
+
<form $on:submit.prevent="handleSubmit()">...</form>
|
|
223
|
+
<input $on:keyup.enter="search()" />
|
|
224
|
+
<textarea $on:keydown.ctrl.s.prevent="save()"></textarea>
|
|
225
|
+
<div $on:click.self="closeModal()">...</div>
|
|
226
|
+
<button $on:click.once="trackFirstClick()">Buy</button>
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
See the [Event Modifiers reference](docs/20-event-modifiers.md) for every
|
|
230
|
+
modifier and combination.
|
|
231
|
+
|
|
208
232
|
### Two-Way Binding
|
|
209
233
|
|
|
210
234
|
Use `$bind` to sync form inputs with state:
|
|
@@ -325,6 +349,8 @@ Use `<lazy>` to defer rendering until a trigger fires (viewport, idle, delay, in
|
|
|
325
349
|
| `<lazy>` | Defer rendering | `<lazy idle><analytics-pixel /></lazy>` |
|
|
326
350
|
| `$bind` | Two-way binding | `<input $bind="email" />` |
|
|
327
351
|
| `$ref` | Element reference | `<input $ref="inputEl" />` |
|
|
352
|
+
| `$on:` + modifiers | Events with modifiers | `<form $on:submit.prevent="save()">` |
|
|
353
|
+
| `$no:bind` | Escape `{}` binding | `<code $no:bind>{literal}</code>` |
|
|
328
354
|
|
|
329
355
|
---
|
|
330
356
|
|
|
@@ -531,9 +557,32 @@ import { configure } from "ladrillosjs";
|
|
|
531
557
|
configure({
|
|
532
558
|
cacheSize: 50, // Component LRU cache size (default: 25)
|
|
533
559
|
onError: (err) => telemetry.capture(err), // Custom error handler
|
|
560
|
+
delegateLoopEvents: true, // Opt-in loop event delegation (default: false)
|
|
534
561
|
});
|
|
535
562
|
```
|
|
536
563
|
|
|
564
|
+
#### `delegateLoopEvents`
|
|
565
|
+
|
|
566
|
+
By default every handler inside a `<for>` row gets its own listener. With
|
|
567
|
+
`delegateLoopEvents: true`, eligible handlers share **one listener per event
|
|
568
|
+
type** on the loop's container — thousands of rows, a handful of listeners.
|
|
569
|
+
Templates and handler code don't change at all, and render performance is
|
|
570
|
+
the same either way; enable it when listener count itself matters (very
|
|
571
|
+
large lists, memory-constrained devices, many handlers per row).
|
|
572
|
+
|
|
573
|
+
Fine print:
|
|
574
|
+
|
|
575
|
+
- Non-bubbling events (`focus`, `blur`, `mouseenter`, …) and handlers using
|
|
576
|
+
the `.self`, `.capture`, `.once`, or `.passive` modifiers automatically
|
|
577
|
+
keep per-element listeners. `.stop`, `.prevent`, and key/system modifiers
|
|
578
|
+
work identically in both modes.
|
|
579
|
+
- `event.currentTarget` inside a delegated handler is the list container,
|
|
580
|
+
not the row element (`event.target` is unaffected).
|
|
581
|
+
- If you manually attach your own listener on an element inside a row and
|
|
582
|
+
call `stopPropagation()`, delegated handlers above it won't fire.
|
|
583
|
+
- Call `configure()` before your components render; already-rendered loops
|
|
584
|
+
keep the mode they were created with.
|
|
585
|
+
|
|
537
586
|
### Event Bus
|
|
538
587
|
|
|
539
588
|
| Function | Description |
|
|
@@ -575,6 +624,54 @@ See the [samples/](samples/) directory for complete examples:
|
|
|
575
624
|
|
|
576
625
|
---
|
|
577
626
|
|
|
627
|
+
## 📊 Benchmarks
|
|
628
|
+
|
|
629
|
+
A [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark)–style
|
|
630
|
+
suite lives in [benchmarks/](benchmarks/). It renders the same keyed
|
|
631
|
+
1,000-row list in LadrillosJS, React 18 (keyed, memoized rows — the
|
|
632
|
+
idiomatic fast path), and hand-optimized vanilla JS, and measures each
|
|
633
|
+
operation from invocation until the live DOM reflects the change.
|
|
634
|
+
Medians of 10 runs, headless Chromium on an Apple M5 Pro,
|
|
635
|
+
`ladrillosjs@2.0.0-beta.11`:
|
|
636
|
+
|
|
637
|
+
| Operation | LadrillosJS | React 18.3 (keyed, memoized rows) | Vanilla JS (hand-optimized) |
|
|
638
|
+
|---|---:|---:|---:|
|
|
639
|
+
| create 1,000 rows | **3.7 ms** | 4.1 ms | 1.8 ms |
|
|
640
|
+
| replace all 1,000 rows | **4.1 ms** | 7 ms | 2 ms |
|
|
641
|
+
| partial update (every 10th of 1,000) | 1.1 ms | 1.2 ms | 0.2 ms |
|
|
642
|
+
| select row | 0.7 ms | 0.4 ms | 0 ms |
|
|
643
|
+
| swap 2 rows | **1.1 ms** | 3.3 ms | 0.1 ms |
|
|
644
|
+
| remove row | 1 ms | 1 ms | 0 ms |
|
|
645
|
+
| append 1,000 to 1,000 rows | **3.8 ms** | 4.3 ms | 1.3 ms |
|
|
646
|
+
| clear 1,000 rows | **1.3 ms** | 5.1 ms | 0.8 ms |
|
|
647
|
+
| create 10,000 rows | **28.9 ms** | 218.3 ms | 13 ms |
|
|
648
|
+
| **JS payload (min+gzip)** | **25.9 KB** | **47 KB** | ~1 KB |
|
|
649
|
+
| JS heap after 1,000 rows | 2.4 MB | 6.2 MB | 1.3 MB |
|
|
650
|
+
|
|
651
|
+
**How to read this honestly:**
|
|
652
|
+
|
|
653
|
+
- Every operation lands well within a single 60 fps frame (16.7 ms):
|
|
654
|
+
updates on a 1,000-row list take about a millisecond, and bulk creation
|
|
655
|
+
of 1,000 rows is under 5 ms.
|
|
656
|
+
- LadrillosJS beats React on bulk creation (and by 7× on 10,000 rows),
|
|
657
|
+
full replaces, row swaps, and clearing, while shipping **half the JS**
|
|
658
|
+
and using **~60% less memory** for the same UI.
|
|
659
|
+
- React 18 remains faster on single-row selection, and partial updates
|
|
660
|
+
are a tie. We publish these numbers to track and improve them — not to
|
|
661
|
+
claim LadrillosJS wins everything.
|
|
662
|
+
- Vanilla JS is the baseline.
|
|
663
|
+
|
|
664
|
+
Reproduce it yourself (no benchmark numbers should be trusted otherwise):
|
|
665
|
+
|
|
666
|
+
```bash
|
|
667
|
+
cd benchmarks && npm install && npm run bench
|
|
668
|
+
```
|
|
669
|
+
|
|
670
|
+
Methodology, fairness notes, and raw samples: [benchmarks/README.md](benchmarks/README.md)
|
|
671
|
+
and [benchmarks/results.json](benchmarks/results.json).
|
|
672
|
+
|
|
673
|
+
---
|
|
674
|
+
|
|
578
675
|
## 📚 Examples
|
|
579
676
|
|
|
580
677
|
### Todo List
|
|
@@ -591,9 +688,9 @@ A complete CRUD example combining all directives:
|
|
|
591
688
|
<ul>
|
|
592
689
|
<for each="todo in todos" key="todo.id">
|
|
593
690
|
<li>
|
|
594
|
-
<input type="checkbox" onclick="toggleTodo(
|
|
691
|
+
<input type="checkbox" onclick="toggleTodo(todo.id)" />
|
|
595
692
|
<span class="{todo.completed ? 'done' : ''}">{todo.text}</span>
|
|
596
|
-
<button onclick="removeTodo(
|
|
693
|
+
<button onclick="removeTodo(todo.id)">🗑️</button>
|
|
597
694
|
</li>
|
|
598
695
|
</for>
|
|
599
696
|
</ul>
|
|
@@ -633,6 +730,52 @@ A complete CRUD example combining all directives:
|
|
|
633
730
|
|
|
634
731
|
---
|
|
635
732
|
|
|
733
|
+
## 📚 Documentation
|
|
734
|
+
|
|
735
|
+
Full guides live in the [docs/](docs/README.md) folder:
|
|
736
|
+
|
|
737
|
+
| Start here | Reference | Advanced |
|
|
738
|
+
| ---------- | --------- | -------- |
|
|
739
|
+
| [Quick Start](docs/01-quick-start.md) | [Built-in Elements & Directives](docs/06-directives.md) | [Event Bus](docs/12-event-bus.md) |
|
|
740
|
+
| [Installation](docs/02-installation.md) | [Event Modifiers (`$on:`)](docs/20-event-modifiers.md) | [Lazy Loading](docs/13-lazy-loading.md) |
|
|
741
|
+
| [Components](docs/03-components.md) | [Conditionals & Loops](docs/07-conditionals.md) | [Shadow DOM](docs/14-shadow-dom.md) |
|
|
742
|
+
| [Reactivity](docs/04-reactivity.md) | [Two-Way Binding](docs/09-two-way-binding.md) | [Design System Guide](docs/19-design-system.md) |
|
|
743
|
+
|
|
744
|
+
Upgrading from v1? See the [Migration Guide](docs/17-migration-v1-to-v2.md).
|
|
745
|
+
Using TypeScript? See the [TypeScript guide](docs/18-typescript.md).
|
|
746
|
+
|
|
747
|
+
---
|
|
748
|
+
|
|
749
|
+
## 🔒 Security & Trust Model
|
|
750
|
+
|
|
751
|
+
**Component HTML is trusted code. Treat a `.html` component the same way you'd
|
|
752
|
+
treat a `.js` file you `import`.**
|
|
753
|
+
|
|
754
|
+
LadrillosJS runs the `<script>` in each component, evaluates your `{expression}`
|
|
755
|
+
bindings, and compiles your inline event handlers as JavaScript with full access
|
|
756
|
+
to the page (`window`, `document`, `fetch`, `localStorage`, …). This is by design
|
|
757
|
+
— it's what lets components feel like plain HTML + JS with no build step, exactly
|
|
758
|
+
like the template in a Vue single-file component or a Svelte `.svelte` file. It
|
|
759
|
+
also means the framework is **not** a sandbox: you should only register and run
|
|
760
|
+
component files that you wrote or otherwise trust.
|
|
761
|
+
|
|
762
|
+
Practical guidance:
|
|
763
|
+
|
|
764
|
+
- ✅ **Do** author your own components and load them from your own origin.
|
|
765
|
+
- ❌ **Don't** fetch and register component HTML from untrusted third parties, or
|
|
766
|
+
build component files by concatenating user input into a template — that's
|
|
767
|
+
equivalent to running arbitrary code from that source.
|
|
768
|
+
- ✅ **Dynamic *data* is fine.** Rendering untrusted **data** — API responses,
|
|
769
|
+
user comments, list items — through bindings and `<for>` loops is safe: values
|
|
770
|
+
are set via `textContent`/`setAttribute` and passed to event handlers as
|
|
771
|
+
arguments, never executed as code. (Interpolating into `innerHTML` yourself, or
|
|
772
|
+
into a `<script>`/handler you assemble by hand, is not — same rule as above.)
|
|
773
|
+
|
|
774
|
+
In short: untrusted **data** through LadrillosJS's bindings is safe; untrusted
|
|
775
|
+
**templates/scripts** are not, because those *are* your application code.
|
|
776
|
+
|
|
777
|
+
---
|
|
778
|
+
|
|
636
779
|
## 🤝 Contributing
|
|
637
780
|
|
|
638
781
|
Contributions are welcome! Here's how you can help:
|
|
@@ -651,6 +794,7 @@ cd LadrillosJS
|
|
|
651
794
|
npm install
|
|
652
795
|
npm run dev # Watch mode for development
|
|
653
796
|
npm run build # Build for production
|
|
797
|
+
npm test # Unit tests (Vitest)
|
|
654
798
|
```
|
|
655
799
|
|
|
656
800
|
---
|
package/dist/core/configure.d.ts
CHANGED
|
@@ -18,7 +18,31 @@ export interface LadrillosConfig {
|
|
|
18
18
|
* });
|
|
19
19
|
*/
|
|
20
20
|
onError?: LadrillosErrorHandler | null;
|
|
21
|
+
/**
|
|
22
|
+
* Opt-in event delegation for `<for>` loop rows. When enabled, eligible
|
|
23
|
+
* inline handlers (onclick, $on:… on bubbling events) inside loop rows
|
|
24
|
+
* share ONE listener per event type on the loop's container instead of
|
|
25
|
+
* one listener per element — faster bulk row creation and less memory on
|
|
26
|
+
* large lists. Handler code and template syntax are unchanged.
|
|
27
|
+
*
|
|
28
|
+
* Two observable differences versus direct listeners:
|
|
29
|
+
* 1. `event.currentTarget` inside a loop handler is the list container,
|
|
30
|
+
* not the row element (`event.target` is unaffected).
|
|
31
|
+
* 2. A manual `stopPropagation()` call from a listener you attach
|
|
32
|
+
* yourself between the row and the container stops delegated
|
|
33
|
+
* handlers from firing.
|
|
34
|
+
*
|
|
35
|
+
* Non-bubbling events (focus, blur, mouseenter, …) and handlers using
|
|
36
|
+
* the `.self`, `.capture`, `.once`, or `.passive` modifiers automatically
|
|
37
|
+
* keep per-element listeners.
|
|
38
|
+
*
|
|
39
|
+
* Set this before components render; templates already rendered keep the
|
|
40
|
+
* mode they were created with. Defaults to false.
|
|
41
|
+
*/
|
|
42
|
+
delegateLoopEvents?: boolean;
|
|
21
43
|
}
|
|
44
|
+
/** Whether opt-in loop event delegation is active (see LadrillosConfig). */
|
|
45
|
+
export declare function isLoopDelegationEnabled(): boolean;
|
|
22
46
|
/**
|
|
23
47
|
* Configure framework-level options.
|
|
24
48
|
*
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Table-safe parsing for built-in control elements.
|
|
3
|
+
*
|
|
4
|
+
* The HTML parser's table insertion modes foster-parent anything that is
|
|
5
|
+
* not valid table content out of `<table>`/`<thead>`/`<tbody>`/`<tr>`.
|
|
6
|
+
* Built-in control elements (`<for>`, `<if>`, `<else-if>`, `<else>`,
|
|
7
|
+
* `<show>`) are unknown to the parser, so markup like
|
|
8
|
+
*
|
|
9
|
+
* <table><tbody>
|
|
10
|
+
* <for each="row in rows" key="row.id">
|
|
11
|
+
* <tr><td>{row.id}</td></tr>
|
|
12
|
+
* </for>
|
|
13
|
+
* </tbody></table>
|
|
14
|
+
*
|
|
15
|
+
* gets mangled BEFORE the framework ever sees the tree: `<for>` is
|
|
16
|
+
* hoisted out of the table and the raw `<tr>` template is left behind,
|
|
17
|
+
* un-bound. This applies to every parse entry point — `DOMParser` and
|
|
18
|
+
* `template.innerHTML` alike.
|
|
19
|
+
*
|
|
20
|
+
* `<template>` elements, however, ARE valid anywhere inside a table, and
|
|
21
|
+
* their content model is parsed leniently (a bare `<tr>` or `<td>` inside
|
|
22
|
+
* template content survives). So before parsing we rewrite control tags to
|
|
23
|
+
* `<template data-l-ctrl="…">` placeholders at the string level, and after
|
|
24
|
+
* parsing we rebuild the real control elements with DOM APIs — which the
|
|
25
|
+
* parser's content rules cannot touch.
|
|
26
|
+
*/
|
|
27
|
+
/**
|
|
28
|
+
* Rewrites control-element tags to `<template data-l-ctrl="…">`
|
|
29
|
+
* placeholders so the HTML parser cannot foster-parent them out of table
|
|
30
|
+
* contexts. Must be paired with {@link restoreControlTags} on the parsed
|
|
31
|
+
* tree.
|
|
32
|
+
*/
|
|
33
|
+
export declare function escapeControlTags(html: string): string;
|
|
34
|
+
/**
|
|
35
|
+
* Rebuilds real control elements from the placeholders produced by
|
|
36
|
+
* {@link escapeControlTags}. Runs until no placeholder remains: restoring
|
|
37
|
+
* an outer placeholder moves its (previously inert) template content into
|
|
38
|
+
* the live tree, exposing any nested placeholders to the next iteration.
|
|
39
|
+
* User-authored `<template>` elements are recursed into so control tags
|
|
40
|
+
* inside their inert content are restored as well.
|
|
41
|
+
*/
|
|
42
|
+
export declare function restoreControlTags(root: ParentNode): void;
|
|
43
|
+
/**
|
|
44
|
+
* Returns true when the element is a restored control element
|
|
45
|
+
* (`<for>`, `<if>`, `<else-if>`, `<else>`, `<show>`).
|
|
46
|
+
*/
|
|
47
|
+
export declare function isControlElement(el: Element): boolean;
|
|
@@ -20,6 +20,25 @@ export declare function rewriteImports(code: string, baseUrl: string): string;
|
|
|
20
20
|
* @returns Promise that resolves when the module has executed
|
|
21
21
|
*/
|
|
22
22
|
export declare function executeModuleScript(script: ScriptElement, componentUrl: string, componentId?: string): Promise<unknown>;
|
|
23
|
+
/**
|
|
24
|
+
* Transforms import statements to wrap imported values in reactive proxies.
|
|
25
|
+
* This enables imported arrays to trigger UI updates when mutated.
|
|
26
|
+
*
|
|
27
|
+
* Transforms:
|
|
28
|
+
* import { foo, bar } from "./module.js";
|
|
29
|
+
*
|
|
30
|
+
* Into:
|
|
31
|
+
* import { foo as __raw_foo, bar as __raw_bar } from "./module.js";
|
|
32
|
+
* const foo = __wrapReactiveArray(__raw_foo, __ladrillos_componentId, "foo");
|
|
33
|
+
* const bar = __wrapReactiveArray(__raw_bar, __ladrillos_componentId, "bar");
|
|
34
|
+
*
|
|
35
|
+
* @param code - The module code with imports
|
|
36
|
+
* @returns Transformed code with reactive import wrapping
|
|
37
|
+
*
|
|
38
|
+
* Exported for tests (the blob-URL execution path can't run under Node).
|
|
39
|
+
*/
|
|
40
|
+
export declare function transformImportsForReactivity(code: string): string;
|
|
41
|
+
export declare function generateHelperInjectionCode(componentId?: string, componentUrl?: string, exclude?: ReadonlySet<string>): string;
|
|
23
42
|
/**
|
|
24
43
|
* Executes an external module script.
|
|
25
44
|
* For external scripts, we fetch the content, auto-export all declarations,
|
|
@@ -31,6 +31,8 @@ export declare function applyBindingsDeferred(host: HTMLElement | ShadowRoot, bi
|
|
|
31
31
|
* Extracts function definitions from script content.
|
|
32
32
|
* These will be re-created in the event handler context with current state values.
|
|
33
33
|
*
|
|
34
|
+
* Memoized: the output is a pure function of (content, skipFunctions).
|
|
35
|
+
*
|
|
34
36
|
* @param content - The script content to extract functions from
|
|
35
37
|
* @param skipFunctions - Function names to skip (already in state as reactive functions)
|
|
36
38
|
*/
|
|
@@ -44,9 +46,41 @@ export declare function extractFunctionDefinitions(content: string, skipFunction
|
|
|
44
46
|
* Exported so webcomponent.ts can use it for observedAttributes.
|
|
45
47
|
*/
|
|
46
48
|
export declare function extractVariableNames(content: string): string[];
|
|
49
|
+
/**
|
|
50
|
+
* A pass-scoped evaluator bound to one context object, produced by
|
|
51
|
+
* `DirectiveEvaluator.forContext`. Callable as `(expr) => unknown`; the
|
|
52
|
+
* optional members let hot loops skip per-eval overhead (see
|
|
53
|
+
* `createContextEvaluator` for the mode semantics).
|
|
54
|
+
*/
|
|
55
|
+
export interface BoundEvaluator {
|
|
56
|
+
(expr: string): unknown;
|
|
57
|
+
/**
|
|
58
|
+
* Refill argument slots from the context: the volatile slots in static
|
|
59
|
+
* mode, all slots in legacy mode. Static-mode callers MUST call this
|
|
60
|
+
* after mutating a volatile context value.
|
|
61
|
+
*/
|
|
62
|
+
refresh?: () => void;
|
|
63
|
+
/** Compiled Function for `expr` under this key set, or null on a syntax error. */
|
|
64
|
+
compile?: (expr: string) => Function | null;
|
|
65
|
+
/** Invoke a Function from `compile` against the current argument slots. */
|
|
66
|
+
invoke?: (fn: Function, expr: string) => unknown;
|
|
67
|
+
/** Key-set signature; compiled Functions are only valid for a matching sig. */
|
|
68
|
+
sig?: string;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Directive-facing expression evaluator. Callable as
|
|
72
|
+
* `(expr, context) => unknown`; `forContext` additionally builds a
|
|
73
|
+
* pass-scoped fast evaluator bound to one context object (see
|
|
74
|
+
* `createContextEvaluator`) whose key set must not change for the
|
|
75
|
+
* lifetime of the returned function.
|
|
76
|
+
*/
|
|
77
|
+
export interface DirectiveEvaluator {
|
|
78
|
+
(expr: string, context: Record<string, unknown>): unknown;
|
|
79
|
+
forContext(context: Record<string, unknown>, volatileKeys?: readonly string[]): BoundEvaluator;
|
|
80
|
+
}
|
|
47
81
|
/**
|
|
48
82
|
* Creates and returns an expression evaluator function for use by directives.
|
|
49
83
|
* This allows directives to evaluate expressions like "item.name" or "count > 5"
|
|
50
84
|
* in the context of the component's state.
|
|
51
85
|
*/
|
|
52
|
-
export declare function createExpressionEvaluator():
|
|
86
|
+
export declare function createExpressionEvaluator(): DirectiveEvaluator;
|
package/dist/core.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{d as s,
|
|
1
|
+
import{d as s,f as e,i as r,m as a,p as o}from"./shared-B9h4a1Iw.js";var t={registerComponent:o,registerComponents:a,$use:e,configure:r};export{e as $use,s as ErrorCode,r as configure,t as default,o as registerComponent,a as registerComponents};
|
|
2
2
|
//# sourceMappingURL=core.js.map
|
package/dist/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.js","names":[],"sources":["../src/core.ts"],"sourcesContent":["/**\r\n * LadrillosJS Core - Minimal bundle\r\n *\r\n * This is the core module containing only essential functionality.\r\n * Use this for the smallest possible bundle size.\r\n *\r\n * @example\r\n * ```ts\r\n * import { registerComponent } from 'ladrillosjs/core';\r\n * ```\r\n *\r\n * For additional features, import from:\r\n * - 'ladrillosjs/lazy' - Lazy loading strategies\r\n * - 'ladrillosjs/events' - Event bus for cross-component communication\r\n */\r\n\r\nimport { ComponentConfig, RegisterComponentsResult } from \"./core/ladrillos\";\r\nimport {\r\n registerComponent,\r\n registerComponents,\r\n $use,\r\n} from \"./core/helpers/frameworkHelpers\";\r\nimport { configure, LadrillosConfig } from \"./core/configure\";\r\nimport { ErrorCode, type LadrillosErrorHandler } from \"./utils/devWarnings\";\r\n\r\n// Export public types\r\nexport type {\r\n ComponentConfig,\r\n RegisterComponentsResult,\r\n LadrillosConfig,\r\n LadrillosErrorHandler,\r\n};\r\nexport type { LadrillosComponent } from \"./types\";\r\n\r\n// Export error code enum\r\nexport { ErrorCode };\r\n\r\n// Public exports\r\nexport { registerComponent, registerComponents, $use, configure };\r\n\r\n// Default export for CDN usage\r\nexport default {\r\n registerComponent,\r\n registerComponents,\r\n $use,\r\n configure,\r\n};\r\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"core.js","names":[],"sources":["../src/core.ts"],"sourcesContent":["/**\r\n * LadrillosJS Core - Minimal bundle\r\n *\r\n * This is the core module containing only essential functionality.\r\n * Use this for the smallest possible bundle size.\r\n *\r\n * @example\r\n * ```ts\r\n * import { registerComponent } from 'ladrillosjs/core';\r\n * ```\r\n *\r\n * For additional features, import from:\r\n * - 'ladrillosjs/lazy' - Lazy loading strategies\r\n * - 'ladrillosjs/events' - Event bus for cross-component communication\r\n */\r\n\r\nimport { ComponentConfig, RegisterComponentsResult } from \"./core/ladrillos\";\r\nimport {\r\n registerComponent,\r\n registerComponents,\r\n $use,\r\n} from \"./core/helpers/frameworkHelpers\";\r\nimport { configure, LadrillosConfig } from \"./core/configure\";\r\nimport { ErrorCode, type LadrillosErrorHandler } from \"./utils/devWarnings\";\r\n\r\n// Export public types\r\nexport type {\r\n ComponentConfig,\r\n RegisterComponentsResult,\r\n LadrillosConfig,\r\n LadrillosErrorHandler,\r\n};\r\nexport type { LadrillosComponent } from \"./types\";\r\n\r\n// Export error code enum\r\nexport { ErrorCode };\r\n\r\n// Public exports\r\nexport { registerComponent, registerComponents, $use, configure };\r\n\r\n// Default export for CDN usage\r\nexport default {\r\n registerComponent,\r\n registerComponents,\r\n $use,\r\n configure,\r\n};\r\n"],"mappings":"qEAyCA,IAAA,EAAe,CACb,oBACA,qBACA,OACA"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,
|
|
1
|
+
import{c as a,d as s,f as e,i as n,l as o,m as t,o as r,p as l,s as i,t as m,u as d}from"./shared-B9h4a1Iw.js";import{n as p,t as y}from"./shared-D-P0qKQY.js";var z=a=>m.loadLazyComponent(a),f={registerComponent:l,registerComponents:t,$use:e,$emit:y,$listen:p,loadLazyComponent:z,configure:n,lazyOnIdle:i,lazyOnVisible:d,lazyOnMedia:o,lazyOnInteraction:a,lazyOnDelay:r};export{y as $emit,p as $listen,e as $use,s as ErrorCode,n as configure,f as default,r as lazyOnDelay,i as lazyOnIdle,a as lazyOnInteraction,o as lazyOnMedia,d as lazyOnVisible,z as loadLazyComponent,l as registerComponent,t as registerComponents};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import {\r\n ladrillos,\r\n ComponentConfig,\r\n RegisterComponentsResult,\r\n} from \"./core/ladrillos\";\r\nimport {\r\n registerComponent,\r\n registerComponents,\r\n $use,\r\n} from \"./core/helpers/frameworkHelpers\";\r\nimport { $emit, $listen, EventCallback } from \"./core/events/eventBus\";\r\nimport { configure, LadrillosConfig } from \"./core/configure\";\r\nimport { ErrorCode, type LadrillosErrorHandler } from \"./utils/devWarnings\";\r\n\r\n// Import lazy loading strategies\r\nimport {\r\n LazyStrategy,\r\n lazyOnIdle,\r\n lazyOnVisible,\r\n lazyOnMedia,\r\n lazyOnInteraction,\r\n lazyOnDelay,\r\n} from \"./core/lazy\";\r\n\r\n// Export public types\r\nexport type {\r\n ComponentConfig,\r\n RegisterComponentsResult,\r\n EventCallback,\r\n LazyStrategy,\r\n LadrillosConfig,\r\n LadrillosErrorHandler,\r\n};\r\nexport type { LadrillosComponent } from \"./types\";\r\n\r\n// Export error code enum for consumers to branch on\r\nexport { ErrorCode };\r\n\r\n// Export lazy loading strategies\r\nexport {\r\n lazyOnIdle,\r\n lazyOnVisible,\r\n lazyOnMedia,\r\n lazyOnInteraction,\r\n lazyOnDelay,\r\n};\r\n\r\n// Force load a lazy component\r\nexport const loadLazyComponent = (name: string) =>\r\n ladrillos.loadLazyComponent(name);\r\n\r\n// Framework configuration\r\nexport { configure };\r\n\r\n// Component registration + $use alias + event bus helpers\r\nexport { registerComponent, registerComponents, $use, $emit, $listen };\r\n\r\n// Default export with all methods for CDN usage\r\n// This allows: ladrillosjs.registerComponent() in CDN mode\r\nexport default {\r\n registerComponent,\r\n registerComponents,\r\n $use,\r\n $emit,\r\n $listen,\r\n loadLazyComponent,\r\n configure,\r\n // Lazy loading strategies\r\n lazyOnIdle,\r\n lazyOnVisible,\r\n lazyOnMedia,\r\n lazyOnInteraction,\r\n lazyOnDelay,\r\n};\r\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import {\r\n ladrillos,\r\n ComponentConfig,\r\n RegisterComponentsResult,\r\n} from \"./core/ladrillos\";\r\nimport {\r\n registerComponent,\r\n registerComponents,\r\n $use,\r\n} from \"./core/helpers/frameworkHelpers\";\r\nimport { $emit, $listen, EventCallback } from \"./core/events/eventBus\";\r\nimport { configure, LadrillosConfig } from \"./core/configure\";\r\nimport { ErrorCode, type LadrillosErrorHandler } from \"./utils/devWarnings\";\r\n\r\n// Import lazy loading strategies\r\nimport {\r\n LazyStrategy,\r\n lazyOnIdle,\r\n lazyOnVisible,\r\n lazyOnMedia,\r\n lazyOnInteraction,\r\n lazyOnDelay,\r\n} from \"./core/lazy\";\r\n\r\n// Export public types\r\nexport type {\r\n ComponentConfig,\r\n RegisterComponentsResult,\r\n EventCallback,\r\n LazyStrategy,\r\n LadrillosConfig,\r\n LadrillosErrorHandler,\r\n};\r\nexport type { LadrillosComponent } from \"./types\";\r\n\r\n// Export error code enum for consumers to branch on\r\nexport { ErrorCode };\r\n\r\n// Export lazy loading strategies\r\nexport {\r\n lazyOnIdle,\r\n lazyOnVisible,\r\n lazyOnMedia,\r\n lazyOnInteraction,\r\n lazyOnDelay,\r\n};\r\n\r\n// Force load a lazy component\r\nexport const loadLazyComponent = (name: string) =>\r\n ladrillos.loadLazyComponent(name);\r\n\r\n// Framework configuration\r\nexport { configure };\r\n\r\n// Component registration + $use alias + event bus helpers\r\nexport { registerComponent, registerComponents, $use, $emit, $listen };\r\n\r\n// Default export with all methods for CDN usage\r\n// This allows: ladrillosjs.registerComponent() in CDN mode\r\nexport default {\r\n registerComponent,\r\n registerComponents,\r\n $use,\r\n $emit,\r\n $listen,\r\n loadLazyComponent,\r\n configure,\r\n // Lazy loading strategies\r\n lazyOnIdle,\r\n lazyOnVisible,\r\n lazyOnMedia,\r\n lazyOnInteraction,\r\n lazyOnDelay,\r\n};\r\n"],"mappings":"+JAgDA,IAAa,EAAqB,GAChC,EAAU,kBAAkB,GAU9B,EAAe,CACb,oBACA,qBACA,OACA,QACA,UACA,oBACA,YAEA,aACA,gBACA,cACA,oBACA"}
|
package/dist/lazy.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as s,c as a,
|
|
1
|
+
import{a as s,c as a,l as r,n as o,o as e,r as m,s as p,u as t}from"./shared-B9h4a1Iw.js";export{s as defaultLazyStrategy,o as forceLoadLazyComponent,m as isLazyComponent,e as lazyOnDelay,p as lazyOnIdle,a as lazyOnInteraction,r as lazyOnMedia,t as lazyOnVisible};
|