llm-testrunner-components 1.0.0 → 1.0.2
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 +139 -81
- package/dist/cjs/{index-CCrH7f-W.js → index-CY2lQip_.js} +190 -33
- package/dist/cjs/index-CY2lQip_.js.map +1 -0
- package/dist/cjs/index.cjs.js +391 -5
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/llm-test-runner.cjs.entry.js +9 -0
- package/dist/cjs/llm-test-runner.entry.cjs.js.map +1 -0
- package/dist/cjs/{llm-testrunner-components.cjs.js → llm-testrunner.cjs.js} +5 -7
- package/dist/cjs/llm-testrunner.cjs.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -4
- package/dist/collection/collection-manifest.json +3 -4
- package/dist/collection/components/error-message/error-message.js +8 -0
- package/dist/collection/components/error-message/error-message.js.map +1 -0
- package/dist/collection/components/llm-test-runner/llm-test-runner.css +671 -0
- package/dist/collection/components/llm-test-runner/llm-test-runner.js +310 -0
- package/dist/collection/components/llm-test-runner/llm-test-runner.js.map +1 -0
- package/dist/collection/index.js +4 -10
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/lib/evaluation/evaluation-engine.js +61 -0
- package/dist/collection/lib/evaluation/evaluation-engine.js.map +1 -0
- package/dist/collection/lib/evaluation/index.js +7 -0
- package/dist/collection/lib/evaluation/index.js.map +1 -0
- package/dist/collection/lib/evaluation/types.js +2 -0
- package/dist/collection/lib/evaluation/types.js.map +1 -0
- package/dist/components/index.js +1652 -4
- package/dist/components/index.js.map +1 -1
- package/dist/components/{current-time.d.ts → llm-test-runner.d.ts} +4 -4
- package/dist/components/llm-test-runner.js +9 -0
- package/dist/components/llm-test-runner.js.map +1 -0
- package/dist/esm/{index-0jlGA6MK.js → index-DBp-rMPb.js} +190 -33
- package/dist/esm/index-DBp-rMPb.js.map +1 -0
- package/dist/esm/index.js +391 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/llm-test-runner.entry.js +3 -0
- package/dist/esm/llm-test-runner.entry.js.map +1 -0
- package/dist/esm/{llm-testrunner-components.js → llm-testrunner.js} +5 -7
- package/dist/esm/llm-testrunner.js.map +1 -0
- package/dist/esm/loader.js +3 -5
- package/dist/llm-testrunner/index.esm.js +2 -0
- package/dist/llm-testrunner/index.esm.js.map +1 -0
- package/dist/llm-testrunner/llm-test-runner.entry.esm.js.map +1 -0
- package/dist/llm-testrunner/llm-testrunner.esm.js +2 -0
- package/dist/llm-testrunner/llm-testrunner.esm.js.map +1 -0
- package/dist/llm-testrunner/p-DBp-rMPb.js +3 -0
- package/dist/llm-testrunner/p-DBp-rMPb.js.map +1 -0
- package/dist/llm-testrunner/p-ed2ea423.entry.js +2 -0
- package/dist/llm-testrunner/p-ed2ea423.entry.js.map +1 -0
- package/dist/react/components.d.ts +9 -0
- package/dist/react/components.d.ts.map +1 -0
- package/dist/react/components.js +12 -0
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.d.ts.map +1 -0
- package/dist/react/index.js +2 -0
- package/dist/types/components/error-message/error-message.d.ts +7 -0
- package/dist/types/components/llm-test-runner/llm-test-runner.d.ts +42 -0
- package/dist/types/components.d.ts +11 -46
- package/dist/types/index.d.ts +2 -10
- package/dist/types/lib/evaluation/evaluation-engine.d.ts +8 -0
- package/dist/types/lib/evaluation/index.d.ts +5 -0
- package/dist/types/lib/evaluation/types.d.ts +23 -0
- package/dist/types/stencil-public-runtime.d.ts +41 -3
- package/package.json +33 -12
- package/dist/cjs/current-time.my-component.entry.cjs.js.map +0 -1
- package/dist/cjs/current-time_2.cjs.entry.js +0 -67
- package/dist/cjs/current-time_2.cjs.entry.js.map +0 -1
- package/dist/cjs/index-CCrH7f-W.js.map +0 -1
- package/dist/cjs/llm-testrunner-components.cjs.js.map +0 -1
- package/dist/collection/components/my-component/current-time.js +0 -35
- package/dist/collection/components/my-component/current-time.js.map +0 -1
- package/dist/collection/components/my-component/my-component.css +0 -3
- package/dist/collection/components/my-component/my-component.js +0 -96
- package/dist/collection/components/my-component/my-component.js.map +0 -1
- package/dist/collection/utils/utils.js +0 -4
- package/dist/collection/utils/utils.js.map +0 -1
- package/dist/components/current-time.js +0 -9
- package/dist/components/current-time.js.map +0 -1
- package/dist/components/my-component.d.ts +0 -11
- package/dist/components/my-component.js +0 -63
- package/dist/components/my-component.js.map +0 -1
- package/dist/components/p-CbvWSaCI.js +0 -53
- package/dist/components/p-CbvWSaCI.js.map +0 -1
- package/dist/components/p-DnDi6fKi.js +0 -1101
- package/dist/components/p-DnDi6fKi.js.map +0 -1
- package/dist/esm/current-time.my-component.entry.js.map +0 -1
- package/dist/esm/current-time_2.entry.js +0 -64
- package/dist/esm/current-time_2.entry.js.map +0 -1
- package/dist/esm/index-0jlGA6MK.js.map +0 -1
- package/dist/esm/llm-testrunner-components.js.map +0 -1
- package/dist/llm-testrunner-components/current-time.my-component.entry.esm.js.map +0 -1
- package/dist/llm-testrunner-components/index.esm.js +0 -2
- package/dist/llm-testrunner-components/index.esm.js.map +0 -1
- package/dist/llm-testrunner-components/llm-testrunner-components.esm.js +0 -2
- package/dist/llm-testrunner-components/llm-testrunner-components.esm.js.map +0 -1
- package/dist/llm-testrunner-components/p-0jlGA6MK.js +0 -3
- package/dist/llm-testrunner-components/p-0jlGA6MK.js.map +0 -1
- package/dist/llm-testrunner-components/p-15e5e0fe.entry.js +0 -2
- package/dist/llm-testrunner-components/p-15e5e0fe.entry.js.map +0 -1
- package/dist/types/components/my-component/current-time.d.ts +0 -7
- package/dist/types/components/my-component/my-component.d.ts +0 -16
- package/dist/types/utils/utils.d.ts +0 -1
- /package/dist/{llm-testrunner-components → llm-testrunner}/loader.esm.js.map +0 -0
- /package/dist/{llm-testrunner-components → llm-testrunner}/p-DQuL1Twl.js +0 -0
- /package/dist/{llm-testrunner-components → llm-testrunner}/p-DQuL1Twl.js.map +0 -0
package/README.md
CHANGED
|
@@ -1,108 +1,93 @@
|
|
|
1
1
|
# LLM TestRunner Web Components
|
|
2
2
|
|
|
3
|
-
A Stencil web component library that provides
|
|
3
|
+
A Stencil web component library that provides a comprehensive LLM testing solution with automated evaluation capabilities.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
The LLM TestRunner is a tool for testing Large Language Model (LLM) responses against expected criteria. It provides a complete interface for:
|
|
8
|
+
|
|
9
|
+
- **Question Management**: Add, edit, and organize test questions
|
|
10
|
+
- **AI Integration**: Direct integration with Google's Gemini AI API
|
|
11
|
+
- **Automated Evaluation**: Built-in evaluation engine that checks responses against expected keywords and source links
|
|
12
|
+
- **Batch Testing**: Run multiple tests sequentially
|
|
13
|
+
- **Real-time Results**: Live evaluation results with pass/fail indicators
|
|
4
14
|
|
|
5
15
|
## Components
|
|
6
16
|
|
|
7
|
-
### `<
|
|
8
|
-
|
|
17
|
+
### `<llm-test-runner>`
|
|
18
|
+
The main component that provides a complete LLM testing interface.
|
|
9
19
|
|
|
10
|
-
**
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
20
|
+
**Features:**
|
|
21
|
+
- Question input with expected keywords and source links
|
|
22
|
+
- Real-time AI response generation via Gemini API
|
|
23
|
+
- Test case management (add, delete, run individual or all tests)
|
|
24
|
+
- Built-in evaluation engine with keyword and source link matching
|
|
25
|
+
- Error handling and loading states
|
|
26
|
+
- Rate limiting for batch operations
|
|
14
27
|
|
|
15
|
-
**
|
|
28
|
+
**Usage:**
|
|
16
29
|
```html
|
|
17
|
-
<
|
|
30
|
+
<llm-test-runner api-key="your-gemini-api-key-here"></llm-test-runner>
|
|
18
31
|
```
|
|
19
32
|
|
|
20
|
-
|
|
21
|
-
A component that displays the current time and updates every second.
|
|
33
|
+
## 🎯 Usage Modes
|
|
22
34
|
|
|
23
|
-
|
|
35
|
+
### 1. Direct HTML Usage
|
|
36
|
+
Simply include the component in your HTML:
|
|
24
37
|
```html
|
|
25
|
-
|
|
38
|
+
<!DOCTYPE html>
|
|
39
|
+
<html>
|
|
40
|
+
<head>
|
|
41
|
+
<script type="module" src="/build/llm-testrunner.esm.js"></script>
|
|
42
|
+
<script nomodule src="/build/llm-testrunner.js"></script>
|
|
43
|
+
</head>
|
|
44
|
+
<body>
|
|
45
|
+
<llm-test-runner api-key="your-gemini-api-key-here"></llm-test-runner>
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
|
26
48
|
```
|
|
27
49
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
npm adduser
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
2. **Build the components:**
|
|
36
|
-
```bash
|
|
37
|
-
npm run build
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
3. **Publish to NPM:**
|
|
41
|
-
```bash
|
|
42
|
-
npm publish --access public
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
## Using in React Applications
|
|
46
|
-
|
|
47
|
-
### Installation
|
|
50
|
+
### 2. Library Integration
|
|
51
|
+
Import as a module in your application:
|
|
52
|
+
```javascript
|
|
53
|
+
import { LLMTestRunner } from 'llm-testrunner-components';
|
|
48
54
|
|
|
49
|
-
|
|
50
|
-
npm install @arupmishra/llm-testrunner-components
|
|
55
|
+
// The component is automatically registered and ready to use
|
|
51
56
|
```
|
|
52
57
|
|
|
53
|
-
|
|
58
|
+
## Configuration
|
|
54
59
|
|
|
55
|
-
|
|
60
|
+
### API Key Prop
|
|
61
|
+
The component accepts the Gemini API key as a prop.
|
|
56
62
|
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
// Define TypeScript types for the custom elements
|
|
62
|
-
declare global {
|
|
63
|
-
namespace JSX {
|
|
64
|
-
interface IntrinsicElements {
|
|
65
|
-
'my-component': any;
|
|
66
|
-
'current-time': any;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
}
|
|
63
|
+
```html
|
|
64
|
+
<llm-test-runner api-key="your-gemini-api-key-here"></llm-test-runner>
|
|
65
|
+
```
|
|
70
66
|
|
|
67
|
+
### React/JSX Usage
|
|
68
|
+
```jsx
|
|
71
69
|
function App() {
|
|
72
|
-
useEffect(() => {
|
|
73
|
-
// Define the custom elements when the component mounts
|
|
74
|
-
defineCustomElements();
|
|
75
|
-
}, []);
|
|
76
|
-
|
|
77
70
|
return (
|
|
78
71
|
<div>
|
|
79
|
-
<
|
|
80
|
-
<current-time></current-time>
|
|
72
|
+
<llm-test-runner apiKey="your-gemini-api-key-here" />
|
|
81
73
|
</div>
|
|
82
74
|
);
|
|
83
75
|
}
|
|
84
76
|
```
|
|
85
77
|
|
|
86
|
-
|
|
78
|
+
## Evaluation Engine
|
|
87
79
|
|
|
88
|
-
|
|
89
|
-
// types/stencil-components.d.ts
|
|
90
|
-
import { JSX as LocalJSX } from '@arupmishra/llm-testrunner-components';
|
|
91
|
-
import { HTMLAttributes } from 'react';
|
|
80
|
+
The built-in evaluation engine provides:
|
|
92
81
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
};
|
|
82
|
+
- **Keyword Matching**: Case-insensitive matching of expected keywords in AI responses
|
|
83
|
+
- **Source Link Validation**: Checks for presence of expected URLs in responses
|
|
84
|
+
- **Pass/Fail Logic**: Tests pass only when ALL expected items are found
|
|
85
|
+
- **Detailed Results**: Shows which keywords and links were found/missing
|
|
98
86
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
```
|
|
87
|
+
### Evaluation Criteria
|
|
88
|
+
- **Keywords**: Must be present in the AI response (case-insensitive)
|
|
89
|
+
- **Source Links**: Must be present as exact URL matches
|
|
90
|
+
- **Pass Condition**: ALL expected keywords AND source links must be found
|
|
106
91
|
|
|
107
92
|
## Development
|
|
108
93
|
|
|
@@ -121,16 +106,89 @@ npm test
|
|
|
121
106
|
npm start
|
|
122
107
|
```
|
|
123
108
|
|
|
124
|
-
|
|
109
|
+
### Project Structure
|
|
110
|
+
```
|
|
111
|
+
src/
|
|
112
|
+
├── components/
|
|
113
|
+
│ └── llm-test-runner/ # Main component
|
|
114
|
+
│ ├── llm-test-runner.tsx # Component logic
|
|
115
|
+
│ ├── llm-test-runner.css # Styling
|
|
116
|
+
│ └── readme.md # Component documentation
|
|
117
|
+
├── lib/
|
|
118
|
+
│ └── evaluation/ # Evaluation engine
|
|
119
|
+
│ ├── evaluation-engine.ts # Core evaluation logic
|
|
120
|
+
│ ├── types.ts # TypeScript interfaces
|
|
121
|
+
│ └── index.ts # Exports
|
|
122
|
+
└── index.ts # Main library exports
|
|
123
|
+
```
|
|
125
124
|
|
|
126
|
-
|
|
125
|
+
## Using in React Applications
|
|
127
126
|
|
|
128
|
-
|
|
127
|
+
### Installation
|
|
129
128
|
```bash
|
|
130
|
-
|
|
131
|
-
|
|
129
|
+
npm install llm-testrunner-components
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Integration
|
|
133
|
+
```tsx
|
|
134
|
+
import React, { useEffect } from 'react';
|
|
135
|
+
import { defineCustomElements } from 'llm-testrunner-components/loader';
|
|
136
|
+
|
|
137
|
+
function App() {
|
|
138
|
+
useEffect(() => {
|
|
139
|
+
defineCustomElements();
|
|
140
|
+
}, []);
|
|
141
|
+
|
|
142
|
+
return (
|
|
143
|
+
<div>
|
|
144
|
+
<h1>LLM Test Runner</h1>
|
|
145
|
+
<llm-test-runner api-key="your-gemini-api-key-here"></llm-test-runner>
|
|
146
|
+
</div>
|
|
147
|
+
);
|
|
148
|
+
}
|
|
132
149
|
```
|
|
133
150
|
|
|
134
|
-
|
|
151
|
+
### TypeScript Support
|
|
152
|
+
```tsx
|
|
153
|
+
declare global {
|
|
154
|
+
namespace JSX {
|
|
155
|
+
interface IntrinsicElements {
|
|
156
|
+
'llm-test-runner': any;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
```
|
|
135
161
|
|
|
136
|
-
|
|
162
|
+
## API Reference
|
|
163
|
+
|
|
164
|
+
### Component Props
|
|
165
|
+
```typescript
|
|
166
|
+
interface LLMTestRunnerProps {
|
|
167
|
+
apiKey: string; // Required: Your Gemini API key
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### TestCase Interface
|
|
172
|
+
```typescript
|
|
173
|
+
interface TestCase {
|
|
174
|
+
id: string;
|
|
175
|
+
question: string;
|
|
176
|
+
expectedKeywords: string[];
|
|
177
|
+
expectedSourceLinks: string[];
|
|
178
|
+
output?: string;
|
|
179
|
+
isRunning?: boolean;
|
|
180
|
+
error?: string;
|
|
181
|
+
evaluationResult?: EvaluationResult;
|
|
182
|
+
}
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### EvaluationResult Interface
|
|
186
|
+
```typescript
|
|
187
|
+
interface EvaluationResult {
|
|
188
|
+
testCaseId: string;
|
|
189
|
+
passed: boolean;
|
|
190
|
+
keywordMatches: KeywordMatch[];
|
|
191
|
+
sourceLinkMatches: SourceLinkMatch[];
|
|
192
|
+
timestamp?: string;
|
|
193
|
+
}
|
|
194
|
+
```
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const NAMESPACE = 'llm-testrunner
|
|
4
|
-
const BUILD = /* llm-testrunner
|
|
3
|
+
const NAMESPACE = 'llm-testrunner';
|
|
4
|
+
const BUILD = /* llm-testrunner */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, updatable: true};
|
|
5
5
|
|
|
6
6
|
/*
|
|
7
|
-
Stencil Client Platform v4.
|
|
7
|
+
Stencil Client Platform v4.38.1 | MIT Licensed | https://stenciljs.com
|
|
8
8
|
*/
|
|
9
9
|
var __defProp = Object.defineProperty;
|
|
10
10
|
var __export = (target, all) => {
|
|
@@ -20,21 +20,31 @@ var reWireGetterSetter = (instance, hostRef) => {
|
|
|
20
20
|
members.map(([memberName, [memberFlags]]) => {
|
|
21
21
|
if ((memberFlags & 31 /* Prop */ || memberFlags & 32 /* State */)) {
|
|
22
22
|
const ogValue = instance[memberName];
|
|
23
|
-
const ogDescriptor =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
23
|
+
const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName) || Object.getOwnPropertyDescriptor(instance, memberName);
|
|
24
|
+
if (ogDescriptor) {
|
|
25
|
+
Object.defineProperty(instance, memberName, {
|
|
26
|
+
get() {
|
|
27
|
+
return ogDescriptor.get.call(this);
|
|
28
|
+
},
|
|
29
|
+
set(newValue) {
|
|
30
|
+
ogDescriptor.set.call(this, newValue);
|
|
31
|
+
},
|
|
32
|
+
configurable: true,
|
|
33
|
+
enumerable: true
|
|
34
|
+
});
|
|
35
|
+
}
|
|
34
36
|
instance[memberName] = hostRef.$instanceValues$.has(memberName) ? hostRef.$instanceValues$.get(memberName) : ogValue;
|
|
35
37
|
}
|
|
36
38
|
});
|
|
37
39
|
};
|
|
40
|
+
function getPropertyDescriptor(obj, memberName) {
|
|
41
|
+
while (obj) {
|
|
42
|
+
const desc = Object.getOwnPropertyDescriptor(obj, memberName);
|
|
43
|
+
if (desc == null ? void 0 : desc.get) return desc;
|
|
44
|
+
obj = Object.getPrototypeOf(obj);
|
|
45
|
+
}
|
|
46
|
+
return void 0;
|
|
47
|
+
}
|
|
38
48
|
|
|
39
49
|
// src/client/client-host-ref.ts
|
|
40
50
|
var getHostRef = (ref) => {
|
|
@@ -44,6 +54,7 @@ var getHostRef = (ref) => {
|
|
|
44
54
|
return void 0;
|
|
45
55
|
};
|
|
46
56
|
var registerInstance = (lazyInstance, hostRef) => {
|
|
57
|
+
if (!hostRef) return;
|
|
47
58
|
lazyInstance.__stencil__getHostRef = () => hostRef;
|
|
48
59
|
hostRef.$lazyInstance$ = lazyInstance;
|
|
49
60
|
{
|
|
@@ -55,17 +66,22 @@ var registerHost = (hostElement, cmpMeta) => {
|
|
|
55
66
|
$flags$: 0,
|
|
56
67
|
$hostElement$: hostElement,
|
|
57
68
|
$cmpMeta$: cmpMeta,
|
|
58
|
-
$instanceValues$: /* @__PURE__ */ new Map()
|
|
69
|
+
$instanceValues$: /* @__PURE__ */ new Map(),
|
|
70
|
+
$serializerValues$: /* @__PURE__ */ new Map()
|
|
59
71
|
};
|
|
60
72
|
{
|
|
61
73
|
hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
|
|
62
74
|
hostElement["s-p"] = [];
|
|
63
75
|
hostElement["s-rc"] = [];
|
|
64
76
|
}
|
|
77
|
+
{
|
|
78
|
+
hostRef.$fetchedCbList$ = [];
|
|
79
|
+
}
|
|
65
80
|
const ref = hostRef;
|
|
66
81
|
hostElement.__stencil__getHostRef = () => ref;
|
|
67
82
|
return ref;
|
|
68
83
|
};
|
|
84
|
+
var isMemberInElement = (elm, memberName) => memberName in elm;
|
|
69
85
|
var consoleError = (e, el) => (0, console.error)(e, el);
|
|
70
86
|
|
|
71
87
|
// src/client/client-load-module.ts
|
|
@@ -390,6 +406,19 @@ var h = (nodeName, vnodeData, ...children) => {
|
|
|
390
406
|
if (vnodeData.key) {
|
|
391
407
|
key = vnodeData.key;
|
|
392
408
|
}
|
|
409
|
+
{
|
|
410
|
+
const classData = vnodeData.className || vnodeData.class;
|
|
411
|
+
if (classData) {
|
|
412
|
+
vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
if (typeof nodeName === "function") {
|
|
417
|
+
return nodeName(
|
|
418
|
+
vnodeData === null ? {} : vnodeData,
|
|
419
|
+
vNodeChildren,
|
|
420
|
+
vdomFnUtils
|
|
421
|
+
);
|
|
393
422
|
}
|
|
394
423
|
const vnode = newVNode(nodeName, null);
|
|
395
424
|
vnode.$attrs$ = vnodeData;
|
|
@@ -419,6 +448,36 @@ var newVNode = (tag, text) => {
|
|
|
419
448
|
};
|
|
420
449
|
var Host = {};
|
|
421
450
|
var isHost = (node) => node && node.$tag$ === Host;
|
|
451
|
+
var vdomFnUtils = {
|
|
452
|
+
forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
|
|
453
|
+
map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
|
|
454
|
+
};
|
|
455
|
+
var convertToPublic = (node) => ({
|
|
456
|
+
vattrs: node.$attrs$,
|
|
457
|
+
vchildren: node.$children$,
|
|
458
|
+
vkey: node.$key$,
|
|
459
|
+
vname: node.$name$,
|
|
460
|
+
vtag: node.$tag$,
|
|
461
|
+
vtext: node.$text$
|
|
462
|
+
});
|
|
463
|
+
var convertToPrivate = (node) => {
|
|
464
|
+
if (typeof node.vtag === "function") {
|
|
465
|
+
const vnodeData = { ...node.vattrs };
|
|
466
|
+
if (node.vkey) {
|
|
467
|
+
vnodeData.key = node.vkey;
|
|
468
|
+
}
|
|
469
|
+
if (node.vname) {
|
|
470
|
+
vnodeData.name = node.vname;
|
|
471
|
+
}
|
|
472
|
+
return h(node.vtag, vnodeData, ...node.vchildren || []);
|
|
473
|
+
}
|
|
474
|
+
const vnode = newVNode(node.vtag, node.vtext);
|
|
475
|
+
vnode.$attrs$ = node.vattrs;
|
|
476
|
+
vnode.$children$ = node.vchildren;
|
|
477
|
+
vnode.$key$ = node.vkey;
|
|
478
|
+
vnode.$name$ = node.vname;
|
|
479
|
+
return vnode;
|
|
480
|
+
};
|
|
422
481
|
var createSupportsRuleRe = (selector) => {
|
|
423
482
|
const safeSelector2 = escapeRegExpSpecialCharacters(selector);
|
|
424
483
|
return new RegExp(
|
|
@@ -449,8 +508,85 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
|
|
|
449
508
|
if (oldValue === newValue) {
|
|
450
509
|
return;
|
|
451
510
|
}
|
|
452
|
-
memberName
|
|
511
|
+
let isProp = isMemberInElement(elm, memberName);
|
|
512
|
+
let ln = memberName.toLowerCase();
|
|
513
|
+
if (memberName === "class") {
|
|
514
|
+
const classList = elm.classList;
|
|
515
|
+
const oldClasses = parseClassList(oldValue);
|
|
516
|
+
let newClasses = parseClassList(newValue);
|
|
517
|
+
{
|
|
518
|
+
classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
|
|
519
|
+
classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
|
|
520
|
+
}
|
|
521
|
+
} else if (memberName === "key") ; else if (memberName === "ref") {
|
|
522
|
+
if (newValue) {
|
|
523
|
+
newValue(elm);
|
|
524
|
+
}
|
|
525
|
+
} else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
|
|
526
|
+
if (memberName[2] === "-") {
|
|
527
|
+
memberName = memberName.slice(3);
|
|
528
|
+
} else if (isMemberInElement(win, ln)) {
|
|
529
|
+
memberName = ln.slice(2);
|
|
530
|
+
} else {
|
|
531
|
+
memberName = ln[2] + memberName.slice(3);
|
|
532
|
+
}
|
|
533
|
+
if (oldValue || newValue) {
|
|
534
|
+
const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
|
|
535
|
+
memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
|
|
536
|
+
if (oldValue) {
|
|
537
|
+
plt.rel(elm, memberName, oldValue, capture);
|
|
538
|
+
}
|
|
539
|
+
if (newValue) {
|
|
540
|
+
plt.ael(elm, memberName, newValue, capture);
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
} else {
|
|
544
|
+
const isComplex = isComplexType(newValue);
|
|
545
|
+
if ((isProp || isComplex && newValue !== null) && true) {
|
|
546
|
+
try {
|
|
547
|
+
if (!elm.tagName.includes("-")) {
|
|
548
|
+
const n = newValue == null ? "" : newValue;
|
|
549
|
+
if (memberName === "list") {
|
|
550
|
+
isProp = false;
|
|
551
|
+
} else if (oldValue == null || elm[memberName] != n) {
|
|
552
|
+
if (typeof elm.__lookupSetter__(memberName) === "function") {
|
|
553
|
+
elm[memberName] = n;
|
|
554
|
+
} else {
|
|
555
|
+
elm.setAttribute(memberName, n);
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
} else if (elm[memberName] !== newValue) {
|
|
559
|
+
elm[memberName] = newValue;
|
|
560
|
+
}
|
|
561
|
+
} catch (e) {
|
|
562
|
+
}
|
|
563
|
+
}
|
|
564
|
+
if (newValue == null || newValue === false) {
|
|
565
|
+
if (newValue !== false || elm.getAttribute(memberName) === "") {
|
|
566
|
+
{
|
|
567
|
+
elm.removeAttribute(memberName);
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
} else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
|
|
571
|
+
newValue = newValue === true ? "" : newValue;
|
|
572
|
+
{
|
|
573
|
+
elm.setAttribute(memberName, newValue);
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
};
|
|
578
|
+
var parseClassListRegex = /\s/;
|
|
579
|
+
var parseClassList = (value) => {
|
|
580
|
+
if (typeof value === "object" && value && "baseVal" in value) {
|
|
581
|
+
value = value.baseVal;
|
|
582
|
+
}
|
|
583
|
+
if (!value || typeof value !== "string") {
|
|
584
|
+
return [];
|
|
585
|
+
}
|
|
586
|
+
return value.split(parseClassListRegex);
|
|
453
587
|
};
|
|
588
|
+
var CAPTURE_EVENT_SUFFIX = "Capture";
|
|
589
|
+
var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
|
|
454
590
|
|
|
455
591
|
// src/runtime/vdom/update-element.ts
|
|
456
592
|
var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
|
|
@@ -464,7 +600,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
|
|
|
464
600
|
elm,
|
|
465
601
|
memberName,
|
|
466
602
|
oldVnodeAttrs[memberName],
|
|
467
|
-
void 0
|
|
603
|
+
void 0,
|
|
604
|
+
isSvgMode2,
|
|
605
|
+
newVnode.$flags$);
|
|
468
606
|
}
|
|
469
607
|
}
|
|
470
608
|
}
|
|
@@ -473,7 +611,9 @@ var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
|
|
|
473
611
|
elm,
|
|
474
612
|
memberName,
|
|
475
613
|
oldVnodeAttrs[memberName],
|
|
476
|
-
newVnodeAttrs[memberName]
|
|
614
|
+
newVnodeAttrs[memberName],
|
|
615
|
+
isSvgMode2,
|
|
616
|
+
newVnode.$flags$);
|
|
477
617
|
}
|
|
478
618
|
};
|
|
479
619
|
function sortedAttrNames(attrNames) {
|
|
@@ -486,6 +626,7 @@ function sortedAttrNames(attrNames) {
|
|
|
486
626
|
);
|
|
487
627
|
}
|
|
488
628
|
var hostTagName;
|
|
629
|
+
var isSvgMode = false;
|
|
489
630
|
var createElm = (oldParentVNode, newParentVNode, childIndex) => {
|
|
490
631
|
const newVNode2 = newParentVNode.$children$[childIndex];
|
|
491
632
|
let i2 = 0;
|
|
@@ -503,7 +644,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
|
|
|
503
644
|
newVNode2.$tag$
|
|
504
645
|
);
|
|
505
646
|
{
|
|
506
|
-
updateElement(null, newVNode2);
|
|
647
|
+
updateElement(null, newVNode2, isSvgMode);
|
|
507
648
|
}
|
|
508
649
|
if (newVNode2.$children$) {
|
|
509
650
|
for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
|
|
@@ -538,6 +679,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
|
|
|
538
679
|
const vnode = vnodes[index];
|
|
539
680
|
if (vnode) {
|
|
540
681
|
const elm = vnode.$elm$;
|
|
682
|
+
nullifyVNodeRefs(vnode);
|
|
541
683
|
if (elm) {
|
|
542
684
|
elm.remove();
|
|
543
685
|
}
|
|
@@ -647,7 +789,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
|
|
|
647
789
|
const text = newVNode2.$text$;
|
|
648
790
|
if (text === null) {
|
|
649
791
|
{
|
|
650
|
-
updateElement(oldVNode, newVNode2);
|
|
792
|
+
updateElement(oldVNode, newVNode2, isSvgMode);
|
|
651
793
|
}
|
|
652
794
|
if (oldChildren !== null && newChildren !== null) {
|
|
653
795
|
updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
|
|
@@ -666,6 +808,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
|
|
|
666
808
|
elm.data = text;
|
|
667
809
|
}
|
|
668
810
|
};
|
|
811
|
+
var nullifyVNodeRefs = (vNode) => {
|
|
812
|
+
{
|
|
813
|
+
vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
|
|
814
|
+
vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
|
|
815
|
+
}
|
|
816
|
+
};
|
|
669
817
|
var insertBefore = (parent, newNode, reference) => {
|
|
670
818
|
{
|
|
671
819
|
return parent == null ? void 0 : parent.insertBefore(newNode, reference);
|
|
@@ -733,6 +881,11 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
733
881
|
}
|
|
734
882
|
let maybePromise;
|
|
735
883
|
if (isInitialLoad) {
|
|
884
|
+
{
|
|
885
|
+
if (hostRef.$fetchedCbList$.length) {
|
|
886
|
+
hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
|
|
887
|
+
}
|
|
888
|
+
}
|
|
736
889
|
maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
|
|
737
890
|
} else {
|
|
738
891
|
maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
|
|
@@ -889,7 +1042,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
|
|
|
889
1042
|
var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
890
1043
|
var _a, _b;
|
|
891
1044
|
const prototype = Cstr.prototype;
|
|
892
|
-
if (cmpMeta.$members$ || BUILD.
|
|
1045
|
+
if (cmpMeta.$members$ || BUILD.propChangeCallback) {
|
|
893
1046
|
const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
|
|
894
1047
|
members.map(([memberName, [memberFlags]]) => {
|
|
895
1048
|
if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
|
|
@@ -923,8 +1076,6 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
923
1076
|
const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
|
|
924
1077
|
if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) {
|
|
925
1078
|
newValue = ref.$instanceValues$.get(memberName);
|
|
926
|
-
} else if (!ref.$instanceValues$.get(memberName) && currentValue) {
|
|
927
|
-
ref.$instanceValues$.set(memberName, currentValue);
|
|
928
1079
|
}
|
|
929
1080
|
origSetter.apply(this, [
|
|
930
1081
|
parsePropertyValue(
|
|
@@ -939,7 +1090,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
939
1090
|
if ((flags & 1 /* isElementConstructor */) === 0 || (cmpMeta.$members$[memberName][0] & 4096 /* Setter */) === 0) {
|
|
940
1091
|
setValue(this, memberName, newValue, cmpMeta);
|
|
941
1092
|
if (flags & 1 /* isElementConstructor */ && !ref.$lazyInstance$) {
|
|
942
|
-
ref.$
|
|
1093
|
+
ref.$fetchedCbList$.push(() => {
|
|
943
1094
|
if (cmpMeta.$members$[memberName][0] & 4096 /* Setter */ && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) {
|
|
944
1095
|
ref.$lazyInstance$[memberName] = newValue;
|
|
945
1096
|
}
|
|
@@ -960,7 +1111,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
960
1111
|
if (ref.$lazyInstance$) {
|
|
961
1112
|
setterSetVal();
|
|
962
1113
|
} else {
|
|
963
|
-
ref.$
|
|
1114
|
+
ref.$fetchedCbList$.push(() => {
|
|
1115
|
+
setterSetVal();
|
|
1116
|
+
});
|
|
964
1117
|
}
|
|
965
1118
|
}
|
|
966
1119
|
}
|
|
@@ -973,14 +1126,15 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
973
1126
|
plt.jmp(() => {
|
|
974
1127
|
var _a2;
|
|
975
1128
|
const propName = attrNameToPropName.get(attrName);
|
|
1129
|
+
const hostRef = getHostRef(this);
|
|
976
1130
|
if (this.hasOwnProperty(propName) && BUILD.lazyLoad) {
|
|
977
1131
|
newValue = this[propName];
|
|
978
1132
|
delete this[propName];
|
|
979
|
-
}
|
|
1133
|
+
}
|
|
1134
|
+
if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
|
|
980
1135
|
this[propName] == newValue) {
|
|
981
1136
|
return;
|
|
982
1137
|
} else if (propName == null) {
|
|
983
|
-
const hostRef = getHostRef(this);
|
|
984
1138
|
const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
|
|
985
1139
|
if (hostRef && flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
|
|
986
1140
|
const instance = hostRef.$lazyInstance$ ;
|
|
@@ -993,9 +1147,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
993
1147
|
}
|
|
994
1148
|
return;
|
|
995
1149
|
}
|
|
1150
|
+
const propFlags = members.find(([m]) => m === propName);
|
|
1151
|
+
if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
|
|
1152
|
+
newValue = newValue === null || newValue === "false" ? false : true;
|
|
1153
|
+
}
|
|
996
1154
|
const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
|
|
997
|
-
|
|
998
|
-
if (newValue !== this[propName] && (!propDesc.get || !!propDesc.set)) {
|
|
1155
|
+
if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
|
|
999
1156
|
this[propName] = newValue;
|
|
1000
1157
|
}
|
|
1001
1158
|
});
|
|
@@ -1003,7 +1160,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1003
1160
|
Cstr.observedAttributes = Array.from(
|
|
1004
1161
|
/* @__PURE__ */ new Set([
|
|
1005
1162
|
...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
|
|
1006
|
-
...members.filter(([_, m]) => m[0] &
|
|
1163
|
+
...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
|
|
1007
1164
|
const attrName = m[1] || propName;
|
|
1008
1165
|
attrNameToPropName.set(attrName, propName);
|
|
1009
1166
|
return attrName;
|
|
@@ -1105,7 +1262,7 @@ var connectedCallback = (elm) => {
|
|
|
1105
1262
|
}
|
|
1106
1263
|
if (cmpMeta.$members$) {
|
|
1107
1264
|
Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
|
|
1108
|
-
if (memberFlags & 31 /* Prop */ && elm.
|
|
1265
|
+
if (memberFlags & 31 /* Prop */ && memberName in elm && elm[memberName] !== Object.prototype[memberName]) {
|
|
1109
1266
|
const value = elm[memberName];
|
|
1110
1267
|
delete elm[memberName];
|
|
1111
1268
|
elm[memberName] = value;
|
|
@@ -1288,6 +1445,6 @@ exports.h = h;
|
|
|
1288
1445
|
exports.promiseResolve = promiseResolve;
|
|
1289
1446
|
exports.registerInstance = registerInstance;
|
|
1290
1447
|
exports.setNonce = setNonce;
|
|
1291
|
-
//# sourceMappingURL=index-
|
|
1448
|
+
//# sourceMappingURL=index-CY2lQip_.js.map
|
|
1292
1449
|
|
|
1293
|
-
//# sourceMappingURL=index-
|
|
1450
|
+
//# sourceMappingURL=index-CY2lQip_.js.map
|