@whenessel/seql-js 1.0.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/LICENSE +21 -0
- package/README.md +168 -0
- package/dist/seql-js.d.ts +1215 -0
- package/dist/seql-js.js +2 -0
- package/dist/seql-js.js.map +1 -0
- package/dist/seql-js.umd.cjs +2 -0
- package/dist/seql-js.umd.cjs.map +1 -0
- package/package.json +63 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Artem Demidenko
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
# seql-js
|
|
2
|
+
|
|
3
|
+
Semantic Element Query Language (SEQL) - Stable DOM element identification for web analytics, session replay, and automation.
|
|
4
|
+
|
|
5
|
+
`seql-js` provides a robust way to identify DOM elements using semantic features rather than brittle CSS paths or XPath. It's designed to survive DOM restructuring, CSS changes, and framework updates.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **Semantic-first**: Uses ARIA roles, labels, semantic HTML tags, and stable attributes.
|
|
10
|
+
- **Resilient**: Designed to be stable across UI updates and DOM changes.
|
|
11
|
+
- **Dual Format**:
|
|
12
|
+
- **EID** (JSON): Structured descriptor for internal operations and high precision.
|
|
13
|
+
- **SEQL Selector** (String): Canonical string format for easy transport (analytics) and storage.
|
|
14
|
+
- **Deterministic**: Guaranteed same output for the same DOM state.
|
|
15
|
+
- **Zero Dependencies**: Tree-shakeable and lightweight.
|
|
16
|
+
- **TypeScript Native**: Written in TypeScript with full type definitions.
|
|
17
|
+
|
|
18
|
+
## Requirements
|
|
19
|
+
|
|
20
|
+
- **Node.js**: v18 or higher.
|
|
21
|
+
- **Package Manager**: Yarn (recommended) or npm.
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
yarn add seql-js
|
|
27
|
+
# or
|
|
28
|
+
npm install seql-js
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Quick Start
|
|
32
|
+
|
|
33
|
+
### 1. SEQL Selector Format (Recommended for Analytics)
|
|
34
|
+
|
|
35
|
+
SEQL Selectors are compact, URL-safe strings perfect for sending to analytics platforms.
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
import { generateSEQL, resolveSEQL } from 'seql-js';
|
|
39
|
+
|
|
40
|
+
// 1. Generate SEQL Selector from a DOM element
|
|
41
|
+
const button = document.querySelector('.submit-button');
|
|
42
|
+
const selector = generateSEQL(button);
|
|
43
|
+
// Result: "v1: form :: div.actions > button[type="submit",text="Order Now"]"
|
|
44
|
+
|
|
45
|
+
// 2. Send to your analytics provider
|
|
46
|
+
gtag('event', 'click', { element_selector: selector });
|
|
47
|
+
|
|
48
|
+
// 3. Later: Resolve SEQL Selector back to the original element
|
|
49
|
+
const elements = resolveSEQL(selector, document);
|
|
50
|
+
// Returns an array: [<button>...]
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 2. EID Structured Format (Internal Operations)
|
|
54
|
+
|
|
55
|
+
EID is a rich JSON object containing full semantic metadata and resolution constraints.
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
import { generateEID, resolve } from 'seql-js';
|
|
59
|
+
|
|
60
|
+
// 1. Generate EID (JSON)
|
|
61
|
+
const button = document.querySelector('.submit-button');
|
|
62
|
+
const eid = generateEID(button);
|
|
63
|
+
|
|
64
|
+
// 2. Resolve EID
|
|
65
|
+
const result = resolve(eid, document);
|
|
66
|
+
|
|
67
|
+
if (result.status === 'success') {
|
|
68
|
+
console.log('Found element:', result.elements[0]);
|
|
69
|
+
console.log('Confidence score:', result.confidence);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Concepts
|
|
74
|
+
|
|
75
|
+
### EID vs SEQL Selector
|
|
76
|
+
|
|
77
|
+
- **EID** (Element Identity Descriptor): A detailed JSON structure describing the **Anchor**, **Path**, **Target**, and **Constraints**.
|
|
78
|
+
- **SEQL Selector**: A canonical string representation of an EID, similar to CSS Selector or XPath.
|
|
79
|
+
|
|
80
|
+
```text
|
|
81
|
+
Generation: Element → generateEID() → EID (JSON)
|
|
82
|
+
Stringify: EID → stringifySEQL() → SEQL Selector (string)
|
|
83
|
+
Parse: SEQL Selector → parseSEQL() → EID (JSON)
|
|
84
|
+
Resolution: EID → resolve() → ResolveResult
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Core Architecture
|
|
88
|
+
|
|
89
|
+
1. **Anchor**: A semantic root (e.g., `<form>`, `<main>`, or ARIA landmarks).
|
|
90
|
+
2. **Path**: Semantic traversal from the anchor to the target.
|
|
91
|
+
3. **Target**: The specific element being identified.
|
|
92
|
+
4. **Constraints**: Disambiguation rules (uniqueness, visibility, text proximity).
|
|
93
|
+
|
|
94
|
+
## API Reference
|
|
95
|
+
|
|
96
|
+
### SEQL Selector Functions
|
|
97
|
+
|
|
98
|
+
#### `generateSEQL(element, generatorOptions?, stringifyOptions?)`
|
|
99
|
+
Convenience function: `generateEID` + `stringifySEQL`. Returns a string or `null`.
|
|
100
|
+
|
|
101
|
+
#### `resolveSEQL(selector, root, options?)`
|
|
102
|
+
Convenience function: `parseSEQL` + `resolve`. Returns `Element[]`.
|
|
103
|
+
|
|
104
|
+
#### `parseSEQL(selector)`
|
|
105
|
+
Parses a SEQL Selector into an `ElementIdentity` object.
|
|
106
|
+
|
|
107
|
+
#### `stringifySEQL(eid, options?)`
|
|
108
|
+
Converts an `ElementIdentity` object into a canonical SEQL Selector.
|
|
109
|
+
|
|
110
|
+
### Core Functions
|
|
111
|
+
|
|
112
|
+
#### `generateEID(element, options?)`
|
|
113
|
+
Generates an `ElementIdentity` (EID) from a DOM element.
|
|
114
|
+
- `maxPathDepth`: Default 10.
|
|
115
|
+
- `enableSvgFingerprint`: Default true.
|
|
116
|
+
- `confidenceThreshold`: Default 0.1.
|
|
117
|
+
|
|
118
|
+
#### `resolve(eid, root, options?)`
|
|
119
|
+
Resolves an EID back to DOM element(s). Returns a `ResolveResult` object.
|
|
120
|
+
- `status`: `'success' | 'ambiguous' | 'error' | 'degraded-fallback'`.
|
|
121
|
+
- `elements`: `Element[]` of matches.
|
|
122
|
+
- `confidence`: Match confidence score (0-1).
|
|
123
|
+
|
|
124
|
+
### Utilities & Advanced
|
|
125
|
+
|
|
126
|
+
#### `generateEIDBatch(elements, options?)`
|
|
127
|
+
Optimized generation for multiple elements at once.
|
|
128
|
+
|
|
129
|
+
#### `createEIDCache(options?)` / `getGlobalCache()`
|
|
130
|
+
Manage the LRU cache to improve performance for frequent generations/resolutions.
|
|
131
|
+
|
|
132
|
+
## Project Structure
|
|
133
|
+
|
|
134
|
+
- `src/generator/`: Logic for converting DOM elements into EID JSON.
|
|
135
|
+
- `src/resolver/`: Logic for resolving EID JSON back to DOM elements.
|
|
136
|
+
- `src/types/`: Core type definitions for EIDs, Semantics, and Constraints.
|
|
137
|
+
- `src/utils/`: Shared utilities, constants, and scoring algorithms.
|
|
138
|
+
|
|
139
|
+
## Scripts
|
|
140
|
+
|
|
141
|
+
- `yarn build`: Build the library (outputs to `dist/`).
|
|
142
|
+
- `yarn test`: Run all tests using Vitest.
|
|
143
|
+
- `yarn test:watch`: Run tests in watch mode.
|
|
144
|
+
- `yarn test:coverage`: Run tests with coverage report.
|
|
145
|
+
- `yarn types:check`: Run TypeScript type checking.
|
|
146
|
+
- `npx vitest <path>`: Run a specific test file.
|
|
147
|
+
|
|
148
|
+
## Documentation
|
|
149
|
+
|
|
150
|
+
- [Architecture Design](docs/specs/ARCHITECTURE.md)
|
|
151
|
+
- [EID Specification v1.0](docs/specs/SPECIFICATION.md) (Russian)
|
|
152
|
+
- [Developer Guidelines](CLAUDE.md)
|
|
153
|
+
- [Migration Guide](docs/MIGRATION.md)
|
|
154
|
+
|
|
155
|
+
## Migrating from v0.x
|
|
156
|
+
|
|
157
|
+
If you are upgrading from v0.x, note these breaking changes:
|
|
158
|
+
- `generateDsl()` → `generateEID()`
|
|
159
|
+
- `resolveDsl()` → `resolve()`
|
|
160
|
+
- `DslIdentity` → `ElementIdentity`
|
|
161
|
+
- `DslCache` → `EIDCache`
|
|
162
|
+
- `validateDsl()` → `validateEID()`
|
|
163
|
+
|
|
164
|
+
See the full [Migration Guide](docs/MIGRATION.md) for details.
|
|
165
|
+
|
|
166
|
+
## License
|
|
167
|
+
|
|
168
|
+
MIT
|