@microsoft/fast-html 1.0.0-alpha.19 → 1.0.0-alpha.20

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 CHANGED
@@ -187,32 +187,16 @@ Where the right operand can be either a reference to a value (string e.g. `{{foo
187
187
  <ul><f-repeat value="{{item in list}}"><li>{{item}}</li></f-repeat></ul>
188
188
  ```
189
189
 
190
- Should you need to refer to the parent element (not the individual item in the list), you can use `../`. This will map to what `html` tag template literal uses, `c.parent`.
190
+ Should you need to refer to the parent element (not the individual item in the list), you can use the context of a previous repeat, or no context which will resolve to the custom element.
191
191
 
192
192
  Example:
193
193
  ```html
194
- <ul><f-repeat value="{{item in list}}"><li>{{item}} - {{../title}}</li></f-repeat></ul>
195
- ```
196
-
197
- - **partial & apply**
198
-
199
- These directives are new to the declarative HTML model and allow for the ability to declare a `partial` directive containing a template partial which can then be referenced by an `apply` directive.
200
-
201
- Example:
202
- ```html
203
- <f-partial id="test">
204
- <ul>
205
- <f-repeat value="{{item in items}}">
206
- <li>{{item.text}}<f-apply partial="test" value="{{item.items}}"></f-apply></li>
207
- </f-repeat>
208
- </ul>
209
- </f-partial>
210
- <f-apply partial="test" value="{{items}}"></f-apply>
194
+ <ul><f-repeat value="{{item in list}}"><li>{{item}} - {{title}}</li></f-repeat></ul>
211
195
  ```
212
196
 
213
197
  #### Unescaped HTML
214
198
 
215
- You can add unescaped HTML using triple braces, this will create an additional `div` element as the HTML needs an element to bind to. Where possible it is advisable to not use unescaped HTML and instead use other binding techniques as well as partials.
199
+ You can add unescaped HTML using triple braces, this will create an additional `div` element as the HTML needs an element to bind to. Where possible it is advisable to not use unescaped HTML and instead use other binding techniques.
216
200
 
217
201
  Example:
218
202
  ```html
@@ -1,128 +1,12 @@
1
- import type { CachedPathMap, ContextCache, PathType } from "./utilities.js";
2
- interface PathConfig {
3
- path: string;
4
- self: boolean;
5
- parentContext: string | null;
6
- contextPath: string | null;
7
- type: PathType;
8
- level: number;
9
- rootPath: string | null;
10
- context: ContextCache | null;
11
- }
1
+ import { Schema } from "./schema.js";
12
2
  /**
13
3
  * ObserverMap provides functionality for caching binding paths, extracting root properties,
14
4
  * and defining observable properties on class prototypes
15
5
  */
16
6
  export declare class ObserverMap {
17
- private cachePaths;
18
- private contextCache;
7
+ private schema;
19
8
  private classPrototype;
20
- constructor(classPrototype: any);
21
- private getRootProperty;
22
- /**
23
- * Caches a binding path with context information for later use in generating observable properties
24
- * @param context - The path context information containing path, self, parentContext, contextPath, type, and level
25
- */
26
- cachePathWithContext(config: PathConfig): void;
27
- /**
28
- * Handles caching of paths with relative navigation ("../")
29
- * Determines the correct context level and caches the path accordingly
30
- */
31
- private handleRelativePathCaching;
32
- /**
33
- * Counts the number of "../" sequences in a path without using regex
34
- */
35
- private countRelativeNavigationLevels;
36
- /**
37
- * Extracts the property name from a relative path, removing all "../" sequences
38
- */
39
- private extractPropertyNameFromRelativePath;
40
- /**
41
- * Determines the target context after navigating up the specified number of levels
42
- */
43
- private getTargetContextForRelativePath;
44
- /**
45
- * Caches a path at the root level
46
- */
47
- private cacheAtRootLevel;
48
- /**
49
- * Caches a path at a specific context level
50
- */
51
- private cacheAtContextLevel;
52
- /**
53
- * Handles caching of access-type paths (property bindings)
54
- */
55
- private handleAccessPath;
56
- /**
57
- * Handles caching of repeat-type paths (array/loop contexts)
58
- */
59
- private handleRepeatPath;
60
- /**
61
- * Caches a simple access path without context complexity
62
- */
63
- private cacheSimpleAccessPath;
64
- /**
65
- * Finds a context item in the temporary context cache
66
- */
67
- private findContextInCache;
68
- /**
69
- * Attempts to place an access path under an existing repeat structure
70
- * @returns true if successfully placed, false otherwise
71
- */
72
- private tryPlaceInExistingRepeat;
73
- /**
74
- * Recursively searches for and places access paths in matching repeat structures
75
- */
76
- private searchAndPlaceInRepeat;
77
- /**
78
- * Checks if a cached path is a repeat structure with matching context
79
- */
80
- private isMatchingRepeatStructure;
81
- /**
82
- * Determines if a cached path can be searched for nested structures
83
- */
84
- private canSearchNested;
85
- /**
86
- * Places an access path within an existing repeat structure
87
- */
88
- private placeAccessInRepeat;
89
- /**
90
- * Builds absolute paths for nested repeat access patterns
91
- * @example "root.items.__index__.subitems.__index__.title"
92
- */
93
- private buildNestedRepeatAbsolutePath;
94
- /**
95
- * Caches access paths that have context information
96
- */
97
- private cacheAccessPathWithContext;
98
- /**
99
- * Extracts the relative path from a context's absolute path
100
- * For nested contexts, this should match the cache structure path
101
- */
102
- private getRelativeContextPath;
103
- /**
104
- * Ensures a repeat structure exists in the cache
105
- */
106
- private ensureRepeatStructureExists;
107
- /**
108
- * Creates the cache structure for nested repeat patterns
109
- */
110
- private createNestedRepeatStructure;
111
- /**
112
- * Finds the cache path where a parent context's repeat structure is located
113
- */
114
- private findParentRepeatPath;
115
- getCachedPathsWithContext(): CachedPathMap;
116
- private resolveContextPath;
117
- private resolveRootAndContextPath;
118
- getAbsolutePath(config: PathConfig): string;
119
- /**
120
- * Builds the full context path by looking up parent contexts in contextCache
121
- * @param parentContext - The immediate parent context to start from
122
- * @param contextPath - The current context path (like "items")
123
- * @returns The full absolute path including all parent contexts
124
- */
125
- private getPathFromCachedContext;
9
+ constructor(classPrototype: any, schema: Schema);
126
10
  defineProperties(): void;
127
11
  /**
128
12
  * Creates a proxy for an object that intercepts property mutations and triggers Observable notifications
@@ -140,4 +24,3 @@ export declare class ObserverMap {
140
24
  */
141
25
  private defineChanged;
142
26
  }
143
- export {};
@@ -1,41 +1,40 @@
1
- interface JSONSchemaDefinition extends JSONSchemaCommon {
1
+ type FastContextMetaData = "$fast_context";
2
+ type FastContextsMetaData = "$fast_parent_contexts";
3
+ export interface JSONSchemaDefinition extends JSONSchemaCommon {
2
4
  $fast_context: string;
3
5
  $fast_parent_contexts: Array<string>;
4
6
  }
5
7
  interface JSONSchemaCommon {
6
8
  type?: string;
7
9
  properties?: any;
10
+ items?: any;
8
11
  }
9
- interface JSONSchema extends JSONSchemaCommon {
12
+ export interface JSONSchema extends JSONSchemaCommon {
10
13
  $schema: string;
11
14
  $id: string;
12
15
  $defs?: Record<string, JSONSchemaDefinition>;
13
16
  $ref?: string;
14
17
  }
15
- type AccessCachedPathType = "access";
16
- export interface AccessCachedPath {
17
- type: AccessCachedPathType;
18
+ interface CachedPathCommon {
19
+ parentContext: string | null;
18
20
  currentContext: string | null;
19
21
  path: string;
20
22
  }
23
+ type AccessCachedPathType = "access";
24
+ export interface AccessCachedPath extends CachedPathCommon {
25
+ type: AccessCachedPathType;
26
+ }
21
27
  type DefaultCachedPathType = "default";
22
- export interface DefaultCachedPath {
28
+ export interface DefaultCachedPath extends CachedPathCommon {
23
29
  type: DefaultCachedPathType;
24
- currentContext: string | null;
25
- path: string;
26
30
  }
27
31
  type EventCachedPathType = "event";
28
- export interface EventCachedPath {
32
+ export interface EventCachedPath extends CachedPathCommon {
29
33
  type: EventCachedPathType;
30
- currentContext: string | null;
31
- path: string;
32
34
  }
33
35
  type RepeatCachedPathType = "repeat";
34
- export interface RepeatCachedPath {
36
+ export interface RepeatCachedPath extends CachedPathCommon {
35
37
  type: RepeatCachedPathType;
36
- parentContext: string | null;
37
- currentContext: string;
38
- path: string;
39
38
  }
40
39
  export type CachedPath = DefaultCachedPath | RepeatCachedPath | AccessCachedPath | EventCachedPath;
41
40
  export type CachedPathMap = Map<string, JSONSchema>;
@@ -43,6 +42,10 @@ interface RegisterPathConfig {
43
42
  rootPropertyName: string;
44
43
  pathConfig: CachedPath;
45
44
  }
45
+ export declare const fastContextMetaData: FastContextMetaData;
46
+ export declare const fastContextsMetaData: FastContextsMetaData;
47
+ export declare const defsPropertyName = "$defs";
48
+ export declare const refPropertyName = "$ref";
46
49
  /**
47
50
  * A constructed JSON schema from a template
48
51
  */
@@ -67,6 +70,11 @@ export declare class Schema {
67
70
  * @returns The JSON schema for the root property
68
71
  */
69
72
  getSchema(rootPropertyName: string): JSONSchema | null;
73
+ /**
74
+ * Gets root properties
75
+ * @returns IterableIterator<string>
76
+ */
77
+ getRootProperties(): IterableIterator<string>;
70
78
  /**
71
79
  * Get a path split into property names
72
80
  * @param path The dot syntax path e.g. a.b.c
@@ -28,6 +28,7 @@ declare class TemplateElement extends FASTElement {
28
28
  * ObserverMap instance for caching binding paths
29
29
  */
30
30
  private observerMap?;
31
+ private schema?;
31
32
  private static defaultElementOptions;
32
33
  static options(elementOptions?: ElementOptionsDictionary): typeof TemplateElement;
33
34
  constructor();
@@ -85,10 +86,5 @@ declare class TemplateElement extends FASTElement {
85
86
  * @param observerMap - ObserverMap instance for caching binding paths (optional).
86
87
  */
87
88
  private resolveInnerHTML;
88
- /**
89
- * Resolve all partial templates
90
- * @param unresolvedInnerHTML - The innerHTML.
91
- */
92
- private resolveAllPartials;
93
89
  }
94
90
  export { TemplateElement };
@@ -1,6 +1,6 @@
1
- import { type ObserverMap } from "./observer-map.js";
1
+ import { JSONSchema, JSONSchemaDefinition, Schema } from "./schema.js";
2
2
  type BehaviorType = "dataBinding" | "templateDirective";
3
- type TemplateDirective = "when" | "repeat" | "apply";
3
+ type TemplateDirective = "when" | "repeat";
4
4
  export type AttributeDirective = "children" | "slotted" | "ref";
5
5
  type DataBindingBindingType = "client" | "default" | "unescaped";
6
6
  interface BehaviorConfig {
@@ -36,50 +36,6 @@ export interface TemplateDirectiveBehaviorConfig extends BehaviorConfig {
36
36
  closingTagStartIndex: number;
37
37
  closingTagEndIndex: number;
38
38
  }
39
- interface PartialTemplateConfig {
40
- innerHTML: string;
41
- startIndex: number;
42
- endIndex: number;
43
- }
44
- type AccessCachedPathType = "access";
45
- export interface AccessCachedPath {
46
- type: AccessCachedPathType;
47
- relativePath: string;
48
- absolutePath: string;
49
- }
50
- type DefaultCachedPathType = "default";
51
- export interface DefaultCachedPath {
52
- type: DefaultCachedPathType;
53
- paths: Record<string, CachedPath>;
54
- }
55
- type EventCachedPathType = "event";
56
- export interface EventCachedPath {
57
- type: EventCachedPathType;
58
- relativePath: string;
59
- absolutePath: string;
60
- }
61
- type RepeatCachedPathType = "repeat";
62
- export interface RepeatCachedPath {
63
- type: RepeatCachedPathType;
64
- context: string;
65
- paths: Record<string, CachedPath>;
66
- }
67
- export type CachedPath = DefaultCachedPath | RepeatCachedPath | AccessCachedPath | EventCachedPath;
68
- export type CachedPathMap = Record<string, CachedPath>;
69
- export interface ContextCache {
70
- /**
71
- * The path to this context
72
- */
73
- absolutePath: string;
74
- /**
75
- * The self string of that context
76
- */
77
- context: string;
78
- /**
79
- * The parent of this context
80
- */
81
- parent: string | null;
82
- }
83
39
  /**
84
40
  * Get the index of the next matching tag
85
41
  * @param openingTagStartSlice - The slice starting from the opening tag
@@ -95,18 +51,6 @@ export declare function getIndexOfNextMatchingTag(openingTagStartSlice: string,
95
51
  * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
96
52
  */
97
53
  export declare function getNextBehavior(innerHTML: string): DataBindingBehaviorConfig | TemplateDirectiveBehaviorConfig | null;
98
- /**
99
- * Gets all the partials with their IDs
100
- * @param innerHTML - The innerHTML string to evaluate
101
- * @param offset - The index offset from the innerHTML
102
- * @param partials - The partials found
103
- * @returns {[key: string]: PartialTemplateConfig}
104
- */
105
- export declare function getAllPartials(innerHTML: string, offset?: number, partials?: {
106
- [key: string]: PartialTemplateConfig;
107
- }): {
108
- [key: string]: PartialTemplateConfig;
109
- };
110
54
  /**
111
55
  * Create a function to resolve a value from an object using a path with dot syntax.
112
56
  * e.g. "foo.bar"
@@ -114,9 +58,9 @@ export declare function getAllPartials(innerHTML: string, offset?: number, parti
114
58
  * @param self - Where the first item in the path path refers to the item itself (used by repeat).
115
59
  * @returns A function to access the value from a given path.
116
60
  */
117
- export declare function pathResolver(path: string, self?: boolean): (accessibleObject: any, context: any) => any;
118
- export declare function bindingResolver(path: string, self: boolean | undefined, parentContext: string | null, type: PathType, observerMap: ObserverMap | null, contextPath: string | null, level: number): (accessibleObject: any, context: any) => any;
119
- export declare function expressionResolver(self: boolean, expression: ChainedExpression, parentContext: string | null, level: number, observerMap?: ObserverMap): (accessibleObject: any, context: any) => any;
61
+ export declare function pathResolver(path: string, contextPath: string | null, level: number, rootSchema: JSONSchema): (accessibleObject: any, context: any) => any;
62
+ export declare function bindingResolver(rootPropertyName: string | null, path: string, parentContext: string | null, type: PathType, schema: Schema, currentContext: string | null, level: number): (accessibleObject: any, context: any) => any;
63
+ export declare function expressionResolver(rootPropertyName: string | null, expression: ChainedExpression, parentContext: string | null, level: number, schema: Schema): (accessibleObject: any, context: any) => any;
120
64
  /**
121
65
  * Extracts all paths from a ChainedExpression, including nested expressions
122
66
  * @param chainedExpression - The chained expression to extract paths from
@@ -169,16 +113,36 @@ export declare function transformInnerHTML(innerHTML: string, index?: number): s
169
113
  * @param self - Where the first item in the path path refers to the item itself (used by repeat).
170
114
  * @param chainedExpression - The chained expression which includes the expression and the next expression
171
115
  * if there is another in the chain
172
- * @param observerMap - Optional ObserverMap instance for caching paths during template processing
173
116
  * @returns - A binding that resolves the chained expression logic
174
117
  */
175
- export declare function resolveWhen(self: boolean, expression: ChainedExpression, parentContext: string | null, level: number, observerMap?: ObserverMap): (x: boolean, c: any) => any;
118
+ export declare function resolveWhen(rootPropertyName: string | null, expression: ChainedExpression, parentContext: string | null, level: number, schema: Schema): (x: boolean, c: any) => any;
119
+ /**
120
+ * Assign observables to data
121
+ * @param schema - The schema
122
+ * @param rootSchema - The root schema mapping to the root property
123
+ * @param data - The data
124
+ * @param target - The target custom element
125
+ * @param rootProperty - The root property
126
+ * @returns
127
+ */
128
+ export declare function assignObservables(schema: JSONSchema | JSONSchemaDefinition, rootSchema: JSONSchema, data: any, target: any, rootProperty: string): typeof Proxy;
129
+ /**
130
+ * Assign a proxy to an object
131
+ * @param schema - The current schema
132
+ * @param rootSchema - The root schema for the root property
133
+ * @param target - The target custom element
134
+ * @param rootProperty - The root property
135
+ * @param object - The object to assign the proxy to
136
+ * @returns Proxy object
137
+ */
138
+ export declare function assignProxy(schema: JSONSchema | JSONSchemaDefinition, rootSchema: JSONSchema, target: any, rootProperty: string, object: any): typeof Proxy;
176
139
  /**
177
- * Get the next property
178
- * @param path The dot syntax data path
179
- * @returns The next property
140
+ * Get the root property name
141
+ * @param rootPropertyName - The root property
142
+ * @param path - The dot syntax path
143
+ * @param context - The context created by a repeat
144
+ * @param type - The type of path binding
145
+ * @returns
180
146
  */
181
- export declare function getNextProperty(path: string): string;
182
- export declare function assignObservables(cachePath: CachedPath, data: any, target: any, rootProperty: string): typeof Proxy;
183
- export declare function assignProxy(cachePath: CachedPath, target: any, rootProperty: string, object: any): typeof Proxy;
147
+ export declare function getRootPropertyName(rootPropertyName: string | null, path: string, context: null | string, type: PathType): string | null;
184
148
  export {};