@microsoft/fast-html 1.0.0-alpha.8 → 1.0.0-alpha.9

package/dist/fast-html.api.json

@@ -228,6 +228,37 @@
               "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",
@@ -257,6 +288,60 @@
               "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": {

package/dist/fast-html.d.ts

@@ -1,4 +1,14 @@
 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
@@ -8,7 +18,12 @@ 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

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

@@ -1,4 +1,14 @@
 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
@@ -8,7 +18,12 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-html",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "type": "module",
   "author": {
     "name": "Microsoft",
@@ -17,7 +17,8 @@
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
   },
   "files": [
-    "./dist"
+    "./dist",
+    "./rules/*.yml"
   ],
   "scripts": {
     "clean": "tsc -b --clean src",
@@ -43,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"
   },
@@ -54,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.1"
+    "@microsoft/fast-element": "^2.3.0"
   },
   "devDependencies": {
+    "@ast-grep/cli": "^0.37.0",
     "@microsoft/api-extractor": "^7.47.0",
-    "@microsoft/fast-element": "^2.2.1",
+    "@microsoft/fast-element": "^2.3.0",
     "@playwright/test": "^1.49.0",
     "@types/express": "^4.17.21",
     "@types/node": "^17.0.17",

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}}'

package/rules/tag-function-to-template-literal.yml

@@ -0,0 +1,16 @@
+# https://ast-grep.github.io/guide/rule-config.html#rule
+# from: export const template = html`<slot></slot>`
+# to: `<slot></slot>`
+id: convert tag function to template literal
+language: typescript
+utils:
+  is-tag-template:
+    has:
+      kind: template_string
+      pattern: $B
+rule:
+  kind: call_expression
+  matches: is-tag-template
+  pattern: $A
+fix:
+  '$B'