actview 3.1.0 → 3.2.1

package/README.md

@@ -7,7 +7,7 @@
 ## 核心功能
 
 - **vue 运行时 re-export**：响应式（`ref` / `reactive` / `computed` / `watch` / `effectScope`）、组件（`defineComponent` / `createApp` / `h`）、生命周期、内置组件（`KeepAlive` / `Teleport` / `Suspense` / `Transition` / `TransitionGroup`）
-- **defineComponent 桥接**（React 语义）：`ctx.slots` → `props.children`（读时求值），props 读不到时从 attrs 兜底；**有 props 声明时自动落根**（`inheritAttrs` 开启，未消费 attrs 透传到根元素 + scoped data-v 生效），无声明时保持不透传（React 语义，避免 props 污染 DOM）
+- **defineComponent 桥接**（React 对齐）：props 读不到时从 attrs 兜底（React 风格任意 props 可读）；**`props.children` 渲染期读取 = 子内容值**（React 语义，非渲染期读取返回 undefined 并提示——判断有无子内容用 `props.slots.default != null`）；`props.slots.default()` 具名插槽/显式调用（render 期）；**createVNode 包装**：`<p {...props}>` 展开的 children 键自动抽进第三参（React 对齐）；桥接虚拟键（children/slots）不参与展开/遍历；**有 props 声明时自动落根**（`inheritAttrs` 开启，未消费 attrs 透传到根元素 + scoped data-v 生效），无声明时保持不透传（React 语义，避免 props 污染 DOM）
 - **createContext**：React 语义（`.Provider` / `.use()`），基于 vue `provide/inject`
 - **JSX 类型层**：全局 `IntrinsicElements` 完整标签表（React 语义属性）+ vue 组件兼容；组件 props 严格检查（未声明 prop 报错）
 

package/dist/index.d.ts

@@ -1,23 +1,31 @@
 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';
+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, Teleport, Text, Transition, TransitionGroup, VNode, VNodeChild, VNodeTypes, WatchCallback, WatchOptions, WatchSource, WritableComputedRef, cloneVNode, computed, createApp, 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';
 
+declare function createVNode(type: any, props: any, children?: any): VNode;
+interface SuspenseProps {
+    /** React 语义：异步解析期间显示的 fallback（桥接为 vue #fallback 插槽） */
+    fallback?: any;
+    /** vue 原生插槽（默认插槽 props.slots.default()） */
+    slots?: any;
+    /** 其余透传：vue Suspense 事件/选项 */
+    [key: string]: any;
+}
+declare const Suspense: ActViewComponent<SuspenseProps>;
 /**
  * v2 组件类型（类型层形状）：
  * 运行时是 vue DefineComponent（createApp/渲染消费），但类型层用自定义形状
  * ——只有 call signature、无构造签名。TS 6 的 JSX 检查（getJsxReferenceKind）
  * 按「构造签名 → Component 路径（$props 宽松）/ 调用签名 → Function 路径
  * （props = 参数类型，严格）」分流——无构造签名让组件走 Function 路径，
- * props 检查精确为 Props & { children }（React 严格语义：未声明 prop 报错）。
+ * props 检查精确为 Props（React 严格语义：未声明 prop 报错）。
+ * 子内容类型：JSX children 属性来自全局 IntrinsicAttributes（react-jsx
+ * 机制）；组件内读 props.slots（vue 原生，类型由组件 props 声明或 any）。
  */
 type ActViewComponent<Props extends Record<string, any> = Record<string, any>> = {
-    /** 类型层 call signature：TS 走 Function 路径，props = Props & { children } */
-    (props: Props & {
-        children?: any;
-    }): VNode;
+    /** 类型层 call signature：TS 走 Function 路径，props = Props */
+    (props: Props): VNode;
     /** ElementAttributesProperty{ $props } 兜底（vue 全局 JSX 机制） */
-    $props: Props & {
-        children?: any;
-    };
+    $props: Props;
     name?: string;
     /** vue 组件标记（运行时是 DefineComponent） */
     __isVue?: true;
@@ -36,8 +44,8 @@ declare function defineComponent<Props extends Record<string, any> = Record<stri
 interface Context<T> {
     /** 内部唯一键（Symbol）：对象身份即键 */
     readonly _key: symbol;
-    /** <Ctx value={v}> 直接作组件用（React 19 风格） */
-    __setup: (props: any, ctx: any) => any;
+    /** vue 组件对象形态的 setup——<Ctx value={v}> 直接作组件用（React 19 风格） */
+    setup: (props: any, setupCtx: any) => any;
     name?: string;
     /** <Ctx.Provider value={v}> 经典风格 */
     Provider: Context<T>;
@@ -52,4 +60,4 @@ interface Context<T> {
 declare function createContext<T extends object>(defaultValue: Reactive<T>): Context<T>;
 declare function createContext<T>(defaultValue: T): Context<T>;
 
-export { type ActViewComponent, type ActViewDefineComponentOptions, type Context, createContext, defineComponent };
+export { type ActViewComponent, type ActViewDefineComponentOptions, type Context, Suspense, type SuspenseProps, createContext, createVNode, defineComponent };

package/dist/index.js

@@ -35,7 +35,6 @@ import {
   createApp,
   nextTick,
   h,
-  createVNode,
   cloneVNode,
   mergeProps,
   isVNode,
@@ -46,7 +45,6 @@ import {
   Static,
   KeepAlive,
   Teleport,
-  Suspense,
   Transition,
   TransitionGroup,
   defineAsyncComponent,
@@ -73,12 +71,55 @@ import {
   version
 } from "vue";
 import {
+  createVNode as vueCreateVNode,
   defineComponent as vueDefineComponent,
   Fragment as _Fragment,
   h as h2,
   inject as inject2,
-  provide as provide2
+  isVNode as isVNode2,
+  provide as provide2,
+  Suspense as VueSuspense
 } from "vue";
+var activeRenderDepth = 0;
+function wrapSlots(children) {
+  if (children && typeof children === "object" && !Array.isArray(children) && !isVNode2(children)) {
+    for (const k in children) {
+      const fn = children[k];
+      if (typeof fn === "function") {
+        children[k] = (...args) => {
+          activeRenderDepth++;
+          try {
+            return fn(...args);
+          } finally {
+            activeRenderDepth--;
+          }
+        };
+      }
+    }
+  }
+  return children;
+}
+function createVNode(type, props, children) {
+  if (props && "children" in props) {
+    if (children == null) {
+      children = props.children;
+    }
+    delete props.children;
+  }
+  if (children != null && !Array.isArray(children) && isVNode2(children)) {
+    children = [children];
+  }
+  return vueCreateVNode(type, props, wrapSlots(children));
+}
+var Suspense = defineComponent(function(props) {
+  return () => {
+    const { fallback, ...rest } = props;
+    return h2(VueSuspense, rest, {
+      default: () => props.slots?.default?.() ?? [],
+      fallback: () => fallback != null ? fallback : []
+    });
+  };
+}, "ActViewSuspense");
 function defineComponent(setup, options) {
   const opts = typeof options === "string" ? { name: options } : options ?? {};
   return vueDefineComponent({
@@ -90,39 +131,57 @@ function defineComponent(setup, options) {
     inheritAttrs: !!opts.props,
     setup(props, ctx) {
       const attrs = ctx.attrs;
+      let renderPhase = false;
+      let warnedNonRenderRead = false;
       const bridge = new Proxy(props, {
         get(t, k) {
-          if (k === "children") return ctx.slots.default?.() ?? null;
           if (k === "slots") return ctx.slots;
+          if (k === "children") {
+            if (renderPhase || activeRenderDepth > 0) {
+              const kids = ctx.slots.default?.() ?? null;
+              if (Array.isArray(kids) && kids.length === 1) return kids[0];
+              return kids;
+            }
+            if (!warnedNonRenderRead) {
+              warnedNonRenderRead = true;
+              console.warn(
+                "[actview] \u975E\u6E32\u67D3\u671F\u8BFB\u53D6 props.children\uFF1A\u63D2\u69FD\u5185\u5BB9\u53EA\u5728\u6E32\u67D3\u671F\u53EF\u7528\u3002\u5224\u65AD\u6709\u65E0\u5B50\u5185\u5BB9\u8BF7\u7528 props.slots.default != null\uFF1B\u6E32\u67D3\u671F\u7528 props.children \u6216 props.slots.default()"
+              );
+            }
+            return void 0;
+          }
           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;
+          return k === "slots" || k === "children" || Reflect.has(t, k) || k in attrs;
         },
         ownKeys(t) {
           return [
             .../* @__PURE__ */ new Set([
               ...Reflect.ownKeys(t),
-              ...Reflect.ownKeys(attrs),
-              "children",
-              "slots"
+              ...Reflect.ownKeys(attrs)
             ])
           ];
         },
         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);
+      const userResult = setup(bridge, ctx);
+      if (typeof userResult === "function") {
+        const userRender = userResult;
+        return () => {
+          renderPhase = true;
+          try {
+            return userRender();
+          } finally {
+            renderPhase = false;
+          }
+        };
+      }
+      return userResult;
     }
     // 返回类型以声明为准（vue 的推断带 ExtractPropTypes 包装，与泛型 Props 不完全同构）
   });
@@ -131,13 +190,19 @@ 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);
+    return () => h2(_Fragment, null, props.slots.default?.() ?? null);
   }, "ActViewContext.Provider");
   const ctx = {
     _key: key,
-    __setup: provider.__setup,
     name: "ActViewContext",
     Provider: provider,
+    // React 19 风格 <Ctx value={v}>：Context 直接作组件——
+    // vue 组件对象 setup 形态（provide + 渲染 children）
+    setup(props, setupCtx) {
+      const value = props.value ?? setupCtx.attrs?.value ?? defaultValue;
+      provide2(key, value);
+      return () => h2(_Fragment, null, setupCtx.slots?.default?.() ?? null);
+    },
     use() {
       return inject2(key, defaultValue);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "actview",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "type": "module",
   "description": "ActView v2：Vue 引擎 + React 语义 JSX（运行时基于 vue 官方包，JSX 由 @actview/plugin-jsx 编译）",
   "exports": {