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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/fast-html",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.41",
   "type": "module",
   "author": {
     "name": "Microsoft",
@@ -11,42 +11,35 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Microsoft/fast.git",
-    "directory": "packages/web-components/fast-html"
+    "directory": "packages/fast-html"
   },
   "bugs": {
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
   },
   "files": [
-    "./dist"
+    "./dist",
+    "./rules/*.yml"
   ],
   "scripts": {
-    "clean": "tsc -b --clean src",
-    "clean:dist": "node ../../../build/clean.js dist",
-    "build": "tsc -b src && npm run doc",
-    "build:attribute": "webpack --config ./src/fixtures/attribute/webpack.config.js",
-    "build:event": "webpack --config ./src/fixtures/event/webpack.config.js",
-    "build:binding": "webpack --config ./src/fixtures/binding/webpack.config.js",
-    "build:children": "webpack --config ./src/fixtures/children/webpack.config.js",
-    "build:dot-syntax": "webpack --config ./src/fixtures/dot-syntax/webpack.config.js",
-    "build:partial": "webpack --config ./src/fixtures/partial/webpack.config.js",
-    "build:when": "webpack --config ./src/fixtures/when/webpack.config.js",
-    "build:ref": "webpack --config ./src/fixtures/ref/webpack.config.js",
-    "build:repeat": "webpack --config ./src/fixtures/repeat/webpack.config.js",
-    "build:slotted": "webpack --config ./src/fixtures/slotted/webpack.config.js",
-    "build-app": "npm run build:attribute && npm run build:dot-syntax && npm run build:partial && npm run build:event && npm run build:children && npm run build:binding && npm run build:when && npm run build:ref && npm run build:repeat && npm run build:slotted",
-    "build-server": "tsc -b server",
-    "doc": "api-extractor run --local",
+    "build:tsc": "tsc -p ./tsconfig.json",
+    "build": "npm run build:tsc && npm run doc",
+    "clean": "rimraf dist temp test-results",
+    "dev:full": "concurrently -k -n fast-element,fast-html,server \"npm run dev --workspace=@microsoft/fast-element\" \"npm:watch\" \"npm:test-server\"",
+    "dev": "concurrently -k -n tsc,server \"npm run watch\" \"npm run test-server\"",
     "doc:ci": "api-extractor run",
+    "doc": "npm run doc:ci -- --local",
+    "eslint:fix": "npm run eslint -- --fix",
     "eslint": "eslint . --ext .ts",
-    "eslint:fix": "eslint . --ext .ts --fix",
-    "prepublishOnly": "npm run clean && npm run build",
-    "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-server": "node server/dist/server.js",
     "install-playwright-browsers": "npm run playwright install",
-    "dev": "npm run build && npm run build-app && npm run build-server && npm run test-server"
+    "prepublishOnly": "npm run clean && npm run build",
+    "prettier:diff": "prettier --config ../../.prettierrc \"**/*.{ts,html}\" --list-different",
+    "prettier": "prettier --config ../../.prettierrc --write \"**/*.{ts,html}\"",
+    "test-server": "npx vite test/ --clearScreen false",
+    "test:playwright": "playwright test",
+    "test:rules": "sg test --skip-snapshot-tests",
+    "test": "npm run test:playwright && npm run test:rules",
+    "test:ui": "concurrently -k -n fast-element,fast-html,playwright \"npm run dev --workspace=@microsoft/fast-element\" \"npm:watch\" \"npx playwright test --ui\"",
+    "watch": "npm run build:tsc -- -w --preserveWatchOutput"
   },
   "description": "A package for facilitating rendering FAST Web Components in a non-browser environment.",
   "exports": {
@@ -54,25 +47,21 @@
       "types": "./dist/dts/index.d.ts",
       "default": "./dist/esm/index.js"
     },
+    "./utilities.js": {
+      "types": "./dist/dts/components/utilities.d.ts",
+      "default": "./dist/esm/components/utilities.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.10.2"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.47.0",
-    "@microsoft/fast-element": "^2.2.0",
-    "@playwright/test": "^1.49.0",
-    "@types/express": "^4.17.21",
-    "@types/node": "^17.0.17",
-    "express": "^4.19.2",
-    "typescript": "~5.3.0",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^6.0.1",
-    "webpack-merge": "^6.0.1"
+    "@microsoft/fast-element": "^2.10.2"
   },
   "beachball": {
     "disallowedChangeTypes": [

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'

package/dist/dts/fixtures/binding/binding.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/binding/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/children/children.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/children/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/dot-syntax/dot-syntax.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/dot-syntax/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/event/event.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/event/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/partial/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/partial/partial.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/ref/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/ref/ref.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/repeat/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/repeat/repeat.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/slotted/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/slotted/slotted.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/when/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dts/fixtures/when/when.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/esm/fixtures/attribute/attribute.spec.js

@@ -1,23 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a non-binding attribute", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/attribute");
-        const customElement = page.locator("test-element");
-        const customElementInput = customElement.locator("input");
-        yield expect(customElementInput).toHaveAttribute("disabled");
-    }));
-    test("create an attribute binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/attribute");
-        const customElement = page.locator("test-element");
-        yield expect(customElement).toHaveAttribute("type", "checkbox");
-        yield expect(customElement.locator("input[type='checkbox']")).toHaveCount(1);
-        yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.setAttribute("type", "radio");
-        });
-        yield expect(customElement).toHaveAttribute("type", "radio");
-        yield expect(customElement.locator("input[type='radio']")).toHaveCount(1);
-    }));
-}));

package/dist/esm/fixtures/attribute/main.js

@@ -1,19 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { TemplateElement } from "@microsoft/fast-html";
-import { attr, FASTElement } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.type = "radio";
-    }
-}
-__decorate([
-    attr,
-    __metadata("design:type", String)
-], TestElement.prototype, "type", void 0);
-TestElement.define({
-    name: "test-element",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/binding/binding.spec.js

@@ -1,17 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/binding");
-        const customElement = yield page.locator("test-element");
-        yield expect(yield customElement.getAttribute("text")).toEqual("Hello world");
-        yield expect(customElement).toHaveText("Hello world");
-        yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.setAttribute("text", "Hello pluto");
-        });
-        yield expect(yield customElement.getAttribute("text")).toEqual("Hello pluto");
-        yield expect(customElement).toHaveText("Hello pluto");
-    }));
-}));

package/dist/esm/fixtures/binding/main.js

@@ -1,19 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { TemplateElement } from "@microsoft/fast-html";
-import { attr, FASTElement } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.text = "Hello";
-    }
-}
-__decorate([
-    attr,
-    __metadata("design:type", String)
-], TestElement.prototype, "text", void 0);
-TestElement.define({
-    name: "test-element",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/children/children.spec.js

@@ -1,33 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a children directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/children");
-        const listItemCount1 = yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            const listItems = (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.listItems.filter((listItem) => {
-                return listItem instanceof HTMLLIElement;
-            });
-            return listItems === null || listItems === void 0 ? void 0 : listItems.length;
-        });
-        expect(listItemCount1).toEqual(2);
-        yield page.evaluate(() => {
-            const customElement = document.getElementsByTagName("test-element");
-            customElement.item(0).list = [
-                "A",
-                "B",
-                "C"
-            ];
-        });
-        const listItemCount2 = yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            const listItems = (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.listItems.filter((listItem) => {
-                return listItem instanceof HTMLLIElement;
-            });
-            return listItems === null || listItems === void 0 ? void 0 : listItems.length;
-        });
-        expect(listItemCount2).toEqual(3);
-    }));
-}));

package/dist/esm/fixtures/children/main.js

@@ -1,24 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { TemplateElement } from "@microsoft/fast-html";
-import { FASTElement, observable } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.listItems = [];
-        this.list = ["Foo", "Bar"];
-    }
-}
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "listItems", void 0);
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "list", void 0);
-TestElement.define({
-    name: "test-element",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/dot-syntax/dot-syntax.spec.js

@@ -1,9 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a object property reference using dot syntax in a binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        yield expect(customElement).toHaveText("bar");
-    }));
-}));

package/dist/esm/fixtures/dot-syntax/main.js

@@ -1,16 +0,0 @@
-import { TemplateElement } from "@microsoft/fast-html";
-import { FASTElement } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.object = {
-            foo: "bar",
-        };
-    }
-}
-TestElement.define({
-    name: "test-element",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/event/event.spec.js

@@ -1,12 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create an event attribute", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/event");
-        const customElement = yield page.locator("test-element");
-        let msgCount = 0;
-        yield page.on("console", msg => msgCount++);
-        yield customElement.locator("button").click();
-        expect(msgCount).toEqual(1);
-    }));
-}));

package/dist/esm/fixtures/event/main.js

@@ -1,16 +0,0 @@
-import { TemplateElement } from "@microsoft/fast-html";
-import { FASTElement } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.handleClick = () => {
-            console.log("click!");
-        };
-    }
-}
-TestElement.define({
-    name: "test-element",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/partial/main.js

@@ -1,31 +0,0 @@
-import { TemplateElement } from "@microsoft/fast-html";
-import { FASTElement } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.items = [
-            {
-                text: "Hello",
-            },
-            {
-                text: "Earth",
-                items: [
-                    {
-                        text: "Pluto",
-                        items: [
-                            {
-                                text: "Mars",
-                            },
-                        ],
-                    },
-                ],
-            },
-        ];
-    }
-}
-TestElement.define({
-    name: "test-element",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/partial/partial.spec.js

@@ -1,14 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a partial", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/partial");
-        const customElement = yield page.locator("#test");
-        let customElementListItems = yield customElement.locator("li");
-        expect(yield customElementListItems.count()).toEqual(4);
-        expect(yield customElementListItems.nth(0).textContent()).toEqual("Hello");
-        expect(yield customElementListItems.nth(1).textContent()).toContain("Earth");
-        expect(yield customElementListItems.nth(2).textContent()).toContain("Pluto");
-        expect(yield customElementListItems.nth(3).textContent()).toContain("Mars");
-    }));
-}));

package/dist/esm/fixtures/ref/main.js

@@ -1,14 +0,0 @@
-import { TemplateElement } from "@microsoft/fast-html";
-import { FASTElement } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.video = null;
-    }
-}
-TestElement.define({
-    name: "test-element",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/ref/ref.spec.js

@@ -1,13 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a ref directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/ref");
-        const isVideo = yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            return ((_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.video) instanceof HTMLVideoElement;
-        });
-        expect(isVideo).toEqual(true);
-    }));
-}));

package/dist/esm/fixtures/repeat/main.js

@@ -1,19 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { TemplateElement } from "@microsoft/fast-html";
-import { FASTElement, observable } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.list = ["Foo", "Bar"];
-    }
-}
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "list", void 0);
-TestElement.define({
-    name: "test-element",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/repeat/repeat.spec.js

@@ -1,26 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a repeat directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/repeat");
-        const customElement = yield page.locator("test-element");
-        let customElementListItems = yield customElement.locator("li");
-        expect(yield customElementListItems.count()).toEqual(2);
-        expect(yield customElementListItems.nth(0).textContent()).toEqual("Foo");
-        expect(yield customElementListItems.nth(1).textContent()).toEqual("Bar");
-        yield page.evaluate(() => {
-            const customElement = document.getElementsByTagName("test-element");
-            customElement.item(0).list = [
-                "A",
-                "B",
-                "C"
-            ];
-        });
-        yield expect(customElement).toHaveJSProperty("list", ["A", "B", "C"]);
-        customElementListItems = yield customElement.locator("li");
-        expect(yield customElementListItems.count()).toEqual(3);
-        expect(yield customElementListItems.nth(0).textContent()).toEqual("A");
-        expect(yield customElementListItems.nth(1).textContent()).toEqual("B");
-        expect(yield customElementListItems.nth(2).textContent()).toEqual("C");
-    }));
-}));

package/dist/esm/fixtures/slotted/main.js

@@ -1,22 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { TemplateElement } from "@microsoft/fast-html";
-import { FASTElement, observable } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.slottedNodes = [];
-    }
-    slottedNodesChanged() {
-        this.classList.add(`class-${this.slottedNodes.length}`);
-    }
-}
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "slottedNodes", void 0);
-TestElement.define({
-    name: "test-element",
-});
-TemplateElement.define({
-    name: "f-template",
-});