BREAKING CHANGE: pluralize attachCSSProperties

0kku · May 9, 2021 · 8e13a41 · 8e13a41
1 parent 91cbcd7
commit 8e13a41
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 63 deletions.
diff --git a/src/_examples/components/window-manager/_window-manager.ts b/src/_examples/components/window-manager/_window-manager.ts
@@ -1,12 +1,34 @@
 import { Component, xml, css, reactive, ReactivePrimitive } from "/dist/mod.js";
 
 import { Window } from "./window.js";
-import type { TWindow } from "./TWindow";
+import type { TWindow } from "./TWindow.js";
 
 
 type TDirection = "n" | "s" | "e" | "w" | "ne" | "se" | "sw" | "nw";
+type TGrabType = TDirection | "move" | "";
 const directions = ["s", "n", "e", "w"] as const;
 
+function grabTypeToCursorType (v: TGrabType) {
+  switch (v) {
+    case "move":
+      return "grabbing";
+    case "n":
+    case "s":
+      return "ns-resize";
+    case "e":
+    case "w":
+      return "ew-resize";
+    case "ne":
+    case "sw":
+      return "nesw-resize";
+    case "nw":
+    case "se":
+      return "nwse-resize";
+    default:
+      return "initial";
+  }
+}
+
 export class WindowManager extends Component {
   #windows: Array<TWindow> = [
     {
@@ -37,11 +59,7 @@ export class WindowManager extends Component {
 
   #dragging = {
     target: this.#windows[0],
-    type: new ReactivePrimitive<
-      | "move"
-      | TDirection
-      | ""
-    >(""),
+    type: new ReactivePrimitive<TGrabType>(""),
     positionStart: {
       x: 0,
       y: 0,
@@ -131,33 +149,10 @@ export class WindowManager extends Component {
   constructor () {
     super();
 
-    this.attachCSSProperty(
-      "user-select",
-      this.#dragging.type.truthy("none", "initial"),
-    );
-    this.attachCSSProperty(
-      "cursor",
-      this.#dragging.type.pipe<string>(v => {
-        switch (v) {
-          case "move":
-            return "grabbing";
-          case "n":
-          case "s":
-            return "ns-resize";
-          case "e":
-          case "w":
-            return "ew-resize";
-          case "ne":
-          case "sw":
-            return "nesw-resize";
-          case "nw":
-          case "se":
-            return "nwse-resize";
-          default:
-            return "initial";
-        }
-      }),
-    );
+    this.attachCSSProperties({
+      "user-select": this.#dragging.type.truthy("none", "initial"),
+      cursor: this.#dragging.type.pipe<string>(grabTypeToCursorType),
+    });
   }
 
   static styles = css`

diff --git a/src/_examples/components/window-manager/window.ts b/src/_examples/components/window-manager/window.ts
@@ -8,12 +8,14 @@ export class Window extends Component<{
   constructor () {
     super();
 
-    this.attachCSSProperty("width", computed`${this.props.size.x}px`);
-    this.attachCSSProperty("height", computed`${this.props.size.y}px`);
-    this.attachCSSProperty(
-      "transform",
-      computed`translate(${this.props.position.x}px, ${this.props.position.y}px)`,
-    );
+    this.attachCSSProperties({
+      width:     computed`${this.props.size.x}px`,
+      height:    computed`${this.props.size.y}px`,
+      transform: computed`translate(
+        ${this.props.position.x}px,
+        ${this.props.position.y}px
+      )`,
+    });
   }
 
   static styles = css`

diff --git a/src/componentLogic/Component.ts b/src/componentLogic/Component.ts
@@ -1,4 +1,4 @@
-import { register, xml, attachCSSProperty } from "../mod.js";
+import { register, xml, attachCSSProperties } from "../mod.js";
 import { deferredElements } from "../parsing/deferredElements.js";
 import { assignElementData } from "../parsing/hookSlotsUp/hookAttributeSlotsUp/elementData/_assignElementData.js";
 import { supportsAdoptedStyleSheets } from "../styling/supportsAdoptedStyleSheets.js";
@@ -67,11 +67,12 @@ export class Component extends HTMLElement {
    * @param property  CSS property to be synchronized
    * @param source    A ReactivePrimitive whose value is to be used for the CSS Property
    */
-  attachCSSProperty (
-    property: string,
-    source: Readonly<ReactivePrimitive<string>>,
+  attachCSSProperties (
+    styles: {
+      [Key: string]: Readonly<ReactivePrimitive<string>>,
+    },
   ): void {
-    attachCSSProperty(this, property, source);
+    attachCSSProperties(this, styles);
   }
 
   replaceWith (

diff --git a/src/mod.ts b/src/mod.ts
@@ -1,17 +1,17 @@
-export { Component         } from "./componentLogic/Component.js";
-export { register          } from "./componentLogic/register.js";
-export { Ref               } from "./componentLogic/Ref.js";
-export { ReactivePrimitive } from "./reactive/ReactivePrimitive.js";
-export { reactiveObject    } from "./reactive/reactiveObject/reactiveObject.js";
-export { ReactiveArray     } from "./reactive/ReactiveArray/_ReactiveArray.js";
-export { reactive          } from "./reactive/reactive.js";
-export { computed          } from "./reactive/computed.js";
-export { xml               } from "./parsing/_xml.js";
-export { xml as html       } from "./parsing/_xml.js";
-export { classNames        } from "./reactive/classNames.js";
-export { attachCSSProperty } from "./styling/attachCSSProperty.js";
-export { css               } from "./styling/css.js";
-export { CSSTemplate       } from "./styling/CSSTemplate.js";
+export { Component           } from "./componentLogic/Component.js";
+export { register            } from "./componentLogic/register.js";
+export { Ref                 } from "./componentLogic/Ref.js";
+export { ReactivePrimitive   } from "./reactive/ReactivePrimitive.js";
+export { reactiveObject      } from "./reactive/reactiveObject/reactiveObject.js";
+export { ReactiveArray       } from "./reactive/ReactiveArray/_ReactiveArray.js";
+export { reactive            } from "./reactive/reactive.js";
+export { computed            } from "./reactive/computed.js";
+export { classNames          } from "./reactive/classNames.js";
+export { xml                 } from "./parsing/_xml.js";
+export { xml as html         } from "./parsing/_xml.js";
+export { css                 } from "./styling/css.js";
+export { CSSTemplate         } from "./styling/CSSTemplate.js";
+export { attachCSSProperties } from "./styling/attachCSSProperties.js";
 
 export type { TReactiveValueType } from "./reactive/types/IReactiveValueType.js";
 export type { TReactiveObject    } from "./reactive/types/IReactiveObject.js";

diff --git a/src/styling/attachCSSProperty.ts → src/styling/attachCSSProperties.ts b/src/styling/attachCSSProperty.ts → src/styling/attachCSSProperties.ts
@@ -7,10 +7,13 @@ import type { ReactivePrimitive } from "../reactive/ReactivePrimitive.js";
  * @param property  CSS property to be synchronized
  * @param source    A ReactivePrimitive whose value is to be used for the CSS Property
  */
-export function attachCSSProperty (
+export function attachCSSProperties (
   element: HTMLElement,
-  property: string,
-  source: Readonly<ReactivePrimitive<string>>,
+  styles: {
+    [Key: string]: Readonly<ReactivePrimitive<string>>,
+  },
 ): void {
-  source.bind(value => element.style.setProperty(property, value));
+  for (const [property, source] of Object.entries(styles)) {
+    source.bind(value => element.style.setProperty(property, value));
+  }
 }
diff --git a/src/styling/css.ts b/src/styling/css.ts
@@ -7,7 +7,7 @@ export function css (
   ...props: Array<unknown>
 ): CSSTemplate {
   if (props.some(v => isReactive(v))) {
-    throw new TypeError("CSS templates are not reactive. Instead, use `attachCSSProperty` to synchronize your CSS with your application state.");
+    throw new TypeError("CSS templates are not reactive. Instead, use `attachCSSProperties()` to synchronize your CSS with your application state.");
   }
 
   return new CSSTemplate(composeTemplateString(strings, props));