leaner 0.1.1 → 0.1.2

package/dist/web.js

@@ -43,6 +43,7 @@ function createContext( parent ) {
     scope: [],
     mount: null,
     destroy: null,
+    refs: null,
     services: null,
   };
 }
@@ -94,12 +95,27 @@ function onDestroy( callback ) {
   current.destroy.push( callback );
 }
 
+function createRef( callback, element ) {
+  if ( current != null ) {
+    if ( current.refs == null )
+      current.refs = [];
+    current.refs.push( { callback, element } );
+  } else {
+    callback( element );
+  }
+}
+
 function mountContext( context ) {
   if ( context.children != null ) {
     for ( const child of context.children )
       mountContext( child );
   }
 
+  if ( context.refs != null ) {
+    for ( const ref of context.refs )
+      ref.callback( ref.element );
+  }
+
   if ( context.mount != null ) {
     for ( const callback of context.mount )
       callback();
@@ -113,7 +129,13 @@ function destroyContext( context ) {
     context.destroy = null;
   }
 
-  context.mounted = null;
+  context.mount = null;
+
+  if ( context.refs != null ) {
+    for ( const ref of context.refs )
+      ref.callback( null );
+    context.refs = null;
+  }
 
   if ( context.scope.length > 0 ) {
     destroyScope( context.scope );
@@ -125,6 +147,8 @@ function destroyContext( context ) {
       destroyContext( child );
     context.children = null;
   }
+
+  context.services = null;
 }
 
 function provide( key, value ) {
@@ -150,15 +174,17 @@ function setClasses( element, classes ) {
       if ( Array.isArray( value ) ) {
         element.className = '';
         element.classList.add( ...value );
-      } else {
+      } else if ( value != null ) {
         element.className = value;
+      } else {
+        element.removeAttribute( 'class' );
       }
     } );
   } else if ( isPlainObject( classes ) ) {
     setClassesObject( element, classes );
   } else if ( Array.isArray( classes ) ) {
     setClassesArray( element, classes );
-  } else {
+  } else if ( classes != null ) {
     element.className = classes;
   }
 }
@@ -197,7 +223,7 @@ function setClassesArray( element, classes ) {
       } );
     } else if ( isPlainObject( item ) ) {
       setClassesObject( element, item );
-    } else {
+    } else if ( item != null ) {
       element.classList.add( item );
     }
   }
@@ -626,13 +652,15 @@ function setStyles( element, styles ) {
         element.style = '';
         for ( const [ key, value ] of Object.entries( value ) )
           setStyleProperty( element, key, value );
-      } else {
+      } else if ( value != null ) {
         element.style = value;
+      } else {
+        element.removeAttribute( 'style' );
       }
     } );
   } else if ( isPlainObject( styles ) ) {
     setStylesObject( element, styles );
-  } else {
+  } else if ( styles != null ) {
     element.style = styles;
   }
 }
@@ -640,13 +668,15 @@ function setStyles( element, styles ) {
 function setStylesObject( element, styles ) {
   for ( const [ key, value ] of Object.entries( styles ) ) {
     if ( typeof value == 'function' )
-      reactive( value, value => element.style[ key ] = value );
+      reactive( value, value => setStyleProperty( element, key, value ) );
     else
       setStyleProperty( element, key, value );
   }
 }
 
 function setStyleProperty( element, key, value ) {
+  if ( value == null )
+    value = '';
   if ( key.startsWith( '--' ) )
     element.style.setProperty( key, value );
   else
@@ -728,7 +758,7 @@ function setElementProperties( element, properties ) {
         setStyles( element, value );
         break;
       case 'ref':
-        value( element );
+        createRef( value, element );
         break;
       default:
         setElementProperty( element, key, value );
@@ -742,9 +772,9 @@ function setElementProperty( element, key, value ) {
     element.addEventListener( key.substring( 2 ), value );
   } else if ( Properties.has( key ) ) {
     if ( typeof value == 'function' )
-      reactive( value, value => element[ key ] = value );
+      reactive( value, value => element[ key ] = value != null ? value : '' );
     else
-      element[ key ] = value;
+      element[ key ] = value != null ? value : '';
   } else {
     if ( typeof value == 'function' )
       reactive( value, value => setElementAttribute( element, key, value ) );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaner",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Thin, reactive wrapper for DOM",
   "type": "module",
   "files": [