@zag-js/avatar 0.0.0-dev-20230526205409 → 0.0.0-dev-20230526210710

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/avatar",
-  "version": "0.0.0-dev-20230526205409",
+  "version": "0.0.0-dev-20230526210710",
   "description": "Core logic for the avatar widget implemented as a state machine",
   "keywords": [
     "js",
@@ -18,7 +18,8 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/avatar",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -27,12 +28,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.0.0-dev-20230526205409",
-    "@zag-js/mutation-observer": "0.0.0-dev-20230526205409",
-    "@zag-js/core": "0.0.0-dev-20230526205409",
-    "@zag-js/dom-query": "0.0.0-dev-20230526205409",
-    "@zag-js/utils": "0.0.0-dev-20230526205409",
-    "@zag-js/types": "0.0.0-dev-20230526205409"
+    "@zag-js/anatomy": "0.0.0-dev-20230526210710",
+    "@zag-js/mutation-observer": "0.0.0-dev-20230526210710",
+    "@zag-js/core": "0.0.0-dev-20230526210710",
+    "@zag-js/dom-query": "0.0.0-dev-20230526210710",
+    "@zag-js/utils": "0.0.0-dev-20230526210710",
+    "@zag-js/types": "0.0.0-dev-20230526210710"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/avatar.anatomy.ts

@@ -0,0 +1,5 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("avatar").parts("root", "image", "fallback")
+
+export const parts = anatomy.build()

package/src/avatar.connect.ts

@@ -0,0 +1,74 @@
+import { dataAttr } from "@zag-js/dom-query"
+import { NormalizeProps, type PropTypes } from "@zag-js/types"
+import { parts } from "./avatar.anatomy"
+import { dom } from "./avatar.dom"
+import { Send, State } from "./avatar.types"
+
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
+  const isLoaded = state.matches("loaded")
+  const showFallback = !isLoaded
+
+  return {
+    /**
+     * Whether the image is loaded.
+     */
+    isLoaded,
+    /**
+     * Whether the fallback is shown.
+     */
+    showFallback,
+    /**
+     * Function to set new src.
+     */
+    setSrc(src: string) {
+      send({ type: "SRC.SET", src })
+    },
+    /**
+     * Function to set loaded state.
+     */
+    setLoaded() {
+      send({ type: "IMG.LOADED", src: "api" })
+    },
+    /**
+     * Function to set error state.
+     */
+    setError() {
+      send({ type: "IMG.ERROR", src: "api" })
+    },
+
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      id: dom.getRootId(state.context),
+      style: {
+        display: "grid",
+        gridTemplateRows: "1fr 1fr",
+        overflow: "hidden",
+      },
+    }),
+
+    imageProps: normalize.img({
+      ...parts.image.attrs,
+      id: dom.getImageId(state.context),
+      "data-loaded": dataAttr(isLoaded),
+      onLoad() {
+        send({ type: "IMG.LOADED", src: "element" })
+      },
+      onError() {
+        send({ type: "IMG.ERROR", src: "element" })
+      },
+      style: {
+        gridArea: "1 / 1 / 2 / 2",
+        visibility: !isLoaded ? "hidden" : undefined,
+      },
+    }),
+
+    fallbackProps: normalize.element({
+      ...parts.fallback.attrs,
+      id: dom.getFallbackId(state.context),
+      hidden: !showFallback,
+      style: {
+        gridArea: "1 / 1 / 2 / 2",
+      },
+    }),
+  }
+}

package/src/avatar.dom.ts

@@ -0,0 +1,11 @@
+import { createScope } from "@zag-js/dom-query"
+import type { MachineContext as Ctx } from "./avatar.types"
+
+export const dom = createScope({
+  getRootId: (ctx: Ctx) => `avatar:${ctx.id}`,
+  getImageId: (ctx: Ctx) => `avatar:${ctx.id}:image`,
+  getFallbackId: (ctx: Ctx) => `avatar:${ctx.id}:fallback`,
+
+  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),
+})

package/src/avatar.machine.ts

@@ -0,0 +1,90 @@
+import { createMachine } from "@zag-js/core"
+import { compact } from "@zag-js/utils"
+import { observeAttributes, observeChildren } from "@zag-js/mutation-observer"
+import { MachineContext, MachineState, UserDefinedContext } from "./avatar.types"
+import { dom } from "./avatar.dom"
+
+export function machine(userContext: UserDefinedContext) {
+  const ctx = compact(userContext)
+  return createMachine<MachineContext, MachineState>(
+    {
+      id: "avatar",
+      initial: "loading",
+      activities: ["trackImageRemoval"],
+
+      context: ctx,
+
+      on: {
+        "SRC.CHANGE": {
+          target: "loading",
+        },
+        "IMG.UNMOUNT": {
+          target: "error",
+        },
+      },
+
+      states: {
+        loading: {
+          activities: ["trackSrcChange"],
+          entry: ["checkImgStatus"],
+          on: {
+            "IMG.LOADED": {
+              target: "loaded",
+              actions: ["invokeOnLoad"],
+            },
+            "IMG.ERROR": {
+              target: "error",
+              actions: ["invokeOnError"],
+            },
+          },
+        },
+        error: {
+          activities: ["trackSrcChange"],
+          on: {
+            "IMG.LOADED": {
+              target: "loaded",
+              actions: ["invokeOnLoad"],
+            },
+          },
+        },
+        loaded: {
+          activities: ["trackSrcChange"],
+        },
+      },
+    },
+    {
+      activities: {
+        trackSrcChange(ctx, _evt, { send }) {
+          const img = dom.getImageEl(ctx)
+          return observeAttributes(img, ["src", "srcset"], () => {
+            send({ type: "SRC.CHANGE" })
+          })
+        },
+        trackImageRemoval(ctx, _evt, { send }) {
+          const rootEl = dom.getRootEl(ctx)
+          return observeChildren(rootEl, (records) => {
+            const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]
+            const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"))
+            if (removed) {
+              send({ type: "IMG.UNMOUNT" })
+            }
+          })
+        },
+      },
+      actions: {
+        invokeOnLoad(ctx) {
+          ctx.onLoad?.()
+        },
+        invokeOnError(ctx) {
+          ctx.onError?.()
+        },
+        checkImgStatus(ctx, _evt, { send }) {
+          const img = dom.getImageEl(ctx)
+          if (img?.complete) {
+            send({ type: "IMG.LOADED", src: "ssr" })
+          }
+        },
+      },
+    },
+  )
+}

package/src/avatar.types.ts

@@ -0,0 +1,23 @@
+import type { StateMachine as S } from "@zag-js/core"
+import type { CommonProperties, Context, RequiredBy } from "@zag-js/types"
+
+type PublicContext = CommonProperties & {
+  onLoad?: () => void
+  onError?: () => void
+}
+
+type PrivateContext = Context<{}>
+
+type ComputedContext = Readonly<{}>
+
+export type UserDefinedContext = RequiredBy<PublicContext, "id">
+
+export type MachineContext = PublicContext & PrivateContext & ComputedContext
+
+export type MachineState = {
+  value: "loading" | "error" | "loaded"
+}
+
+export type State = S.State<MachineContext, MachineState>
+
+export type Send = S.Send<S.AnyEventObject>

package/src/index.ts

@@ -0,0 +1,3 @@
+export { connect } from "./avatar.connect"
+export { machine } from "./avatar.machine"
+export type { UserDefinedContext as Context } from "./avatar.types"