actview 1.1.1 → 3.0.0

package/README.md

@@ -1,63 +1,91 @@
-# actview
-
-**ActView 框架统一入口（聚合包）** —— 从 `actview` 一个包拿到全部核心 API。
-
-`actview` 是面向使用者的聚合包：re-export `@actview/core` 的全部公开 API 与类型，`import { createApp, reactive } from 'actview'` 即可开始开发，无需分别安装/引用 `@actview/core`。
-
-## 核心功能
-
-- 统一 re-export `@actview/core` 的运行时 API（响应式、组件、生命周期、内置组件、SSR）
-- 统一导出类型（`App` / `SetupContext` / `ComponentOptions`）
-
-> 不含 `@actview/router`（路由是独立包，按需安装，对齐 Vue 生态中 vue-router 的模型）。
-
-## 安装
-
-```bash
-pnpm add actview
-```
-
-## 快速开始
-
-```tsx
-import { createApp, reactive, defineComponent, onMounted } from 'actview'
-
-const App = defineComponent({
-  setup() {
-    const state = reactive({ count: 0 })
-    onMounted(() => console.log('mounted'))
-    return () => <div onClick={() => state.count++}>{state.count}</div>
-  },
-})
-
-createApp(<App />).mount('#app')
-```
-
-## API（re-export 自 @actview/core）
-
-| 分组 | 导出 |
-|---|---|
-| 应用 | `createApp` |
-| 组件 | `defineComponent` |
-| 响应式 | `reactive` / `shallowReactive` / `readonly` / `markRaw` / `ref` / `isRef` / `unref` / `toRef` / `toRefs` / `computed` / `watch` / `watchEffect` / `nextTick` |
-| 生命周期 | `onMounted` / `onUpdated` / `onBeforeUnmount` / `onUnmounted` |
-| 依赖注入 | `provide` / `useInjects` |
-| 内置组件 | `Teleport` / `Transition` / `KeepAlive` / `ErrorBoundary` / `Suspense` / `lazy` |
-| SSR / 其他 | `renderToString` / `getCurrentScope` |
-| 类型 | `App` / `SetupContext` / `ComponentOptions` |
-
-## 依赖关系
-
-- `@actview/core`（全部 API 来源）
-- `@actview/jsx`（类型契约；实际使用时还需在 `tsconfig` 配 `jsxImportSource: "@actview/jsx"`）
-
-## 开发
-
-```bash
-pnpm build   # tsup 打包 dist（薄壳，仅 re-export）
-pnpm test    # 走根目录 vitest
-```
-
-## License
-
-MIT
+# actview
+
+**ActView v2 — Vue 引擎 + React 语义 JSX**
+
+运行时基于 `vue` 官方包（零自研）：响应式 / 调度 / patch / diff / 内置组件 / SSR 全部复用。JSX 语法层面对齐 React：`className` / `htmlFor` / `onChange` 语义、`{}` 表达式、受控组件、`props.children` 直读。
+
+## 核心功能
+
+- **vue 运行时 re-export**：响应式（`ref` / `reactive` / `computed` / `watch` / `effectScope`）、组件（`defineComponent` / `createApp` / `h`）、生命周期、内置组件（`KeepAlive` / `Teleport` / `Suspense` / `Transition` / `TransitionGroup`）
+- **defineComponent 桥接**（React 语义）：`ctx.slots` → `props.children`（读时求值），props 读不到时从 attrs 兜底，`inheritAttrs: false`
+- **createContext**：React 语义（`.Provider` / `.use()`），基于 vue `provide/inject`
+- **JSX 类型层**：全局 `IntrinsicElements` 完整标签表（React 语义属性）+ vue 组件兼容；组件 props 严格检查（未声明 prop 报错）
+
+## 安装
+
+```bash
+pnpm add actview vue
+pnpm add -D @actview/plugin-vite
+```
+
+`vite.config.ts`：
+
+```ts
+import { defineConfig } from 'vite'
+import { actviewJsxPlugin } from '@actview/plugin-vite'
+
+export default defineConfig({
+  plugins: [actviewJsxPlugin()],
+})
+```
+
+`tsconfig.json`：
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "actview"
+  }
+}
+```
+
+## 快速开始
+
+```tsx
+import { createApp, ref } from 'actview'
+
+// 函数组件：编译期自动包 defineComponent（React 函数组件语义）
+function App() {
+  const count = ref(0)
+  return () => (
+    <button className="c" onClick={() => count.value++}>
+      {count.value}
+    </button>
+  )
+}
+
+createApp(App).mount('#app')
+```
+
+JSX 由 `@actview/plugin-jsx` 编译（Babel 直出 `createVNode`）：
+- `className` → `class`、`htmlFor` → `for`、`onChange` → `onInput`（text-like input/textarea）
+- `dangerouslySetInnerHTML={{ __html }}` → `innerHTML`
+- `v-model` / `v-show` 等 Vue 指令属性可直接使用
+- `props.children` 桥接：组件内直接读 `props.children`（React 语义）
+
+## 生态复用（不重复造轮子）
+
+| 需求 | 方案 |
+|---|---|
+| 路由 | `vue-router` |
+| 状态管理 | `pinia` |
+| 测试 | `@testing-library/vue` |
+| devtools | vue devtools（浏览器插件） |
+| hooks | vue 原语（`ref` / `computed` / `watch` 内联组合） |
+
+## API（re-export 自 vue）
+
+| 分组 | 导出 |
+|---|---|
+| 应用 | `createApp` |
+| 组件 | `defineComponent`（桥接版）/ `h` / `createVNode` / `mergeProps` / `defineAsyncComponent` |
+| 响应式 | `ref` / `reactive` / `computed` / `watch` / `watchEffect` / `customRef` / `proxyRefs` / `effectScope` / `nextTick` |
+| 生命周期 | `onMounted` / `onUpdated` / `onBeforeUnmount` / `onUnmounted` / `onErrorCaptured` / `onServerPrefetch` |
+| 依赖注入 | `provide` / `inject` / `createContext` |
+| 内置组件 | `KeepAlive` / `Teleport` / `Suspense` / `Transition` / `TransitionGroup` / `Fragment` / `Text` |
+| 其他 | `useId` / `useTemplateRef` / `useAttrs` / `useSlots` / `version` |
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1 +1,46 @@
-export { App, ComponentOptions, ComputedOptions, ComputedRef, Context, ErrorBoundary, KeepAlive, Ref, SetupContext, Suspense, Teleport, Transition, TransitionGroup, WatchOptions, WatchSource, WritableComputedRef, computed, createApp, createContext, defineComponent, effectScope, getCurrentInstance, getCurrentScope, hydrate, isProxy, isReactive, isReadonly, isRef, isShallow, lazy, markRaw, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, onWatcherCleanup, provide, rawRef, reactive, readonly, ref, renderToString, renderToStringAsync, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, toValue, triggerRef, unref, unrefs, useId, useInjects, useProp, useProps, useRootElement, watch, watchEffect } from '@actview/core';
+import { VNode, Reactive, SetupContext } from 'vue';
+export { App, Comment, Component, ComponentPublicInstance, ComputedRef, DeepReadonly, DefineComponent, EffectScope, EffectScope as EffectScopeType, EmitsOptions, Fragment, InjectionKey, KeepAlive, Plugin, PropType, Reactive, Ref, RenderFunction, SetupContext, ShallowReactive, ShallowRef, Slot, Slots, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VNode, VNodeChild, VNodeTypes, WatchCallback, WatchOptions, WatchSource, WritableComputedRef, cloneVNode, computed, createApp, createVNode, customRef, defineAsyncComponent, effectScope, getCurrentInstance, getCurrentScope, h, inject, isProxy, isReactive, isReadonly, isRef, isShallow, isVNode, markRaw, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, onWatcherCleanup, provide, proxyRefs, reactive, readonly, ref, resolveComponent, resolveDirective, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, toValue, triggerRef, unref, useAttrs, useId, useSlots, useTemplateRef, version, watch, watchEffect, watchPostEffect, watchSyncEffect, withDirectives } from 'vue';
+
+/**
+ * v2 组件类型（类型层形状）：
+ * 运行时是 vue DefineComponent（createApp/渲染消费），但类型层用自定义形状
+ * ——只有 call signature、无构造签名。TS 6 的 JSX 检查（getJsxReferenceKind）
+ * 按「构造签名 → Component 路径（$props 宽松）/ 调用签名 → Function 路径
+ * （props = 参数类型，严格）」分流——无构造签名让组件走 Function 路径，
+ * props 检查精确为 Props & { children }（React 严格语义：未声明 prop 报错）。
+ */
+type ActViewComponent<Props extends Record<string, any> = Record<string, any>> = {
+    /** 类型层 call signature：TS 走 Function 路径，props = Props & { children } */
+    (props: Props & {
+        children?: any;
+    }): VNode;
+    /** ElementAttributesProperty{ $props } 兜底（vue 全局 JSX 机制） */
+    $props: Props & {
+        children?: any;
+    };
+    name?: string;
+    /** vue 组件标记（运行时是 DefineComponent） */
+    __isVue?: true;
+    __vccOpts?: any;
+};
+declare function defineComponent<Props extends Record<string, any> = Record<string, any>>(setup: (props: Props, ctx: SetupContext) => unknown, name?: string): ActViewComponent<Props>;
+interface Context<T> {
+    /** 内部唯一键（Symbol）：对象身份即键 */
+    readonly _key: symbol;
+    /** <Ctx value={v}> 直接作组件用（React 19 风格） */
+    __setup: (props: any, ctx: any) => any;
+    name?: string;
+    /** <Ctx.Provider value={v}> 经典风格 */
+    Provider: Context<T>;
+    /** 消费：返回注入表中原样存储的值；无 Provider 时返回 defaultValue */
+    use: () => T;
+    /** 类型层面伪装 call signature，让 <Ctx value=...> 通过 JSX 类型检查 */
+    (props: {
+        value?: T;
+        children?: any;
+    }): any;
+}
+declare function createContext<T extends object>(defaultValue: Reactive<T>): Context<T>;
+declare function createContext<T>(defaultValue: T): Context<T>;
+
+export { type ActViewComponent, type Context, createContext, defineComponent };

package/dist/index.js

@@ -1,7 +1,13 @@
 // src/index.ts
 import {
-  createApp,
-  defineComponent,
+  ref,
+  shallowRef,
+  triggerRef,
+  isRef,
+  unref,
+  toValue,
+  toRef,
+  toRefs,
   reactive,
   shallowReactive,
   readonly,
@@ -12,23 +18,38 @@ import {
   isReadonly,
   isProxy,
   isShallow,
-  nextTick,
   computed,
-  ref,
-  shallowRef,
-  triggerRef,
-  isRef,
-  unref,
-  unrefs,
-  toValue,
-  toRef,
-  toRefs,
-  rawRef,
+  customRef,
+  proxyRefs,
   watch,
   watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
   onWatcherCleanup,
   effectScope,
+  getCurrentScope,
   onScopeDispose,
+  EffectScope
+} from "vue";
+import {
+  createApp,
+  nextTick,
+  h,
+  createVNode,
+  cloneVNode,
+  mergeProps,
+  isVNode,
+  withDirectives,
+  Fragment,
+  Text,
+  Comment,
+  Static,
+  KeepAlive,
+  Teleport,
+  Suspense,
+  Transition,
+  TransitionGroup,
+  defineAsyncComponent,
   onBeforeMount,
   onMounted,
   onUpdated,
@@ -41,47 +62,116 @@ import {
   onRenderTracked,
   onRenderTriggered,
   provide,
-  useInjects,
-  useId,
-  useRootElement,
-  useProp,
-  useProps,
+  inject,
   getCurrentInstance,
-  createContext,
-  renderToString,
-  renderToStringAsync,
-  hydrate,
-  Teleport,
-  Transition,
-  TransitionGroup,
-  KeepAlive,
-  ErrorBoundary,
-  Suspense,
-  lazy,
-  getCurrentScope
-} from "@actview/core";
+  useId,
+  useAttrs,
+  useSlots,
+  useTemplateRef,
+  resolveComponent,
+  resolveDirective,
+  version
+} from "vue";
+import {
+  defineComponent as vueDefineComponent,
+  Fragment as _Fragment,
+  h as h2,
+  inject as inject2,
+  provide as provide2
+} from "vue";
+function defineComponent(setup, name) {
+  return vueDefineComponent({
+    name,
+    // 未消费 props 不自动落根 DOM（React 语义；Vue 默认 inheritAttrs 会落）
+    inheritAttrs: false,
+    setup(props, ctx) {
+      const attrs = ctx.attrs;
+      const bridge = new Proxy(props, {
+        get(t, k) {
+          if (k === "children") return ctx.slots.default?.() ?? null;
+          if (k === "slots") return ctx.slots;
+          const own = Reflect.get(t, k);
+          if (own !== void 0) return own;
+          return attrs[k];
+        },
+        has(t, k) {
+          return k === "children" || k === "slots" || Reflect.has(t, k) || k in attrs;
+        },
+        ownKeys(t) {
+          return [
+            .../* @__PURE__ */ new Set([
+              ...Reflect.ownKeys(t),
+              ...Reflect.ownKeys(attrs),
+              "children",
+              "slots"
+            ])
+          ];
+        },
+        getOwnPropertyDescriptor(t, k) {
+          if (k === "children" || k === "slots") {
+            return {
+              enumerable: true,
+              configurable: true,
+              value: k === "children" ? ctx.slots.default?.() ?? null : ctx.slots
+            };
+          }
+          return Reflect.getOwnPropertyDescriptor(t, k) ?? Reflect.getOwnPropertyDescriptor(attrs, k);
+        }
+      });
+      return setup(bridge, ctx);
+    }
+    // 返回类型以声明为准（vue 的推断带 ExtractPropTypes 包装，与泛型 Props 不完全同构）
+  });
+}
+function createContext(defaultValue) {
+  const key = /* @__PURE__ */ Symbol("actview-context");
+  const provider = defineComponent(function(props) {
+    provide2(key, props.value ?? defaultValue);
+    return () => h2(_Fragment, null, props.children ?? null);
+  }, "ActViewContext.Provider");
+  const ctx = {
+    _key: key,
+    __setup: provider.__setup,
+    name: "ActViewContext",
+    Provider: provider,
+    use() {
+      return inject2(key, defaultValue);
+    }
+  };
+  return ctx;
+}
 export {
-  ErrorBoundary,
+  Comment,
+  EffectScope,
+  Fragment,
   KeepAlive,
+  Static,
   Suspense,
   Teleport,
+  Text,
   Transition,
   TransitionGroup,
+  cloneVNode,
   computed,
   createApp,
   createContext,
+  createVNode,
+  customRef,
+  defineAsyncComponent,
   defineComponent,
   effectScope,
   getCurrentInstance,
   getCurrentScope,
-  hydrate,
+  h,
+  inject,
   isProxy,
   isReactive,
   isReadonly,
   isRef,
   isShallow,
-  lazy,
+  isVNode,
   markRaw,
+  mergeProps,
   nextTick,
   onActivated,
   onBeforeMount,
@@ -97,12 +187,12 @@ export {
   onUpdated,
   onWatcherCleanup,
   provide,
-  rawRef,
+  proxyRefs,
   reactive,
   readonly,
   ref,
-  renderToString,
-  renderToStringAsync,
+  resolveComponent,
+  resolveDirective,
   shallowReactive,
   shallowReadonly,
   shallowRef,
@@ -112,12 +202,14 @@ export {
   toValue,
   triggerRef,
   unref,
-  unrefs,
+  useAttrs,
   useId,
-  useInjects,
-  useProp,
-  useProps,
-  useRootElement,
+  useSlots,
+  useTemplateRef,
+  version,
   watch,
-  watchEffect
+  watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
+  withDirectives
 };

package/package.json

@@ -1,20 +1,16 @@
 {
   "name": "actview",
-  "version": "1.1.1",
+  "version": "3.0.0",
   "type": "module",
+  "description": "ActView v2：Vue 引擎 + React 语义 JSX（运行时基于 vue 官方包，JSX 由 @actview/plugin-jsx 编译）",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     }
   },
-  "peerDependencies": {
-    "@actview/core": "^1.1.0",
-    "@actview/jsx": "^1.1.0"
-  },
-  "devDependencies": {
-    "@actview/core": "^1.1.0",
-    "@actview/jsx": "^1.1.0"
+  "dependencies": {
+    "vue": "^3.5.0"
   },
   "files": [
     "dist"