@microsoft/fast-html 1.0.0-alpha.40 → 1.0.0-alpha.41

package/README.md

@@ -313,13 +313,36 @@ Where the right operand can be either a reference to a value (string e.g. `{{foo
     <ul><f-repeat value="{{item in list}}"><li>{{item}}</li></f-repeat></ul>
     ```
 
-    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.
+    Bindings inside `<f-repeat>` without a context prefix resolve to the custom element. For example, `{{title}}` below resolves to the host element's `title` property:
 
-    Example:
     ```html
     <ul><f-repeat value="{{item in list}}"><li>{{item}} - {{title}}</li></f-repeat></ul>
     ```
 
+#### Execution Context Access
+
+In imperative fast-element templates, every binding expression receives both the data source and the execution context: `${(x, c) => c.parent.handleClick(c.event)}`. Declarative `<f-template>` expressions can access the same execution context using the `$c` prefix.
+
+This is particularly useful inside `<f-repeat>`, where `$c.parent` refers to the parent view-model (typically the host element) and `$c.event` provides the DOM event.
+
+Event handler with context access:
+
+```html
+<f-repeat value="{{item in items}}">
+    <button @click="{$c.parent.handleItemClick($c.event)}">{{item.name}}</button>
+</f-repeat>
+```
+
+Conditional rendering using a host property inside a repeat:
+
+```html
+<f-repeat value="{{item in items}}">
+    <f-when value="{{$c.parent.showNames}}">
+        <span>{{item.name}}</span>
+    </f-when>
+</f-repeat>
+```
+
 #### Unescaped HTML
 
 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.

package/dist/dts/components/utilities.d.ts

@@ -40,6 +40,8 @@ export interface ChildrenMap {
     customElementName: string;
     attributeName: string;
 }
+export declare const contextPrefix: string;
+export declare const contextPrefixDot: string;
 declare const LogicalOperator: {
     AND: string;
     OR: string;

package/dist/esm/components/template.js

@@ -3,7 +3,7 @@ import { attr, children, elements, FAST, FASTElement, FASTElementDefinition, fas
 import "@microsoft/fast-element/install-hydratable-view-templates.js";
 import { ObserverMap } from "./observer-map.js";
 import { Schema } from "./schema.js";
-import { bindingResolver, getExpressionChain, getNextBehavior, getRootPropertyName, resolveWhen, transformInnerHTML, } from "./utilities.js";
+import { bindingResolver, contextPrefixDot, getExpressionChain, getNextBehavior, getRootPropertyName, resolveWhen, transformInnerHTML, } from "./utilities.js";
 /**
  * Values for the observerMap element option.
  */
@@ -69,24 +69,24 @@ class TemplateElement extends FASTElement {
         }
         this.schema = new Schema(name);
         FASTElementDefinition.registerAsync(name).then(async (value) => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _d, _e, _f, _g, _h;
             (_b = (_a = TemplateElement.lifecycleCallbacks).elementDidRegister) === null || _b === void 0 ? void 0 : _b.call(_a, name);
-            if (!((_c = TemplateElement.elementOptions) === null || _c === void 0 ? void 0 : _c[name])) {
+            if (!((_d = TemplateElement.elementOptions) === null || _d === void 0 ? void 0 : _d[name])) {
                 TemplateElement.setOptions(name);
             }
-            if (((_d = TemplateElement.elementOptions[name]) === null || _d === void 0 ? void 0 : _d.observerMap) === "all") {
+            if (((_e = TemplateElement.elementOptions[name]) === null || _e === void 0 ? void 0 : _e.observerMap) === "all") {
                 this.observerMap = new ObserverMap(value.prototype, this.schema);
             }
             const registeredFastElement = fastElementRegistry.getByType(value);
             const template = this.getElementsByTagName("template").item(0);
             if (template) {
                 // Callback: Before template has been evaluated and assigned
-                (_f = (_e = TemplateElement.lifecycleCallbacks).templateWillUpdate) === null || _f === void 0 ? void 0 : _f.call(_e, name);
+                (_g = (_f = TemplateElement.lifecycleCallbacks).templateWillUpdate) === null || _g === void 0 ? void 0 : _g.call(_f, name);
                 const innerHTML = transformInnerHTML(this.innerHTML);
                 // Cache paths during template processing (pass undefined if observerMap is not available)
                 const { strings, values } = await this.resolveStringsAndValues(null, innerHTML, false, null, 0, this.schema, this.observerMap);
                 // Define the root properties cached in the observer map as observable (only if observerMap exists)
-                (_g = this.observerMap) === null || _g === void 0 ? void 0 : _g.defineProperties();
+                (_h = this.observerMap) === null || _h === void 0 ? void 0 : _h.defineProperties();
                 if (registeredFastElement) {
                     // Attach lifecycle callbacks to the definition before assigning template
                     // This allows the Observable notification to trigger the callbacks
@@ -226,7 +226,14 @@ class TemplateElement extends FASTElement {
                     rootPropertyName = getRootPropertyName(rootPropertyName, propName, parentContext, type);
                     const arg = bindingHTML.slice(openingParenthesis + 1, closingParenthesis);
                     const binding = bindingResolver(strings.join(""), rootPropertyName, propName, parentContext, type, schema, parentContext, level);
-                    const attributeBinding = (x, c) => binding(x, c).bind(x)(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
+                    const isContextPath = propName.startsWith(contextPrefixDot);
+                    const getOwner = isContextPath
+                        ? (_x, c) => {
+                            const ownerPath = propName.split(".").slice(1, -1);
+                            return ownerPath.reduce((prev, item) => prev === null || prev === void 0 ? void 0 : prev[item], c);
+                        }
+                        : (x, _c) => x;
+                    const attributeBinding = (x, c) => binding(x, c).bind(getOwner(x, c))(...(arg === "e" ? [c.event] : []), ...(arg !== "e" && arg !== ""
                         ? [
                             bindingResolver(strings.join(""), rootPropertyName, arg, parentContext, type, schema, parentContext, level)(x, c),
                         ]

package/dist/esm/components/utilities.js

@@ -10,6 +10,8 @@ const openTagStart = "<f-";
 const tagEnd = ">";
 const closeTagStart = "</f-";
 const attributeDirectivePrefix = "f-";
+export const contextPrefix = "$c";
+export const contextPrefixDot = `${contextPrefix}.`;
 const startInnerHTMLDiv = `<div :innerHTML="{{`;
 const startInnerHTMLDivLength = startInnerHTMLDiv.length;
 const endInnerHTMLDiv = `}}"></div>`;
@@ -318,6 +320,13 @@ function isLegitimateClientSideBinding(result) {
 export function pathResolver(path, contextPath, level, rootSchema) {
     var _a, _b;
     let splitPath = path.split(".");
+    // Explicit context access via contextPrefix — resolve directly from ExecutionContext
+    if (splitPath[0] === contextPrefix) {
+        const contextAccessPath = splitPath.slice(1);
+        return (_accessibleObject, context) => {
+            return contextAccessPath.reduce((prev, item) => prev === null || prev === void 0 ? void 0 : prev[item], context);
+        };
+    }
     let levelCount = level;
     let self = splitPath[0] === contextPath;
     const parentContexts = [];
@@ -370,6 +379,13 @@ function pathWithContextResolver(splitPath, self) {
     };
 }
 export function bindingResolver(previousString, rootPropertyName, path, parentContext, type, schema, currentContext, level) {
+    // Explicit context access — resolve from ExecutionContext, skip schema tracking
+    if (path.startsWith(contextPrefixDot)) {
+        const segments = path.split(".").slice(1);
+        return (_x, context) => {
+            return segments.reduce((prev, item) => prev === null || prev === void 0 ? void 0 : prev[item], context);
+        };
+    }
     rootPropertyName = getRootPropertyName(rootPropertyName, path, currentContext, type);
     if (type !== "event" && rootPropertyName !== null) {
         const childrenMap = getChildrenMap(previousString);
@@ -391,6 +407,8 @@ export function expressionResolver(rootPropertyName, expression, parentContext,
     if (rootPropertyName !== null) {
         const paths = extractPathsFromChainedExpression(expression);
         paths.forEach(path => {
+            if (path.startsWith(contextPrefixDot))
+                return;
             schema.addPath({
                 pathConfig: {
                     type: "access",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-html",
-  "version": "1.0.0-alpha.40",
+  "version": "1.0.0-alpha.41",
   "type": "module",
   "author": {
     "name": "Microsoft",