actview 1.0.3 → 1.0.4

package/README.md

@@ -1,118 +1,338 @@
-# ActView (MVVM Study Edition)
+# Actview
 
-[简体中文](./README.zh.md) | English
+A lightweight frontend framework with **Vue-like reactivity** and **React-like JSX**, built from scratch with Proxy and a custom JSX factory.
 
-**ActView** is a lightweight MVVM library born for **Campaign / Marketing Single Page Applications**.
+## Installation
 
-> Target Scenarios: Single-page applications with complex state and logic, requiring strong collaboration between roles.
+```bash
+npm install
+npm run dev
+```
 
-## Why ActView?
+Build:
+
+```bash
+npm run build
+```
 
-In Campaign/H5 development, there is often a clear division of labor:
-- **Teammate A**: Focuses solely on HTML / CSS (The Slicer)
-- **Teammate B**: Focuses solely on Data, Logic, and Reactivity (The Logician)
+## Reactivity System
 
-**ActView**'s core capability is to "wire" these two together:
-**Selector + Configuration → Automatic Data Binding**
+### ref — Primitive Values
 
-Goal: **Low Mental Burden, Fast, Stable, Easy Handoff**.
+```tsx
+import { ref, computed, watch } from "@actview/core"
 
-## Core Features
+const count = ref(0)
 
-- **Configuration-Driven Binding**: Non-intrusive to HTML, just provide `selector` + configuration options.
-- **Automatic Reactivity**: `ref` / `reactive` data changes automatically update the view.
-- **Two-Way Binding Loop**: Quickly write back data via `listeners`.
-- **Computed / Watch**: `computed` / `watch` for handling complex logic.
-- **JSX / Functional Rendering**: Support returning JSX directly in configuration (`render` function) for complex lists/components.
-- **Quick Event Mounting**: Define event callbacks directly in the configuration.
+// Read: count.value
+// Write: count.value = 1
+console.log(count.value) // 0
+count.value++
+console.log(count.value) // 1
+```
 
-## Quick Start
+### reactive — Objects & Arrays
 
-```bash
-npm i
-npm run dev
+```tsx
+const user = reactive({ name: "Actview", age: 3 })
+const list = reactive([{ id: 1, text: "Item A" }])
+
+console.log(user.name) // "Actview"
+user.age = 4           // triggers update
+
+list.push({ id: 2, text: "Item B" }) // triggers update
 ```
 
-Build output to `out/`:
+### computed — Derived Values
 
-```bash
-npm run build
+```tsx
+const name = ref("Actview")
+const version = ref(1)
+
+const info = computed(() => `${name.value} v${version.value}`)
+
+console.log(info.value) // "Actview v1"
 ```
 
-## Core Usage
+### watch — Side Effects
 
-### 1) Data Definition (Ref / Reactive)
+```tsx
+const count = ref(0)
 
-```ts
-import { ref, reactive } from "./core";
+watch(count, (newVal, oldVal) => {
+  console.log(`count: ${oldVal} → ${newVal}`)
+})
+
+count.value = 1 // logs "count: 0 → 1"
+```
+
+### How It Works
 
-// Primitive type
-const count = ref(0);
+Actview uses **Proxy** to intercept get/set on reactive data. When a ref is read inside a component's render function, the component automatically subscribes to that ref. When the ref changes, only the components that read it are re-rendered.
 
-// Object / Array
-const student = reactive({ name: "John Doe", age: 20 });
-const list = reactive([{ id: 1, name: "A" }]);
+```tsx
+const count = ref(0)
+
+function Counter() {
+  return () => <div>{count.value}</div>  // subscribes to `count`
+}
 ```
 
-### 2) View Binding (Compile + Option)
+## Components
 
-View binding is done via `compile(option)`. Teammate A writes HTML (id="count"), Teammate B writes configuration:
+### Setup Mode (Recommended)
 
-```ts
-import { compile } from "./core/compile";
+The component function runs once (setup), returns a render function that re-runs on each update:
+
+```tsx
+function Counter() {
+  const count = ref(0)
+
+  return () => (
+    <div>
+      <p>Count: {count.value}</p>
+      <button onClick={() => count.value++}>+1</button>
+    </div>
+  )
+}
+```
+
+- **Setup** runs once: create refs, computed, watch
+- **Render** runs on each update: returns JSX, auto-tracks reactive dependencies
+
+### Direct Mode (Stateless)
+
+The component function IS the render function — re-runs on every parent render:
+
+```tsx
+function Greeting(props: { name: string }) {
+  return <div>Hello, {props.name}!</div>
+}
+```
+
+No internal state, no isolated reactive boundary. Pure props-in / JSX-out.
+
+### Props
+
+```tsx
+function Welcome(props: { title: string; count: number }) {
+  return () => (
+    <div>
+      <h2>{props.title}</h2>
+      <p>Count: {props.count}</p>
+    </div>
+  )
+}
+
+// Usage
+<Welcome title="Hello" count={count.value} />
+```
+
+## JSX & DOM Rendering
+
+Actview uses a **custom JSX factory** (`createElement`) that creates real DOM nodes directly — no virtual DOM.
+
+```tsx
+// JSX → createElement → real DOM
+const element = <div class="card">
+  <h3>Title</h3>
+  <p>Content</p>
+</div>
+```
+
+### Reactive Updates (Component-Level)
+
+```tsx
+function Timer() {
+  const time = ref(new Date().toLocaleTimeString())
+
+  setInterval(() => {
+    time.value = new Date().toLocaleTimeString()
+  }, 1000)
+
+  return () => <div>Current time: {time.value}</div>
+}
+```
+
+- `time.value` changes → triggers `publish`
+- Only this component's `componentUpdateFn` re-runs
+- Compares old and new DOM nodes, patches only the changed parts
+
+### Fragment
+
+```tsx
+function List() {
+  return () => (
+    <>
+      <h2>Items</h2>
+      {items.map(item => <div key={item.id}>{item.text}</div>)}
+    </>
+  )
+}
+```
+
+Fragment wraps children in a `DocumentFragment` with start/end comment anchors for stable diffing.
+
+### Keyed Reconciliation
 
-compile({
-  selector: "#count",
-  // Text binding: automatically responds to count.value changes
-  text: () => `Current Count: ${count.value}`,
-  // Visibility binding
-  show: () => count.value > 0,
-  // Event binding
-  listeners: [
-    { type: "click", callback: () => count.value++ }
-  ]
-});
+Child nodes with a `key` prop are matched by identity, preserving DOM state (e.g., input focus):
+
+```tsx
+function SortableList() {
+  const items = reactive([
+    { id: 1, text: "A" },
+    { id: 2, text: "B" },
+  ])
+
+  return () => (
+    <>
+      {items.map(item => (
+        <div key={item.id}>
+          <input placeholder={item.text} />
+        </div>
+      ))}
+      <button onClick={() => items.sort(() => Math.random() - 0.5)}>
+        Shuffle
+      </button>
+    </>
+  )
+}
 ```
 
-### 3) Complex Rendering (Render + JSX)
+Without keys, shuffling would misplace input values. With keys, each input stays with its matching `div`.
 
-For lists or complex structures, use JSX directly:
+## Slots
+
+Named slots use `<template slot="xxx">` syntax. The template's content is extracted and passed as `props.xxx` to the component. Content not wrapped in `<template slot>` becomes `props.children` (default slot).
+
+### Defining a Component with Slots
 
 ```tsx
-compile({
-  selector: "#list",
-  render: () => (
-    <ul>
-      {list.map(item => <li>{item.name}</li>)}
-    </ul>
+function Card() {
+  return (props: any) => (
+    <div class="card">
+      {props.header && <div class="card-header">{props.header}</div>}
+      <div class="card-body">{props.children}</div>
+      {props.footer && <div class="card-footer">{props.footer}</div>}
+    </div>
   )
-});
+}
+```
+
+### Using Slots
+
+```tsx
+<Card>
+  <template slot="header">
+    <span>📌</span>
+    <strong>Title</strong>
+  </template>
+
+  <p>Main body content — becomes props.children.</p>
+
+  <template slot="footer">
+    <span>Footer info</span>
+  </template>
+</Card>
 ```
 
-### 4) Logic Reuse (Computed / Watch)
+How it works inside `createElement`:
+
+1. Children passed to the component are iterated
+2. Elements matching `child instanceof HTMLTemplateElement && child.getAttribute("slot")` have their content extracted into the named prop
+3. Other children are collected into `props.children`
 
 ```ts
-import { computed, watch } from "./core";
+// Pseudocode of the slot resolution
+for (const child of allChildren) {
+  if (child instanceof HTMLTemplateElement && child.getAttribute("slot")) {
+    const slotName = child.getAttribute("slot")!
+    mergedProps[slotName] = Array.from(child.content.childNodes)
+  } else {
+    defaultChildren.push(child)
+  }
+}
+mergedProps.children = defaultChildren
+```
+
+## Router
+
+Actview includes a client-side router with nested route support.
+
+### Setup
+
+```tsx
+import { Router } from "@actview/router"
+import { Home } from "./pages/home"
+import { About } from "./pages/about"
+
+const routes = [
+  { path: "/", component: Home },
+  { path: "/about", component: About },
+  { path: "/admin", component: AdminLayout, children: [
+    { path: "/admin/users", component: Users },
+    { path: "/admin/settings", component: Settings },
+  ]},
+]
+
+new Router({ routes })
+```
+
+### Navigation
+
+```tsx
+import { useRouter } from "@actview/router"
+
+function NavBar() {
+  const router = useRouter()
 
-// Computed Property
-const info = computed(() => `${student.name} (${student.age} years old)`);
+  return () => (
+    <nav>
+      <a onClick={() => router.push("/")}>Home</a>
+      <a onClick={() => router.push("/about")}>About</a>
+    </nav>
+  )
+}
+```
+
+### RouterView
+
+```tsx
+import { RouterView } from "@actview/router"
+
+function App() {
+  return () => (
+    <div>
+      <NavBar />
+      <RouterView />  {/* renders matched route component */}
+    </div>
+  )
+}
+```
+
+For nested routes, place `<RouterView />` inside the parent layout component — it automatically renders the child route at the current depth.
+
+## Architecture
 
-// Watcher
-watch(() => student.age, (newVal, oldVal) => {
-  console.log("Age changed:", oldVal, "->", newVal);
-});
 ```
+packages/
+  core/         Reactivity (ref, reactive, computed, watch) + EventBus
+  jsx/          Custom JSX factory (createElement, mountComponent, diffElement)
+  router/       Client-side router with nested route support
+  actview/      Package re-exports
+```
+
+### Diff Algorithm
+
+`diffElement` compares two real DOM nodes directly (no virtual DOM):
 
-## Directory Structure & Principle
+1. **Type mismatch** → replace
+2. **Text node** → update `textContent`
+3. **Component boundary** → skip (component manages its own subtree)
+4. **Same element** → sync attributes → reconcile children (keyed or index-based)
 
-- `src/core`: Core implementation
-  - `ref.ts` / `reactive.ts`: Reactivity system based on Proxy
-  - `compile.ts`: View binder based on jQuery selectors
-  - `computed.ts` / `watch.ts`: Dependency collection and side effect handling
-  - `jsx/`: Custom JSX runtime (No Virtual DOM, returns real DOM directly)
-- `src/types`: Type definitions
+Component boundary isolation means a re-rendering parent does not diff into child components. Each component has its own `componentUpdateFn` that runs independently when its reactive dependencies change.
 
-## Known Limitations
+## License
 
-- `render` strategy is "clear and re-insert", no Diff algorithm, suitable for display-heavy Campaign UIs.
-- Intended for learning and small-scale campaign pages only.
+MIT

package/README.zh.md

@@ -1,119 +1,339 @@
-# ActView (MVVM 学习版)
+# Actview
 
-[English](./README.md) | 简体中文
+轻量级前端框架，融合 **Vue 风格的响应式系统** 与 **React 风格的 JSX**，基于 Proxy 和自定义 JSX 工厂从零实现。
 
-**ActView** 是为**活动/营销单页**而生的轻量级 MVVM 库。
+## 安装
 
-> 目标场景：单页应用、状态复杂、逻辑复杂，且有强分工协作需求。
+```bash
+npm install
+npm run dev
+```
 
-## 为什么叫 ActView？
+构建：
+
+```bash
+npm run build
+```
 
-在活动页（Campaign/H5）开发中，常有明确分工：
-- **A 同学**：只写 HTML / CSS（切图仔）
-- **B 同学**：只管数据、逻辑、响应式（逻辑仔）
+## 响应式系统
 
-**ActView** 的核心能力就是把这两者“接”起来：
-**选择器 + 配置 → 自动绑定数据**
+### ref — 基础类型
 
-目标：**低心智负担、快、稳、好交接**。
+```tsx
+import { ref, computed, watch } from "@actview/core"
 
-## 核心特性
+const count = ref(0)
 
-- **配置驱动绑定**：不侵入 HTML，只需提供 `selector` + 配置项。
-- **自动响应式**：`ref` / `reactive` 数据变更自动更新视图。
-- **双向绑定闭环**：通过 `listeners` 快速回写数据。
-- **计算属性/侦听器**：`computed` / `watch` 处理复杂逻辑。
-- **JSX / 函数渲染**：支持在配置中直接返回 JSX（`render` 函数），处理复杂列表/组件。
-- **事件快速挂载**：配置里直接写事件回调。
+// 读取: count.value
+// 写入: count.value = 1
+console.log(count.value) // 0
+count.value++
+console.log(count.value) // 1
+```
 
-## 快速开始
+### reactive — 对象与数组
 
-```bash
-npm i
-npm run dev
+```tsx
+const user = reactive({ name: "Actview", age: 3 })
+const list = reactive([{ id: 1, text: "条目 A" }])
+
+console.log(user.name) // "Actview"
+user.age = 4           // 触发更新
+
+list.push({ id: 2, text: "条目 B" }) // 触发更新
 ```
 
-构建产物输出到 `out/`：
+### computed — 计算属性
 
-```bash
-npm run build
+```tsx
+const name = ref("Actview")
+const version = ref(1)
+
+const info = computed(() => `${name.value} v${version.value}`)
+
+console.log(info.value) // "Actview v1"
 ```
 
-## 核心用法
+### watch — 侦听器
 
-### 1) 数据定义 (Ref / Reactive)
+```tsx
+const count = ref(0)
 
-```ts
-import { ref, reactive } from "./core";
+watch(count, (newVal, oldVal) => {
+  console.log(`count: ${oldVal} → ${newVal}`)
+})
+
+count.value = 1 // 输出 "count: 0 → 1"
+```
+
+### 原理
 
-// 基础类型
-const count = ref(0);
+Actview 使用 **Proxy** 拦截响应式数据的读写。组件渲染函数中读取的 ref 会自动建立订阅关系。数据变更时，仅依赖该数据的组件重新渲染。
 
-// 对象/数组
-const student = reactive({ name: "张三", age: 20 });
-const list = reactive([{ id: 1, name: "A" }]);
+```tsx
+const count = ref(0)
+
+function Counter() {
+  return () => <div>{count.value}</div>  // 订阅 count
+}
 ```
 
-### 2) 视图绑定 (Compile + Option)
+## 组件
 
-视图绑定通过 `compile(option)` 完成。A 同学写好 HTML (id="count")，B 同学写配置：
+### Setup 模式（推荐）
 
-```ts
-import { compile } from "./core/compile";
+组件函数执行一次（setup），返回渲染函数（render），每次更新时重新执行渲染函数：
+
+```tsx
+function Counter() {
+  const count = ref(0)
+
+  return () => (
+    <div>
+      <p>Count: {count.value}</p>
+      <button onClick={() => count.value++}>+1</button>
+    </div>
+  )
+}
+```
+
+- **Setup 阶段**：创建 ref、computed、watch 等，只执行一次
+- **Render 阶段**：返回 JSX，自动追踪响应式依赖，每次更新重新执行
+
+### 直接模式（无状态）
+
+组件函数本身就是渲染函数，父组件每次渲染都会重新执行：
+
+```tsx
+function Greeting(props: { name: string }) {
+  return <div>你好，{props.name}！</div>
+}
+```
+
+无内部状态，无独立响应式边界，纯 props 输入 / JSX 输出。
+
+### Props
+
+```tsx
+function Welcome(props: { title: string; count: number }) {
+  return () => (
+    <div>
+      <h2>{props.title}</h2>
+      <p>Count: {props.count}</p>
+    </div>
+  )
+}
+
+// 使用
+<Welcome title="Hello" count={count.value} />
+```
+
+## JSX & DOM 渲染
+
+Actview 使用 **自定义 JSX 工厂**（`createElement`）直接创建真实 DOM，无虚拟 DOM：
+
+```tsx
+// JSX → createElement → 真实 DOM
+const element = <div class="card">
+  <h3>标题</h3>
+  <p>内容</p>
+</div>
+```
+
+### 响应式更新（组件级）
+
+```tsx
+function Timer() {
+  const time = ref(new Date().toLocaleTimeString())
+
+  setInterval(() => {
+    time.value = new Date().toLocaleTimeString()
+  }, 1000)
+
+  return () => <div>当前时间: {time.value}</div>
+}
+```
+
+- `time.value` 变化 → 触发 `publish`
+- 仅该组件的 `componentUpdateFn` 重新执行
+- 对比新旧 DOM，仅更新变化的节点
+
+### Fragment
+
+```tsx
+function List() {
+  return () => (
+    <>
+      <h2>列表</h2>
+      {items.map(item => <div key={item.id}>{item.text}</div>)}
+    </>
+  )
+}
+```
+
+Fragment 用 `DocumentFragment` 包含子节点，配合首尾锚点注释节点实现稳定 diff。
+
+### Keyed Reconciliation
 
-compile({
-  selector: "#count",
-  // 绑定文本：自动响应 count.value 变化
-  text: () => `当前计数: ${count.value}`,
-  // 绑定显隐
-  show: () => count.value > 0,
-  // 绑定事件
-  listeners: [
-    { type: "click", callback: () => count.value++ }
-  ]
-});
+子节点带有 `key` 属性时按标识符匹配，保留 DOM 状态（如输入框内容）：
+
+```tsx
+function SortableList() {
+  const items = reactive([
+    { id: 1, text: "A" },
+    { id: 2, text: "B" },
+  ])
+
+  return () => (
+    <>
+      {items.map(item => (
+        <div key={item.id}>
+          <input placeholder={item.text} />
+        </div>
+      ))}
+      <button onClick={() => items.sort(() => Math.random() - 0.5)}>
+        随机排序
+      </button>
+    </>
+  )
+}
 ```
 
-### 3) 复杂渲染 (Render + JSX)
+无 key 时随机排序会导致输入框内容错位，有 key 时每个输入框跟随其 `div`。
 
-对于列表或复杂结构，直接用 JSX：
+## 插槽
+
+命名插槽使用 `<template slot="xxx">` 语法。模板内的内容会被提取为 `props.xxx` 传入组件。未包裹在 `<template slot>` 中的内容归入 `props.children`（默认插槽）。
+
+### 定义带插槽的组件
 
 ```tsx
-compile({
-  selector: "#list",
-  render: () => (
-    <ul>
-      {list.map(item => <li>{item.name}</li>)}
-    </ul>
+function Card() {
+  return (props: any) => (
+    <div class="card">
+      {props.header && <div class="card-header">{props.header}</div>}
+      <div class="card-body">{props.children}</div>
+      {props.footer && <div class="card-footer">{props.footer}</div>}
+    </div>
   )
-});
+}
+```
+
+### 使用插槽
+
+```tsx
+<Card>
+  <template slot="header">
+    <span>📌</span>
+    <strong>标题</strong>
+  </template>
+
+  <p>主体内容 — 会成为 props.children。</p>
+
+  <template slot="footer">
+    <span>底部信息</span>
+  </template>
+</Card>
 ```
 
-### 4) 逻辑复用 (Computed / Watch)
+### 原理
+
+在 `createElement` 中，传递给组件的子节点会被遍历：
+
+1. 命中的 `<template slot="xxx">` 提取其 `content.childNodes` 作为命名 prop
+2. 其余节点归入 `props.children`
 
 ```ts
-import { computed, watch } from "./core";
+// 插槽解析伪代码
+for (const child of allChildren) {
+  if (child instanceof HTMLTemplateElement && child.getAttribute("slot")) {
+    const slotName = child.getAttribute("slot")!
+    mergedProps[slotName] = Array.from(child.content.childNodes)
+  } else {
+    defaultChildren.push(child)
+  }
+}
+mergedProps.children = defaultChildren
+```
+
+## 路由
+
+Actview 内置客户端路由，支持嵌套。
+
+### 配置
+
+```tsx
+import { Router } from "@actview/router"
+import { Home } from "./pages/home"
+import { About } from "./pages/about"
+
+const routes = [
+  { path: "/", component: Home },
+  { path: "/about", component: About },
+  { path: "/admin", component: AdminLayout, children: [
+    { path: "/admin/users", component: Users },
+    { path: "/admin/settings", component: Settings },
+  ]},
+]
+
+new Router({ routes })
+```
+
+### 导航
+
+```tsx
+import { useRouter } from "@actview/router"
 
-// 计算属性
-const info = computed(() => `${student.name} (${student.age}岁)`);
+function NavBar() {
+  const router = useRouter()
 
-// 侦听器
-watch(() => student.age, (newVal, oldVal) => {
-  console.log("年龄变了:", oldVal, "->", newVal);
-});
+  return () => (
+    <nav>
+      <a onClick={() => router.push("/")}>首页</a>
+      <a onClick={() => router.push("/about")}>关于</a>
+    </nav>
+  )
+}
+```
+
+### RouterView
+
+```tsx
+import { RouterView } from "@actview/router"
+
+function App() {
+  return () => (
+    <div>
+      <NavBar />
+      <RouterView />  {/* 渲染匹配当前路由的组件 */}
+    </div>
+  )
+}
 ```
 
-## 目录结构与原理
+嵌套路由时，在父布局组件中放置 `<RouterView />`，自动渲染当前深度的子路由。
+
+## 架构
+
+```
+packages/
+  core/         响应式系统 (ref, reactive, computed, watch) + EventBus
+  jsx/          自定义 JSX 工厂 (createElement, mountComponent, diffElement)
+  router/       客户端路由，支持嵌套
+  actview/      统一导出
+```
+
+### Diff 算法
+
+`diffElement` 直接比较两个真实 DOM 节点（无虚拟 DOM）：
 
-- `src/core`：核心实现
-  - `ref.ts` / `reactive.ts`：基于 Proxy 的响应式系统
-  - `compile.ts`：基于 jQuery 选择器的视图绑定器
-  - `computed.ts` / `watch.ts`：依赖收集与副作用处理
-  - `jsx/`：自定义 JSX 运行时（无虚拟 DOM，直接返回真实 DOM）
-- `src/types`：类型定义
+1. **类型不同** → 替换
+2. **文本节点** → 更新 `textContent`
+3. **组件边界** → 跳过（组件自己管理子树）
+4. **相同元素** → 同步属性 → 协调子节点（key 匹配或索引匹配）
 
-## 已知限制
+组件边界隔离意味着父组件重新渲染时不会深入到子组件内部。每个组件拥有独立的 `componentUpdateFn`，仅在自身依赖的响应式数据变化时执行。
 
-- `render` 策略是“清空并重新插入”，无 Diff 算法，适合活动页展示型 UI。
-- 仅供学习与小型活动页使用。
+## License
 
+MIT

package/index.cjs

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const core = require("@actview/core");
+const router = require("@actview/router");
 Object.keys(core).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,
     get: () => core[k]
   });
 });
+Object.keys(router).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => router[k]
+  });
+});
 //# sourceMappingURL=index.cjs.map

package/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -1,2 +1,3 @@
 export * from '@actview/core';
+export * from '@actview/router';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA"}

package/index.mjs

@@ -1,2 +1,3 @@
 export * from "@actview/core";
+export * from "@actview/router";
 //# sourceMappingURL=index.mjs.map

package/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "actview",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Configuration-driven MVVM born for Campaign/Marketing single pages: selector + config for automatic data binding, supporting reactive/ref, computed, watch/watchEffect, JSX rendering, and quick event mounting.",
   "type": "module",
   "main": "./index.cjs",
@@ -36,8 +36,9 @@
     "url": ""
   },
   "dependencies": {
-    "@actview/core": "^1.0.3",
-    "@actview/jsx": "^1.0.3"
+    "@actview/core": "^1.0.4",
+    "@actview/jsx": "^1.0.4",
+    "@actview/router": "^1.0.4"
   },
   "publishConfig": {
     "access": "public"