feat: introduce @vue-jsx-vapor/runtime

Author: zhiyuanzmj

.gitignore

@@ -82,5 +82,3 @@ dist
 
 # vitepress
 cache
-
-jsx-runtime

packages/runtime/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vue-jsx-vapor/runtime",
+  "version": "2.5.4-beta.1",
+  "description": "Vue JSX Vapor Runtime",
+  "type": "module",
+  "keywords": [
+    "vue",
+    "jsx",
+    "vapor",
+    "runtime"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/vuejs/vue-jsx-vapor#readme",
+  "bugs": {
+    "url": "https://github.com/vuejs/vue-jsx-vapor/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vue-jsx-vapor.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "jsx-vapor-dev": "./src/index.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "DEV=true tsdown",
+    "release": "bumpp && npm publish",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "vue": "^3.6.0-alpha.2"
+  },
+  "devDependencies": {
+    "csstype": "^3.1.3"
+  }
+}

packages/runtime/src/block.ts

@@ -0,0 +1,29 @@
+import { createTextNode, isFragment, isVaporComponent, type Block } from 'vue'
+
+type NodeChildAtom = Block | string | number | boolean | null | undefined | void
+
+export type NodeArrayChildren = Array<NodeArrayChildren | NodeChildAtom>
+
+export type NodeChild = NodeChildAtom | NodeArrayChildren
+
+export function normalizeNode(node: NodeChild): Block {
+  if (node == null || typeof node === 'boolean') {
+    return document.createComment('')
+  } else if (Array.isArray(node) && node.length) {
+    return node.map(normalizeNode)
+  } else if (isBlock(node)) {
+    return node
+  } else {
+    // strings and numbers
+    return createTextNode(String(node))
+  }
+}
+
+export function isBlock(val: NonNullable<unknown>): val is Block {
+  return (
+    val instanceof Node ||
+    Array.isArray(val) ||
+    isVaporComponent(val) ||
+    isFragment(val)
+  )
+}

packages/runtime/src/component.ts

@@ -0,0 +1,59 @@
+import {
+  createComponent as _createComponent,
+  createComponentWithFallback as _createComponentWithFallback,
+  Fragment,
+  type VaporComponent,
+} from 'vue'
+import { normalizeNode } from './block'
+import { getCurrentInstance } from './helpers'
+
+type Tail<T extends any[]> = T extends [any, ...infer R] ? R : never
+
+export const createComponent = (
+  type: VaporComponent | typeof Fragment,
+  ...args: Tail<Parameters<typeof _createComponent>>
+) => {
+  return createProxyComponent(_createComponent, type, ...args)
+}
+
+export const createComponentWithFallback = (
+  type: VaporComponent | typeof Fragment,
+  ...args: Tail<Parameters<typeof _createComponentWithFallback>>
+) => createProxyComponent(_createComponentWithFallback, type, ...args)
+
+const createProxyComponent = (
+  createComponent:
+    | typeof _createComponent
+    | typeof _createComponentWithFallback,
+  type: VaporComponent | typeof Fragment,
+  props: any,
+  ...args: any[]
+) => {
+  if (type === Fragment) {
+    type = (_, { slots }) => slots.default()
+    props = null
+  }
+
+  const i = getCurrentInstance()
+  if (typeof type === 'function') {
+    type = new Proxy(type, {
+      apply(target, ctx, args) {
+        return normalizeNode(Reflect.apply(target, ctx, args))
+      },
+      get(target, p, receiver) {
+        if ((i && (i.appContext as any)).vapor && p === '__vapor') {
+          return true
+        }
+        return Reflect.get(target, p, receiver)
+      },
+    })
+  } else if (type.__vapor && type.setup) {
+    type.setup = new Proxy(type.setup, {
+      apply(target, ctx, args) {
+        return normalizeNode(Reflect.apply(target, ctx, args))
+      },
+    })
+  }
+
+  return createComponent(type as VaporComponent, props, ...args)
+}

packages/vue-jsx-vapor/src/core/h.ts renamed to packages/runtime/src/h.ts

@@ -1,41 +1,22 @@
 /* eslint-disable prefer-rest-params */
-import {
-  createTextNode,
-  type Block,
-  type Component,
-  type ComponentOptions,
-  type ConcreteComponent,
-  type DefineComponent,
-  type EmitsOptions,
-  type Fragment,
-  type FunctionalComponent,
-  type RawSlots,
-  type Suspense,
-  type SuspenseProps,
-  type Teleport,
-  type TeleportProps,
-  type VNodeRef,
+import { isBlock, type NodeArrayChildren, type NodeChild } from './block'
+import { createComponentWithFallback } from './component'
+import type {
+  Block,
+  Component,
+  ComponentOptions,
+  ConcreteComponent,
+  DefineComponent,
+  EmitsOptions,
+  Fragment,
+  FunctionalComponent,
+  RawSlots,
+  Suspense,
+  SuspenseProps,
+  Teleport,
+  TeleportProps,
+  VNodeRef,
 } from 'vue'
-import { createComponentWithFallback, isBlock } from './runtime'
-
-type NodeChildAtom = Block | string | number | boolean | null | undefined | void
-
-type NodeArrayChildren = Array<NodeArrayChildren | NodeChildAtom>
-
-type RawChildren = NodeChildAtom | NodeArrayChildren
-
-function normalizeNode(node: RawChildren): Block {
-  if (node == null || typeof node === 'boolean') {
-    return []
-  } else if (Array.isArray(node) && node.length) {
-    return node.map(normalizeNode)
-  } else if (isBlock(node)) {
-    return node
-  } else {
-    // strings and numbers
-    return createTextNode(String(node))
-  }
-}
 
 // fake constructor type returned from `defineComponent`
 interface Constructor<P = any> {
@@ -63,20 +44,20 @@ type ResolveProps<T> = T extends null | undefined ? T : () => T | T
 // element
 export function h<K extends keyof HTMLElementTagNameMap>(
   type: K,
-  children?: RawChildren,
+  children?: NodeChild,
 ): Block
 export function h<K extends keyof HTMLElementTagNameMap>(
   type: K,
   props?: ResolveProps<RawProps & HTMLElementEventHandler> | null,
-  children?: RawChildren | RawSlots,
+  children?: NodeChild | RawSlots,
 ): Block
 
 // custom element
-export function h(type: string, children?: RawChildren): Block
+export function h(type: string, children?: NodeChild): Block
 export function h(
   type: string,
   props?: ResolveProps<RawProps> | null,
-  children?: RawChildren | RawSlots,
+  children?: NodeChild | RawSlots,
 ): Block
 
 // text/comment
@@ -102,27 +83,27 @@ export function h(
 export function h(
   type: typeof Teleport,
   props: RawProps & TeleportProps,
-  children: RawChildren | RawSlots,
+  children: NodeChild | RawSlots,
 ): Block
 
 // suspense
-export function h(type: typeof Suspense, children?: RawChildren): Block
+export function h(type: typeof Suspense, children?: NodeChild): Block
 export function h(
   type: typeof Suspense,
   props?: ResolveProps<RawProps & SuspenseProps> | null,
-  children?: RawChildren | RawSlots,
+  children?: NodeChild | RawSlots,
 ): Block
 
 // functional component
-export function h(type: FunctionalComponent, children?: RawChildren): Block
+export function h(type: FunctionalComponent, children?: NodeChild): Block
 export function h<
   P,
   E extends EmitsOptions = {},
   S extends Record<string, any> = any,
 >(
   type: FunctionalComponent<P, E, S>,
   props?: ResolveProps<(RawProps & P) | ({} extends P ? null : never)>,
-  children?: RawChildren | IfAny<S, RawSlots, S>,
+  children?: NodeChild | IfAny<S, RawSlots, S>,
 ): Block
 
 // catch all types
@@ -134,7 +115,7 @@ export function h(
     | ComponentOptions
     | Constructor
     | DefineComponent,
-  children?: RawChildren,
+  children?: NodeChild,
 ): Block
 export function h<P>(
   type:
@@ -145,7 +126,7 @@ export function h<P>(
     | Constructor<P>
     | DefineComponent<P>,
   props?: ResolveProps<(RawProps & P) | ({} extends P ? null : never)>,
-  children?: RawChildren | RawSlots,
+  children?: NodeChild | RawSlots,
 ): Block
 
 export function h(type: any, propsOrChildren?: any, children?: any) {
@@ -159,7 +140,7 @@ export function h(type: any, propsOrChildren?: any, children?: any) {
       // single block without props
       if (isBlock(propsOrChildren)) {
         return createComponentWithFallback(type, null, {
-          default: () => normalizeNode(propsOrChildren),
+          default: () => propsOrChildren,
         })
       }
 
@@ -168,7 +149,7 @@ export function h(type: any, propsOrChildren?: any, children?: any) {
     } else {
       // omit props
       return createComponentWithFallback(type, null, {
-        default: () => normalizeNode(propsOrChildren),
+        default: () => propsOrChildren,
       })
     }
   } else {
@@ -182,7 +163,7 @@ export function h(type: any, propsOrChildren?: any, children?: any) {
         ? typeof children === 'object' && !Array.isArray(children)
           ? children
           : {
-              default: () => normalizeNode(children),
+              default: () => children,
             }
         : undefined,
     )

packages/runtime/src/helpers.ts

@@ -0,0 +1,43 @@
+import { proxyRefs, toRefs, useAttrs, type GenericComponentInstance } from 'vue'
+import * as Vue from 'vue'
+
+export function getCurrentInstance(): GenericComponentInstance | null {
+  // @ts-ignore
+  return Vue.currentInstance || Vue.getCurrentInstance()
+}
+
+/**
+ * Returns the props of the current component instance.
+ *
+ * @example
+ * ```tsx
+ * import { useProps } from 'vue-jsx-vapor'
+ *
+ * defineComponent(({ foo = '' })=>{
+ *   const props = useProps() // { foo: '' }
+ * })
+ * ```
+ */
+export function useProps() {
+  const i = getCurrentInstance()
+  return i!.props
+}
+
+/**
+ * Returns the merged props and attrs of the current component.\
+ * Equivalent to `useProps()` + `useAttrs()`.
+ *
+ * @example
+ * ```tsx
+ * import { useFullProps } from 'vue-jsx-vapor'
+ *
+ * defineComponent((props) => {
+ *   const fullProps = useFullProps() // = useAttrs() + useProps()
+ * })
+ */
+export function useFullProps() {
+  return proxyRefs({
+    ...toRefs(useProps()),
+    ...toRefs(useAttrs()),
+  })
+}

packages/runtime/src/index.ts

@@ -0,0 +1,7 @@
+export { shallowRef as useRef } from 'vue'
+export * from './jsx'
+export * from './h'
+export * from './node'
+export * from './block'
+export * from './component'
+export * from './helpers'

packages/vue-jsx-vapor/src/jsx-runtime/dom.ts renamed to packages/runtime/src/jsx.ts

@@ -46,6 +46,8 @@ export interface CSSProperties
 type Booleanish = boolean | 'true' | 'false'
 type Numberish = number | string
 
+interface HTMLWebViewElement extends HTMLElement {}
+
 // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
 export interface AriaAttributes {
   /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
@@ -1656,4 +1658,3 @@ export interface TransitionEvent<T = Element>
 export type TransitionEventHandler<T = Element> = EventHandler<
   TransitionEvent<T>
 >
-