@tsrx/vue 0.1.22 → 0.1.25

package/package.json

@@ -3,7 +3,7 @@
   "description": "Vue compiler built on @tsrx/core",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.22",
+  "version": "0.1.25",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -22,6 +22,10 @@
       "types": "./types/error-boundary.d.ts",
       "default": "./src/error-boundary.js"
     },
+    "./dynamic": {
+      "types": "./types/dynamic.d.ts",
+      "default": "./src/dynamic.js"
+    },
     "./interop": {
       "types": "./types/interop.d.ts",
       "default": "./src/interop.js"
@@ -35,7 +39,7 @@
     "esrap": "^2.2.8",
     "is-reference": "^3.0.3",
     "zimmerframe": "^1.1.2",
-    "@tsrx/core": "0.1.22"
+    "@tsrx/core": "0.1.25"
   },
   "peerDependencies": {
     "vue": ">=3.5",

package/src/dynamic.js

@@ -0,0 +1,16 @@
+import { exclude_prop_from_object } from '@tsrx/core/runtime/language-helpers';
+import { createNodes, h } from 'vue-jsx-vapor';
+
+/**
+ * @param {{ is?: any, [key: string]: any }} props
+ * @param {{ slots?: any }} [context]
+ * @returns {any}
+ */
+export function Dynamic(props, context) {
+	return createNodes(() => {
+		const component = props?.is;
+		return component
+			? h(component, exclude_prop_from_object(props, 'is'), context?.slots ?? props?.children)
+			: null;
+	});
+}

package/src/index.js

@@ -5,6 +5,7 @@ import { createVolarMappingsResult, dedupeMappings, parseModule } from '@tsrx/co
 import { transform } from './transform.js';
 
 export { isRefProp } from './ref.js';
+export { Dynamic } from './dynamic.js';
 
 /**
  * Parse tsrx-vue source code to an ESTree AST.

package/src/transform.js

@@ -33,6 +33,7 @@ const vue_platform = {
 	name: 'Vue',
 	imports: {
 		suspense: 'vue',
+		dynamic: '@tsrx/vue/dynamic',
 		errorBoundary: '@tsrx/vue/error-boundary',
 		mergeRefs: '@tsrx/vue/ref',
 		refProp: '@tsrx/vue/ref',
@@ -48,7 +49,7 @@ const vue_platform = {
 	},
 	hooks: {
 		// Hoist to module scope
-		// in the regular client transform — same trade-off as React, where one
+		// in the regular client transform — one
 		// definition per helper keeps bundles small and source mappings 1:1
 		// for editor IntelliSense. The `compile_to_volar_mappings` entry point
 		// opts back out so Volar's type-only output keeps helpers inline,

package/types/dynamic.d.ts

@@ -0,0 +1,32 @@
+import type { NativeElements } from 'vue-jsx-vapor';
+
+type DynamicIntrinsicElements = NativeElements;
+
+export type DynamicElementType =
+	| keyof DynamicIntrinsicElements
+	| ((props: any, ...args: any[]) => any)
+	| (new (...args: any[]) => { $props: any })
+	| (string & {});
+
+type DynamicTarget<T> = Exclude<T, null | undefined | false>;
+type DynamicComponentProps<T> = [T] extends [never]
+	? Record<string, unknown>
+	: T extends new (...args: any[]) => { $props: infer P }
+		? Omit<P, 'is'>
+		: T extends (props: infer P, ...args: any[]) => any
+			? Omit<P, 'is'>
+			: T extends keyof DynamicIntrinsicElements
+				? DynamicIntrinsicElements[T]
+				: Record<string, unknown>;
+
+export type DynamicProps<T extends DynamicElementType> = DynamicComponentProps<
+	DynamicTarget<NoInfer<T>>
+> & {
+	is: T | null | undefined | false;
+};
+
+export function Dynamic<T extends DynamicElementType>(
+	props: DynamicComponentProps<DynamicTarget<NoInfer<T>>> & {
+		is: T | null | undefined | false;
+	},
+): any;

package/types/index.d.ts

@@ -4,6 +4,7 @@ import type { CompileFn, ParseOptions, VolarCompileFn } from '@tsrx/core/types';
 export function parse(source: string, filename?: string, options?: ParseOptions): Program;
 
 export { isRefProp } from './ref.js';
+export { Dynamic, type DynamicElementType, type DynamicProps } from './dynamic.js';
 
 export const compile: CompileFn;