@zag-js/qr-code - npm Package Compare versions

Comparing version 0.0.0-dev-20240723090825 to 0.0.0-v1-beta-20250220125322

dist/index.d.ts

 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
+import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service, EventObject } from '@zag-js/core';
 import { DataUrlType } from '@zag-js/dom-query';
@@ -9,3 +9,3 @@ import { QrCodeGenerateOptions, QrCodeGenerateResult } from 'uqr';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "frame" | "pattern" | "overlay">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "frame" | "pattern" | "overlay" | "downloadTrigger">;
 
@@ -16,35 +16,63 @@ type ElementIds = Partial<{
 }>;
-interface PublicContext extends DirectionProperty, CommonProperties {
+interface ValueChangeDetails {
+    value: string;
+}
+interface QrCodeProps extends DirectionProperty, CommonProperties {
     /**
      * The value to encode.
      */
-    value: string;
+    value?: string | undefined;
     /**
+     * The default value to encode.
+     */
+    defaultValue?: string | undefined;
+    /**
      * The element ids.
      */
-    ids?: ElementIds;
+    ids?: ElementIds | undefined;
     /**
      * The qr code encoding options.
      */
-    encoding?: QrCodeGenerateOptions;
-}
-interface PrivateContext {
+    encoding?: QrCodeGenerateOptions | undefined;
     /**
+     * Callback fired when the value changes.
+     */
+    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+    /**
      * The pixel size of the qr code.
      */
-    pixelSize: number;
+    pixelSize?: number | undefined;
 }
-type ComputedContext = Readonly<{
+type PropsWithDefault = "pixelSize" | "defaultValue";
+type Computed = Readonly<{
     encoded: QrCodeGenerateResult;
 }>;
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+interface QrCodeSchema {
+    props: RequiredBy<QrCodeProps, PropsWithDefault>;
+    context: {
+        value: string;
+    };
+    computed: Computed;
+    state: "idle";
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
 }
-interface MachineState {
-    value: "idle";
+type QrCodeService = Service<QrCodeSchema>;
+interface DownloadTriggerProps {
+    /**
+     * The mime type of the image.
+     */
+    mimeType: DataUrlType;
+    /**
+     * The quality of the image.
+     */
+    quality?: number;
+    /**
+     * The name of the file.
+     */
+    fileName: string;
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface QrCodeApi<T extends PropTypes = PropTypes> {
     /**
@@ -66,11 +94,12 @@ * The value to encode.
     getOverlayProps(): T["element"];
+    getDownloadTriggerProps(props: DownloadTriggerProps): T["button"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: QrCodeService, normalize: NormalizeProps<T>): QrCodeApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.MachineConfig<QrCodeSchema>;
 
-declare const props: ("value" | "dir" | "id" | "getRootNode" | "ids" | "encoding")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "ids" | "encoding">];
+declare const props: (keyof QrCodeProps)[];
+declare const splitProps: <Props extends Partial<QrCodeProps>>(props: Props) => [Partial<QrCodeProps>, Omit<Props, keyof QrCodeProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps };
+export { type QrCodeApi as Api, type DownloadTriggerProps, type ElementIds, type QrCodeProps as Props, type QrCodeService as Service, type ValueChangeDetails, anatomy, connect, machine, props, splitProps };

dist/index.js

@@ -1,51 +0,24 @@
-"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);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  anatomy: () => anatomy,
-  connect: () => connect,
-  machine: () => machine,
-  props: () => props,
-  splitProps: () => splitProps
-});
-module.exports = __toCommonJS(src_exports);
+var anatomy$1 = require('@zag-js/anatomy');
+var domQuery = require('@zag-js/dom-query');
+var core = require('@zag-js/core');
+var uqr = require('uqr');
+var types = require('@zag-js/types');
+var utils = require('@zag-js/utils');
 
 // src/qr-code.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("qr-code").parts("root", "frame", "pattern", "overlay");
+var anatomy = anatomy$1.createAnatomy("qr-code").parts("root", "frame", "pattern", "overlay", "downloadTrigger");
 var parts = anatomy.build();
 
-// src/qr-code.connect.ts
-var import_dom_query2 = require("@zag-js/dom-query");
-
 // src/qr-code.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => ctx.ids?.root ?? `qrcode:${ctx.id}:root`,
-  getFrameId: (ctx) => ctx.ids?.frame ?? `qrcode:${ctx.id}:frame`,
-  getFrameEl: (ctx) => dom.getById(ctx, dom.getFrameId(ctx))
-});
+var getRootId = (scope) => scope.ids?.root ?? `qrcode:${scope.id}:root`;
+var getFrameId = (scope) => scope.ids?.frame ?? `qrcode:${scope.id}:frame`;
+var getFrameEl = (scope) => scope.getById(getFrameId(scope));
 
 // src/qr-code.connect.ts
-function connect(state, send, normalize) {
-  const encoded = state.context.encoded;
-  const pixelSize = state.context.pixelSize;
+function connect(service, normalize) {
+  const { context, computed, send, scope, prop } = service;
+  const encoded = computed("encoded");
+  const pixelSize = prop("pixelSize");
   const height = encoded.size * pixelSize;
@@ -64,3 +37,3 @@ const width = encoded.size * pixelSize;
   return {
-    value: state.context.value,
+    value: context.get("value"),
     setValue(value) {
@@ -70,8 +43,8 @@ send({ type: "VALUE.SET", value });
     getDataUrl(type, quality) {
-      const svgEl = dom.getFrameEl(state.context);
-      return (0, import_dom_query2.getDataUrl)(svgEl, { type, quality });
+      const svgEl = getFrameEl(scope);
+      return domQuery.getDataUrl(svgEl, { type, quality });
     },
     getRootProps() {
       return normalize.element({
-        id: dom.getRootId(state.context),
+        id: getRootId(scope),
         ...parts.root.attrs,
@@ -88,3 +61,3 @@ style: {
       return normalize.svg({
-        id: dom.getFrameId(state.context),
+        id: getFrameId(scope),
         ...parts.frame.attrs,
@@ -111,54 +84,95 @@ xmlns: "http://www.w3.org/2000/svg",
       });
+    },
+    getDownloadTriggerProps(props2) {
+      return normalize.button({
+        type: "button",
+        ...parts.downloadTrigger.attrs,
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          send({ type: "DOWNLOAD_TRIGGER.CLICK", ...props2 });
+        }
+      });
     }
   };
 }
-
-// src/qr-code.machine.ts
-var import_core = require("@zag-js/core");
-var import_utils = require("@zag-js/utils");
-var import_proxy_memoize = require("proxy-memoize");
-var import_uqr = require("uqr");
-function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
-    {
-      id: "qr-code",
-      initial: "idle",
-      context: {
-        value: "",
-        ...ctx,
-        pixelSize: 10
-      },
-      computed: {
-        encoded: (0, import_proxy_memoize.memoize)((ctx2) => (0, import_uqr.encode)(ctx2.value, ctx2.encoding))
-      },
+var machine = core.createMachine({
+  props({ props: props2 }) {
+    return {
+      defaultValue: "",
+      pixelSize: 10,
+      ...props2
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        value: prop("value"),
+        defaultValue: prop("defaultValue"),
+        onChange(value) {
+          prop("onValueChange")?.({ value });
+        }
+      }))
+    };
+  },
+  computed: {
+    encoded: core.memo(
+      ({ context, prop }) => [context.get("value"), prop("encoding")],
+      (value, encoding) => uqr.encode(value, encoding)
+    )
+  },
+  states: {
+    idle: {
       on: {
         "VALUE.SET": {
           actions: ["setValue"]
+        },
+        "DOWNLOAD_TRIGGER.CLICK": {
+          actions: ["downloadQrCode"]
         }
       }
-    },
-    {
-      actions: {
-        setValue: (ctx2, e) => {
-          ctx2.value = e.value;
-        }
+    }
+  },
+  implementations: {
+    actions: {
+      setValue({ context, event }) {
+        context.set("value", event.value);
+      },
+      downloadQrCode({ event, scope }) {
+        const { mimeType, quality, fileName } = event;
+        const svgEl = getFrameEl(scope);
+        const doc = scope.getDoc();
+        domQuery.getDataUrl(svgEl, { type: mimeType, quality }).then((dataUri) => {
+          const a = doc.createElement("a");
+          a.href = dataUri;
+          a.rel = "noopener";
+          a.download = fileName;
+          a.click();
+          setTimeout(() => {
+            a.remove();
+          }, 0);
+        });
       }
     }
-  );
-}
+  }
+});
+var props = types.createProps()([
+  "ids",
+  "defaultValue",
+  "value",
+  "id",
+  "encoding",
+  "dir",
+  "getRootNode",
+  "onValueChange",
+  "pixelSize"
+]);
+var splitProps = utils.createSplitProps(props);
 
-// src/qr-code.props.ts
-var import_types = require("@zag-js/types");
-var import_utils2 = require("@zag-js/utils");
-var props = (0, import_types.createProps)()(["ids", "value", "id", "encoding", "dir", "getRootNode"]);
-var splitProps = (0, import_utils2.createSplitProps)(props);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  connect,
-  machine,
-  props,
-  splitProps
-});
-//# sourceMappingURL=index.js.map
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

package.json

 {
   "name": "@zag-js/qr-code",
-  "version": "0.0.0-dev-20240723090825",
+  "version": "0.0.0-v1-beta-20250220125322",
   "description": "Core logic for the qr-code widget implemented as a state machine",
@@ -21,4 +21,3 @@ "keywords": [
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
@@ -34,7 +33,7 @@ "publishConfig": {
     "uqr": "0.1.2",
-    "@zag-js/anatomy": "0.0.0-dev-20240723090825",
-    "@zag-js/core": "0.0.0-dev-20240723090825",
-    "@zag-js/dom-query": "0.0.0-dev-20240723090825",
-    "@zag-js/utils": "0.0.0-dev-20240723090825",
-    "@zag-js/types": "0.0.0-dev-20240723090825"
+    "@zag-js/core": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/utils": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/types": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/dom-query": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/anatomy": "0.0.0-v1-beta-20250220125322"
   },
@@ -57,5 +56,5 @@ "devDependencies": {
     "build": "tsup",
-    "lint": "eslint src --ext .ts,.tsx",
+    "lint": "eslint src",
     "typecheck": "tsc --noEmit"
   }
 }

New alerts

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

Worsened metrics

Total package byte prevSize

18147

decreased by-49.66%

Number of package files

7

decreased by-56.25%

Lines of code

429

decreased by-19.36%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@zag-js/anatomy@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/core@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/dom-query@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/types@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/utils@0.0.0-v1-beta-20250220125322(transitive)

• + Addedproxy-compare@3.0.1(transitive)

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

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

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

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

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

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

• - Removedklona@2.0.6(transitive)

• - Removedproxy-compare@3.0.0(transitive)

• Updated@zag-js/anatomy@0.0.0-v1-beta-20250220125322

• Updated@zag-js/core@0.0.0-v1-beta-20250220125322

• Updated@zag-js/dom-query@0.0.0-v1-beta-20250220125322

• Updated@zag-js/types@0.0.0-v1-beta-20250220125322

• Updated@zag-js/utils@0.0.0-v1-beta-20250220125322