@tsrx/core 0.1.13 → 0.1.14

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "type": "module",
   "repository": {
     "type": "git",

package/src/index.js

@@ -142,6 +142,7 @@ export { escape, escape_script as escapeScript } from './utils/escaping.js';
 
 // Transform
 export {
+	add_ref_target_type_to_ref_prop_attributes as addRefTargetTypeToRefPropAttributes,
 	add_jsx_setup_declaration as addJsxSetupDeclaration,
 	clone_switch_helper_invocation as cloneSwitchHelperInvocation,
 	collect_param_bindings as collectParamBindings,
@@ -149,12 +150,15 @@ export {
 	create_hook_safe_helper as createHookSafeHelper,
 	create_host_html_attribute as createHostHtmlAttribute,
 	create_host_html_conflict_error as createHostHtmlConflictError,
+	create_element_ref_target_type as createElementRefTargetType,
+	create_element_ref_target_type_for_name as createElementRefTargetTypeForName,
 	createJsxTransform,
 	CREATE_REF_PROP_INTERNAL_NAME,
 	extract_jsx_setup_declarations as extractJsxSetupDeclarations,
 	get_host_html_conflicting_attribute as getHostHtmlConflictingAttribute,
 	get_invalid_html_child_error_message as getInvalidHtmlChildErrorMessage,
 	is_component_like_element,
+	is_ref_expression_attribute_value as isRefExpressionAttributeValue,
 	is_ref_prop_expression as isRefPropExpression,
 	MERGE_REFS_INTERNAL_NAME,
 	merge_duplicate_refs as mergeDuplicateRefs,

package/src/runtime/language-helpers.js

@@ -55,3 +55,37 @@ export function array_slice(array_like, ...args) {
 		? array_like.slice(...args)
 		: array_prototype.slice.call(array_like, ...args);
 }
+
+/**
+ * Converts iterables, iterators, and array-like values to an array from an index.
+ * @template T
+ * @param {Iterable<T> | Iterator<T> | ArrayLike<T>} iterable
+ * @param {number} [index]
+ * @returns {T[]}
+ */
+export function iterable_array_from(iterable, index = 0) {
+	/** @type {Iterator<T>} */
+	var iterator;
+	var iterable_prop = /** @type {Iterable<T>} */ (iterable)[Symbol.iterator];
+
+	if (typeof iterable_prop === 'function') {
+		iterator = iterable_prop.call(iterable);
+	} else if (typeof (/** @type {Iterator<T>} */ (iterable).next) === 'function') {
+		iterator = Iterator.from(/** @type {Iterator<T>} */ (iterable));
+	} else {
+		return array_from(/** @type {ArrayLike<T>} */ (iterable)).slice(index);
+	}
+
+	var result = [];
+	var i = 0;
+	var current = iterator.next();
+	while (!current.done) {
+		if (i++ < index) {
+			current = iterator.next();
+			continue;
+		}
+		result.push(current.value);
+		current = iterator.next();
+	}
+	return result;
+}

package/src/transform/jsx/index.js

@@ -570,6 +570,12 @@ export function createJsxTransform(platform) {
 					!is_component,
 					transform_context,
 				);
+				if (transform_context.typeOnly) {
+					add_ref_target_type_to_ref_prop_attributes(
+						attrs,
+						!is_component ? create_element_ref_target_type(visited) : null,
+					);
+				}
 				return {
 					...visited,
 					attributes: merge_duplicate_refs(
@@ -5174,12 +5180,43 @@ function transform_element_attributes_dispatch(attrs, transform_context, element
 	const result = hook
 		? hook(attrs, transform_context, element)
 		: attrs.map((/** @type {any} */ a) => to_jsx_attribute(a, transform_context));
+	if (transform_context.typeOnly) {
+		add_ref_target_type_to_ref_prop_attributes(
+			result,
+			!is_component ? create_element_ref_target_type(element) : null,
+		);
+	}
 	return merge_duplicate_refs(
 		normalize_host_ref_spreads(result, !is_component, transform_context),
 		transform_context,
 	);
 }
 
+/**
+ * @param {any[]} attrs
+ * @param {AST.TypeNode | null} ref_target_type
+ * @returns {void}
+ */
+export function add_ref_target_type_to_ref_prop_attributes(attrs, ref_target_type) {
+	if (!ref_target_type) return;
+	for (const attr of attrs) {
+		const expression =
+			attr?.type === 'JSXAttribute' &&
+			attr.value?.type === 'JSXExpressionContainer' &&
+			attr.value.expression?.type !== 'JSXEmptyExpression'
+				? attr.value.expression
+				: null;
+		if (
+			expression?.type === 'CallExpression' &&
+			expression.callee?.type === 'Identifier' &&
+			expression.callee.name === CREATE_REF_PROP_INTERNAL_NAME &&
+			!expression.typeArguments
+		) {
+			expression.typeArguments = b.ts_type_parameter_instantiation([ref_target_type]);
+		}
+	}
+}
+
 /**
  * @param {any} element
  * @returns {boolean}
@@ -5597,6 +5634,115 @@ export const NORMALIZE_SPREAD_PROPS_INTERNAL_NAME = '__normalize_spread_props';
 export const MAP_ITERABLE_INTERNAL_NAME = '__map_iterable';
 export const ITERATION_VALUE_INTERNAL_NAME = '__IterationValue';
 
+const HTML_REF_TAG_NAMES = new Set(
+	'a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noscript object ol optgroup option output p picture pre progress q rp rt ruby s samp script search section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr'.split(
+		' ',
+	),
+);
+
+const SVG_REF_TAG_NAMES = new Set(
+	'a animate animateMotion animateTransform circle clipPath defs desc ellipse feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile feTurbulence filter foreignObject g image line linearGradient marker mask metadata mpath path pattern polygon polyline radialGradient rect script set stop style svg switch symbol text textPath title tspan use view'.split(
+		' ',
+	),
+);
+
+const MATHML_REF_TAG_NAMES = new Set(
+	'annotation annotation-xml maction math merror mfrac mi mmultiscripts mn mo mover mpadded mphantom mprescripts mroot mrow ms mspace msqrt mstyle msub msubsup msup mtable mtd mtext mtr munder munderover semantics'.split(
+		' ',
+	),
+);
+
+/**
+ * @param {any} value
+ * @returns {boolean}
+ */
+export function is_ref_expression_attribute_value(value) {
+	return (
+		value?.type === 'RefExpression' ||
+		(value?.type === 'JSXExpressionContainer' && value.expression?.type === 'RefExpression')
+	);
+}
+
+/**
+ * @param {any} element
+ * @param {'html' | 'svg' | 'mathml'} [namespace]
+ * @returns {AST.TypeNode | null}
+ */
+export function create_element_ref_target_type(element, namespace) {
+	const tag_name = get_element_ref_tag_name(element);
+	return tag_name === null ? null : create_element_ref_target_type_for_name(tag_name, namespace);
+}
+
+/**
+ * @param {string} tag_name
+ * @param {'html' | 'svg' | 'mathml'} [namespace]
+ * @returns {AST.TypeNode}
+ */
+export function create_element_ref_target_type_for_name(tag_name, namespace = 'html') {
+	const resolved_namespace =
+		tag_name === 'svg'
+			? 'svg'
+			: tag_name === 'math'
+				? 'mathml'
+				: namespace === 'html'
+					? infer_ref_namespace(tag_name)
+					: namespace;
+
+	if (resolved_namespace === 'svg') {
+		return SVG_REF_TAG_NAMES.has(tag_name)
+			? create_tag_name_map_ref_type('SVGElementTagNameMap', tag_name)
+			: b.ts_type_reference(b.id('SVGElement'));
+	}
+	if (resolved_namespace === 'mathml') {
+		return MATHML_REF_TAG_NAMES.has(tag_name)
+			? create_tag_name_map_ref_type('MathMLElementTagNameMap', tag_name)
+			: b.ts_type_reference(b.id('MathMLElement'));
+	}
+	return HTML_REF_TAG_NAMES.has(tag_name)
+		? create_tag_name_map_ref_type('HTMLElementTagNameMap', tag_name)
+		: b.ts_type_reference(b.id('HTMLElement'));
+}
+
+/**
+ * @param {string} tag_name
+ * @returns {'html' | 'svg' | 'mathml'}
+ */
+function infer_ref_namespace(tag_name) {
+	if (HTML_REF_TAG_NAMES.has(tag_name)) return 'html';
+	if (SVG_REF_TAG_NAMES.has(tag_name)) return 'svg';
+	if (MATHML_REF_TAG_NAMES.has(tag_name)) return 'mathml';
+	return 'html';
+}
+
+/**
+ * @param {any} element
+ * @returns {string | null}
+ */
+function get_element_ref_tag_name(element) {
+	const id = element?.id;
+	if (id?.type === 'Identifier') return id.name;
+	const name = element?.name;
+	if (name?.type === 'JSXIdentifier') return name.name;
+	if (element?.openingElement?.name?.type === 'JSXIdentifier') {
+		return element.openingElement.name.name;
+	}
+	return null;
+}
+
+/**
+ * @param {string} map_name
+ * @param {string} tag_name
+ * @returns {AST.TypeNode}
+ */
+function create_tag_name_map_ref_type(map_name, tag_name) {
+	return /** @type {AST.TypeNode} */ ({
+		type: 'TSIndexedAccessType',
+		objectType: b.ts_type_reference(b.id(map_name)),
+		indexType: b.ts_literal_type(b.literal(tag_name)),
+		metadata: { path: [] },
+	});
+}
+
 /**
  * @param {any} attr
  * @param {TransformContext} transform_context

package/types/index.d.ts

@@ -827,7 +827,7 @@ declare module 'estree' {
 	interface TSBooleanKeyword extends AcornTSNode<TSESTree.TSBooleanKeyword> {}
 	interface TSCallSignatureDeclaration extends Omit<
 		AcornTSNode<TSESTree.TSCallSignatureDeclaration>,
-		'typeParameters' | 'typeAnnotation'
+		'typeParameters' | 'params' | 'returnType'
 	> {
 		parameters: Parameter[];
 		typeParameters: TSTypeParameterDeclaration | undefined;
@@ -844,7 +844,7 @@ declare module 'estree' {
 	}
 	interface TSConstructorType extends Omit<
 		AcornTSNode<TSESTree.TSConstructorType>,
-		'typeParameters' | 'params'
+		'typeParameters' | 'params' | 'returnType'
 	> {
 		typeAnnotation: TSTypeAnnotation | undefined;
 		typeParameters: TSTypeParameterDeclaration | undefined;
@@ -852,7 +852,7 @@ declare module 'estree' {
 	}
 	interface TSConstructSignatureDeclaration extends Omit<
 		AcornTSNode<TSESTree.TSConstructSignatureDeclaration>,
-		'typeParameters' | 'typeAnnotation'
+		'typeParameters' | 'params' | 'returnType'
 	> {
 		parameters: Parameter[];
 		typeParameters: TSTypeParameterDeclaration | undefined;
@@ -892,7 +892,7 @@ declare module 'estree' {
 	}
 	interface TSFunctionType extends Omit<
 		AcornTSNode<TSESTree.TSFunctionType>,
-		'typeParameters' | 'params'
+		'typeParameters' | 'params' | 'returnType'
 	> {
 		typeAnnotation: TSTypeAnnotation | undefined;
 		typeParameters: TSTypeParameterDeclaration | undefined;
@@ -961,7 +961,7 @@ declare module 'estree' {
 	}
 	interface TSMethodSignature extends Omit<
 		AcornTSNode<TSESTree.TSMethodSignature>,
-		'key' | 'typeParameters' | 'params' | 'typeAnnotation'
+		'key' | 'typeParameters' | 'params' | 'returnType'
 	> {
 		key: PropertyNameComputed | PropertyNameNonComputed;
 		typeParameters: TSTypeParameterDeclaration | undefined;
@@ -1264,6 +1264,10 @@ export interface Binding {
 		pattern?: AST.Identifier;
 		is_ripple_object?: boolean;
 		is_template_value?: boolean;
+		lazy_array_source?: string;
+		lazy_array_index?: number;
+		lazy_array_source_tracked?: boolean;
+		lazy_array_rest?: boolean;
 	} | null;
 	/** Kind of binding */
 	kind: BindingKind;
@@ -1457,6 +1461,7 @@ export interface TransformClientState extends BaseState {
 	return_flags?: Map<AST.ReturnStatement, { name: string; tracked: boolean }>;
 	is_tsrx_element?: boolean;
 	jsx_to_tsrx_element?: boolean;
+	ref_target_type?: AST.TypeNode;
 }
 
 /** Override zimmerframe types and provide our own */

package/types/runtime/language-helpers.d.ts

@@ -15,3 +15,7 @@ export const has_own_property: typeof Object.prototype.hasOwnProperty;
 
 export function has_prototype_accessor(value: object, key: PropertyKey): boolean;
 export function array_slice(array_like: ArrayLike<any>, ...args: number[]): any[];
+export function iterable_array_from<T>(
+	iterable: Iterable<T> | Iterator<T> | ArrayLike<T>,
+	index?: number,
+): T[];

package/types/runtime/ref.d.ts

@@ -4,6 +4,13 @@ export type MergeableRefCallback<T> = {
 export type MergeableRefObject<T> = { current: T | null };
 export type MergeableVueRef<T> = { value: T | null };
 export type RefProp<T = unknown> = (node: T | null) => void | (() => void);
+export type RefValue<T = Element> =
+	| ((node: T) => void | (() => void))
+	| { current: T | null }
+	| { value: T | null }
+	| T
+	| null
+	| undefined;
 
 export type MergeableRef<T> =
 	| MergeableRefCallback<T>
@@ -14,9 +21,9 @@ export type MergeableRef<T> =
 
 export function mergeRefs<T = any>(...refs: Array<MergeableRef<T>>): (node: T | null) => () => void;
 export function isRefProp(value: unknown): boolean;
-export function create_ref_prop<T>(
-	get_ref_value: () => T,
-	set_ref_value?: (value: T) => void,
+export function create_ref_prop<T = Element>(
+	get_ref_value: () => RefValue<T>,
+	set_ref_value?: (value: any) => void,
 ): RefProp<T>;
 export function apply_ref_value<T>(
 	ref_value: unknown,