feat(jsx-types): namespace JSX types

package.json

@@ -14,7 +14,7 @@
  "test": "run-s \"test-unit {@}\" \"test-e2e {@}\"",
  "test-unit": "jest --filter ./scripts/filter-unit.js",
  "test-e2e": "node scripts/build.js vue -f global -d && jest --filter ./scripts/filter-e2e.js --runInBand",
- "test-dts": "node scripts/build.js shared reactivity runtime-core runtime-dom -dt -f esm-bundler && npm run test-dts-only",
+ "test-dts": "node scripts/build.js shared reactivity runtime-core jsx runtime-dom -dt -f esm-bundler && npm run test-dts-only",
  "test-dts-only": "tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.build.json",
  "test-coverage": "node scripts/build.js vue -f global -d && jest --runInBand --coverage --bail",
  "release": "node scripts/release.js",

packages/jsx/api-extractor.json

@@ -0,0 +1,7 @@
+{
+ "extends": "../../api-extractor.json",
+ "mainEntryPointFilePath": "./dist/packages/<unscopedPackageName>/src/index.d.ts",
+ "dtsRollup": {
+ "publicTrimmedFilePath": "./dist/<unscopedPackageName>.d.ts"
+ }
+}

packages/jsx/package.json

@@ -0,0 +1,35 @@
+{
+ "name": "@vue/jsx",
+ "version": "3.2.44",
+ "description": "@vue/jsx",
+ "main": "dist/jsx.cjs.js",
+ "types": "dist/jsx.d.ts",
+ "files": [
+ "register.d.ts",
+ "dist"
+ ],
+ "buildOptions": {
+ "formats": [
+ "cjs"
+ ]
+ },
+ "sideEffects": false,
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/vuejs/core.git",
+ "directory": "packages/jsx"
+ },
+ "keywords": [
+ "vue"
+ ],
+ "author": "Rahul Kadyan",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/vuejs/core/issues"
+ },
+ "homepage": "https://github.com/vuejs/core/tree/main/packages/jsx#readme",
+ "dependencies": {
+ "csstype": "^3.1.1",
+ "@vue/runtime-core": "3.2.44"
+ }
+}

packages/jsx/register.d.ts

@@ -0,0 +1,15 @@
+import { h } from './dist/jsx'
+
+declare global {
+ namespace JSX {
+ interface Element extends h.JSX.Element {}
+ interface ElementClass extends h.JSX.ElementClass {}
+ interface ElementAttributesProperty
+ extends h.JSX.ElementAttributesProperty {}
+ interface IntrinsicElements extends h.JSX.IntrinsicElements {}
+ interface IntrinsicAttributes extends h.JSX.IntrinsicAttributes {}
+ interface ElementChildrenAttribute extends h.JSX.ElementChildrenAttribute {}
+ }
+}
+
+export {}

packages/jsx/src/css.ts

@@ -0,0 +1,18 @@
+import * as CSS from 'csstype'
+
+export interface CSSProperties
+ extends CSS.Properties<string | number>,
+ CSS.PropertiesHyphen<string | number> {
+ /**
+ * The index signature was removed to enable closed typing for style
+ * using CSSType. You're able to use type assertion or module augmentation
+ * to add properties or an index signature of your own.
+ *
+ * For examples and more information, visit:
+ * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
+ */
+ [v: `--${string}`]: string | number | undefined
+}
+
+// Vue's style normalization supports nested arrays
+export type StyleValue = string | CSSProperties | Array<StyleValue>

packages/jsx/src/h.ts

@@ -0,0 +1,39 @@
+import { type VNode, h as _h } from '@vue/runtime-core'
+import { type HTMLElementAttributesMap } from './html'
+import { type SVGElementAttributesMap } from './svg'
+import { type ReservedProps } from './vue'
+
+type ElementAttrs<T> = T & ReservedProps
+type NativeElements = {
+ [K in keyof HTMLElementAttributesMap]: ElementAttrs<
+ HTMLElementAttributesMap[K]
+ >
+} & {
+ [K in keyof SVGElementAttributesMap]: ElementAttrs<SVGElementAttributesMap[K]>
+}
+
+/**
+ * This is only for type support.
+ * @public
+ */
+export const h = _h
+export namespace h {
+ export namespace JSX {
+ export interface Element extends VNode {}
+ export interface ElementClass {
+ $props: {}
+ }
+ export interface ElementAttributesProperty {
+ $props: {}
+ }
+ export interface IntrinsicElements extends NativeElements {
+ // allow arbitrary elements
+ // @ts-ignore suppress ts:2374 = Duplicate string index signature.
+ [name: string]: any
+ }
+ export interface IntrinsicAttributes extends ReservedProps {}
+ export interface ElementChildrenAttribute {
+ $slots: {}
+ }
+ }
+}