@dlightjs/components - npm Package Compare versions

Comparing version 0.8.27 to 0.9.0-pre

dist/index.js

@@ -1,7 +0,7 @@
-var S = Object.defineProperty;
-var T = (n, a, t) => a in n ? S(n, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[a] = t;
-var e = (n, a, t) => (T(n, typeof a != "symbol" ? a + "" : a, t), t);
+var L = Object.defineProperty;
+var T = (r, a, t) => a in r ? L(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
+var e = (r, a, t) => (T(r, typeof a != "symbol" ? a + "" : a, t), t);
 import p, { View as l, DLNodeType as N } from "@dlightjs/dlight";
 import { css as $ } from "@dlightjs/emotion";
-class F extends l {
+class H extends l {
   constructor() {
@@ -18,8 +18,8 @@ super(...arguments);
 }
-function v(n) {
-  if (![N.HTML, N.Text].includes(n._$nodeType)) {
-    if (n.isSpacer)
+function w(r) {
+  if (![N.HTML, N.Text].includes(r._$nodeType)) {
+    if (r.isSpacer)
       return !0;
-    for (const a of n._$nodes ?? [])
-      if (v(a))
+    for (const a of r._$nodes ?? [])
+      if (w(a))
         return !0;
@@ -29,12 +29,5 @@ }
 }
-class H extends l {
+class W extends l {
   constructor() {
     super(...arguments);
-    e(this, "_$deps", {
-      spacing: /* @__PURE__ */ new Map(),
-      alignment: /* @__PURE__ */ new Map(),
-      width: /* @__PURE__ */ new Map(),
-      height: /* @__PURE__ */ new Map(),
-      margin: /* @__PURE__ */ new Map()
-    });
     e(this, "_$derivedPairs", {
@@ -45,8 +38,12 @@ margin: ["alignment"]
     e(this, "_$$spacing", 0);
+    e(this, "_$$spacingDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$alignment", "prop");
     e(this, "_$$alignment", "top");
+    e(this, "_$$alignmentDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$width", "prop");
     e(this, "_$$width", "100%");
+    e(this, "_$$widthDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$height", "prop");
     e(this, "_$$height", "max-content");
+    e(this, "_$$heightDeps", /* @__PURE__ */ new Set());
     e(this, "_$$margin", () => function() {
@@ -64,2 +61,3 @@ switch (this.alignment) {
     }.call(this));
+    e(this, "_$$marginDeps", /* @__PURE__ */ new Set());
   }
@@ -108,8 +106,8 @@ get spacing() {
         const o = new p.IfNode();
-        return o._$addCond(() => v(s), () => [new p.ExpressionNode(s)]), o._$addCond(() => !0, () => {
-          const r = new p.ExpressionNode(s);
-          return r._$addProp("className", () => $`
+        return o._$addCond(() => w(s), () => [new p.ExpressionNode(s)]), o._$addCond(() => !0, () => {
+          const n = new p.ExpressionNode(s);
+          return n._$addProp("className", () => $`
                 flex-shrink: 0;
                 margin: ${this.margin};
-            `, this, ["margin"]), [r];
+            `, this, ["margin"]), [n];
         }), [o];
@@ -120,12 +118,5 @@ })), [i];
 }
-class W extends l {
+class k extends l {
   constructor() {
     super(...arguments);
-    e(this, "_$deps", {
-      spacing: /* @__PURE__ */ new Map(),
-      alignment: /* @__PURE__ */ new Map(),
-      width: /* @__PURE__ */ new Map(),
-      height: /* @__PURE__ */ new Map(),
-      margin: /* @__PURE__ */ new Map()
-    });
     e(this, "_$derivedPairs", {
@@ -136,8 +127,12 @@ margin: ["alignment"]
     e(this, "_$$spacing", 0);
+    e(this, "_$$spacingDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$alignment", "prop");
     e(this, "_$$alignment", "leading");
+    e(this, "_$$alignmentDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$width", "prop");
     e(this, "_$$width", "max-content");
+    e(this, "_$$widthDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$height", "prop");
     e(this, "_$$height", "100%");
+    e(this, "_$$heightDeps", /* @__PURE__ */ new Set());
     e(this, "_$$margin", () => function() {
@@ -155,2 +150,3 @@ switch (this.alignment) {
     }.call(this));
+    e(this, "_$$marginDeps", /* @__PURE__ */ new Set());
   }
@@ -199,8 +195,8 @@ get spacing() {
         const o = new p.IfNode();
-        return o._$addCond(() => v(s), () => [new p.ExpressionNode(s)]), o._$addCond(() => !0, () => {
-          const r = new p.ExpressionNode(s);
-          return r._$addProp("className", () => $`
+        return o._$addCond(() => w(s), () => [new p.ExpressionNode(s)]), o._$addCond(() => !0, () => {
+          const n = new p.ExpressionNode(s);
+          return n._$addProp("className", () => $`
                 flex-shrink: 0;
                 margin: ${this.margin};
-            `, this, ["margin"]), [r];
+            `, this, ["margin"]), [n];
         }), [o];
@@ -211,19 +207,17 @@ })), [i];
 }
-class k extends l {
+class M extends l {
   constructor() {
     super(...arguments);
-    e(this, "_$deps", {
-      hAlignment: /* @__PURE__ */ new Map(),
-      vAlignment: /* @__PURE__ */ new Map(),
-      width: /* @__PURE__ */ new Map(),
-      height: /* @__PURE__ */ new Map()
-    });
     e(this, "_$$$hAlignment", "prop");
     e(this, "_$$hAlignment", "center");
+    e(this, "_$$hAlignmentDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$vAlignment", "prop");
     e(this, "_$$vAlignment", "center");
+    e(this, "_$$vAlignmentDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$width", "prop");
     e(this, "_$$width", "max-content");
+    e(this, "_$$widthDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$height", "prop");
     e(this, "_$$height", "max-content");
+    e(this, "_$$heightDeps", /* @__PURE__ */ new Set());
   }
@@ -285,19 +279,19 @@ get hAlignment() {
 }
-function x() {
+function S() {
   return location.pathname.slice(1);
 }
-function A(n, a) {
+function x(r, a) {
   let t;
-  if (n[0] === "/")
-    t = n;
+  if (r[0] === "/")
+    t = r;
   else {
-    n[0] !== "." && (n = "./" + n);
-    const i = a === "history" ? window.location.pathname : window.location.hash.replace(/^#/, ""), s = n.split("/"), o = i.split("/").filter((h) => h);
-    let r = 0;
+    r[0] !== "." && (r = "./" + r);
+    const i = a === "history" ? window.location.pathname : window.location.hash.replace(/^#/, ""), s = r.split("/"), o = i.split("/").filter((h) => h);
+    let n = 0;
     for (const h of s) {
       if (![".", ".."].includes(h))
         break;
-      h === ".." && (o.length === 0 && console.warn(`no ../ in ${n}`), o.pop()), r++;
+      h === ".." && (o.length === 0 && console.warn(`no ../ in ${r}`), o.pop()), n++;
     }
-    t = "/" + [...o, ...s.slice(r)].join("/");
+    t = "/" + [...o, ...s.slice(n)].join("/");
   }
@@ -311,6 +305,6 @@ return t;
   hashTo(a) {
-    window.location.href = "#" + A(a, this.mode);
+    window.location.href = "#" + x(a, this.mode);
   }
   historyTo(a) {
-    window.history.pushState({}, "", A(a, this.mode));
+    window.history.pushState({}, "", x(a, this.mode));
   }
@@ -325,3 +319,3 @@ to(a) {
 }
-class j extends l {
+class q extends l {
   constructor() {
@@ -338,13 +332,7 @@ super(...arguments);
 }
-const y = history.pushState;
+const f = history.pushState;
 let g = [];
-class q extends l {
+class O extends l {
   constructor() {
     super(...arguments);
-    e(this, "_$deps", {
-      mode: /* @__PURE__ */ new Map(),
-      currUrl: /* @__PURE__ */ new Map(),
-      navigator: /* @__PURE__ */ new Map(),
-      showedRoute: /* @__PURE__ */ new Map()
-    });
     e(this, "_$derivedPairs", {
@@ -356,6 +344,8 @@ currUrl: ["mode"],
     e(this, "_$$mode", "history");
+    e(this, "_$$modeDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$getNavigator", "prop");
     e(this, "getNavigator", () => {
     });
-    e(this, "_$$currUrl", () => this.mode === "hash" ? P() : x());
+    e(this, "_$$currUrl", () => this.mode === "hash" ? P() : S());
+    e(this, "_$$currUrlDeps", /* @__PURE__ */ new Set());
     e(this, "baseUrl", "");
@@ -365,2 +355,3 @@ e(this, "prevPathCondition", "");
     e(this, "_$$navigator", new U());
+    e(this, "_$$navigatorDeps", /* @__PURE__ */ new Set());
     e(this, "_$$showedRoute", () => function() {
@@ -370,18 +361,16 @@ const t = this.prevPathCondition;
       const i = this.currUrl.replace(new RegExp(`^${this.baseUrl}`), ""), s = [];
-      for (const [o, r] of this._$children.entries()) {
-        if (!r.isRoute) {
-          s.push(this._$childrenFuncs[o]());
+      for (const o of this._$children) {
+        if (!o.isRoute)
           continue;
-        }
-        let h = r._$content, d = !1;
-        if (typeof r._$content == "string") {
-          h = h.replace(/^(\.\/)+/, "");
-          const u = h === "." && i === "", c = (i + "/").startsWith(h + "/");
-          d = u || c || h === " none";
+        let n = o._$content, h = !1;
+        if (typeof o._$content == "string") {
+          n = n.replace(/^(\.\/)+/, "");
+          const d = n === "." && i === "", _ = (i + "/").startsWith(n + "/");
+          h = d || _ || n === " none";
         } else
-          h instanceof RegExp && (d = h.test(i));
-        if (d) {
-          if (h === t)
+          n instanceof RegExp && (h = n.test(i));
+        if (h) {
+          if (n === t)
             return this.prevPathCondition = t, this.prevRoutes;
-          s.push(r), this.prevPathCondition = h;
+          s.push(o), this.prevPathCondition = n;
           break;
@@ -392,4 +381,5 @@ }
     }.call(this));
+    e(this, "_$$showedRouteDeps", /* @__PURE__ */ new Set());
     e(this, "historyChangeListen", () => {
-      this.currUrl = x();
+      this.currUrl = S();
     });
@@ -429,3 +419,2 @@ e(this, "hashChangeListen", () => {
       t.isRoute && (this.baseUrl = t._$content + "/" + this.baseUrl), t = t._$parentNode;
-    console.log(this.baseUrl, "jj");
   }
@@ -437,7 +426,7 @@ didMount() {
     }
-    addEventListener("load", this.historyChangeListen), addEventListener("popstate", this.historyChangeListen), g.push(this.historyChangeListen), history.pushState = new Proxy(y, {
+    addEventListener("load", this.historyChangeListen), addEventListener("popstate", this.historyChangeListen), g.push(this.historyChangeListen), history.pushState = new Proxy(f, {
       apply: (t, i, s) => {
         const o = t.apply(i, s);
-        for (const r of g)
-          r();
+        for (const n of g)
+          n();
         return o;
@@ -452,10 +441,10 @@ }
     }
-    removeEventListener("load", this.historyChangeListen), removeEventListener("popstate", this.historyChangeListen), g = g.filter((t) => t !== this.historyChangeListen), g.length > 0 ? history.pushState = new Proxy(y, {
+    removeEventListener("load", this.historyChangeListen), removeEventListener("popstate", this.historyChangeListen), g = g.filter((t) => t !== this.historyChangeListen), g.length > 0 ? history.pushState = new Proxy(f, {
       apply: (t, i, s) => {
         const o = t.apply(i, s);
-        for (const r of g)
-          r();
+        for (const n of g)
+          n();
         return o;
       }
-    }) : history.pushState = y;
+    }) : history.pushState = f;
   }
@@ -467,16 +456,14 @@ Body() {
 }
-class O extends l {
+class j extends l {
   constructor() {
     super(...arguments);
-    e(this, "_$deps", {
-      duration: /* @__PURE__ */ new Map(),
-      easing: /* @__PURE__ */ new Map(),
-      delay: /* @__PURE__ */ new Map()
-    });
     e(this, "_$$$duration", "prop");
     e(this, "_$$duration", 0.5);
+    e(this, "_$$durationDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$easing", "prop");
     e(this, "_$$easing", "ease-in-out");
+    e(this, "_$$easingDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$delay", "prop");
     e(this, "_$$delay", 0);
+    e(this, "_$$delayDeps", /* @__PURE__ */ new Set());
   }
@@ -514,8 +501,2 @@ get duration() {
     });
-    e(this, "_$deps", {
-      _duration: /* @__PURE__ */ new Map(),
-      _easing: /* @__PURE__ */ new Map(),
-      _delay: /* @__PURE__ */ new Map(),
-      appearWith: /* @__PURE__ */ new Map()
-    });
     e(this, "_$duration", 0.5);
@@ -532,4 +513,7 @@ e(this, "_$easing", "ease-in-out");
     e(this, "_$$_duration", (t) => this.parseProp(t, "duration"));
+    e(this, "_$$_durationDeps", /* @__PURE__ */ new Set());
     e(this, "_$$_easing", (t) => this.parseProp(t, "easing"));
+    e(this, "_$$_easingDeps", /* @__PURE__ */ new Set());
     e(this, "_$$_delay", (t) => this.parseProp(t, "delay"));
+    e(this, "_$$_delayDeps", /* @__PURE__ */ new Set());
     e(this, "firstRender", !0);
@@ -541,2 +525,3 @@ e(this, "transition", () => (t, i) => `all ${this._duration(t)[i]}s ${this._easing(t)[i]} ${this._delay(t)[i]}s`);
     });
+    e(this, "_$$appearWithDeps", /* @__PURE__ */ new Set());
     e(this, "_$$$disappearWith", "prop");
@@ -554,4 +539,4 @@ e(this, "disappearWith", {
   parseProp(t, i) {
-    const s = {}, o = this[`_$${i}`], r = this[i];
-    typeof r == "object" ? (s.appear = r.appear ?? o, s.firstAppear = r.firstAppear ?? s.appear, s.disappear = r.disappear ?? o, s.lastDisappear = r.lastDisappear ?? s.disappear, s.move = r.move ?? o) : (s.firstAppear = r, s.appear = r, s.disappear = r, s.lastDisappear = r, s.move = r);
+    const s = {}, o = this[`_$${i}`], n = this[i];
+    typeof n == "object" ? (s.appear = n.appear ?? o, s.firstAppear = n.firstAppear ?? s.appear, s.disappear = n.disappear ?? o, s.lastDisappear = n.lastDisappear ?? s.disappear, s.move = n.move ?? o) : (s.firstAppear = n, s.appear = n, s.disappear = n, s.lastDisappear = n, s.move = n);
     const h = (d) => typeof d == "function" ? d(t) : d;
@@ -589,11 +574,11 @@ return s.appear = h(s.appear) ?? o, s.firstAppear = h(s.firstAppear) ?? s.appear, s.disappear = h(s.disappear) ?? o, s.lastDisappear = h(s.lastDisappear) ?? s.disappear, s.move = h(s.move) ?? o, s;
       rect: o,
-      idx: r
+      idx: n
     } = t;
-    i.style.position = "absolute", i.style.transition = this.lastDisappear ? this.transition(i, "lastDisappear") : this.transition(i, "disappear"), i.style.margin = "", i.style.transform = "", w(i, (h) => {
+    i.style.position = "absolute", i.style.transition = this.lastDisappear ? this.transition(i, "lastDisappear") : this.transition(i, "disappear"), i.style.margin = "", i.style.transform = "", y(i, (h) => {
       h.style.margin = "", h.style.transform = "";
-    }), i.style.top = `${o.top}px`, i.style.left = `${o.left}px`, s.childNodes.length >= r ? s.appendChild(i) : s.insertBefore(i, s.childNodes[r]), requestAnimationFrame(() => {
+    }), i.style.top = `${o.top}px`, i.style.left = `${o.left}px`, s.childNodes.length >= n ? s.appendChild(i) : s.insertBefore(i, s.childNodes[n]), requestAnimationFrame(() => {
       const h = () => {
         i.removeEventListener("transitionend", h), i.remove();
       };
-      i.addEventListener("transitionend", h), R(i, this.disappearWith);
+      i.addEventListener("transitionend", h), A(i, this.disappearWith);
     });
@@ -607,3 +592,3 @@ }
     for (const i of t)
-      this.removeStores.push(E(i));
+      this.removeStores.push(D(i));
   }
@@ -627,8 +612,8 @@ didUnmount() {
           s.stopTrigger = !0;
-          const r = s.rect.x - o.rect.x, h = s.rect.y - o.rect.y;
-          D(i, this._duration(i).move, this._easing(i).move, this._delay(i).move, r, h, o);
+          const n = s.rect.x - o.rect.x, h = s.rect.y - o.rect.y;
+          b(i, this._duration(i).move, this._easing(i).move, this._delay(i).move, n, h, o);
         }
     }), t._$addProp("didAppear", (i) => {
-      if (i.style.transition = this.firstRender ? this.transition(i, "firstAppear") : this.transition(i, "appear"), w(i, (r) => {
-        r.style.transition = this.firstRender ? this.transition(r, "firstAppear") : this.transition(r, "appear");
+      if (i.style.transition = this.firstRender ? this.transition(i, "firstAppear") : this.transition(i, "appear"), y(i, (n) => {
+        n.style.transition = this.firstRender ? this.transition(n, "firstAppear") : this.transition(n, "appear");
       }), requestAnimationFrame(() => {
@@ -642,11 +627,11 @@ this.prevElInfos.set(i, {
       const s = i.style.cssText;
-      R(i, this.appearWith);
+      A(i, this.appearWith);
       const o = this.firstRender;
       requestAnimationFrame(() => {
         i.setAttribute("style", s);
-        const r = () => {
+        const n = () => {
           const h = this.prevElInfos.get(i);
-          h.rect = i.getBoundingClientRect(), h.stopTrigger = !1, i.removeEventListener("transitionend", r);
+          h.rect = i.getBoundingClientRect(), h.stopTrigger = !1, i.removeEventListener("transitionend", n);
         };
-        i.addEventListener("transitionend", r), this.firstRender && (this.firstRender = !1), setTimeout(() => {
+        i.addEventListener("transitionend", n), this.firstRender && (this.firstRender = !1), setTimeout(() => {
           this.prevElInfos.get(i).stopTrigger = !1;
@@ -658,3 +643,3 @@ }, this._duration(i).appear * 1e3), o && requestAnimationFrame(() => {
     }), t._$addProp("willDisappear", (i) => {
-      this.lastDisappear || (this.removeStore = E(i), this.prevElInfos.delete(i));
+      this.lastDisappear || (this.removeStore = D(i), this.prevElInfos.delete(i));
     }), t._$addProp("didDisappear", () => {
@@ -665,50 +650,50 @@ this.lastDisappear || this.resolveDisappear(this.removeStore);
 }
-function E(n) {
+function D(r) {
   var a;
   return {
-    el: n.cloneNode(!0),
-    parentNode: n.parentNode,
+    el: r.cloneNode(!0),
+    parentNode: r.parentNode,
     rect: {
-      top: n.offsetTop,
-      left: n.offsetLeft
+      top: r.offsetTop,
+      left: r.offsetLeft
     },
-    idx: Array.from(((a = n.parentNode) == null ? void 0 : a.childNodes) ?? []).indexOf(n)
+    idx: Array.from(((a = r.parentNode) == null ? void 0 : a.childNodes) ?? []).indexOf(r)
   };
 }
-function w(n, a) {
-  n.nodeType !== Node.TEXT_NODE && (a(n), n.childNodes.forEach((t) => w(t, a)));
+function y(r, a) {
+  r.nodeType !== Node.TEXT_NODE && (a(r), r.childNodes.forEach((t) => y(t, a)));
 }
-function R(n, a) {
-  typeof a == "function" && (a = a(n));
-  const t = n.style.cssText;
+function A(r, a) {
+  typeof a == "function" && (a = a(r));
+  const t = r.style.cssText;
   if (typeof a == "string")
-    n.setAttribute("style", t + a);
+    r.setAttribute("style", t + a);
   else
     for (const [i, s] of Object.entries(a))
-      n.style[i] = s;
+      r.style[i] = s;
 }
-function D(n, a, t, i, s, o, r) {
-  let h, d, u = !1;
+function b(r, a, t, i, s, o, n) {
+  let h, d, _ = !1;
   const c = `all ${a}s ${t} ${i}s`;
-  function m(_) {
-    h === void 0 && (h = _, n.style.transition = c + ", transform 0s");
-    const C = _ - h;
-    if (d !== _) {
-      const f = Math.max(C / (a * 1e3) - i, 0), M = f * s, L = f * o;
-      f >= 1 ? (n.style.transform = "", u = !0) : n.style.transform = `translate(${s - M}px, ${o - L}px)`, r.rect = n.getBoundingClientRect();
+  function v(u) {
+    h === void 0 && (h = u, r.style.transition = c + ", transform 0s");
+    const E = u - h;
+    if (d !== u) {
+      const m = Math.max(E / (a * 1e3) - i, 0), R = m * s, C = m * o;
+      m >= 1 ? (r.style.transform = "", _ = !0) : r.style.transform = `translate(${s - R}px, ${o - C}px)`, n.rect = r.getBoundingClientRect();
     }
-    d = _, !u && !r.stopTrigger ? requestAnimationFrame(m) : n.style.transition = c;
+    d = u, !_ && !n.stopTrigger ? requestAnimationFrame(v) : r.style.transition = c;
   }
-  requestAnimationFrame(m);
+  requestAnimationFrame(v);
 }
 export {
-  H as HStack,
+  W as HStack,
   U as Navigator,
-  j as Route,
-  q as RouterSpace,
-  F as Spacer,
-  O as Transition,
+  q as Route,
+  O as RouterSpace,
+  H as Spacer,
+  j as Transition,
   V as TransitionGroup,
-  W as VStack,
-  k as ZStack
+  k as VStack,
+  M as ZStack
 };

package.json

 {
   "name": "@dlightjs/components",
-  "version": "0.8.27",
+  "version": "0.9.0-pre",
   "type": "module",
@@ -15,8 +15,8 @@ "files": [
     "vite-plugin-dts": "^1.7.1",
-    "@dlightjs/types": "0.8.27",
-    "vite-plugin-dlight": "0.8.27"
+    "@dlightjs/types": "0.9.0-pre",
+    "vite-plugin-dlight": "0.9.0-pre"
   },
   "dependencies": {
-    "@dlightjs/dlight": "0.8.27",
-    "@dlightjs/emotion": "0.8.27"
+    "@dlightjs/dlight": "0.9.0-pre",
+    "@dlightjs/emotion": "0.9.0-pre"
   },
@@ -23,0 +23,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

51028

increased by0.7%

Worsened metrics

Lines of code

905

decreased by-1.52%

Dependency changes

• + Added@dlightjs/dlight@0.9.0-pre(transitive)

• + Added@dlightjs/emotion@0.9.0-pre(transitive)

• + Added@dlightjs/types@0.9.0-pre(transitive)

• - Removed@dlightjs/dlight@0.8.27(transitive)

• - Removed@dlightjs/emotion@0.8.27(transitive)

• - Removed@dlightjs/types@0.8.27(transitive)

• Updated@dlightjs/dlight@0.9.0-pre

• Updated@dlightjs/emotion@0.9.0-pre