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

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

@@ -72,7 +72,7 @@ export declare function getIndexOfNextMatchingTag(openingTagStartSlice: string,
  * @param innerHTML - The innerHTML string to evaluate
  * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
  */
-export declare function getNextBehavior(innerHTML: string): DataBindingBehaviorConfig | TemplateDirectiveBehaviorConfig | null;
+export declare function getNextBehavior(innerHTML: string, offset?: number): DataBindingBehaviorConfig | TemplateDirectiveBehaviorConfig | null;
 /**
  * Create a function to resolve a value from an object using a path with dot syntax.
  * e.g. "foo.bar"

package/dist/dts/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.47.0"
+      "packageVersion": "7.57.7"
     }
   ]
 }

package/dist/esm/components/utilities.js

@@ -246,16 +246,67 @@ function getNextDataBindingBehavior(innerHTML) {
  * @param innerHTML - The innerHTML string to evaluate
  * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
  */
-export function getNextBehavior(innerHTML) {
-    const dataBindingOpen = innerHTML.indexOf(openClientSideBinding); // client side binding will capture all bindings starting with "{"
-    const directiveBindingOpen = innerHTML.indexOf(openTagStart);
-    if (dataBindingOpen === -1 && directiveBindingOpen === -1) {
-        return null;
-    }
-    if (directiveBindingOpen !== -1 && dataBindingOpen > directiveBindingOpen) {
-        return getNextDirectiveBehavior(innerHTML);
+export function getNextBehavior(innerHTML, offset = 0) {
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const currentSlice = innerHTML.slice(offset);
+        // client side binding will capture all bindings starting with "{"
+        const dataBindingOpen = currentSlice.indexOf(openClientSideBinding);
+        const directiveBindingOpen = currentSlice.indexOf(openTagStart);
+        const nextDataBindingBehavior = getNextDataBindingBehavior(currentSlice);
+        if (dataBindingOpen === -1 && directiveBindingOpen === -1) {
+            return null;
+        }
+        if (dataBindingOpen !== -1 &&
+            nextDataBindingBehavior.bindingType === "client" &&
+            !isLegitimateClientSideBinding(nextDataBindingBehavior)) {
+            offset = nextDataBindingBehavior.closingEndIndex + offset;
+            continue;
+        }
+        if (directiveBindingOpen !== -1 &&
+            (dataBindingOpen === -1 || dataBindingOpen > directiveBindingOpen)) {
+            return offsetDirective(getNextDirectiveBehavior(currentSlice), offset);
+        }
+        return offsetDataBinding(nextDataBindingBehavior, offset);
     }
-    return getNextDataBindingBehavior(innerHTML);
+}
+/**
+ * Apply an offset to a data binding
+ * @param config DataBindingBehaviorConfig
+ * @param offset number
+ * @returns DataBindingBehaviorConfig
+ */
+function offsetDataBinding(config, offset) {
+    config.openingStartIndex = config.openingStartIndex + offset;
+    config.openingEndIndex = config.openingEndIndex + offset;
+    config.closingStartIndex = config.closingStartIndex + offset;
+    config.closingEndIndex = config.closingEndIndex + offset;
+    return config;
+}
+/**
+ * Apply an offset to a directive
+ * @param config TemplateDirectiveBehaviorConfig
+ * @param offset number
+ * @returns TemplateDirectiveBehaviorConfig
+ */
+function offsetDirective(config, offset) {
+    config.openingTagStartIndex = config.openingTagStartIndex + offset;
+    config.openingTagEndIndex = config.openingTagEndIndex + offset;
+    config.closingTagStartIndex = config.closingTagStartIndex + offset;
+    config.closingTagEndIndex = config.closingTagEndIndex + offset;
+    return config;
+}
+/**
+ * Determine if this client side binding is legitimate.
+ * Single-brace (client) bindings are only valid for events, properties, and attribute directives.
+ * Checking for this prevents CSS/JS curly braces from being misinterpreted as bindings.
+ * @param result
+ * @returns
+ */
+function isLegitimateClientSideBinding(result) {
+    return ((result.subtype === "attribute" &&
+        (result.aspect === "@" || result.aspect === ":")) ||
+        result.subtype === "attributeDirective");
 }
 /**
  * Create a function to resolve a value from an object using a path with dot syntax.

package/dist/esm/components/utilities.spec.js

@@ -40,6 +40,48 @@ test.describe("utilities", async () => {
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingStartIndex).toEqual(29);
             expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingEndIndex).toEqual(30);
         });
+        test("skip single-brace content bindings (e.g. CSS braces)", async () => {
+            const innerHTML = "<style>.foo { color: red }</style>";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult).toBeNull();
+        });
+        test("skip single-brace non-event, non-property attribute bindings", async () => {
+            const innerHTML1 = "<input type=\"{type}\">";
+            const templateResult1 = getNextBehavior(innerHTML1);
+            expect(templateResult1).toBeNull();
+            const innerHTML2 = "<input ?disabled=\"{disabled}\">";
+            const templateResult2 = getNextBehavior(innerHTML2);
+            expect(templateResult2).toBeNull();
+        });
+        test("find double-brace binding after skipped single-brace content", async () => {
+            const innerHTML = "<style>.foo { color: red } .bar { color: blue }</style><span>{{name}}</span>";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("content");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.bindingType).toEqual("default");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingStartIndex).toEqual(61);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingStartIndex).toEqual(67);
+        });
+        test("find event binding after skipped single-brace content", async () => {
+            const innerHTML = "<style>.foo { color: red }</style><button @click=\"{handler()}\">";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("attribute");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.aspect).toEqual("@");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.bindingType).toEqual("client");
+        });
+        test("find property binding after skipped single-brace content", async () => {
+            const innerHTML = "<style>.foo { color: red } .bar { color: blue }</style><button :value=\"{someValue}\">";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("attribute");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.aspect).toEqual(":");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.bindingType).toEqual("client");
+        });
+        test("ensure if there are expected missing {} this does not cause parsing issues", async () => {
+            const innerHTML = "<f-when value=\"missing\">";
+            expect(getNextBehavior(innerHTML)).toBeTruthy();
+        });
     });
     test.describe("templates", async () => {
         test("when directive", async () => {

package/dist/fast-html.api.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
     "toolPackage": "@microsoft/api-extractor",
-    "toolVersion": "7.47.0",
+    "toolVersion": "7.57.7",
     "schemaVersion": 1011,
     "oldestForwardsCompatibleVersion": 1001,
     "tsdocConfig": {
@@ -114,6 +114,22 @@
           "tagName": "@virtual",
           "syntaxKind": "modifier"
         },
+        {
+          "tagName": "@jsx",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@jsxRuntime",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@jsxFrag",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@jsxImportSource",
+          "syntaxKind": "block"
+        },
         {
           "tagName": "@betaDocumentation",
           "syntaxKind": "modifier"

package/package.json

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