mount-observer 0.1.29 → 0.1.31
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 +35 -8
- package/Synthesizer.js +3 -1
- package/Synthesizer.ts +3 -1
- package/handlers/EMCParserScript.js +0 -1
- package/handlers/EMCParserScript.ts +0 -2
- package/package.json +2 -2
- package/types/assign-gingerly/types.d.ts +7 -1
- package/types/do-invoke/types.d.ts +28 -0
- package/types/nested-regex-groups/types.d.ts +95 -0
package/README.md
CHANGED
|
@@ -682,7 +682,7 @@ The `Synthesizer` abstract base class enables automatic propagation of mount obs
|
|
|
682
682
|
|
|
683
683
|
1. **Syndicator** (in document root): Watches for `script[type="mountobserver"]` and `script[type="emc"]` elements and broadcasts them to subscribers
|
|
684
684
|
2. **Subscriber** (in shadow roots): Receives and clones script elements from the syndicator
|
|
685
|
-
3. **Automatic activation**: Both syndicator and subscriber activate
|
|
685
|
+
3. **Automatic activation**: Both syndicator and subscriber activate 7 built-in handlers in their respective root nodes
|
|
686
686
|
|
|
687
687
|
**Basic usage:**
|
|
688
688
|
|
|
@@ -730,12 +730,31 @@ The `Synthesizer` abstract base class enables automatic propagation of mount obs
|
|
|
730
730
|
|
|
731
731
|
**What happens:**
|
|
732
732
|
|
|
733
|
-
1. The syndicator (`<app-synthesizer>` in document root) activates
|
|
734
|
-
- `builtIns.mountObserverScript`
|
|
735
|
-
- `builtIns.scriptExport`
|
|
736
|
-
- `builtIns.HTMLInclude`
|
|
737
|
-
- `builtIns.hoistTemplate`
|
|
738
|
-
- `builtIns.
|
|
733
|
+
1. The syndicator (`<app-synthesizer>` in document root) activates 7 built-in handlers:
|
|
734
|
+
- `builtIns.mountObserverScript` - Process MOSE scripts
|
|
735
|
+
- `builtIns.scriptExport` - Expose module exports from script elements
|
|
736
|
+
- `builtIns.HTMLInclude` - Enable intra-document HTML includes
|
|
737
|
+
- `builtIns.hoistTemplate` - Optimize template usage
|
|
738
|
+
- `builtIns.generateIds` - Auto-generate unique IDs
|
|
739
|
+
- `builtIns.emcParserScript` - Load parsers for EMC scripts
|
|
740
|
+
- `builtIns.emcScript` - Process EMC scripts
|
|
741
|
+
|
|
742
|
+
<details>
|
|
743
|
+
<summary>Why these handlers?</summary>
|
|
744
|
+
|
|
745
|
+
These handlers form the core infrastructure for declarative progressive enhancement:
|
|
746
|
+
|
|
747
|
+
- **mountObserverScript**: Enables fully declarative mount observer configuration via `<script type="mountobserver">` elements
|
|
748
|
+
- **scriptExport**: Makes ES module exports accessible from script elements, enabling configuration sharing
|
|
749
|
+
- **HTMLInclude**: Allows template reuse and inheritance patterns with `<template src="#id">`
|
|
750
|
+
- **hoistTemplate**: Optimizes memory usage by centralizing template content
|
|
751
|
+
- **generateIds**: Automates ID generation for forms and accessibility features
|
|
752
|
+
- **emcParserScript**: Enables lazy-loading of complex parsers for enhancement attributes
|
|
753
|
+
- **emcScript**: Processes enhancement configurations for progressive enhancement
|
|
754
|
+
|
|
755
|
+
Together, these handlers enable a complete HTML-first development workflow where behaviors, enhancements, and configurations can be declared in HTML and automatically propagated across shadow DOM boundaries.
|
|
756
|
+
|
|
757
|
+
</details>
|
|
739
758
|
|
|
740
759
|
2. The syndicator watches for script elements being added to its light children
|
|
741
760
|
|
|
@@ -749,7 +768,7 @@ The `Synthesizer` abstract base class enables automatic propagation of mount obs
|
|
|
749
768
|
- Subscribe to `addedscriptelement` events for new scripts
|
|
750
769
|
- Clone each script element and copy its `export` property
|
|
751
770
|
- Append cloned scripts to their own light children
|
|
752
|
-
- Activate the same
|
|
771
|
+
- Activate the same 7 built-in handlers in their shadow root
|
|
753
772
|
|
|
754
773
|
**Syndicator vs Subscriber:**
|
|
755
774
|
|
|
@@ -775,6 +794,12 @@ await this.getRootNode().mount({
|
|
|
775
794
|
await this.getRootNode().mount({
|
|
776
795
|
do: 'builtIns.hoistTemplate'
|
|
777
796
|
});
|
|
797
|
+
await this.getRootNode().mount({
|
|
798
|
+
do: 'builtIns.generateIds'
|
|
799
|
+
});
|
|
800
|
+
await this.getRootNode().mount({
|
|
801
|
+
do: 'builtIns.emcParserScript'
|
|
802
|
+
});
|
|
778
803
|
await this.getRootNode().mount({
|
|
779
804
|
do: 'builtIns.emcScript'
|
|
780
805
|
});
|
|
@@ -785,6 +810,8 @@ This ensures that:
|
|
|
785
810
|
- Script exports are available
|
|
786
811
|
- HTML includes work within each shadow root
|
|
787
812
|
- Templates are hoisted for performance
|
|
813
|
+
- IDs are auto-generated in forms and components
|
|
814
|
+
- Parsers are loaded for EMC scripts
|
|
788
815
|
- EMC scripts enhance elements in each scope
|
|
789
816
|
|
|
790
817
|
**Script processing:**
|
package/Synthesizer.js
CHANGED
|
@@ -13,6 +13,8 @@ import { emc } from 'mount-observer/handlers/EMCScript.js';
|
|
|
13
13
|
import 'mount-observer/handlers/EMCScript.js';
|
|
14
14
|
import 'mount-observer/handlers/EMCParserScript.js';
|
|
15
15
|
import { emcParser } from 'mount-observer/handlers/EMCParserScript.js';
|
|
16
|
+
import 'mount-observer/handlers/GenIds.js';
|
|
17
|
+
import { genIds } from 'mount-observer/handlers/GenIds.js';
|
|
16
18
|
/**
|
|
17
19
|
* Track which root nodes have already had handlers activated.
|
|
18
20
|
* Uses WeakSet to avoid memory leaks when nodes are garbage collected.
|
|
@@ -55,7 +57,7 @@ export class Synthesizer extends HTMLElement {
|
|
|
55
57
|
* List of built-in handlers to activate.
|
|
56
58
|
*/
|
|
57
59
|
static builtInHandlers = [
|
|
58
|
-
mos, scriptExport, include, hoist, emcParser, emc
|
|
60
|
+
mos, scriptExport, include, hoist, genIds, emcParser, emc
|
|
59
61
|
];
|
|
60
62
|
connectedCallback() {
|
|
61
63
|
// Synthesizer elements are infrastructure, not UI
|
package/Synthesizer.ts
CHANGED
|
@@ -14,6 +14,8 @@ import {emc} from 'mount-observer/handlers/EMCScript.js';
|
|
|
14
14
|
import 'mount-observer/handlers/EMCScript.js';
|
|
15
15
|
import 'mount-observer/handlers/EMCParserScript.js';
|
|
16
16
|
import {emcParser} from 'mount-observer/handlers/EMCParserScript.js';
|
|
17
|
+
import 'mount-observer/handlers/GenIds.js';
|
|
18
|
+
import {genIds} from 'mount-observer/handlers/GenIds.js';
|
|
17
19
|
|
|
18
20
|
/**
|
|
19
21
|
* Track which root nodes have already had handlers activated.
|
|
@@ -59,7 +61,7 @@ export abstract class Synthesizer extends HTMLElement {
|
|
|
59
61
|
* List of built-in handlers to activate.
|
|
60
62
|
*/
|
|
61
63
|
protected static builtInHandlers = [
|
|
62
|
-
mos, scriptExport, include, hoist, emcParser, emc
|
|
64
|
+
mos, scriptExport, include, hoist, genIds, emcParser, emc
|
|
63
65
|
];
|
|
64
66
|
|
|
65
67
|
connectedCallback(): void {
|
|
@@ -60,7 +60,6 @@ export class EMCParserScriptHandler extends EvtRt {
|
|
|
60
60
|
detail: { parserName },
|
|
61
61
|
bubbles: true
|
|
62
62
|
}));
|
|
63
|
-
console.log(`Registered parser "${parserName}" from ${src}`);
|
|
64
63
|
}
|
|
65
64
|
catch (error) {
|
|
66
65
|
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
@@ -76,8 +76,6 @@ export class EMCParserScriptHandler extends EvtRt {
|
|
|
76
76
|
bubbles: true
|
|
77
77
|
}));
|
|
78
78
|
|
|
79
|
-
console.log(`Registered parser "${parserName}" from ${src}`);
|
|
80
|
-
|
|
81
79
|
} catch (error) {
|
|
82
80
|
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
83
81
|
console.error(`Failed to load parser "${parserName}" from "${src}":`, errorMessage);
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mount-observer",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.31",
|
|
4
4
|
"description": "Observe and act on css matches.",
|
|
5
5
|
"main": "MountObserver.js",
|
|
6
6
|
"module": "MountObserver.js",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"assign-gingerly": "0.0.
|
|
8
|
+
"assign-gingerly": "0.0.28",
|
|
9
9
|
"id-generation": "0.0.4"
|
|
10
10
|
},
|
|
11
11
|
"devDependencies": {
|
|
@@ -112,7 +112,7 @@ export type ParserFunction<T = any> =
|
|
|
112
112
|
| ((attrValue: string | null) => any)
|
|
113
113
|
| ((attrValue: string | null, context?: ParserContext<T>) => any);
|
|
114
114
|
|
|
115
|
-
export interface AttrConfig<T =
|
|
115
|
+
export interface AttrConfig<T = unknown, TParserConfig = unknown> {
|
|
116
116
|
/**
|
|
117
117
|
* Type of the property value (JSON-serializable string format)
|
|
118
118
|
*/
|
|
@@ -152,6 +152,12 @@ export interface AttrConfig<T = any> {
|
|
|
152
152
|
| ParserFunction<T>
|
|
153
153
|
| string
|
|
154
154
|
;
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
* configuration information needed by a custom parser to properly
|
|
158
|
+
* parse the attribute.
|
|
159
|
+
*/
|
|
160
|
+
parserConfig?: TParserConfig;
|
|
155
161
|
|
|
156
162
|
/**
|
|
157
163
|
* Default value to use when attribute is missing
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export interface Specifier {
|
|
2
|
+
selector?: string;
|
|
3
|
+
prop?: string;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
export interface EndUserProps{
|
|
7
|
+
invokeParamSets: Array<InvokingParameters>,
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export interface AllProps extends EndUserProps{
|
|
11
|
+
enhancedElement: Element;
|
|
12
|
+
rawStatements: Array<string>,
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export type AP = AllProps;
|
|
16
|
+
|
|
17
|
+
export type PAP = Partial<AP>;
|
|
18
|
+
|
|
19
|
+
export type ProPAP = Promise<PAP>
|
|
20
|
+
|
|
21
|
+
export interface Actions{
|
|
22
|
+
hydrate(self: AP): ProPAP;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export interface InvokingParameters {
|
|
26
|
+
remoteSpecifier: Specifier,
|
|
27
|
+
localEventType?: string,
|
|
28
|
+
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Type definitions for nested-regex-groups
|
|
3
|
+
*
|
|
4
|
+
* These types can be imported in JavaScript files using JSDoc:
|
|
5
|
+
* @example
|
|
6
|
+
* // In JavaScript:
|
|
7
|
+
* /** @type {import('nested-regex-groups').ParseResult} *\/
|
|
8
|
+
* const result = parser('input');
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Result of a successful parse operation
|
|
13
|
+
*/
|
|
14
|
+
export interface ParseSuccess<T = any> {
|
|
15
|
+
success: true;
|
|
16
|
+
value: T;
|
|
17
|
+
matched: string;
|
|
18
|
+
rest: string;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Result of a failed parse operation
|
|
23
|
+
*/
|
|
24
|
+
export interface ParseFailure {
|
|
25
|
+
success: false;
|
|
26
|
+
error: string;
|
|
27
|
+
position?: number;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Union type for parse results
|
|
32
|
+
*/
|
|
33
|
+
export type ParseResult<T = any> = ParseSuccess<T> | ParseFailure;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* A pattern definition with metadata (internal use with compiled RegExp)
|
|
37
|
+
*/
|
|
38
|
+
export interface ParsePattern {
|
|
39
|
+
name: string;
|
|
40
|
+
regex: RegExp;
|
|
41
|
+
description?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Optional mapping from regex group names to dot-notation paths
|
|
44
|
+
* Example: { user_name: 'user.name', user_domain: 'user.domain' }
|
|
45
|
+
*/
|
|
46
|
+
groupMap?: Record<string, string>;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Pattern configuration for parsePatterns and parsePattern functions
|
|
51
|
+
* Used when loading patterns from JSON or defining patterns as strings
|
|
52
|
+
*/
|
|
53
|
+
export interface PatternConfig {
|
|
54
|
+
name: string;
|
|
55
|
+
pattern: string;
|
|
56
|
+
description?: string;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Options for nestedRegex function
|
|
61
|
+
*/
|
|
62
|
+
export interface NestedRegexOptions {
|
|
63
|
+
/**
|
|
64
|
+
* Optional name for the pattern (used in error messages)
|
|
65
|
+
*/
|
|
66
|
+
name?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Optional mapping from regex group names to dot-notation paths
|
|
69
|
+
* Example: { user_name: 'user.name', user_domain: 'user.domain' }
|
|
70
|
+
*/
|
|
71
|
+
groupMap?: Record<string, string>;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Options for creating a parser
|
|
76
|
+
*/
|
|
77
|
+
export interface ParserOptions {
|
|
78
|
+
/**
|
|
79
|
+
* If true, returns detailed error information when no pattern matches
|
|
80
|
+
*/
|
|
81
|
+
verbose?: boolean;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Result type for parsing multiple statements
|
|
86
|
+
*/
|
|
87
|
+
export interface StatementsResult<T = any> {
|
|
88
|
+
success: boolean;
|
|
89
|
+
statements: Array<{
|
|
90
|
+
pattern?: string;
|
|
91
|
+
value?: T;
|
|
92
|
+
error?: string;
|
|
93
|
+
matched?: string;
|
|
94
|
+
}>;
|
|
95
|
+
}
|