♻️ refactor(表现): 替换 key, 可以完成简单的 back 操作

Author: hezhongfeng

.cz-config.js renamed to .cz-config.cjs

@@ -1,30 +1,61 @@
-import { defineComponent as S, getCurrentInstance as b, queuePostFlushCb as R, onMounted as K, onUpdated as g, onBeforeUnmount as v, isVNode as w, cloneVNode as q, setTransitionHooks as B, callWithAsyncErrorHandling as W } from "vue";
-import { useRoute as G } from "vue-router";
-const E = {
+import { defineComponent as M, getCurrentInstance as S, queuePostFlushCb as y, onMounted as w, onUpdated as K, onBeforeUnmount as v, isVNode as x, cloneVNode as W, callWithAsyncErrorHandling as B, setTransitionHooks as q } from "vue";
+import "vue-router";
+const s = {
   componentName: "VuePageStack",
   keyName: "stack-key",
   pushName: "push",
   goName: "go",
   replaceName: "replace",
   backName: "back",
   forwardName: "forward"
+}, p = {
+  action: s.pushName
 };
-var p;
-(function(e) {
-  e[e.ELEMENT = 1] = "ELEMENT", e[e.FUNCTIONAL_COMPONENT = 2] = "FUNCTIONAL_COMPONENT", e[e.STATEFUL_COMPONENT = 4] = "STATEFUL_COMPONENT", e[e.TEXT_CHILDREN = 8] = "TEXT_CHILDREN", e[e.ARRAY_CHILDREN = 16] = "ARRAY_CHILDREN", e[e.SLOTS_CHILDREN = 32] = "SLOTS_CHILDREN", e[e.TELEPORT = 64] = "TELEPORT", e[e.SUSPENSE = 128] = "SUSPENSE", e[e.COMPONENT_SHOULD_KEEP_ALIVE = 256] = "COMPONENT_SHOULD_KEEP_ALIVE", e[e.COMPONENT_KEPT_ALIVE = 512] = "COMPONENT_KEPT_ALIVE", e[e.COMPONENT = 6] = "COMPONENT";
-})(p || (p = {}));
-const V = (e, n) => {
-  for (let r = 0; r < e.length; r++)
-    e[r](n);
+let C;
+const G = new Uint8Array(16);
+function X() {
+  if (!C && (C = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !C))
+    throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+  return C(G);
+}
+const i = [];
+for (let n = 0; n < 256; ++n)
+  i.push((n + 256).toString(16).slice(1));
+function Y(n, e = 0) {
+  return i[n[e + 0]] + i[n[e + 1]] + i[n[e + 2]] + i[n[e + 3]] + "-" + i[n[e + 4]] + i[n[e + 5]] + "-" + i[n[e + 6]] + i[n[e + 7]] + "-" + i[n[e + 8]] + i[n[e + 9]] + "-" + i[n[e + 10]] + i[n[e + 11]] + i[n[e + 12]] + i[n[e + 13]] + i[n[e + 14]] + i[n[e + 15]];
+}
+const j = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), b = {
+  randomUUID: j
+};
+function z(n, e, c) {
+  if (b.randomUUID && !e && !n)
+    return b.randomUUID();
+  n = n || {};
+  const o = n.random || (n.rng || X)();
+  if (o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, e) {
+    c = c || 0;
+    for (let E = 0; E < 16; ++E)
+      e[c + E] = o[E];
+    return e;
+  }
+  return Y(o);
+}
+var N;
+(function(n) {
+  n[n.ELEMENT = 1] = "ELEMENT", n[n.FUNCTIONAL_COMPONENT = 2] = "FUNCTIONAL_COMPONENT", n[n.STATEFUL_COMPONENT = 4] = "STATEFUL_COMPONENT", n[n.TEXT_CHILDREN = 8] = "TEXT_CHILDREN", n[n.ARRAY_CHILDREN = 16] = "ARRAY_CHILDREN", n[n.SLOTS_CHILDREN = 32] = "SLOTS_CHILDREN", n[n.TELEPORT = 64] = "TELEPORT", n[n.SUSPENSE = 128] = "SUSPENSE", n[n.COMPONENT_SHOULD_KEEP_ALIVE = 256] = "COMPONENT_SHOULD_KEEP_ALIVE", n[n.COMPONENT_KEPT_ALIVE = 512] = "COMPONENT_KEPT_ALIVE", n[n.COMPONENT = 6] = "COMPONENT";
+})(N || (N = {}));
+const V = (n, e) => {
+  for (let c = 0; c < n.length; c++)
+    n[c](e);
 };
-function h(e, n, r, o) {
-  W(e, n, Y.VNODE_HOOK, [r, o]);
+function R(n, e, c, o) {
+  B(n, e, Q.VNODE_HOOK, [c, o]);
 }
-const X = (e) => e.__isSuspense, I = {
+const J = (n) => n.__isSuspense, I = {
   ENTER: 0,
   LEAVE: 1,
   REORDER: 2
-}, Y = {
+}, Q = {
   SETUP_FUNCTION: 0,
   RENDER_FUNCTION: 1,
   WATCH_GETTER: 2,
@@ -34,125 +65,105 @@ const X = (e) => e.__isSuspense, I = {
   COMPONENT_EVENT_HANDLER: 6,
   VNODE_HOOK: 7
 };
-function H(e) {
-  e.shapeFlag &= ~p.COMPONENT_SHOULD_KEEP_ALIVE, e.shapeFlag &= ~p.COMPONENT_KEPT_ALIVE;
+function g(n) {
+  n.shapeFlag &= ~N.COMPONENT_SHOULD_KEEP_ALIVE, n.shapeFlag &= ~N.COMPONENT_KEPT_ALIVE;
 }
-function P(e) {
-  return e.shapeFlag & p.SUSPENSE ? e.ssContent : e;
+function k(n) {
+  return n.shapeFlag & N.SUSPENSE ? n.ssContent : n;
 }
-const N = [], U = (e) => {
-  for (let n = 0; n < N.length; n++)
-    if (N[n].key === e)
-      return n;
-  return -1;
-}, j = (e) => S({
-  name: E.componentName,
+const T = [], Z = (n) => M({
+  name: s.componentName,
   __isKeepAlive: !0,
-  setup(n, { slots: r }) {
-    const o = b(), c = o.ctx, u = o.suspense, {
+  setup(e, { slots: c }) {
+    const o = S(), E = o.ctx, u = o.suspense, {
       renderer: {
-        p: T,
-        m: L,
-        um: x,
-        o: { createElement: k }
+        p: d,
+        m,
+        um: D,
+        o: { createElement: H }
       }
-    } = c, y = k("div");
-    c.activate = (t, O, l, a, s) => {
-      const i = t.component;
-      L(t, O, l, I.ENTER, u), T(i.vnode, t, O, l, i, u, a, t.slotScopeIds, s), R(() => {
-        i.isDeactivated = !1, i.a && V(i.a);
-        const _ = t.props && t.props.onVnodeMounted;
-        _ && h(_, i.parent, t);
+    } = E, f = H("div");
+    E.activate = (t, r, a, P, O) => {
+      const l = t.component;
+      m(t, r, a, I.ENTER, u), d(l.vnode, t, r, a, l, u, P, t.slotScopeIds, O), y(() => {
+        l.isDeactivated = !1, l.a && V(l.a);
+        const U = t.props && t.props.onVnodeMounted;
+        U && R(U, l.parent, t);
       }, u);
-    }, c.deactivate = (t) => {
-      const O = t.component;
-      L(t, y, null, I.LEAVE, u), R(() => {
-        O.da && V(O.da);
-        const l = t.props && t.props.onVnodeUnmounted;
-        l && h(l, O.parent, t), O.isDeactivated = !0;
+    }, E.deactivate = (t) => {
+      const r = t.component;
+      m(t, f, null, I.LEAVE, u), y(() => {
+        r.da && V(r.da);
+        const a = t.props && t.props.onVnodeUnmounted;
+        a && R(a, r.parent, t), r.isDeactivated = !0;
       }, u);
     };
-    function D(t) {
-      H(t), x(t, o, u, !0);
+    function h(t) {
+      g(t), D(t, o, u, !0);
     }
-    let f = null, C = !1;
+    let L = null, _ = !1;
     const A = () => {
-      f != null && (C ? N[N.length - 1].vnode = P(o.subTree) : N.push({ key: f, vnode: P(o.subTree) }));
+      L && (_ ? T[T.length - 1].vnode = k(o.subTree) : (console.log("cacheSubtree and push"), T.push({ vnode: k(o.subTree) }), console.log(T)));
     };
-    return K(A), g(A), v(() => {
-      for (const t of N)
-        D(t.vnode);
+    return w(A), K(A), v(() => {
+      for (const t of T)
+        h(t.vnode);
     }), () => {
-      f = null, C = !1;
-      const O = G().query[e];
-      if (!r.default)
+      if (_ = !1, !c.default)
         return null;
-      const l = r.default(), a = l[0];
-      if (l.length > 1)
-        return l;
-      if (!w(a) || !(a.shapeFlag & p.STATEFUL_COMPONENT) && !(a.shapeFlag & p.SUSPENSE))
-        return a;
-      let s = P(a);
-      s.el && (s = q(s), a.shapeFlag & p.SUSPENSE && (a.ssContent = s)), f = O;
-      let i = U(O);
-      if (i !== -1) {
-        const _ = N[i].vnode;
-        s.el = _.el, s.component = _.component, s.transition && B(s, s.transition), s.shapeFlag |= p.COMPONENT_KEPT_ALIVE;
-        for (let m = i + 1; m < N.length; m++)
-          H(N[m].vnode), N[m] = null;
-        N.splice(i + 1), C = !0;
+      const t = c.default(), r = t[0];
+      if (t.length > 1)
+        return t;
+      if (!x(r) || !(r.shapeFlag & N.STATEFUL_COMPONENT) && !(r.shapeFlag & N.SUSPENSE))
+        return r;
+      let a = k(r);
+      console.log("vnode.key", a.key);
+      const P = z();
+      if (a.el && (a = W(a), r.shapeFlag & N.SUSPENSE && (r.ssContent = a)), L = P, p.action === s.backName) {
+        console.log("back");
+        let O = T.pop();
+        const l = T[T.length - 1].vnode;
+        a.el = l.el, a.component = l.component, a.transition && q(a, a.transition), a.shapeFlag |= N.COMPONENT_KEPT_ALIVE, g(O.vnode), O = null, _ = !0;
       }
-      return s.shapeFlag |= p.COMPONENT_SHOULD_KEEP_ALIVE, X(a.type) ? a : s;
+      return a.shapeFlag |= N.COMPONENT_SHOULD_KEEP_ALIVE, J(r.type) ? r : a;
     };
   }
-}), d = {
-  action: E.pushName
-}, z = (e) => {
-  const n = e.push.bind(e), r = e.go.bind(e), o = e.replace.bind(e), c = e.back.bind(e), u = e.forward.bind(e);
-  e.push = (T) => (d.action = E.pushName, n(T)), e.go = (T) => {
-    d.action = E.goName, r(T);
-  }, e.replace = (T) => (d.action = E.replaceName, o(T)), e.back = () => {
-    d.action = E.backName, c();
-  }, e.forward = () => {
-    d.action = E.forwardName, u();
+}), $ = (n) => {
+  const e = n.push.bind(n), c = n.go.bind(n), o = n.replace.bind(n), E = n.back.bind(n), u = n.forward.bind(n);
+  n.push = (d) => (p.action = s.pushName, e(d)), n.go = (d) => {
+    p.action = s.goName, c(d);
+  }, n.replace = (d) => (p.action = s.replaceName, o(d)), n.back = () => {
+    p.action = s.backName, E();
+  }, n.forward = () => {
+    p.action = s.forwardName, u();
   };
-};
-function M(e, n) {
-  return !!e[n];
-}
-function J(e) {
-  return e.replace(/[xy]/g, (n) => {
-    const r = Math.random() * 16 | 0;
-    return (n === "x" ? r : r & 3 | 8).toString(16);
-  });
-}
-const $ = {
-  install(e, { router: n, name: r = E.componentName, keyName: o = E.keyName }) {
-    if (!n)
+}, F = {
+  install(n, { router: e, backCallback: c, forwardCallback: o } = {
+    router: null,
+    backCallback: null,
+    forwardCallback: null
+  }) {
+    if (!e)
+      throw Error("router is required");
+    let E = null;
+    e.options.history.listen((u, d, m) => {
+      E = m;
+    }), e.beforeEach(() => {
+      E && (E.direction === "back" && c ? c() : E.direction === "forward" && o && o(), E = null);
+    });
+  }
+}, nn = () => {
+  p.action = s.backName;
+}, on = {
+  install(n, { router: e, name: c = s.componentName, keyName: o = s.keyName }) {
+    if (!e)
       throw Error(`
  vue-router is necessary. 
 
 `);
-    e.component(r, j(o)), z(n), n.beforeEach((c, u) => {
-      if (M(c.query, o))
-        U(c.query[o]) === -1 ? c.params[o + "-dir"] = E.forwardName : c.params[o + "-dir"] = E.backName;
-      else {
-        c.query[o] = J("xxxxxxxx");
-        const T = d.action === E.replaceName || !M(u.query, o);
-        return {
-          hash: c.hash,
-          path: c.path,
-          name: c.name,
-          params: c.params,
-          query: c.query,
-          meta: c.meta,
-          replace: T
-        };
-      }
-    });
+    n.component(c, Z()), n.use(F, { router: e, backCallback: nn }), $(e);
   }
 };
 export {
-  $ as default
+  on as default
 };
-//# sourceMappingURL=vue-page-stack.es.js.map