leaner 0.1.1 → 0.1.3

package/dist/core.js

@@ -161,7 +161,7 @@ function stateGetterGet( target, prop ) {
   }
 
   if ( prop === Symbol.toPrimitive )
-    throw new Error( 'Using a state getter as a primitive value is not allowed' );
+    throw new TypeError( 'Using a state getter as a primitive value is not allowed' );
 
   return createChildStateGetterProxy( target, prop );
 }
@@ -329,8 +329,8 @@ function computedGetterGet( target, prop ) {
     };
   }
 
-  if ( prop == Symbol.toPrimitive )
-    throw new Error( 'Cannot use a computed getter as array index; use the get() method instead' );
+  if ( prop === Symbol.toPrimitive )
+    throw new TypeError( 'Using a computed getter as a primitive value is not allowed' );
 
   return createChildComputedProxy( target, prop );
 }
@@ -623,4 +623,16 @@ function transform( value, callback ) {
     return callback( value );
 }
 
-export { computed, constant, destroyScope, effect, mutate, reactive, schedule, state, transform, watch, withScope };
+function get( value ) {
+  if ( typeof value == 'function' )
+    return value();
+  return value;
+}
+
+function getter( value ) {
+  if ( typeof value == 'function' )
+    return value;
+  return constant( value );
+}
+
+export { computed, constant, destroyScope, effect, get, getter, mutate, reactive, schedule, state, transform, watch, withScope };

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
@@ -690,13 +720,20 @@ function make( template ) {
 
       const element = document.createElement( tag );
 
+      let properties = null;
+
       let i = 1;
-      if ( i < template.length && isPlainObject( template[ i ] ) )
-        setElementProperties( element, template[ i++ ] );
+      if ( i < template.length && isPlainObject( template[ i ] ) ) {
+        properties = template[ i++ ];
+        setElementProperties( element, properties );
+      }
 
       for ( ; i < template.length; i++ )
         appendNode( make( template[ i ] ), element );
 
+      if ( properties != null && 'value' in properties )
+        setElementProperty( element, 'value', properties.value );
+
       return element;
     }
 
@@ -728,7 +765,10 @@ function setElementProperties( element, properties ) {
         setStyles( element, value );
         break;
       case 'ref':
-        value( element );
+        createRef( value, element );
+        break;
+      case 'value':
+        // this property must be set after other properties are set and children are appended
         break;
       default:
         setElementProperty( element, key, value );
@@ -742,9 +782,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.3",
   "description": "Thin, reactive wrapper for DOM",
   "type": "module",
   "files": [