Skip to content

Commit

Permalink
fixes build-break caused by rebase
Browse files Browse the repository at this point in the history
nicholasrice committed May 5, 2022
1 parent 4e196f6 commit d59180c
Showing 8 changed files with 32 additions and 21 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
child,
css,
customElement,
FASTElement,
@@ -14,7 +15,7 @@ const template = html<DesignTokensForm>`
<ul>
${repeat(
x => x.designTokens,
html<UIDesignTokenValue, DesignTokensForm>`
child<UIDesignTokenValue, DesignTokensForm>`
<li>
<td-design-token-field
:designToken=${x => x.definition}
1 change: 0 additions & 1 deletion packages/web-components/fast-element/package.json
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@
"main": "dist/esm/index.js",
"type": "module",
"types": "dist/fast-element.d.ts",
"type": "module",
"unpkg": "dist/fast-element.min.js",
"sideEffects": [
"./dist/esm/debug.js",
Original file line number Diff line number Diff line change
@@ -193,12 +193,12 @@ describe("The HTML binding directive", () => {
});

it("allows interpolated HTML tags in templates", async () => {
const { behavior, parentNode } = contentBinding();
const { behavior, parentNode, targets } = contentBinding();
const template = html`${x => html`<${x.knownValue}>Hi there!</${x.knownValue}>`}`;
const model = new Model(template);
model.knownValue = "button"

behavior.bind(model, defaultExecutionContext);
behavior.bind(model, ExecutionContext.default, targets);

expect(toHTML(parentNode)).to.equal(`<button>Hi there!</button>`);

Original file line number Diff line number Diff line change
@@ -14,7 +14,8 @@ export const dataGridCellTemplate: FoundationElementTemplate<ViewTemplate<
return html<DataGridCell>`
<template
tabindex="-1"
role="${x => x.cellType ?? "gridcell"}"
role="${x =>
!x.cellType || x.cellType === "default" ? "gridcell" : x.cellType}"
:classList="
${x =>
x.cellType === "columnheader"
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import {
AttachedBehaviorHTMLDirective,
Behavior,
DOM,
ExecutionContext,
StatelessAttachedAttributeDirective,
Subscriber,
SubscriberSet,
ViewBehaviorTargets,
} from "@microsoft/fast-element";
import type { CaptureType } from "@microsoft/fast-element";

@@ -58,20 +59,27 @@ class AttributeReflectionSubscriptionSet extends SubscriberSet {
}
}

observer.observe(this.source, { attributeFilter });
observer.observe(this.subject, { attributeFilter });
}
}

class ReflectAttrBehavior implements Behavior {
class ReflectAttrBehavior extends StatelessAttachedAttributeDirective<string[]> {
/**
* The attributes the behavior is reflecting
*/
public attributes: Readonly<string[]>;
constructor(private target: HTMLElement, attributes: string[]) {
private target: HTMLElement;
constructor(attributes: string[]) {
super(attributes);
this.attributes = Object.freeze(attributes);
}

public bind(source: HTMLElement): void {
public bind(
source: HTMLElement,
context: ExecutionContext,
targets: ViewBehaviorTargets
): void {
this.target = targets[this.targetId] as HTMLElement;
AttributeReflectionSubscriptionSet.getOrCreateFor(source).subscribe(this);

// Reflect any existing attributes because MutationObserver will only
@@ -115,9 +123,10 @@ class ReflectAttrBehavior implements Behavior {
* ```
*/
export function reflectAttributes<T = any>(...attributes: string[]): CaptureType<T> {
return new AttachedBehaviorHTMLDirective(
"fast-reflect-attr",
ReflectAttrBehavior,
attributes
);
return new ReflectAttrBehavior(attributes);
// return new AttachedBehaviorHTMLDirective(
// "fast-reflect-attr",
// ReflectAttrBehavior,
// attributes
// );
}
3 changes: 2 additions & 1 deletion sites/fast-color-explorer/app/app.ts
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@ import {
} from "@microsoft/fast-components";
import {
attr,
child,
css,
customElement,
FASTElement,
@@ -72,7 +73,7 @@ const sampleTemplate = html<App>`
const colorBlockTemplate = html<App>`
${repeat(
x => x.backgrounds(),
html<SwatchInfo, App>`
child<SwatchInfo, App>`
<app-color-block
index="${(x, c) => x.index}"
component="${(x, c) => c.parent.componentType}"
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Checkbox, RadioGroup } from "@microsoft/fast-components";
import { child, html, repeat } from "@microsoft/fast-element";
import { ColorPicker } from "@microsoft/fast-tooling/dist/dts/web-components/color-picker/color-picker";
import { html, repeat } from "@microsoft/fast-element";
import { ComponentTypes } from "../../app";
import { ControlPane } from "./control-pane";

@@ -25,7 +25,7 @@ export const controlPaneTemplate = html<ControlPane>`
<label slot="label">Component type</label>
${repeat(
x => Object.keys(ComponentTypes),
html<string>`
child<string>`
<fast-radio
value="${x => x}"
?checked="${(x, c) => c.parent.componentType === x}"
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { parseColor } from "@microsoft/fast-colors";
import { isDark, SwatchRGB } from "@microsoft/fast-components";
import { html, repeat } from "@microsoft/fast-element";
import { html, item, repeat } from "@microsoft/fast-element";
import { Gradient } from "./gradient";

function getColor(background) {
@@ -13,7 +13,7 @@ export const gradientTemplate = html<Gradient>`
<template>
${repeat(
x => x.colors,
html<string, Gradient>`
item<string, Gradient>`
<a
class="${(x, c) =>
c.parent.markedColor !== undefined &&

0 comments on commit d59180c

Please sign in to comment.