@zag-js/vue - npm Package Compare versions

Comparing version 0.0.0-dev-20220413091534 to 0.0.0-dev-20220413174154

dist/index.d.ts

@@ -7,1 +7,2 @@ export * from "./use-machine";
 export type { PropTypes } from "./prop-types";
+//# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,2 +0,164 @@
-var T=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var n in t)T(e,n,{get:t[n],enumerable:!0})},w=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of C(t))!M.call(e,r)&&r!==n&&T(e,r,{get:()=>t[r],enumerable:!(o=g(t,r))||o.enumerable});return e};var O=e=>w(T({},"__esModule",{value:!0}),e);var V={};x(V,{normalizeProps:()=>j,useActor:()=>D,useMachine:()=>A,useSetup:()=>z,useSnapshot:()=>N});module.exports=O(V);var c=require("vue");function A(e,t){let{actions:n,state:o,context:r,preserve:s}=t!=null?t:{},f=typeof e=="function"?e():s?e:e.clone(),i=t?f.withOptions(t):f,p=(0,c.shallowRef)(i.state),v=(0,c.computed)({get(){return p.value},set(u){p.value!==u&&(p.value=u)}});i.start(o);let d;return(0,c.onMounted)(()=>{d=i.subscribe(u=>{v.value=u})}),(0,c.onBeforeUnmount)(()=>{d==null||d(),i.stop()}),(0,c.watch)(()=>n,i.setActions,{flush:"post",immediate:!0}),r&&(0,c.watch)(r,u=>{i.setContext(u)},{immediate:!0,deep:!0}),[v,i.send,i]}var a=require("vue");function D(e){let t=(0,a.shallowRef)(e.state),n=(0,a.computed)({get(){return t.value},set(s){t.value!==s&&(t.value=s)}}),o;function r(s){n.value=s}return(0,a.onMounted)(()=>{o=e.subscribe(r)}),(0,a.onBeforeUnmount)(()=>{o==null||o()}),[n,e.send]}function h(e){return{button:e,label:e,input:e,output:e,element:e}}var _=h(e=>e);function L(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()}var E={htmlFor:"for",className:"class",onDoubleClick:"onDblclick",onChange:"onInput",onFocus:"onFocusin",onBlur:"onFocusout"};function U(e){return e in E?E[e]:e.startsWith("on")?`on${L(e.substr(2))}`:e.toLowerCase()}var j=h(e=>{let t={};for(let n in e)n==="children"?typeof e[n]=="string"&&(t.innerHTML=e[n]):t[U(n)]=e[n];return t});var S=require("vue");var m={},$=Symbol(),y=Symbol(),R=Symbol(),G=Symbol(),J=Symbol(),Q=Symbol();function P(e,t,n){(m.env&&m.env.MODE)!=="production"&&!e?.[y]&&console.warn("Please use proxy object");let o,r=[],s=f=>{if(r.push(f),n){t(r.splice(0));return}o||(o=Promise.resolve().then(()=>{o=void 0,t(r.splice(0))}))};return e[y].add(s),()=>{e[y].delete(s)}}function b(e){return(m.env&&m.env.MODE)!=="production"&&!e?.[R]&&console.warn("Please use proxy object"),e[R]}var N=e=>{let t=(0,S.ref)({}),n=P(e,()=>{t.value=b(e)});return(0,S.onUnmounted)(()=>{n==null||n()}),t};var l=require("vue");function z(e){let{id:t,send:n}=e,o=(0,l.ref)(null);return(0,l.onMounted)(()=>{Promise.resolve().then(()=>{var s,f;let r=(f=(s=o.value)==null?void 0:s.ownerDocument)!=null?f:document;n({type:"SETUP",doc:r,id:(0,l.isRef)(t)?t.value:t})})}),o}
+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);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  normalizeProps: () => normalizeProps,
+  useActor: () => useActor,
+  useMachine: () => useMachine,
+  useSetup: () => useSetup,
+  useSnapshot: () => useSnapshot
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/use-machine.ts
+var import_vue = require("vue");
+function useMachine(machine, options) {
+  const { actions, state: hydratedState, context, preserve } = options != null ? options : {};
+  const resolvedMachine = typeof machine === "function" ? machine() : preserve ? machine : machine.clone();
+  const service = options ? resolvedMachine.withOptions(options) : resolvedMachine;
+  const state = (0, import_vue.shallowRef)(service.state);
+  const consumableState = (0, import_vue.computed)({
+    get() {
+      return state.value;
+    },
+    set(value) {
+      if (state.value !== value) {
+        state.value = value;
+      }
+    }
+  });
+  service.start(hydratedState);
+  let unsubscribe;
+  (0, import_vue.onMounted)(() => {
+    unsubscribe = service.subscribe((nextState) => {
+      consumableState.value = nextState;
+    });
+  });
+  (0, import_vue.onBeforeUnmount)(() => {
+    unsubscribe == null ? void 0 : unsubscribe();
+    service.stop();
+  });
+  (0, import_vue.watch)(() => actions, service.setActions, { flush: "post", immediate: true });
+  if (context) {
+    (0, import_vue.watch)(context, (ctx) => {
+      service.setContext(ctx);
+    }, { immediate: true, deep: true });
+  }
+  return [consumableState, service.send, service];
+}
+
+// src/use-actor.ts
+var import_vue2 = require("vue");
+function useActor(service) {
+  const state = (0, import_vue2.shallowRef)(service.state);
+  const consumableState = (0, import_vue2.computed)({
+    get() {
+      return state.value;
+    },
+    set(value) {
+      if (state.value !== value) {
+        state.value = value;
+      }
+    }
+  });
+  let unsubscribe;
+  function listener(nextState) {
+    consumableState.value = nextState;
+  }
+  (0, import_vue2.onMounted)(() => {
+    unsubscribe = service.subscribe(listener);
+  });
+  (0, import_vue2.onBeforeUnmount)(() => {
+    unsubscribe == null ? void 0 : unsubscribe();
+  });
+  return [consumableState, service.send];
+}
+
+// ../../types/src/prop-types.ts
+function createNormalizer(fn) {
+  return { button: fn, label: fn, input: fn, output: fn, element: fn };
+}
+var normalizeProp = createNormalizer((v) => v);
+
+// src/normalize-props.ts
+function toCase(txt) {
+  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+}
+var eventMap = {
+  htmlFor: "for",
+  className: "class",
+  onDoubleClick: "onDblclick",
+  onChange: "onInput",
+  onFocus: "onFocusin",
+  onBlur: "onFocusout"
+};
+function toVueProp(prop) {
+  if (prop in eventMap)
+    return eventMap[prop];
+  if (prop.startsWith("on")) {
+    return `on${toCase(prop.substr(2))}`;
+  }
+  return prop.toLowerCase();
+}
+var normalizeProps = createNormalizer((props) => {
+  const normalized = {};
+  for (const key in props) {
+    if (key === "children") {
+      if (typeof props[key] === "string") {
+        normalized["innerHTML"] = props[key];
+      } else if (void 0 !== "production") {
+        console.warn("[Vue Normalize Prop] : avoid passing non-primitive value as `children`");
+      }
+    } else {
+      normalized[toVueProp(key)] = props[key];
+    }
+  }
+  return normalized;
+});
+
+// src/use-snapshot.ts
+var import_vue3 = require("vue");
+var import_vanilla = require("valtio/vanilla");
+var useSnapshot = (object) => {
+  const state = (0, import_vue3.ref)({});
+  const unsubscribe = (0, import_vanilla.subscribe)(object, () => {
+    state.value = (0, import_vanilla.snapshot)(object);
+  });
+  (0, import_vue3.onUnmounted)(() => {
+    unsubscribe == null ? void 0 : unsubscribe();
+  });
+  return state;
+};
+
+// src/use-setup.ts
+var import_vue4 = require("vue");
+function useSetup(props) {
+  const { id, send } = props;
+  const nodeRef = (0, import_vue4.ref)(null);
+  (0, import_vue4.onMounted)(() => {
+    Promise.resolve().then(() => {
+      var _a, _b;
+      const doc = (_b = (_a = nodeRef.value) == null ? void 0 : _a.ownerDocument) != null ? _b : document;
+      send({ type: "SETUP", doc, id: (0, import_vue4.isRef)(id) ? id.value : id });
+    });
+  });
+  return nodeRef;
+}
 //# sourceMappingURL=index.js.map

dist/normalize-props.d.ts

 export declare const normalizeProps: import("@zag-js/types").NormalizeProps;
+//# sourceMappingURL=normalize-props.d.ts.map

dist/prop-types.d.ts

@@ -14,1 +14,2 @@ import type { ElementAttrs, HTMLAttributes, NativeElements } from "@vue/runtime-dom";
 };
+//# sourceMappingURL=prop-types.d.ts.map

dist/use-actor.d.ts

 import type { Machine, StateMachine as S } from "@zag-js/core";
 export declare function useActor<TContext extends Record<string, any>, TState extends S.StateSchema, TEvent extends S.EventObject = S.AnyEventObject>(service: Machine<TContext, TState, TEvent>): readonly [import("vue").WritableComputedRef<S.State<TContext, TState, TEvent>>, (evt: S.Event<TEvent>) => void];
+//# sourceMappingURL=use-actor.d.ts.map

dist/use-machine.d.ts

@@ -6,1 +6,2 @@ import type { MachineSrc, StateMachine as S } from "@zag-js/core";
 }): readonly [import("vue").WritableComputedRef<S.State<TContext, TState, S.EventObject>>, (evt: S.Event<TEvent>) => void, import("@zag-js/core").Machine<TContext, TState, TEvent>];
+//# sourceMappingURL=use-machine.d.ts.map

dist/use-setup.d.ts

@@ -11,1 +11,2 @@ import { StateMachine as S } from "@zag-js/core";
 export {};
+//# sourceMappingURL=use-setup.d.ts.map

dist/use-snapshot.d.ts

 export declare const useSnapshot: <T extends object>(object: T) => [T] extends [import("vue").Ref<any>] ? T : import("vue").Ref<import("vue").UnwrapRef<T>>;
+//# sourceMappingURL=use-snapshot.d.ts.map

package.json

 {
   "name": "@zag-js/vue",
-  "version": "0.0.0-dev-20220413091534",
+  "version": "0.0.0-dev-20220413174154",
   "description": "The vue wrapper for zag",
@@ -22,3 +22,3 @@ "keywords": [
   "files": [
-    "dist"
+    "dist/**/*"
   ],
@@ -32,3 +32,3 @@ "publishConfig": {
   "dependencies": {
-    "@zag-js/core": "0.0.0-dev-20220413091534",
+    "@zag-js/core": "0.0.0-dev-20220413174154",
     "valtio": "^1.5.2"
@@ -43,3 +43,12 @@ },
     "vue": ">=3.0.0"
+  },
+  "scripts": {
+    "build:fast": "zag build",
+    "start": "zag build --watch",
+    "build": "zag build --prod",
+    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test:ci": "yarn test --ci --runInBand",
+    "test:watch": "yarn test --watch --updateSnapshot"
   }
-}
+}

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

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

19

58.33%

Lines of code

333

445.9%

Number of low quality alerts

1

-50%

Worsened metrics

Total package byte prevSize

37488

-20.63%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @zag-js/core@0.0.0-dev-20220413174154
  (transitive)

• - Removed

  @zag-js/core@0.0.0-dev-20220413091534
  (transitive)

• Updated

  @zag-js/core@0.0.0-dev-20220413174154