@lark.js/mvc 0.0.9 → 0.0.11

package/README.md

@@ -22,7 +22,7 @@ A TypeScript MVC framework designed for back-office single-page applications and
 - Template Syntax
 - Frame and the View Tree
 - Module Federation Micro-Frontend
-- Debugging and DevTools Bridge
+- Debugging and Devtool Bridge
 - Public API Reference
 - Common Pitfalls
 - Recent API Changes
@@ -41,7 +41,7 @@ Third, zero runtime dependencies. `@babel/parser` / `@babel/types` are used only
 
 Fourth, real DOM diff. Templates compile to functions that produce HTML strings, which are parsed into temporary DOM via `document.implementation.createHTMLDocument` and then diffed against the live DOM using keyed comparison. The advantage is that context-sensitive tags like `<table>` / `<select>` / `<svg>` are handled by the native parser. The trade-off is that large templates incur parse overhead, and SSR is not supported.
 
-Fifth, debug-friendly. `window.__lark_Debug = true` enables Safeguard Proxy protection against cross-page pollution and accidental writes. `installFrameVisualizerBridge` exposes the Frame tree to visual DevTools via `postMessage`. A set of `window.__lark_*` global shortcuts cover Framework / State / Router / Frame / View and HMR helpers.
+Fifth, debug-friendly. `window.__lark_Debug = true` enables Safeguard Proxy protection against cross-page pollution and accidental writes. `installFrameDevtoolBridge` exposes the Frame tree to Devtool via `postMessage`. A set of `window.__lark_*` global shortcuts cover Framework / State / Router / Frame / View and HMR helpers.
 
 Not suitable for: projects requiring SSR/streaming rendering, cross-platform needs like React Native, or projects needing off-the-shelf Chrome extension panels. For those, consider the React or Vue ecosystems.
 
@@ -220,7 +220,7 @@ const config: FrameworkConfig = {
 Framework.boot(config);
 ```
 
-`Framework.boot()` executes the following steps in order (order is correctness-sensitive): merge user config (including `routeMode`), inject config into Router (which determines history/hash mode), set EventDelegator's frame getter, subscribe to Router/State `changed` events, mark Framework/Router/State as booted, install the Frame Visualizer Bridge, create the root Frame via `Frame.createRoot(config.rootId)`, call `Router._bind()` to bind route events (popstate for history mode, hashchange + popstate for hash mode) and trigger the first `diff()`, and finally mount `defaultView` if Router has not mounted a view. Step seven must precede step eight because the first `diff()` may immediately trigger `CHANGED` followed by `Frame.getRoot()`, and if the root Frame does not exist it degrades to rendering against the wrong element.
+`Framework.boot()` executes the following steps in order (order is correctness-sensitive): merge user config (including `routeMode`), inject config into Router (which determines history/hash mode), set EventDelegator's frame getter, subscribe to Router/State `changed` events, mark Framework/Router/State as booted, install the Frame Devtool Bridge, create the root Frame via `Frame.createRoot(config.rootId)`, call `Router._bind()` to bind route events (poptate for history mode, hashchange + popstate for hash mode) and trigger the first `diff()`, and finally mount `defaultView` if Router has not mounted a view. Step seven must precede step eight because the first `diff()` may immediately trigger `CHANGED` followed by `Frame.getRoot()`, and if the root Frame does not exist it degrades to rendering against the wrong element.
 
 ## Three Data Pipelines: Updater / State / Store
 
@@ -832,7 +832,7 @@ new ModuleFederationPlugin({
 
 `splitChunks.chunks` must be `"async"`. Using `"all"` extracts `@lark.js/mvc` into a separate vendor chunk, breaking MF shared scope initialization (`ScriptExternalLoadError: Loading script failed`).
 
-## Debugging and DevTools Bridge
+## Debugging and Devtool Bridge
 
 ### Global Objects
 
@@ -857,15 +857,15 @@ Set `window.__lark_Debug = true` before boot, and the framework wraps `State.get
 - Warns when reading data written by another page (potential cross-page pollution).
 - Warns immediately when assigning directly to objects returned by `State.get()` (deduplicated by key); the correct approach is `State.set(patch)` + `State.digest()`.
 
-### Frame Visualizer Bridge
+### Frame Devtool Bridge
 
-`installFrameVisualizerBridge()` is automatically installed during `Framework.boot`, listening for `window` message events and communicating with DevTools via postMessage:
+`installFrameDevtoolBridge()` is automatically installed during `Framework.boot`, listening for `window` message events and communicating with Devtool via postMessage:
 
-- `LARK_VIS_PING` — responds with `LARK_VIS_PONG` to confirm this page is a Lark application.
-- `LARK_VIS_REQUEST_TREE` — responds with `LARK_VIS_TREE` carrying `SerializedFrameTree`.
-- Internally listens to `Frame.on('add' | 'remove')` and automatically pushes `LARK_VIS_TREE_DELTA`; JSON.stringify is compared with `lastTreeJson` before pushing to avoid flooding when nothing changed.
+- `LARK_DEVTOOL_PING` — responds with `LARK_DEVTOOL_PONG` to confirm this page is a Lark application.
+- `LARK_DEVTOOL_REQUEST_TREE` — responds with `LARK_DEVTOOL_TREE` carrying `SerializedFrameTree`.
+- Internally listens to `Frame.on('add' | 'remove')` and automatically pushes `LARK_DEVTOOL_TREE_DELTA`; JSON.stringify is compared with `lastTreeJson` before pushing to avoid flooding when nothing changed.
 
-The `lark-visual` sub-project in this repository is the paired visual DevTools that loads the target application via iframe to display the real-time Frame tree.
+The `lark-devtool` sub-project in this repository is the paired Devtool that loads the target application via iframe to display the real-time Frame tree.
 
 ## Public API Reference
 
@@ -927,28 +927,6 @@ The `lark-visual` sub-project in this repository is the paired visual DevTools t
 19. MF view paths use the remote project name as prefix: `v-lark="remote-app/views/home"` triggers async loading via `FrameworkConfig.require` when unregistered; `@lark.js/mvc` must be `singleton: true`.
 20. `splitChunks.chunks` must be `"async"` in MF projects: `"all"` breaks shared scope initialization.
 
-## Recent API Changes
-
-- Store rewrite (zustand-style):
-  - `defineStore(name, (store) => body)` replaced by `create(name, (set, get) => body)`. `defineStore` retained as deprecated alias.
-  - `store.key = value` (Proxy write) replaced by `set({ key: value })`.
-  - `store.key` reads in actions replaced by `get().key`.
-  - `useStore(view)` + `store.observe(view, keys?)` replaced by `bindStore(view, store, selector?)`.
-  - `useStore()` (read-only access) replaced by `store.getState()`.
-  - `store.observe(undefined, keys, cb)` (internal reaction) replaced by `store.subscribe((state, prev) => ...)`.
-  - Removed: `multi()`, `cell()`, `observeCell()`, `cloneStore()`, `getStore()`, `delStore()`, `getUseStore()`, `isStoreActive()`, `createState()`, `shallowSet()`, `lazySet()`, `cloneData()`, `isState()`, `storeMark`, `storeUnmark`, `getPlatform`, `Platform`, `StoreConfig`, `ObservePayload`, `StoreMethods`, `LarkUseStore`, `ReactUseStore`, `NodeUseStore`.
-- Router history mode support:
-  - Added `FrameworkConfig.routeMode` (`"history"` default, `"hash"` optional).
-  - In history mode, path comes from `window.location.pathname`, params from search query string.
-  - Added `useUrlState(view, initialState?)` for URL parameter state sync.
-- `ChangeEvent.keys` changed to `ReadonlySet<string>` (was `Record<string, 1>`). Use `keys.has("foo")` instead of `keys.foo`.
-- `StateInterface.diff()` returns `ReadonlySet<string>`.
-- `Updater.set/digest`, `State.set/digest`, `setData` `excludes?` changed to `ReadonlySet<string>` (was `Set<string>`).
-- `Frame.root(id)` `@deprecated`. Read via `Frame.getRoot()`, create singleton via `Frame.createRoot(id)`, independent mount via `new Frame(id)`.
-- `Updater.parse` no longer evals; only supports safe paths and literals.
-- `mark.ts` no longer writes magic keys to host objects; uses module-level `WeakMap`, works on `Object.freeze`d objects.
-- `Cache.del` immediately removes from `entries` array and `lookup` Map (previously left tombstones until next eviction).
-
 ## Comparison with Vue 3 / React 19
 
 ### vs Vue 3

package/dist/chunk-RIV4NK3K.js

@@ -0,0 +1,108 @@
+// src/common.ts
+var globalCounter = 0;
+var SPLITTER = String.fromCharCode(30);
+var RouterEvents = {
+  CHANGE: "change",
+  CHANGED: "changed",
+  PAGE_UNLOAD: "page_unload"
+};
+var LARK_VIEW = "v-lark";
+var EVENT_METHOD_REGEXP = new RegExp(
+  `(?:([\\w-]+)${SPLITTER})?([^(]+)\\(([\\s\\S]*?)?\\)`
+);
+var VIEW_EVENT_METHOD_REGEXP = /^(\$?)([\w]*)<(.*?)>(?:<([\w ,]*)>)?$/;
+var URL_TRIM_HASH_REGEXP = /(?:^.*\/\/[^/]+|#.*$)/gi;
+var URL_TRIM_QUERY_REGEXP = /^[^#]*#?!?/;
+var URL_PARAM_REGEXP = /([^=&?/#]+)=?([^&#?]*)/g;
+var IS_URL_PARAMS = /(?!^)=|&/;
+var URL_QUERY_HASH_REGEXP = /[#?].*$/;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MATH_NS = "http://www.w3.org/1998/Math/MathML";
+var TAG_NAME_REGEXP = /<([a-z][^/\0>\x20\t\r\n\f]+)/i;
+var V_TEXT_NODE = 0;
+var VDOM_NS_MAP = {
+  svg: SVG_NS,
+  math: MATH_NS
+};
+function nextCounter() {
+  return ++globalCounter;
+}
+var HTML_ENT_MAP = {
+  "&": "amp",
+  "<": "lt",
+  ">": "gt",
+  '"': "#34",
+  "'": "#39",
+  "`": "#96"
+};
+var HTML_ENT_REGEXP = /[&<>"'`]/g;
+function strSafe(v) {
+  return String(v == null ? "" : v);
+}
+function encodeHTML(v) {
+  return String(v == null ? "" : v).replace(
+    HTML_ENT_REGEXP,
+    (m) => "&" + HTML_ENT_MAP[m] + ";"
+  );
+}
+var URI_ENT_MAP = {
+  "!": "%21",
+  "'": "%27",
+  "(": "%28",
+  ")": "%29",
+  "*": "%2A"
+};
+var URI_ENT_REGEXP = /[!')(*]/g;
+function encodeURIExtra(v) {
+  return encodeURIComponent(strSafe(v)).replace(
+    URI_ENT_REGEXP,
+    (m) => URI_ENT_MAP[m]
+  );
+}
+var QUOTE_ENT_REGEXP = /['"\\]/g;
+function encodeQuote(v) {
+  return strSafe(v).replace(QUOTE_ENT_REGEXP, "\\$&");
+}
+function refFn(ref, value, key) {
+  const counter = ref[SPLITTER];
+  for (let i = counter; --i; ) {
+    key = SPLITTER + i;
+    if (ref[key] === value) return key;
+  }
+  key = SPLITTER + ref[SPLITTER]++;
+  ref[key] = value;
+  return key;
+}
+function isRefToken(s) {
+  if (s.length < 2 || s[0] !== SPLITTER) return false;
+  for (let i = 1; i < s.length; i++) {
+    const c = s.charCodeAt(i);
+    if (c < "0".charCodeAt(0) || c > "9".charCodeAt(0)) return false;
+  }
+  return true;
+}
+
+export {
+  SPLITTER,
+  RouterEvents,
+  LARK_VIEW,
+  EVENT_METHOD_REGEXP,
+  VIEW_EVENT_METHOD_REGEXP,
+  URL_TRIM_HASH_REGEXP,
+  URL_TRIM_QUERY_REGEXP,
+  URL_PARAM_REGEXP,
+  IS_URL_PARAMS,
+  URL_QUERY_HASH_REGEXP,
+  SVG_NS,
+  MATH_NS,
+  TAG_NAME_REGEXP,
+  V_TEXT_NODE,
+  VDOM_NS_MAP,
+  nextCounter,
+  strSafe,
+  encodeHTML,
+  encodeURIExtra,
+  encodeQuote,
+  refFn,
+  isRefToken
+};