x4js 2.3.7 → 2.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/core/component.ts

@@ -22,10 +22,6 @@ import { addEvent, DOMEventHandler, GlobalDOMEvents, COMPONENT } from './core_do
 import { Application, EvMessage } from './core_application';
 import { makeState } from './core_state.js';
 
-interface RefType<T extends Component> {
-	dom: T;
-}
-
 type ComponentAttributes = Record<string,string|number|boolean>;
 type CreateComponentCallBack =  ( attrs: Record<string,string> ) => ComponentContent;
 
@@ -95,8 +91,6 @@ export interface ComponentProps {
     cls?: string;
 	/** Element ID. */
     id?: string;
-	/** Reference to the component instance. */
-    ref?: RefType<any>;
 	
 	// shortcuts
 	/** Width (px or string like `"50%"` or `"3em"`). */
@@ -628,7 +622,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 				set( child );
 			}
 
-			d.insertBefore( d.firstChild, fragment );
+			d.insertBefore( fragment, d.firstChild );
 		}
 	}
 

package/src/core/core_element.ts

@@ -259,8 +259,10 @@ export class CoreElement<E extends EventMap = EventMap> {
 
 	cleanUp( ) {
 		this.clearTimeouts( );
-		this.#cleanup?.forEach( x => x() );
-		this.#cleanup.length = 0;
+		if( this.#cleanup ) {
+			this.#cleanup.forEach( x => x() );
+			this.#cleanup.length = 0;
+		}
 	}
 
 	// :: EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

package/src/core/core_react.ts

@@ -46,32 +46,52 @@ import { Constructor, isString } from './core_tools';
 export class x4_react {
 
 	static create_element( tag: string, props: any, ...content: any[] ): Component;
-	static create_element<X extends Component>( tag: string | Constructor<X>, props: X["props"], ...content: any[] ) {
-		
-		props = props || {};
+	static create_element<X extends Component>( tag: string | Constructor<X>, props: X["props"], ...children: any[] ) {
+
+		// ref is a JSX-only attribute: never passed to the component
+		const { ref, ...attrs } = ( props ?? {} ) as any;
+
+		// flatten {items.map(...)} and drop null / false from conditional children
+		const content = children.flat( Infinity )
+								.filter( c => c !== null && c !== undefined && c !== false );
 
 		let el: Component;
 
-		// --- simple div ------------------------
-		if( isString(tag) ) {
+		// --- simple html element ------------------------
+		if( isString( tag ) ) {
 			el = new Component( { tag } );
-			Object.entries( props )
-				.forEach(([name, value]) => {
-					if (name.startsWith('on') && name.toLowerCase() in window) {
-						el.dom.addEventListener(name.toLowerCase().substring(2), value)
+
+			Object.entries( attrs )
+				.forEach( ( [name, value]: [string, any] ) => {
+					if( name.startsWith( 'on' ) && name.toLowerCase( ) in window ) {
+						el.dom.addEventListener( name.toLowerCase( ).substring( 2 ), value );
 					}
 					else {
-						el.setAttribute(name, value )
+						el.setAttribute( name, value );
 					}
 				});
+
+			if( content.length ) {
+				el.setContent( content );
+			}
 		}
 		// --- Component ------------------------
 		else {
-			el = new tag( props );
+			// same path as object construction: <X a={1}>{kids}</X> === new X({ a: 1, content: kids })
+			el = new tag( content.length ? { ...attrs, content } : attrs );
 		}
 
-		if( content && content.length ) {
-			el.appendContent( content );
+		// ref={[owner, "name"]} stores the element in owner.refs.name
+		if( ref ) {
+			const [owner, name] = ref;
+
+			// the owner must be a Box: only Box has refs
+			if( !owner?.refs || typeof name !== "string" ) {
+				console.error( "invalid JSX ref, expected [ownerBox, \"name\"]:", ref );
+			}
+			else {
+				owner.refs[name] = el;
+			}
 		}
 
 		return el;

package/src/x4tsx.d.ts

@@ -21,6 +21,10 @@ declare global {
 		interface IntrinsicElements {
 			[ name: string ]: any;
 		}
+
+		interface IntrinsicClassAttributes<T> {
+			ref?: [ owner: object, name: string ];
+		}
 	}
 }