actview 1.0.4 → 1.0.7

package/index.d.ts

@@ -1,3 +1 @@
-export * from '@actview/core';
-export * from '@actview/router';
-//# sourceMappingURL=index.d.ts.map
+export { App, createApp, defineComponent, markRaw, reactive, readonly, shallowReactive } from '@actview/core';

package/index.js

@@ -0,0 +1,17 @@
+// src/index.ts
+import {
+  createApp,
+  defineComponent,
+  reactive,
+  shallowReactive,
+  readonly,
+  markRaw
+} from "@actview/core";
+export {
+  createApp,
+  defineComponent,
+  markRaw,
+  reactive,
+  readonly,
+  shallowReactive
+};

package/package.json

@@ -1,46 +1,22 @@
 {
   "name": "actview",
-  "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.",
+  "version": "1.0.7",
   "type": "module",
-  "main": "./index.cjs",
-  "module": "./index.mjs",
-  "types": "./index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./index.d.ts",
-        "default": "./index.mjs"
-      },
-      "require": {
-        "types": "./index.d.ts",
-        "default": "./index.cjs"
-      }
+      "types": "./index.d.ts",
+      "import": "./index.js"
     }
   },
-  "keywords": [
-    "actview",
-    "reactive",
-    "ref",
-    "computed",
-    "watch"
-  ],
-  "author": "scliuyilin",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": ""
-  },
-  "homepage": "",
-  "bugs": {
-    "url": ""
-  },
   "dependencies": {
-    "@actview/core": "^1.0.4",
-    "@actview/jsx": "^1.0.4",
-    "@actview/router": "^1.0.4"
+    "@actview/core": "^1.0.7",
+    "@actview/jsx": "^1.0.9"
+  },
+  "scripts": {
+    "build": "tsup && node ../../scripts/rewrite-package.mjs .",
+    "release": "pnpm build && cd dist && npm publish"
   },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}

package/README.md

@@ -1,338 +0,0 @@
-# Actview
-
-A lightweight frontend framework with **Vue-like reactivity** and **React-like JSX**, built from scratch with Proxy and a custom JSX factory.
-
-## Installation
-
-```bash
-npm install
-npm run dev
-```
-
-Build:
-
-```bash
-npm run build
-```
-
-## Reactivity System
-
-### ref — Primitive Values
-
-```tsx
-import { ref, computed, watch } from "@actview/core"
-
-const count = ref(0)
-
-// Read: count.value
-// Write: count.value = 1
-console.log(count.value) // 0
-count.value++
-console.log(count.value) // 1
-```
-
-### reactive — Objects & Arrays
-
-```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
-```
-
-### computed — Derived Values
-
-```tsx
-const name = ref("Actview")
-const version = ref(1)
-
-const info = computed(() => `${name.value} v${version.value}`)
-
-console.log(info.value) // "Actview v1"
-```
-
-### watch — Side Effects
-
-```tsx
-const count = ref(0)
-
-watch(count, (newVal, oldVal) => {
-  console.log(`count: ${oldVal} → ${newVal}`)
-})
-
-count.value = 1 // logs "count: 0 → 1"
-```
-
-### How It Works
-
-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.
-
-```tsx
-const count = ref(0)
-
-function Counter() {
-  return () => <div>{count.value}</div>  // subscribes to `count`
-}
-```
-
-## Components
-
-### Setup Mode (Recommended)
-
-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
-
-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>
-    </>
-  )
-}
-```
-
-Without keys, shuffling would misplace input values. With keys, each input stays with its matching `div`.
-
-## 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
-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>
-```
-
-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
-// 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()
-
-  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
-
-```
-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):
-
-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)
-
-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.
-
-## License
-
-MIT

package/README.zh.md

@@ -1,339 +0,0 @@
-# Actview
-
-轻量级前端框架，融合 **Vue 风格的响应式系统** 与 **React 风格的 JSX**，基于 Proxy 和自定义 JSX 工厂从零实现。
-
-## 安装
-
-```bash
-npm install
-npm run dev
-```
-
-构建：
-
-```bash
-npm run build
-```
-
-## 响应式系统
-
-### ref — 基础类型
-
-```tsx
-import { ref, computed, watch } from "@actview/core"
-
-const count = ref(0)
-
-// 读取: count.value
-// 写入: count.value = 1
-console.log(count.value) // 0
-count.value++
-console.log(count.value) // 1
-```
-
-### reactive — 对象与数组
-
-```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" }) // 触发更新
-```
-
-### computed — 计算属性
-
-```tsx
-const name = ref("Actview")
-const version = ref(1)
-
-const info = computed(() => `${name.value} v${version.value}`)
-
-console.log(info.value) // "Actview v1"
-```
-
-### watch — 侦听器
-
-```tsx
-const count = ref(0)
-
-watch(count, (newVal, oldVal) => {
-  console.log(`count: ${oldVal} → ${newVal}`)
-})
-
-count.value = 1 // 输出 "count: 0 → 1"
-```
-
-### 原理
-
-Actview 使用 **Proxy** 拦截响应式数据的读写。组件渲染函数中读取的 ref 会自动建立订阅关系。数据变更时，仅依赖该数据的组件重新渲染。
-
-```tsx
-const count = ref(0)
-
-function Counter() {
-  return () => <div>{count.value}</div>  // 订阅 count
-}
-```
-
-## 组件
-
-### Setup 模式（推荐）
-
-组件函数执行一次（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
-
-子节点带有 `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>
-    </>
-  )
-}
-```
-
-无 key 时随机排序会导致输入框内容错位，有 key 时每个输入框跟随其 `div`。
-
-## 插槽
-
-命名插槽使用 `<template slot="xxx">` 语法。模板内的内容会被提取为 `props.xxx` 传入组件。未包裹在 `<template slot>` 中的内容归入 `props.children`（默认插槽）。
-
-### 定义带插槽的组件
-
-```tsx
-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>
-```
-
-### 原理
-
-在 `createElement` 中，传递给组件的子节点会被遍历：
-
-1. 命中的 `<template slot="xxx">` 提取其 `content.childNodes` 作为命名 prop
-2. 其余节点归入 `props.children`
-
-```ts
-// 插槽解析伪代码
-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"
-
-function NavBar() {
-  const router = useRouter()
-
-  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）：
-
-1. **类型不同** → 替换
-2. **文本节点** → 更新 `textContent`
-3. **组件边界** → 跳过（组件自己管理子树）
-4. **相同元素** → 同步属性 → 协调子节点（key 匹配或索引匹配）
-
-组件边界隔离意味着父组件重新渲染时不会深入到子组件内部。每个组件拥有独立的 `componentUpdateFn`，仅在自身依赖的响应式数据变化时执行。
-
-## License
-
-MIT

package/index.cjs

@@ -1,17 +0,0 @@
-"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 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/index.d.ts.map

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

package/index.mjs

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

package/index.mjs.map

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