@zag-js/avatar - npm Package Compare versions

Comparing version 0.0.0-dev-20230706120929 to 0.0.0-dev-20230710092359

dist/index.d.ts

@@ -1,4 +0,50 @@
-export { anatomy } from "./avatar.anatomy";
-export { connect } from "./avatar.connect";
-export { machine } from "./avatar.machine";
-export type { UserDefinedContext as Context } from "./avatar.types";
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
+
+type PublicContext = CommonProperties & {
+    onLoad?: () => void;
+    onError?: () => void;
+};
+type PrivateContext = Context<{}>;
+type ComputedContext = Readonly<{}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "loading" | "error" | "loaded";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the image is loaded.
+     */
+    isLoaded: boolean;
+    /**
+     * Whether the fallback is shown.
+     */
+    showFallback: boolean;
+    /**
+     * Function to set new src.
+     */
+    setSrc(src: string): void;
+    /**
+     * Function to set loaded state.
+     */
+    setLoaded(): void;
+    /**
+     * Function to set error state.
+     */
+    setError(): void;
+    rootProps: T["element"];
+    imageProps: T["img"];
+    fallbackProps: T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { UserDefinedContext as Context, anatomy, connect, machine };

dist/index.js

@@ -1,13 +0,210 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  anatomy: () => anatomy,
+  connect: () => connect,
+  machine: () => machine
+});
+module.exports = __toCommonJS(src_exports);
 
-const avatar_anatomy = require('./avatar.anatomy.js');
-const avatar_connect = require('./avatar.connect.js');
-const avatar_machine = require('./avatar.machine.js');
+// src/avatar.anatomy.ts
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("avatar").parts("root", "image", "fallback");
+var parts = anatomy.build();
 
+// src/avatar.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
 
+// src/avatar.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
+  getRootId: (ctx) => `avatar:${ctx.id}`,
+  getImageId: (ctx) => `avatar:${ctx.id}:image`,
+  getFallbackId: (ctx) => `avatar:${ctx.id}:fallback`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
+});
 
-exports.anatomy = avatar_anatomy.anatomy;
-exports.connect = avatar_connect.connect;
-exports.machine = avatar_machine.machine;
+// src/avatar.connect.ts
+function connect(state, send, normalize) {
+  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) {
+      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": (0, import_dom_query2.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" : void 0
+      }
+    }),
+    fallbackProps: normalize.element({
+      ...parts.fallback.attrs,
+      id: dom.getFallbackId(state.context),
+      hidden: !showFallback,
+      style: {
+        gridArea: "1 / 1 / 2 / 2"
+      }
+    })
+  };
+}
+
+// src/avatar.machine.ts
+var import_core = require("@zag-js/core");
+var import_utils = require("@zag-js/utils");
+var import_mutation_observer = require("@zag-js/mutation-observer");
+function machine(userContext) {
+  const ctx = (0, import_utils.compact)(userContext);
+  return (0, import_core.createMachine)(
+    {
+      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"],
+          on: {
+            "IMG.ERROR": {
+              target: "error",
+              actions: ["invokeOnError"]
+            }
+          }
+        }
+      }
+    },
+    {
+      activities: {
+        trackSrcChange(ctx2, _evt, { send }) {
+          const img = dom.getImageEl(ctx2);
+          return (0, import_mutation_observer.observeAttributes)(img, ["src", "srcset"], () => {
+            send({ type: "SRC.CHANGE" });
+          });
+        },
+        trackImageRemoval(ctx2, _evt, { send }) {
+          const rootEl = dom.getRootEl(ctx2);
+          return (0, import_mutation_observer.observeChildren)(rootEl, (records) => {
+            const removedNodes = Array.from(records[0].removedNodes);
+            const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
+            if (removed) {
+              send({ type: "IMG.UNMOUNT" });
+            }
+          });
+        }
+      },
+      actions: {
+        invokeOnLoad(ctx2) {
+          ctx2.onLoad?.();
+        },
+        invokeOnError(ctx2) {
+          ctx2.onError?.();
+        },
+        checkImgStatus(ctx2, _evt, { send }) {
+          const img = dom.getImageEl(ctx2);
+          if (img?.complete) {
+            send({ type: "IMG.LOADED", src: "ssr" });
+          }
+        }
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  machine
+});
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@zag-js/avatar",
-  "version": "0.0.0-dev-20230706120929",
+  "version": "0.0.0-dev-20230710092359",
   "description": "Core logic for the avatar widget implemented as a state machine",
@@ -31,8 +31,8 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "0.0.0-dev-20230706120929",
-    "@zag-js/mutation-observer": "0.0.0-dev-20230706120929",
-    "@zag-js/core": "0.0.0-dev-20230706120929",
-    "@zag-js/dom-query": "0.0.0-dev-20230706120929",
-    "@zag-js/utils": "0.0.0-dev-20230706120929",
-    "@zag-js/types": "0.0.0-dev-20230706120929"
+    "@zag-js/anatomy": "0.0.0-dev-20230710092359",
+    "@zag-js/mutation-observer": "0.0.0-dev-20230710092359",
+    "@zag-js/core": "0.0.0-dev-20230710092359",
+    "@zag-js/dom-query": "0.0.0-dev-20230710092359",
+    "@zag-js/utils": "0.0.0-dev-20230710092359",
+    "@zag-js/types": "0.0.0-dev-20230710092359"
   },
@@ -54,3 +54,3 @@ "devDependencies": {
   "scripts": {
-    "build": "vite build -c ../../../vite.config.ts",
+    "build": "tsup",
     "lint": "eslint src --ext .ts,.tsx",
@@ -57,0 +57,0 @@ "typecheck": "tsc --noEmit"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40236

increased by79.22%

Worsened metrics

Number of package files

15

decreased by-40%

Lines of code

616

decreased by-3.45%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@zag-js/anatomy@0.0.0-dev-20230710092359(transitive)

• + Added@zag-js/core@0.0.0-dev-20230710092359(transitive)

• + Added@zag-js/dom-query@0.0.0-dev-20230710092359(transitive)

• + Added@zag-js/mutation-observer@0.0.0-dev-20230710092359(transitive)

• + Added@zag-js/store@0.0.0-dev-20230710092359(transitive)

• + Added@zag-js/types@0.0.0-dev-20230710092359(transitive)

• + Added@zag-js/utils@0.0.0-dev-20230710092359(transitive)

• - Removed@zag-js/anatomy@0.0.0-dev-20230706120929(transitive)

• - Removed@zag-js/core@0.0.0-dev-20230706120929(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20230706120929(transitive)

• - Removed@zag-js/mutation-observer@0.0.0-dev-20230706120929(transitive)

• - Removed@zag-js/store@0.0.0-dev-20230706120929(transitive)

• - Removed@zag-js/types@0.0.0-dev-20230706120929(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20230706120929(transitive)

• Updated@zag-js/anatomy@0.0.0-dev-20230710092359

• Updated@zag-js/core@0.0.0-dev-20230710092359

• Updated@zag-js/dom-query@0.0.0-dev-20230710092359

• Updated@zag-js/mutation-observer@0.0.0-dev-20230710092359

• Updated@zag-js/types@0.0.0-dev-20230710092359

• Updated@zag-js/utils@0.0.0-dev-20230710092359