@microsoft/fast-html 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/fast-html.api.json

@@ -0,0 +1,356 @@
+{
+  "metadata": {
+    "toolPackage": "@microsoft/api-extractor",
+    "toolVersion": "7.47.0",
+    "schemaVersion": 1011,
+    "oldestForwardsCompatibleVersion": 1001,
+    "tsdocConfig": {
+      "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+      "noStandardTags": true,
+      "tagDefinitions": [
+        {
+          "tagName": "@alpha",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@beta",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@defaultValue",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@decorator",
+          "syntaxKind": "block",
+          "allowMultiple": true
+        },
+        {
+          "tagName": "@deprecated",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@eventProperty",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@example",
+          "syntaxKind": "block",
+          "allowMultiple": true
+        },
+        {
+          "tagName": "@experimental",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@inheritDoc",
+          "syntaxKind": "inline"
+        },
+        {
+          "tagName": "@internal",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@label",
+          "syntaxKind": "inline"
+        },
+        {
+          "tagName": "@link",
+          "syntaxKind": "inline",
+          "allowMultiple": true
+        },
+        {
+          "tagName": "@override",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@packageDocumentation",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@param",
+          "syntaxKind": "block",
+          "allowMultiple": true
+        },
+        {
+          "tagName": "@privateRemarks",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@public",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@readonly",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@remarks",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@returns",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@sealed",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@see",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@throws",
+          "syntaxKind": "block",
+          "allowMultiple": true
+        },
+        {
+          "tagName": "@typeParam",
+          "syntaxKind": "block",
+          "allowMultiple": true
+        },
+        {
+          "tagName": "@virtual",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@betaDocumentation",
+          "syntaxKind": "modifier"
+        },
+        {
+          "tagName": "@internalRemarks",
+          "syntaxKind": "block"
+        },
+        {
+          "tagName": "@preapproved",
+          "syntaxKind": "modifier"
+        }
+      ],
+      "supportForTags": {
+        "@alpha": true,
+        "@beta": true,
+        "@defaultValue": true,
+        "@decorator": true,
+        "@deprecated": true,
+        "@eventProperty": true,
+        "@example": true,
+        "@experimental": true,
+        "@inheritDoc": true,
+        "@internal": true,
+        "@label": true,
+        "@link": true,
+        "@override": true,
+        "@packageDocumentation": true,
+        "@param": true,
+        "@privateRemarks": true,
+        "@public": true,
+        "@readonly": true,
+        "@remarks": true,
+        "@returns": true,
+        "@sealed": true,
+        "@see": true,
+        "@throws": true,
+        "@typeParam": true,
+        "@virtual": true,
+        "@betaDocumentation": true,
+        "@internalRemarks": true,
+        "@preapproved": true
+      },
+      "reportUnsupportedHtmlElements": false
+    }
+  },
+  "kind": "Package",
+  "canonicalReference": "@microsoft/fast-html!",
+  "docComment": "",
+  "name": "@microsoft/fast-html",
+  "preserveMemberOrder": false,
+  "members": [
+    {
+      "kind": "EntryPoint",
+      "canonicalReference": "@microsoft/fast-html!",
+      "name": "",
+      "preserveMemberOrder": false,
+      "members": [
+        {
+          "kind": "Class",
+          "canonicalReference": "@microsoft/fast-html!TemplateElement:class",
+          "docComment": "/**\n * The <f-template> custom element that will provide view logic to the element\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare class TemplateElement extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "FASTElement",
+              "canonicalReference": "@microsoft/fast-element!FASTElement:interface"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "fileUrlPath": "dist/dts/components/template.d.ts",
+          "releaseTag": "Public",
+          "isAbstract": false,
+          "name": "TemplateElement",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "Method",
+              "canonicalReference": "@microsoft/fast-html!TemplateElement#connectedCallback:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "connectedCallback(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "connectedCallback"
+            },
+            {
+              "kind": "Property",
+              "canonicalReference": "@microsoft/fast-html!TemplateElement.elementOptions:member",
+              "docComment": "/**\n * A dictionary of custom element options\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "static elementOptions: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ElementOptions",
+                  "canonicalReference": "@microsoft/fast-html!~ElementOptions:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "elementOptions",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": true,
+              "isProtected": false,
+              "isAbstract": false
+            },
+            {
+              "kind": "Property",
+              "canonicalReference": "@microsoft/fast-html!TemplateElement#name:member",
+              "docComment": "/**\n * The name of the custom element this template will be applied to\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "name?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "name",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
+            {
+              "kind": "Method",
+              "canonicalReference": "@microsoft/fast-html!TemplateElement.options:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "static options(elementOptions?: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ElementOptions",
+                  "canonicalReference": "@microsoft/fast-html!~ElementOptions:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "typeof "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "TemplateElement",
+                  "canonicalReference": "@microsoft/fast-html!TemplateElement:class"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": true,
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 5
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "elementOptions",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": true
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "options"
+            }
+          ],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "implementsTokenRanges": []
+        }
+      ]
+    }
+  ]
+}

package/dist/fast-html.d.ts

@@ -0,0 +1,78 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { ShadowRootOptions } from '@microsoft/fast-element';
+
+/**
+ * A dictionary of element options the TemplateElement will use to update the registered element
+ */
+declare interface ElementOptions {
+    [key: string]: {
+        shadowOptions: ShadowRootOptions | undefined;
+    };
+}
+
+/**
+ * The <f-template> custom element that will provide view logic to the element
+ */
+export declare class TemplateElement extends FASTElement {
+    /**
+     * The name of the custom element this template will be applied to
+     */
+    name?: string;
+    /**
+     * A dictionary of custom element options
+     */
+    static elementOptions: ElementOptions;
+    private partials;
+    static options(elementOptions?: ElementOptions): typeof TemplateElement;
+    connectedCallback(): void;
+    /**
+     * Resolve strings and values from an innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    private resolveStringsAndValues;
+    /**
+     * Resolve a template or behavior
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     */
+    private resolveTemplateOrBehavior;
+    /**
+     * Resolve a template directive
+     * @param behaviorConfig - The directive behavior configuration object.
+     * @param externalValues - The interpreted values from the parent.
+     * @param innerHTML - The innerHTML.
+     */
+    private resolveTemplateDirective;
+    /**
+     * Resolve a template directive
+     * @param name - The name of the directive.
+     * @param propName - The property name to pass to the directive.
+     * @param externalValues - The interpreted values from the parent.
+     */
+    private resolveAttributeDirective;
+    /**
+     * Resolver of a data binding
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     * @param behaviorConfig - The binding behavior configuration object.
+     */
+    private resolveDataBinding;
+    /**
+     * Resolver of the innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    private resolveInnerHTML;
+    /**
+     * Resolve all partial templates
+     * @param unresolvedInnerHTML - The innerHTML.
+     */
+    private resolveAllPartials;
+}
+
+export { }

package/dist/fast-html.untrimmed.d.ts

@@ -0,0 +1,78 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { ShadowRootOptions } from '@microsoft/fast-element';
+
+/**
+ * A dictionary of element options the TemplateElement will use to update the registered element
+ */
+declare interface ElementOptions {
+    [key: string]: {
+        shadowOptions: ShadowRootOptions | undefined;
+    };
+}
+
+/**
+ * The <f-template> custom element that will provide view logic to the element
+ */
+export declare class TemplateElement extends FASTElement {
+    /**
+     * The name of the custom element this template will be applied to
+     */
+    name?: string;
+    /**
+     * A dictionary of custom element options
+     */
+    static elementOptions: ElementOptions;
+    private partials;
+    static options(elementOptions?: ElementOptions): typeof TemplateElement;
+    connectedCallback(): void;
+    /**
+     * Resolve strings and values from an innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    private resolveStringsAndValues;
+    /**
+     * Resolve a template or behavior
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     */
+    private resolveTemplateOrBehavior;
+    /**
+     * Resolve a template directive
+     * @param behaviorConfig - The directive behavior configuration object.
+     * @param externalValues - The interpreted values from the parent.
+     * @param innerHTML - The innerHTML.
+     */
+    private resolveTemplateDirective;
+    /**
+     * Resolve a template directive
+     * @param name - The name of the directive.
+     * @param propName - The property name to pass to the directive.
+     * @param externalValues - The interpreted values from the parent.
+     */
+    private resolveAttributeDirective;
+    /**
+     * Resolver of a data binding
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     * @param behaviorConfig - The binding behavior configuration object.
+     */
+    private resolveDataBinding;
+    /**
+     * Resolver of the innerHTML string
+     * @param innerHTML - The innerHTML.
+     * @param strings - The strings array.
+     * @param values - The interpreted values.
+     * @param self - Indicates that this should refer to itself instead of a property when creating bindings.
+     */
+    private resolveInnerHTML;
+    /**
+     * Resolve all partial templates
+     * @param unresolvedInnerHTML - The innerHTML.
+     */
+    private resolveAllPartials;
+}
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-html",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.11",
   "type": "module",
   "author": {
     "name": "Microsoft",
@@ -16,6 +16,10 @@
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
   },
+  "files": [
+    "./dist",
+    "./rules/*.yml"
+  ],
   "scripts": {
     "clean": "tsc -b --clean src",
     "clean:dist": "node ../../../build/clean.js dist",
@@ -40,8 +44,9 @@
     "pretest": "npm run build && npm run build-server",
     "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.{ts,html}\" --list-different",
     "prettier": "prettier --config ../../../.prettierrc --write \"**/*.{ts,html}\"",
-    "test": "npm run build-app && playwright test --config=playwright.config.cjs",
+    "test": "npm run build-app && playwright test --config=playwright.config.cjs && npm run test:rules",
     "test-server": "node server/dist/server.js",
+    "test:rules": "sg test --skip-snapshot-tests",
     "install-playwright-browsers": "npm run playwright install",
     "dev": "npm run build && npm run build-app && npm run build-server && npm run test-server"
   },
@@ -51,17 +56,19 @@
       "types": "./dist/dts/index.d.ts",
       "default": "./dist/esm/index.js"
     },
+    "./rules/*.yml": "./rules/*.yml",
     "./package.json": "./package.json"
   },
   "sideEffects": [
     "./dist/esm/index.js"
   ],
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.2.0"
+    "@microsoft/fast-element": "^2.3.0"
   },
   "devDependencies": {
+    "@ast-grep/cli": "^0.37.0",
     "@microsoft/api-extractor": "^7.47.0",
-    "@microsoft/fast-element": "^2.2.0",
+    "@microsoft/fast-element": "^2.3.0",
     "@playwright/test": "^1.49.0",
     "@types/express": "^4.17.21",
     "@types/node": "^17.0.17",
@@ -76,7 +83,6 @@
       "major",
       "minor",
       "patch"
-    ],
-    "tag": "alpha"
+    ]
   }
 }

package/rules/attribute-directives.yml

@@ -0,0 +1,38 @@
+# https://ast-grep.github.io/guide/rule-config.html#rule
+# from: ${ref("defaultSlot")}
+# to: f-ref="{defaultSlot}"
+id: binding - convert attribute directives
+language: typescript
+utils:
+  call-expression:
+    has:
+      nthChild: 1
+      kind: call_expression
+      all:
+        - matches: identifier
+        - matches: arguments
+  identifier:
+    has:
+      nthChild: 1
+      kind: identifier
+      pattern: $DIRECTIVE
+  arguments:
+    has:
+      kind: arguments
+      matches: string
+  string:
+    has:
+      kind: string
+      matches: string-fragment
+  string-fragment:
+    has:
+      kind: string_fragment
+      pattern: $STRING
+constraints:
+  DIRECTIVE:
+    regex: ref|slotted|children
+rule:
+  kind: template_substitution
+  matches: call-expression
+fix:
+  'f-$DIRECTIVE="{$STRING}"'

package/rules/call-expression-with-event-argument.yml

@@ -0,0 +1,41 @@
+# https://ast-grep.github.io/guide/rule-config.html#rule
+# from: ${(x, c) => x.foo(c.event)}
+# to: {foo(event)}
+id: binding - convert call expression with event argument
+language: typescript
+utils:
+  arrow-function:
+    has:
+      kind: arrow_function
+      matches: call-expression
+  call-expression:
+    has:
+      kind: call_expression
+      all:
+        - matches: handler-arguments
+        - matches: handler-expression
+  handler-expression:
+    has:
+      kind: member_expression
+      matches: handler-expression-property
+  handler-expression-property:
+    has:
+      kind: property_identifier
+      pattern: $A
+  handler-arguments:
+    has:
+      kind: arguments
+      matches: handler-arguments-member-expression
+  handler-arguments-member-expression:
+    has:
+      kind: member_expression
+      matches: handler-arguments-property-identifier
+  handler-arguments-property-identifier:
+    has:
+      kind: property_identifier
+      pattern: $B
+rule:
+  kind: template_substitution
+  matches: arrow-function
+fix:
+  '{$A($B)}'

package/rules/member-expression.yml

@@ -0,0 +1,33 @@
+# https://ast-grep.github.io/guide/rule-config.html#rule
+# from: ${x => x.foo}
+# to: {{foo}}
+id: binding - convert member expression
+language: typescript
+utils:
+  arrow-function:
+    has:
+      kind: arrow_function
+      all:
+        - matches: identifier
+        - matches: member-expression
+  member-expression:
+    has:
+      kind: member_expression
+      nthChild: 2
+      all:
+        - matches: identifier
+        - matches: property-identifier
+  identifier:
+    has:
+      kind: identifier
+      nthChild: 1
+  property-identifier:
+    has:
+      kind: property_identifier
+      nthChild: 2
+      pattern: $A
+rule:
+  kind: template_substitution
+  matches: arrow-function
+fix:
+  '{{$A}}'