@dlightjs/components - npm Package Compare versions

Comparing version 0.8.5 to 0.8.6

dist/index.js

 var S = Object.defineProperty;
-var T = (s, a, t) => a in s ? S(s, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[a] = t;
-var e = (s, a, t) => (T(s, typeof a != "symbol" ? a + "" : a, t), t);
-import h, { View as u, DLNodeType as P } from "@dlightjs/dlight";
+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);
+import p, { View as l, DLNodeType as P } from "@dlightjs/dlight";
 import { css as $ } from "@dlightjs/emotion";
-class F extends u {
+class F extends l {
   constructor() {
@@ -12,3 +12,3 @@ super(...arguments);
   Body() {
-    const t = new h.HtmlNode("div");
+    const t = new p.HtmlNode("div");
     return t._$addProp("className", $`
@@ -19,7 +19,7 @@ flex-grow: 1;
 }
-function v(s) {
-  if (![P.HTML, P.Text].includes(s._$nodeType)) {
-    if (s.isSpacer)
+function v(n) {
+  if (![P.HTML, P.Text].includes(n._$nodeType)) {
+    if (n.isSpacer)
       return !0;
-    for (const a of s._$nodes ?? [])
+    for (const a of n._$nodes ?? [])
       if (v(a))
@@ -30,3 +30,3 @@ return !0;
 }
-class H extends u {
+class H extends l {
   constructor() {
@@ -96,3 +96,3 @@ super(...arguments);
   Body() {
-    const t = new h.HtmlNode("div");
+    const t = new p.HtmlNode("div");
     return t._$addProp("className", () => $`
@@ -105,11 +105,11 @@ height: ${this.height};
         `, this, ["height", "width", "spacing"]), t._$addNodes((() => {
-      const i = new h.ForNode();
-      return i._$addNodess(() => Array.from(this._$children).map((r) => {
-        const o = new h.IfNode();
-        return o._$addCond(() => v(r), () => [new h.ExpressionNode(r)]), o._$addCond(() => !0, () => {
-          const n = new h.ExpressionNode(r);
-          return n._$addProp("className", () => $`
+      const i = new p.ForNode();
+      return i._$addNodess(() => Array.from(this._$children).map((s) => {
+        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", () => $`
                 flex-shrink: 0;
                 margin: ${this.margin};
-            `, this, ["margin"]), [n];
+            `, this, ["margin"]), [r];
         }), [o];
@@ -120,3 +120,3 @@ })), [i];
 }
-class W extends u {
+class W extends l {
   constructor() {
@@ -186,3 +186,3 @@ super(...arguments);
   Body() {
-    const t = new h.HtmlNode("div");
+    const t = new p.HtmlNode("div");
     return t._$addProp("className", () => $`
@@ -195,11 +195,11 @@ height: ${this.height};
     `, this, ["height", "width", "spacing"]), t._$addNodes((() => {
-      const i = new h.ForNode();
-      return i._$addNodess(() => Array.from(this._$children).map((r) => {
-        const o = new h.IfNode();
-        return o._$addCond(() => v(r), () => [new h.ExpressionNode(r)]), o._$addCond(() => !0, () => {
-          const n = new h.ExpressionNode(r);
-          return n._$addProp("className", () => $`
+      const i = new p.ForNode();
+      return i._$addNodess(() => Array.from(this._$children).map((s) => {
+        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", () => $`
                 flex-shrink: 0;
                 margin: ${this.margin};
-            `, this, ["margin"]), [n];
+            `, this, ["margin"]), [r];
         }), [o];
@@ -210,3 +210,3 @@ })), [i];
 }
-class k extends u {
+class k extends l {
   constructor() {
@@ -254,3 +254,3 @@ super(...arguments);
   Body() {
-    const t = new h.HtmlNode("div");
+    const t = new p.HtmlNode("div");
     return t._$addProp("className", () => $`
@@ -271,5 +271,5 @@ height: ${this.height};
       `, this, ["height", "width", "vAlignment", "hAlignment"]), t._$addNodes((() => {
-      const i = new h.ForNode();
-      return i._$addNodess(() => Array.from(this._$children).map((r) => {
-        const o = new h.ExpressionNode(r);
+      const i = new p.ForNode();
+      return i._$addNodess(() => Array.from(this._$children).map((s) => {
+        const o = new p.ExpressionNode(s);
         return o._$addProp("className", $`
@@ -289,16 +289,16 @@ position: relative;
 }
-function A(s, a) {
+function A(n, a) {
   let t;
-  if (s[0] === "/")
-    t = s;
+  if (n[0] === "/")
+    t = n;
   else {
-    s[0] !== "." && (s = "./" + s);
-    const i = a === "history" ? window.location.pathname : window.location.hash.replace(/^#/, ""), r = s.split("/"), o = i.split("/").filter((p) => p);
-    let n = 0;
-    for (const p of r) {
-      if (![".", ".."].includes(p))
+    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;
+    for (const h of s) {
+      if (![".", ".."].includes(h))
         break;
-      p === ".." && (o.length === 0 && console.warn(`no ../ in ${s}`), o.pop()), n++;
+      h === ".." && (o.length === 0 && console.warn(`no ../ in ${n}`), o.pop()), r++;
     }
-    t = "/" + [...o, ...r.slice(n)].join("/");
+    t = "/" + [...o, ...s.slice(r)].join("/");
   }
@@ -325,3 +325,3 @@ return t;
 }
-class q extends u {
+class j extends l {
   constructor() {
@@ -335,8 +335,8 @@ super(...arguments);
   Body() {
-    return [new h.ExpressionNode(this._$children)];
+    return [new p.ExpressionNode(this._$children)];
   }
 }
 const y = history.pushState;
-let l = [];
-class O extends u {
+let g = [];
+class q extends l {
   constructor() {
@@ -348,9 +348,7 @@ super(...arguments);
       navigator: /* @__PURE__ */ new Map(),
-      showedRoute: /* @__PURE__ */ new Map(),
-      routeParam: /* @__PURE__ */ new Map()
+      showedRoute: /* @__PURE__ */ new Map()
     });
     e(this, "_$derivedPairs", {
       currUrl: ["mode"],
-      showedRoute: ["currUrl"],
-      routeParam: ["currUrl", "navigator"]
+      showedRoute: ["currUrl"]
     });
@@ -366,27 +364,27 @@ e(this, "_$$$mode", "prop");
     e(this, "prevRoutes", []);
-    e(this, "_$$navigator");
+    e(this, "_$$navigator", new U());
     e(this, "_$$showedRoute", () => function() {
       const t = this.prevPathCondition;
       this.prevPathCondition = "";
-      const i = this.currUrl.replace(new RegExp(`^${this.baseUrl}`), ""), r = [];
-      for (const [o, n] of this._$children.entries()) {
-        if (!n.isRoute) {
-          r.push(this._$childrenFuncs[o]());
+      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]());
           continue;
         }
-        let p = n._$content, d = !1;
-        if (typeof n._$content == "string") {
-          p = p.replace(/^(\.\/)+/, "");
-          const g = p === "." && i === "", c = (i + "/").startsWith(p + "/");
-          d = g || c || p === " none";
+        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";
         } else
-          p instanceof RegExp && (d = p.test(i));
+          h instanceof RegExp && (d = h.test(i));
         if (d) {
-          if (p === t)
+          if (h === t)
             return this.prevPathCondition = t, this.prevRoutes;
-          r.push(n), this.prevPathCondition = p;
+          s.push(r), this.prevPathCondition = h;
           break;
         }
       }
-      return this.prevRoutes = r, r;
+      return this.prevRoutes = s, s;
     }.call(this));
@@ -399,6 +397,2 @@ e(this, "historyChangeListen", () => {
     });
-    e(this, "_$$routeParam", () => ({
-      path: this.currUrl,
-      navigator: this.navigator
-    }));
   }
@@ -429,12 +423,19 @@ get mode() {
   }
+  willMount() {
+    this.navigator.mode = this.mode, this.getNavigator(this.navigator);
+    let t = this._$parentNode;
+    for (; t; )
+      t.isRoute && (this.baseUrl = t._$content + "/" + this.baseUrl), t = t._$parentNode;
+    console.log(this.baseUrl, "jj");
+  }
   didMount() {
-    if (this.getNavigator(this.navigator), this.mode === "hash") {
+    if (this.mode === "hash") {
       addEventListener("load", this.hashChangeListen), addEventListener("hashchange", this.hashChangeListen);
       return;
     }
-    addEventListener("load", this.historyChangeListen), addEventListener("popstate", this.historyChangeListen), l.push(this.historyChangeListen), history.pushState = new Proxy(y, {
-      apply: (t, i, r) => {
-        const o = t.apply(i, r);
-        for (const n of l)
-          n();
+    addEventListener("load", this.historyChangeListen), addEventListener("popstate", this.historyChangeListen), g.push(this.historyChangeListen), history.pushState = new Proxy(y, {
+      apply: (t, i, s) => {
+        const o = t.apply(i, s);
+        for (const r of g)
+          r();
         return o;
@@ -449,7 +450,7 @@ }
     }
-    removeEventListener("load", this.historyChangeListen), removeEventListener("popstate", this.historyChangeListen), l = l.filter((t) => t !== this.historyChangeListen), l.length > 0 ? history.pushState = new Proxy(y, {
-      apply: (t, i, r) => {
-        const o = t.apply(i, r);
-        for (const n of l)
-          n();
+    removeEventListener("load", this.historyChangeListen), removeEventListener("popstate", this.historyChangeListen), g = g.filter((t) => t !== this.historyChangeListen), g.length > 0 ? history.pushState = new Proxy(y, {
+      apply: (t, i, s) => {
+        const o = t.apply(i, s);
+        for (const r of g)
+          r();
         return o;
@@ -459,23 +460,8 @@ }
   }
-  AfterConstruct() {
-    let t = this._$parentNode;
-    for (; t; )
-      t.isRoute && (this.baseUrl = t._$content + "/" + this.baseUrl), t = t._$parentNode;
-  }
-  Preset() {
-    const t = new U();
-    t.mode = this.mode, this.navigator = t;
-  }
-  get routeParam() {
-    return this._$$routeParam;
-  }
-  set routeParam(t) {
-    this._$updateProperty("routeParam", t);
-  }
   Body() {
-    const t = new h.EnvNode();
-    return t._$addNodes((() => [new h.ExpressionNode(() => this.showedRoute, this, ["showedRoute"])])()), t._$addProp("RouteParam", () => this.routeParam, this, ["routeParam"]), [t];
+    const t = new p.EnvNode();
+    return t._$addNodes((() => [new p.ExpressionNode(() => this.showedRoute, this, ["showedRoute"])])()), t._$addProp("navigator", () => this.navigator, this, ["navigator"]), [t];
   }
 }
-class j extends u {
+class O extends l {
   constructor() {
@@ -514,3 +500,3 @@ super(...arguments);
   Body() {
-    const t = new h.ExpressionNode(this._$children);
+    const t = new p.ExpressionNode(this._$children);
     return t._$addProp("className", () => $`
@@ -521,3 +507,3 @@ transition: all ${this.duration}s ${this.easing} ${this.delay}s;
 }
-class V extends u {
+class V extends l {
   constructor() {
@@ -532,3 +518,2 @@ super(...arguments);
       _delay: /* @__PURE__ */ new Map(),
-      transition: /* @__PURE__ */ new Map(),
       appearWith: /* @__PURE__ */ new Map()
@@ -550,3 +535,3 @@ });
     e(this, "firstRender", !0);
-    e(this, "_$$transition", () => (t, i) => `all ${this._duration(t)[i]}s ${this._easing(t)[i]} ${this._delay(t)[i]}s`);
+    e(this, "transition", () => (t, i) => `all ${this._duration(t)[i]}s ${this._easing(t)[i]} ${this._delay(t)[i]}s`);
     e(this, "_$$$appearWith", "prop");
@@ -568,6 +553,6 @@ e(this, "_$$appearWith", {
   parseProp(t, i) {
-    const r = {}, o = this[`_$${i}`], n = this[i];
-    typeof n == "object" ? (r.appear = n.appear ?? o, r.firstAppear = n.firstAppear ?? r.appear, r.disappear = n.disappear ?? o, r.lastDisappear = n.lastDisappear ?? r.disappear, r.move = n.move ?? o) : (r.firstAppear = n, r.appear = n, r.disappear = n, r.lastDisappear = n, r.move = n);
-    const p = (d) => typeof d == "function" ? d(t) : d;
-    return r.appear = p(r.appear) ?? o, r.firstAppear = p(r.firstAppear) ?? r.appear, r.disappear = p(r.disappear) ?? o, r.lastDisappear = p(r.lastDisappear) ?? r.disappear, r.move = p(r.move) ?? o, r;
+    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 h = (d) => typeof d == "function" ? d(t) : d;
+    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;
   }
@@ -592,8 +577,2 @@ get _duration() {
   }
-  get transition() {
-    return this._$$transition;
-  }
-  set transition(t) {
-    this._$updateProperty("transition", t);
-  }
   get appearWith() {
@@ -608,13 +587,13 @@ return this._$$appearWith;
       el: i,
-      parentNode: r,
+      parentNode: s,
       rect: o,
-      idx: n
+      idx: r
     } = 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, (p) => {
-      p.style.margin = "", p.style.transform = "";
-    }), i.style.top = `${o.top}px`, i.style.left = `${o.left}px`, r.childNodes.length >= n ? r.appendChild(i) : r.insertBefore(i, r.childNodes[n]), requestAnimationFrame(() => {
-      const p = () => {
-        i.removeEventListener("transitionend", p), i.remove();
+    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) => {
+      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(() => {
+      const h = () => {
+        i.removeEventListener("transitionend", h), i.remove();
       };
-      i.addEventListener("transitionend", p), R(i, this.disappearWith);
+      i.addEventListener("transitionend", h), R(i, this.disappearWith);
     });
@@ -635,5 +614,5 @@ }
   Body() {
-    const t = new h.ExpressionNode(this._$children);
+    const t = new p.ExpressionNode(this._$children);
     return t._$onUpdateNodes(() => {
-      for (const [i, r] of this.prevElInfos.entries())
+      for (const [i, s] of this.prevElInfos.entries())
         if (this.movable) {
@@ -643,13 +622,13 @@ i.style.transform = "";
             rect: i.getBoundingClientRect(),
-            stopTrigger: r.stopTrigger
+            stopTrigger: s.stopTrigger
           };
           if (this.prevElInfos.set(i, o), o.stopTrigger)
             continue;
-          r.stopTrigger = !0;
-          const n = r.rect.x - o.rect.x, p = r.rect.y - o.rect.y;
-          D(i, this._duration(i).move, this._easing(i).move, this._delay(i).move, n, p, o);
+          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);
         }
     }), t._$addProp("didAppear", (i) => {
-      if (i.style.transition = this.firstRender ? this.transition(i, "firstAppear") : this.transition(i, "appear"), w(i, (n) => {
-        n.style.transition = this.firstRender ? this.transition(n, "firstAppear") : this.transition(n, "appear");
+      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");
       }), requestAnimationFrame(() => {
@@ -662,12 +641,12 @@ this.prevElInfos.set(i, {
         return;
-      const r = i.style.cssText;
+      const s = i.style.cssText;
       R(i, this.appearWith);
       const o = this.firstRender;
       requestAnimationFrame(() => {
-        i.setAttribute("style", r);
-        const n = () => {
-          const p = this.prevElInfos.get(i);
-          p.rect = i.getBoundingClientRect(), p.stopTrigger = !1, i.removeEventListener("transitionend", n);
+        i.setAttribute("style", s);
+        const r = () => {
+          const h = this.prevElInfos.get(i);
+          h.rect = i.getBoundingClientRect(), h.stopTrigger = !1, i.removeEventListener("transitionend", r);
         };
-        i.addEventListener("transitionend", n), this.firstRender && (this.firstRender = !1), setTimeout(() => {
+        i.addEventListener("transitionend", r), this.firstRender && (this.firstRender = !1), setTimeout(() => {
           this.prevElInfos.get(i).stopTrigger = !1;
@@ -685,37 +664,37 @@ }, this._duration(i).appear * 1e3), o && requestAnimationFrame(() => {
 }
-function E(s) {
+function E(n) {
   var a;
   return {
-    el: s.cloneNode(!0),
-    parentNode: s.parentNode,
+    el: n.cloneNode(!0),
+    parentNode: n.parentNode,
     rect: {
-      top: s.offsetTop,
-      left: s.offsetLeft
+      top: n.offsetTop,
+      left: n.offsetLeft
     },
-    idx: Array.from(((a = s.parentNode) == null ? void 0 : a.childNodes) ?? []).indexOf(s)
+    idx: Array.from(((a = n.parentNode) == null ? void 0 : a.childNodes) ?? []).indexOf(n)
   };
 }
-function w(s, a) {
-  s.nodeType !== Node.TEXT_NODE && (a(s), s.childNodes.forEach((t) => w(t, a)));
+function w(n, a) {
+  n.nodeType !== Node.TEXT_NODE && (a(n), n.childNodes.forEach((t) => w(t, a)));
 }
-function R(s, a) {
-  typeof a == "function" && (a = a(s));
-  const t = s.style.cssText;
+function R(n, a) {
+  typeof a == "function" && (a = a(n));
+  const t = n.style.cssText;
   if (typeof a == "string")
-    s.setAttribute("style", t + a);
+    n.setAttribute("style", t + a);
   else
-    for (const [i, r] of Object.entries(a))
-      s.style[i] = r;
+    for (const [i, s] of Object.entries(a))
+      n.style[i] = s;
 }
-function D(s, a, t, i, r, o, n) {
-  let p, d, g = !1;
+function D(n, a, t, i, s, o, r) {
+  let h, d, u = !1;
   const c = `all ${a}s ${t} ${i}s`;
   function m(_) {
-    p === void 0 && (p = _, s.style.transition = c + ", transform 0s");
-    const M = _ - p;
+    h === void 0 && (h = _, n.style.transition = c + ", transform 0s");
+    const M = _ - h;
     if (d !== _) {
-      const f = Math.max(M / (a * 1e3) - i, 0), L = f * r, C = f * o;
-      f >= 1 ? (s.style.transform = "", g = !0) : s.style.transform = `translate(${r - L}px, ${o - C}px)`, n.rect = s.getBoundingClientRect();
+      const f = Math.max(M / (a * 1e3) - i, 0), L = f * s, C = f * o;
+      f >= 1 ? (n.style.transform = "", u = !0) : n.style.transform = `translate(${s - L}px, ${o - C}px)`, r.rect = n.getBoundingClientRect();
     }
-    d = _, !g && !n.stopTrigger ? requestAnimationFrame(m) : s.style.transition = c;
+    d = _, !u && !r.stopTrigger ? requestAnimationFrame(m) : n.style.transition = c;
   }
@@ -727,6 +706,6 @@ requestAnimationFrame(m);
   U as Navigator,
-  q as Route,
-  O as RouterSpace,
+  j as Route,
+  q as RouterSpace,
   F as Spacer,
-  j as Transition,
+  O as Transition,
   V as TransitionGroup,
@@ -733,0 +712,0 @@ W as VStack,

dist/Router/RouterSpace.view.d.ts

@@ -11,14 +11,9 @@ import { type DLNode, View } from "@dlightjs/dlight";
     prevRoutes: DLNode[];
-    navigator?: Navigator;
+    navigator: Navigator;
     showedRoute: any;
     historyChangeListen: () => void;
     hashChangeListen: () => void;
+    willMount(): void;
     didMount(): void;
     willUnmount(): void;
-    AfterConstruct(): void;
-    Preset(): void;
-    routeParam: {
-        path: string;
-        navigator: Navigator | undefined;
-    };
     Body(): void;
@@ -25,0 +20,0 @@ }

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

50698

decreased by-1.87%

Lines of code

919

decreased by-2.85%

Dependency changes

• + Added@dlightjs/dlight@0.8.6(transitive)

• + Added@dlightjs/emotion@0.8.6(transitive)

• + Added@dlightjs/types@0.8.6(transitive)

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

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

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

• Updated@dlightjs/dlight@0.8.6

• Updated@dlightjs/emotion@0.8.6