@tsrx/react 0.2.22 → 0.2.24

package/package.json

@@ -3,7 +3,7 @@
   "description": "React compiler built on @tsrx/core",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "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"
+    },
     "./ref": {
       "types": "./types/ref.d.ts",
       "default": "./src/ref.js"
@@ -34,7 +38,7 @@
   "dependencies": {
     "esrap": "^2.2.8",
     "zimmerframe": "^1.1.2",
-    "@tsrx/core": "0.1.22"
+    "@tsrx/core": "0.1.24"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/dynamic.js

@@ -0,0 +1,9 @@
+import { createElement } from 'react';
+
+/**
+ * @param {{ is: import('react').ElementType | null | undefined | false, [key: string]: any }} props
+ * @returns {import('react').ReactElement | null}
+ */
+export function Dynamic({ is, ...props }) {
+	return is ? createElement(is, props) : null;
+}

package/src/index.js

@@ -4,6 +4,7 @@
 import { createVolarMappingsResult, dedupeMappings, parseModule } from '@tsrx/core';
 import { transform } from './transform.js';
 
+export { Dynamic } from './dynamic.js';
 export { isRefProp } from './ref.js';
 
 /**

package/src/transform.js

@@ -15,6 +15,7 @@ const react_platform = {
 	imports: {
 		fragment: 'react',
 		suspense: 'react',
+		dynamic: '@tsrx/react/dynamic',
 		errorBoundary: '@tsrx/react/error-boundary',
 		mergeRefs: '@tsrx/react/ref',
 		refProp: '@tsrx/react/ref',

package/types/dynamic.d.ts

@@ -0,0 +1,38 @@
+import type { JSX, JSXElementConstructor, ReactElement } from 'react';
+
+type DataAttributes = {
+	[Key in `data-${string}`]?: string | number | boolean | null | undefined;
+};
+
+type DynamicIntrinsicElements = JSX.IntrinsicElements;
+export type DynamicElementType =
+	| keyof DynamicIntrinsicElements
+	| JSXElementConstructor<any>
+	| (string & {});
+type DynamicTarget<T> = Exclude<T, null | undefined | false>;
+type DynamicIntrinsicProps = {
+	[T in keyof DynamicIntrinsicElements]: DynamicIntrinsicElements[T] &
+		DataAttributes & {
+			is: T | null | undefined | false;
+		};
+}[keyof DynamicIntrinsicElements];
+type DynamicComponentProps<T> = [T] extends [never]
+	? Record<string, unknown>
+	: T extends JSXElementConstructor<infer P>
+		? Omit<P, 'is'>
+		: T extends keyof DynamicIntrinsicElements
+			? DynamicIntrinsicElements[T] & DataAttributes
+			: Record<string, unknown>;
+
+export type DynamicProps<T extends DynamicElementType> = DynamicComponentProps<
+	DynamicTarget<NoInfer<T>>
+> & {
+	is: T | null | undefined | false;
+};
+
+export function Dynamic(props: DynamicIntrinsicProps): ReactElement | null;
+export function Dynamic<T extends DynamicElementType>(
+	props: DynamicComponentProps<DynamicTarget<NoInfer<T>>> & {
+		is: T | null | undefined | false;
+	},
+): ReactElement | null;

package/types/index.d.ts

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