vue-page-store 0.5.1 → 0.5.2

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * vue-page-store v0.5.1
+ * vue-page-store v0.5.2
  * (c) 2026 weijianjun
  * @license MIT
  */

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /*!
- * vue-page-store v0.5.1
+ * vue-page-store v0.5.2
  * (c) 2026 weijianjun
  * @license MIT
  */

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * vue-page-store v0.5.1
+ * vue-page-store v0.5.2
  * (c) 2026 weijianjun
  * @license MIT
  */

package/dist/index.umd.min.js

@@ -1,5 +1,5 @@
 /*!
- * vue-page-store v0.5.1
+ * vue-page-store v0.5.2
  * (c) 2026 weijianjun
  * @license MIT
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-page-store",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Vue 2.6 页面级 Store —— 状态、通信、生命周期，一个作用域全收",
   "author": "weijianjun",
   "license": "MIT",
@@ -10,6 +10,7 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
+    "src/debug",
     "README.md",
     "LICENSE"
   ],

package/src/debug/DevPanel.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="ps-devtools" v-if="visible">
+    <div class="ps-devtools__header">
+      🐛 PageStore Debug
+      <button @click="visible = false" style="float:right;background:none;border:none;color:#eee;cursor:pointer">✕</button>
+    </div>
+
+    <div class="ps-devtools__body">
+      <!-- 左侧：store 列表 -->
+      <div class="ps-devtools__sidebar">
+        <div
+          v-for="item in stores"
+          :key="item.id"
+          :class="['ps-devtools__store', { active: selectedId === item.id, destroyed: item.destroyed }]"
+          @click="selectedId = item.id"
+        >
+          <div class="name">{{ item.id }}</div>
+          <div class="meta">
+            {{ item.destroyed ? '🔴 destroyed' : (item.active ? '🟢 active' : '⚪ idle') }}
+          </div>
+        </div>
+        <div v-if="!stores.length" class="meta" style="padding:8px">no stores</div>
+      </div>
+
+      <!-- 右侧：详情 -->
+      <div class="ps-devtools__main">
+        <!-- tab 切换 -->
+        <div class="ps-devtools__tabs">
+          <span
+            v-for="t in tabs" :key="t"
+            :class="{ active: tab === t }"
+            @click="tab = t"
+          >{{ t }}</span>
+        </div>
+
+        <div class="ps-devtools__pane" v-if="selectedStore">
+          <pre v-if="tab === '$state'">{{ stateText }}</pre>
+          <pre v-else-if="tab === '$source'">{{ sourceText }}</pre>
+          <pre v-else-if="tab === 'getters'">{{ gettersText }}</pre>
+          <div v-else-if="tab === 'events'">
+            <div v-if="!filteredEvents.length" class="meta">no events</div>
+            <div
+              v-for="e in filteredEvents"
+              :key="e.seq"
+              class="event"
+            >
+              <span class="seq">#{{ e.seq }}</span>
+              <span class="time">{{ formatTime(e.ts) }}</span>
+              <span class="type">{{ e.type }}</span>
+              <span v-if="e.payload && e.payload.action" class="tag">{{ e.payload.action }}</span>
+              <span v-if="e.payload && e.payload.duration !== undefined" class="dim">{{ e.payload.duration }}ms</span>
+              <span v-if="e.payload && e.payload.error" class="err">{{ e.payload.error }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-else class="meta" style="padding:12px">select a store</div>
+      </div>
+    </div>
+  </div>
+  <button v-else class="ps-devtools__pill" @click="visible = true">
+    🐛 {{ stores.length }}
+  </button>
+</template>
+
+<script>
+import { getStores, getEvents } from './registry.js';
+
+export default {
+  name: 'PageStoreDevPanel',
+
+  data: function () {
+    return {
+      visible: false,
+      selectedId: null,
+      tab: '$state',
+      tabs: ['$state', '$source', 'getters', 'events'],
+      tick: 0,
+      _timer: null,
+    };
+  },
+
+  computed: {
+    stores: function () {
+      this.tick; // 建立响应式依赖，500ms 驱动刷新
+      var list = [];
+      getStores().forEach(function (m) { list.push(m); });
+      return list;
+    },
+
+    selectedStore: function () {
+      if (!this.selectedId && this.stores.length) {
+        this.selectedId = this.stores[0].id;
+      }
+      for (var i = 0; i < this.stores.length; i++) {
+        if (this.stores[i].id === this.selectedId) return this.stores[i];
+      }
+      return this.stores[0] || null;
+    },
+
+    ref: function () {
+      return this.selectedStore && this.selectedStore.storeRef;
+    },
+
+    stateText: function () {
+      this.tick;
+      return this.safeJson(this.ref && this.ref.$state);
+    },
+
+    sourceText: function () {
+      this.tick;
+      return this.safeJson(this.ref && this.ref.$source);
+    },
+
+    gettersText: function () {
+      this.tick;
+      var s = this.ref;
+      if (!s) return '(no store)';
+      var stateKeys = s.$state ? Object.keys(s.$state) : [];
+      var sourceKeys = s.$source ? Object.keys(s.$source) : [];
+      var out = {};
+      for (var k in s) {
+        if (!k || k[0] === '$' || k[0] === '_') continue;
+        if (stateKeys.indexOf(k) > -1 || sourceKeys.indexOf(k) > -1) continue;
+        var v;
+        try { v = s[k]; } catch (e) { continue; }
+        if (typeof v === 'function') continue;
+        out[k] = v;
+      }
+      var str = this.safeJson(out);
+      return str === '{}' ? '(no getters)' : str;
+    },
+
+    filteredEvents: function () {
+      this.tick;
+      if (!this.selectedStore) return [];
+      var id = this.selectedStore.id;
+      var all = getEvents();
+      var filtered = [];
+      for (var i = all.length - 1; i >= 0 && filtered.length < 50; i--) {
+        if (all[i].storeId === id) filtered.push(all[i]);
+      }
+      return filtered;
+    },
+  },
+
+  mounted: function () {
+    var self = this;
+    this._timer = setInterval(function () { self.tick++; }, 500);
+  },
+
+  beforeDestroy: function () {
+    if (this._timer) clearInterval(this._timer);
+  },
+
+  methods: {
+    safeJson: function (val) {
+      if (val === undefined || val === null) return String(val);
+      try { return JSON.stringify(val, null, 2); }
+      catch (e) { return '[Unserializable]'; }
+    },
+
+    formatTime: function (ts) {
+      if (!ts) return '';
+      var d = new Date(ts);
+      var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
+      return pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ps-devtools {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  width: 540px;
+  height: 400px;
+  background: #1e1e1e;
+  color: #eee;
+  font-size: 12px;
+  font-family: monospace;
+  z-index: 2147483000;
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+}
+.ps-devtools__header {
+  padding: 6px 10px;
+  background: #333;
+  font-weight: bold;
+}
+.ps-devtools__body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+.ps-devtools__sidebar {
+  width: 160px;
+  flex: 0 0 160px;
+  border-right: 1px solid #444;
+  overflow-y: auto;
+}
+.ps-devtools__store {
+  padding: 6px 8px;
+  cursor: pointer;
+  border-bottom: 1px solid #333;
+}
+.ps-devtools__store:hover { background: #2a2a2a; }
+.ps-devtools__store.active { background: #444; }
+.ps-devtools__store.destroyed { opacity: 0.45; }
+.ps-devtools__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.ps-devtools__tabs {
+  display: flex;
+  border-bottom: 1px solid #444;
+  background: #252525;
+}
+.ps-devtools__tabs span {
+  padding: 5px 10px;
+  cursor: pointer;
+  color: #aaa;
+}
+.ps-devtools__tabs span:hover { color: #eee; }
+.ps-devtools__tabs span.active {
+  color: #fff;
+  background: #444;
+}
+.ps-devtools__pane {
+  flex: 1;
+  overflow: auto;
+  padding: 8px;
+}
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: #d4d4d4;
+}
+.meta { font-size: 10px; color: #888; }
+.name { color: #eee; }
+.event {
+  padding: 2px 0;
+  border-bottom: 1px solid #2a2a2a;
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+.seq { color: #555; min-width: 28px; }
+.time { color: #888; min-width: 60px; }
+.type { color: #ddd; min-width: 100px; }
+.tag { color: #b088f2; }
+.dim { color: #666; }
+.err { color: #e06464; }
+.ps-devtools__pill {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 2147483000;
+  padding: 6px 14px;
+  background: #1e1e1e;
+  color: #eee;
+  border: 1px solid #444;
+  border-radius: 20px;
+  cursor: pointer;
+  font: 12px monospace;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+}
+.ps-devtools__pill:hover { border-color: #888; }
+</style>

package/src/debug/emit.js

@@ -0,0 +1,116 @@
+/**
+ * vue-page-store debug / emit
+ *
+ * 唯一对外高层入口：
+ *   emitDebugEvent(store, type, payload)
+ *
+ * 职责：
+ *   1. 把一次领域调用写入 events 时间线（带 seq + ts）
+ *   2. 对特定 type 顺带同步 stores meta（create / destroy / lifecycle）
+ *   3. payload 做序列化快照，避免后续持有活引用
+ *   4. 仅 dev 生效；任何异常一律吞掉，绝不拖累业务
+ *
+ * 支持的 type：
+ *   store:create       payload = { name? }        → addStore(meta)
+ *   store:destroy      payload = undefined        → updateStore(id, { destroyed: true, active: false })
+ *   lifecycle:init     payload = undefined        → updateStore(id, { route })
+ *   lifecycle:enter    payload = undefined        → updateStore(id, { active: true, route })
+ *   lifecycle:leave    payload = undefined        → updateStore(id, { active: false })
+ *   action:start       payload = { action, args } → 仅写事件
+ *   action:end         payload = { action, duration } → 仅写事件
+ *   action:error       payload = { action, duration, error } → 仅写事件
+ *   state:set          payload = { key, value }   → 仅写事件
+ *   state:patch        payload = { patch }        → 仅写事件
+ */
+
+import {
+  isDev,
+  nextId,
+  addStore,
+  updateStore,
+  addEvent,
+} from './registry.js';
+
+// ---- helpers ----
+
+function readRoute(store) {
+  try {
+    var vm = store && store.$vm;
+    if (vm && vm.$route) {
+      return {
+        path: vm.$route.path,
+        fullPath: vm.$route.fullPath,
+        name: vm.$route.name,
+      };
+    }
+  } catch (e) { /* ignore */ }
+  return null;
+}
+
+function snapshot(v) {
+  if (v === undefined) return undefined;
+  if (v === null) return null;
+  var t = typeof v;
+  if (t === 'function') return '[Function]';
+  if (t !== 'object') return v;
+  try {
+    return JSON.parse(JSON.stringify(v));
+  } catch (e) {
+    return '[Unserializable]';
+  }
+}
+
+// ---- 主入口 ----
+
+export function emitDebugEvent(store, type, payload) {
+  if (!isDev) return null;
+
+  try {
+    var id = store && store.$id;
+
+    // 必要的 meta 同步
+    switch (type) {
+      case 'store:create':
+        addStore({
+          id: id,
+          name: (payload && payload.name) || id,
+          route: readRoute(store),
+          createdAt: Date.now(),
+          active: false,
+          destroyed: false,
+          keepAlive: false,
+          storeRef: store,
+        });
+        break;
+      case 'store:destroy':
+        updateStore(id, { destroyed: true, active: false });
+        break;
+      case 'lifecycle:init':
+        updateStore(id, { route: readRoute(store) });
+        break;
+      case 'lifecycle:enter':
+        updateStore(id, { active: true, route: readRoute(store) });
+        break;
+      case 'lifecycle:leave':
+        updateStore(id, { active: false });
+        break;
+      default:
+        break;
+    }
+
+    var event = {
+      seq: nextId(),
+      ts: Date.now(),
+      storeId: id,
+      type: type,
+      payload: snapshot(payload),
+    };
+    addEvent(event);
+    return event;
+  } catch (e) {
+    return null;
+  }
+}
+
+// Re-export：让 index.js 只需要 import 一个 debug 入口
+export { nextId } from './registry.js';

package/src/debug/installPanel.js

@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import { isDev } from './registry.js';
+import DevPanel from './DevPanel.vue';
+
+var _mounted = false;
+
+export function installDevPanel() {
+  if (!isDev) return;
+  if (_mounted) return;
+  if (typeof document === 'undefined') return;
+  _mounted = true;
+
+  var mount = function () {
+    try {
+      var host = document.createElement('div');
+      host.id = '__vps_devpanel__';
+      document.body.appendChild(host);
+      new Vue({ render: function (h) { return h(DevPanel); } }).$mount(host);
+    } catch (e) {
+      console.warn('[vue-page-store] DevPanel mount failed:', e);
+    }
+  };
+
+  if (document.body) mount();
+  else document.addEventListener('DOMContentLoaded', mount);
+}

package/src/debug/registry.js

@@ -0,0 +1,118 @@
+/**
+ * vue-page-store debug / registry
+ *
+ * 纯 JS 数据层：不依赖 Vue，不涉及 UI。
+ *
+ * 对外：
+ *   window.PAGE_STORE_DEVTOOLS = { stores: Map, events: [], seq: number }
+ *
+ * API：
+ *   nextId()                 — 递增并返回 seq
+ *   addStore(meta)           — stores.set(meta.id, meta)
+ *   updateStore(id, patch)   — 浅合并进已有 meta
+ *   removeStore(id)          — stores.delete(id)
+ *   addEvent(event)          — events.push + 环形裁剪
+ *   getStores()              — 返回 Map（生产返回空 Map）
+ *   getEvents()              — 返回数组（生产返回空数组）
+ *
+ * 仅开发环境生效。生产环境下 ensure() 返回 null，
+ * 所有写 API 静默 no-op，不挂 window，不占内存。
+ */
+
+var MAX_EVENTS = 500;
+
+// ---- isDev：稳健检测 ----
+// webpack 4 / 旧 CRA 有 process；Vite / webpack 5 不 polyfill process 的情况用 try/catch 兜住。
+// 额外允许 window.__VUE_PAGE_STORE_DEV__ = true 强制开启（staging 临开调试面板用）。
+var _isDev = false;
+try {
+  if (typeof process !== 'undefined'
+      && process.env
+      && process.env.NODE_ENV !== 'production') {
+    _isDev = true;
+  }
+} catch (e) { /* no process polyfill */ }
+try {
+  if (typeof window !== 'undefined' && window.__VUE_PAGE_STORE_DEV__ === true) {
+    _isDev = true;
+  }
+} catch (e) { /* SSR */ }
+
+export var isDev = _isDev;
+
+// ---- 单例 ----
+var _devtools = null;
+var _empty = { stores: new Map(), events: [] }; // 生产态只读空占位，避免返回值判空
+
+function ensure() {
+  if (!isDev) return null;
+  if (_devtools) return _devtools;
+
+  _devtools = {
+    stores: new Map(),
+    events: [],
+    seq: 0,
+  };
+
+  if (typeof window !== 'undefined') {
+    try { window.PAGE_STORE_DEVTOOLS = _devtools; } catch (e) { /* locked window */ }
+  }
+
+  return _devtools;
+}
+
+// ---- API ----
+
+export function nextId() {
+  var dt = ensure();
+  if (!dt) return 0;
+  dt.seq++;
+  return dt.seq;
+}
+
+export function addStore(meta) {
+  var dt = ensure();
+  if (!dt) return;
+  if (!meta || !meta.id) return;
+  dt.stores.set(meta.id, meta);
+}
+
+export function updateStore(id, patch) {
+  var dt = ensure();
+  if (!dt) return;
+  if (!id || !patch) return;
+  var m = dt.stores.get(id);
+  if (!m) return;
+  for (var k in patch) {
+    if (Object.prototype.hasOwnProperty.call(patch, k)) {
+      m[k] = patch[k];
+    }
+  }
+}
+
+export function removeStore(id) {
+  var dt = ensure();
+  if (!dt) return;
+  if (!id) return;
+  dt.stores.delete(id);
+}
+
+export function addEvent(event) {
+  var dt = ensure();
+  if (!dt) return;
+  if (!event) return;
+  dt.events.push(event);
+  // 环形裁剪，防止长时间开发内存无限增长
+  var overflow = dt.events.length - MAX_EVENTS;
+  if (overflow > 0) dt.events.splice(0, overflow);
+}
+
+export function getStores() {
+  var dt = ensure();
+  return dt ? dt.stores : _empty.stores;
+}
+
+export function getEvents() {
+  var dt = ensure();
+  return dt ? dt.events : _empty.events;
+}