x4js 2.3.7 → 2.3.9

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

@@ -14,6 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
+import { Box } from './components/boxes/boxes.js';
 export { }
 
 declare global {
@@ -21,6 +22,10 @@ declare global {
 		interface IntrinsicElements {
 			[ name: string ]: any;
 		}
+
+		interface IntrinsicClassAttributes<T> {
+			ref?: [ owner: Box<any, any>, name: string ];
+		}
 	}
 }