leaner 0.1.4 → 0.3.0

package/dist/core.js

@@ -92,6 +92,9 @@ function withScope( scope, callback ) {
 }
 
 function createWatcher( deps, callback, async ) {
+  if ( async )
+    callback = createSafeCallback( callback );
+
   const watcher = {
     deps,
     callback,
@@ -99,7 +102,7 @@ function createWatcher( deps, callback, async ) {
   };
 
   if ( current != null )
-    current.push( watcher );
+    current.watchers.push( watcher );
 
   if ( deps != null ) {
     for ( const dep of deps ) {
@@ -110,6 +113,24 @@ function createWatcher( deps, callback, async ) {
   return watcher;
 }
 
+function createSafeCallback( callback ) {
+  if ( current != null && current.errorHandler != null ) {
+    const handler = current.errorHandler;
+
+    return safeCallback;
+
+    function safeCallback() {
+      try {
+        callback();
+      } catch ( err ) {
+        handler( err );
+      }
+    }
+  }
+
+  return callback;
+}
+
 function updateWatcher( watcher, deps ) {
   for ( const dep of deps ) {
     dep.add( watcher );
@@ -126,7 +147,7 @@ function updateWatcher( watcher, deps ) {
 }
 
 function destroyScope( scope ) {
-  for ( const watcher of scope ) {
+  for ( const watcher of scope.watchers ) {
     watcher.callback = null;
 
     if ( watcher.deps != null ) {
@@ -540,8 +561,9 @@ function watch( getter, callback ) {
     updateWatcher( watcher, newDeps );
 
     if ( newValue !== value ) {
-      callback( newValue, value );
+      const oldValue = value;
       value = newValue;
+      callback( newValue, oldValue );
     }
   }
 }

package/dist/web.js

@@ -1,4 +1,4 @@
-import { withScope, destroyScope, reactive, constant } from 'leaner';
+import { withScope, destroyScope, reactive, constant, state } from 'leaner';
 
 function appendToArray( item, target ) {
   if ( Array.isArray( item ) )
@@ -37,15 +37,21 @@ function createComponent( template ) {
 }
 
 function createContext( parent ) {
-  return {
+  const context = {
     parent,
     children: null,
-    scope: [],
+    scope: {
+      watchers: [],
+      errorHandler: err => handleError( context, err ),
+    },
     mount: null,
     destroy: null,
     refs: null,
     services: null,
+    errorHandler: null,
   };
+
+  return context;
 }
 
 function createChildContext() {
@@ -111,40 +117,63 @@ function mountContext( context ) {
       mountContext( child );
   }
 
-  if ( context.refs != null ) {
-    for ( const ref of context.refs )
-      ref.callback( ref.element );
-  }
+  withContext( context, () => {
+    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();
-  }
+    if ( context.mount != null ) {
+      for ( const callback of context.mount )
+        callback();
+    }
+  } );
 }
 
 function destroyContext( context ) {
-  if ( context.destroy != null ) {
-    for ( const callback of context.destroy )
-      callback();
-    context.destroy = null;
-  }
+  withContext( context, () => {
+    if ( context.destroy != null ) {
+      for ( const callback of context.destroy )
+        callback();
+      context.destroy = null;
+    }
+
+    if ( context.refs != null ) {
+      for ( const ref of context.refs )
+        ref.callback( null );
+      context.refs = null;
+    }
+  } );
 
   context.mount = null;
 
-  if ( context.refs != null ) {
-    for ( const ref of context.refs )
-      ref.callback( null );
-    context.refs = null;
+  if ( context.scope.watchers.length > 0 ) {
+    destroyScope( context.scope );
+    context.scope.watchers = [];
   }
 
-  if ( context.scope.length > 0 ) {
+  if ( context.children != null ) {
+    for ( const child of context.children )
+      destroyContext( child );
+    context.children = null;
+  }
+
+  context.services = null;
+}
+
+function cleanUpContext( context ) {
+  context.destroy = null;
+  context.refs = null;
+  context.mount = null;
+
+  if ( context.scope.watchers.length > 0 ) {
     destroyScope( context.scope );
-    context.scope = [];
+    context.scope.watchers = [];
   }
 
   if ( context.children != null ) {
     for ( const child of context.children )
-      destroyContext( child );
+      cleanUpContext( child );
     context.children = null;
   }
 
@@ -162,12 +191,44 @@ function provide( key, value ) {
 }
 
 function inject( key ) {
+  if ( current == null )
+    throw new Error( 'inject() cannot be called outside of a component' );
+
   for ( let context = current; context != null; context = context.parent ) {
     if ( context.services != null && context.services.has( key ) )
       return context.services.get( key );
   }
 }
 
+function handleError( context, err ) {
+  while ( context != null) {
+    if ( context.errorHandler != null ) {
+      context.errorHandler( err );
+      return;
+    }
+    context = context.parent;
+  }
+  throw err;
+}
+
+function createSafeHandler( callback ) {
+  if ( current != null ) {
+    const context = current;
+
+    return safeHandler;
+
+    function safeHandler( e ) {
+      try {
+        callback( e );
+      } catch ( err ) {
+        handleError( context, err );
+      }
+    }
+  }
+
+  return callback;
+}
+
 function setClasses( element, classes ) {
   if ( typeof classes == 'function' ) {
     reactive( classes, value => {
@@ -295,12 +356,18 @@ function removeNode( node ) {
 }
 
 function replaceNode( newNode, node ) {
+  // this is safe because the parent of a DynamicNode is always a true DOM node
+  const parent = Array.isArray( node ) ? node[ 0 ].parentNode : node.parentNode;
+
+  // remember the value of a <select> element so that it can be restored later
+  const currentValue = parent instanceof HTMLSelectElement ? parent.value : null;
+
   if ( newNode instanceof Node && node instanceof Node ) {
-    node.parentNode.replaceChild( newNode, node );
+    parent.replaceChild( newNode, node );
   } else if ( Array.isArray( newNode ) && Array.isArray( node ) ) {
     let newStart = 0, start = 0;
     let newEnd = newNode.length, end = node.length;
-    let parent = null, before = null;
+    let before;
 
     while ( newStart < newEnd || start < end ) {
       // skip equal nodes at the start
@@ -324,13 +391,15 @@ function replaceNode( newNode, node ) {
             before = node[ start ];
             if ( before instanceof DynamicNode )
               before = findFirstChild( before.content );
-            parent = before.parentNode;
-          } else {
+          } else if ( newStart > 0 ) {
             let after = newNode[ newStart - 1 ];
             if ( after instanceof DynamicNode )
               after = findLastChild( after.content );
             before = after.nextSibling;
-            parent = after.parentNode;
+          } else {
+            before = newNode[ newEnd ];
+            if ( before instanceof DynamicNode )
+              before = findFirstChild( before.content );
           }
         }
         insertBefore( newNode[ newStart ], parent, before );
@@ -352,7 +421,6 @@ function replaceNode( newNode, node ) {
           before = node[ start ];
           if ( before instanceof DynamicNode )
             before = findFirstChild( before.content );
-          parent = before.parentNode;
         }
         insertBefore( node[ end - 1 ], parent, before );
 
@@ -375,10 +443,12 @@ function replaceNode( newNode, node ) {
   } else {
     const after = findLastChild( node );
     const before = after.nextSibling;
-    const parent = after.parentNode;
     removeNode( node );
     insertBefore( newNode, parent, before );
   }
+
+  if ( currentValue != null )
+    parent.value = currentValue;
 }
 
 function findFirstChild( node ) {
@@ -471,12 +541,16 @@ function createForDirective( template ) {
     throw new TypeError( 'Invalid for template' );
 
   const itemsGetter = template[ 1 ];
+  const callback = template[ 2 ];
+  const useIndexes = callback.length > 1;
 
   let length = 0;
   let items = null;
 
   let watchingContent = false;
 
+  let indexStates = null;
+
   const result = new DynamicNode( null );
 
   const context = createChildContext();
@@ -516,6 +590,8 @@ function createForDirective( template ) {
         oldIndexMap.set( items[ i ], i );
     }
 
+    let newIndexStates = null;
+
     for ( let index = 0; index < newItems.length; index++ ) {
       const value = newItems[ index ];
 
@@ -545,6 +621,16 @@ function createForDirective( template ) {
 
         if ( oldItemContexts != null )
           oldItemContexts.delete( itemContext );
+
+        if ( useIndexes && isMatchedByValue ) {
+          // update the index passed to the child if it's reordered
+          const indexState = indexStates.get( oldIndex );
+          if ( oldIndex != index )
+            indexState[ 1 ]( index );
+          if ( newIndexStates == null )
+            newIndexStates = new Map();
+          newIndexStates.set( index, indexState );
+        }
       } else {
         const itemContext = createContext( context );
         itemContexts.push( itemContext );
@@ -555,7 +641,26 @@ function createForDirective( template ) {
 
         const item = isMatchedByValue ? constant( value ) : itemsGetter[ index ];
 
-        const itemTemplate = template[ 2 ]( item, index );
+        let itemTemplate;
+
+        if ( useIndexes ) {
+          let indexGetter;
+
+          if ( isMatchedByValue ) {
+            // index can change in the future - use reactive state
+            const indexState = state( index );
+            if ( newIndexStates == null )
+              newIndexStates = new Map();
+            newIndexStates.set( index, indexState );
+            indexGetter = indexState[ 0 ];
+          } else {
+            indexGetter = constant( index );
+          }
+
+          itemTemplate = callback( item, indexGetter );
+        } else {
+          itemTemplate = callback( item );
+        }
 
         const node = withContext( itemContext, () => make( itemTemplate ) );
 
@@ -588,9 +693,11 @@ function createForDirective( template ) {
     else
       context.children = null;
 
+    indexStates = newIndexStates;
+
     if ( containsMatchedByValue && !watchingContent ) {
       destroyScope( context.scope );
-      context.scope = [];
+      context.scope.watchers = [];
       withScope( context.scope, () => {
         // clone the array to watch all elements
         reactive( () => [ ...itemsGetter() ], updateContent );
@@ -601,20 +708,8 @@ function createForDirective( template ) {
 }
 
 function createIfDirective( template ) {
-  let numberOfConditions = 0;
-  let hasElse = false;
-
-  for ( let i = 1; i < template.length; i += 2 ) {
-    if ( i == template.length - 1 )
-      hasElse = true;
-    else if ( typeof template[ i ] == 'function' )
-      numberOfConditions++;
-    else
-      throw new TypeError( 'Invalid if template' );
-  }
-
-  if ( numberOfConditions == 0 )
-      throw new TypeError( 'Invalid if template' );
+  if ( template.length < 2 || typeof template[ 1 ] != 'function' )
+    throw new TypeError( 'Invalid if template' );
 
   const result = new DynamicNode( null );
 
@@ -625,23 +720,88 @@ function createIfDirective( template ) {
   return result;
 
   function watchState() {
-    let state = null;
+    return template[ 1 ]();
+  }
 
-    for ( let i = 0; i < numberOfConditions; i++ ) {
-      if ( template[ 2 * i + 1 ]() ) {
-        state = 2 * i + 2;
-        break;
-      }
+  function update( state ) {
+    let childTemplate = null;
+    if ( state ) {
+      if ( template.length == 3 )
+        childTemplate = template[ 2 ];
+      else
+        childTemplate = [ template.slice( 2 ) ];
     }
+    updateDynamicNode( result, context, childTemplate );
+  }
+}
 
-    if ( state == null && hasElse )
-      state = template.length - 1;
+function createRepeatDirective( template ) {
+  if ( template.length != 3 || typeof template[ 2 ] != 'function' )
+    throw new TypeError( 'Invalid repeat template' );
 
-    return state;
+  let count = 0;
+
+  const result = new DynamicNode( null );
+
+  const context = createChildContext();
+
+  if ( typeof template[ 1 ] == 'function' ) {
+    withScope( context.scope, () => {
+      reactive( template[ 1 ], updateCount );
+    } );
+  } else {
+    updateCount( template[ 1 ] );
   }
 
-  function update( state ) {
-    updateDynamicNode( result, context, state != null ? template[ state ] : null );
+  return result;
+
+  function updateCount( newCount ) {
+    if ( newCount > count ) {
+      const nodes = result.content != null ? result.content.slice( 0, count ) : [];
+      const contexts = context.children != null ? context.children.slice( 0, count ) : [];
+
+      for ( let i = count; i < newCount; i++ ) {
+        const itemContext = createContext( context );
+        contexts.push( itemContext );
+
+        const itemTemplate = template[ 2 ]( i );
+
+        const node = withContext( itemContext, () => make( itemTemplate ) );
+
+        if ( Array.isArray( node ) )
+          nodes.push( new DynamicNode( node ) );
+        else
+          nodes.push( node );
+      }
+
+      if ( result.content != null ) {
+        replaceNode( nodes, result.content );
+
+        for ( let i = count; i < newCount; i++ )
+          mountContext( contexts[ i ] );
+      }
+
+      result.content = nodes;
+      context.children = contexts;
+    } else {
+      for ( let i = newCount; i < count; i++ )
+        destroyContext( context.children[ i ] );
+
+      const nodes = result.content != null ? result.content.slice( 0, newCount ) : [];
+      ensureNotEmpty( nodes );
+
+      if ( result.content != null )
+        replaceNode( nodes, result.content );
+
+      result.content = nodes;
+
+      if ( newCount == 0 )
+        context.children = null;
+      else if ( context.children != null )
+        context.children = context.children.slice( 0, newCount );
+    }
+
+    count = newCount;
   }
 }
 
@@ -683,10 +843,104 @@ function setStyleProperty( element, key, value ) {
     element.style[ key ] = value;
 }
 
+function createSwitchDirective( template ) {
+  let numberOfConditions = 0;
+  let hasElse = false;
+
+  for ( let i = 1; i < template.length; i++ ) {
+    const condition = template[ i ];
+    if ( Array.isArray( condition ) && condition.length > 1 && condition[ 0 ] === 'if' && typeof condition[ 1 ] == 'function' )
+      numberOfConditions++;
+    else if ( i == template.length - 1 && Array.isArray( condition ) && condition.length > 0 && condition[ 0 ] === 'else' )
+      hasElse = true;
+    else
+      throw new TypeError( 'Invalid switch template' );
+  }
+
+  if ( numberOfConditions == 0 )
+    throw new TypeError( 'Invalid switch template' );
+
+  const result = new DynamicNode( null );
+
+  const context = createChildContext();
+
+  reactive( watchState, update );
+
+  return result;
+
+  function watchState() {
+    let state = null;
+
+    for ( let i = 0; i < numberOfConditions; i++ ) {
+      if ( template[ i + 1 ][ 1 ]() ) {
+        state = i + 1;
+        break;
+      }
+    }
+
+    if ( state == null && hasElse )
+      state = template.length - 1;
+
+    return state;
+  }
+
+  function update( state ) {
+    let childTemplate = null;
+    if ( state != null ) {
+      const condition = template[ state ];
+      const index = condition[ 0 ] == 'else' ? 1 : 2;
+      if ( condition.length == index + 1 )
+        childTemplate = condition[ index ];
+      else
+        childTemplate = [ condition.slice( index ) ];
+    }
+    updateDynamicNode( result, context, childTemplate );
+  }
+}
+
+function createTryDirective( template ) {
+  if ( template.length != 3 || typeof template[ 2 ] != 'function' )
+    throw new TypeError( 'Invalid try template' );
+
+  const result = new DynamicNode( null );
+
+  const context = createChildContext();
+
+  try {
+    updateDynamicNode( result, context, template[ 1 ] );
+  } catch ( err ) {
+    updateErrorState( err );
+    return result;
+  }
+
+  context.errorHandler = asyncErrorHandler;
+
+  return result;
+
+  function asyncErrorHandler( err ) {
+    try {
+      updateErrorState( err );
+    } catch ( err ) {
+      handleError( context, err );
+    }
+  }
+
+  function updateErrorState( err ) {
+    context.errorHandler = null;
+    if ( result.content == null )
+      cleanUpContext( context );
+    updateDynamicNode( result, context, template[ 2 ]( err ) );
+  }
+}
+
 const Directives = {
-  if: createIfDirective,
-  for: createForDirective,
   dynamic: createDynamicDirective,
+  else: unexpectedDirective,
+  for: createForDirective,
+  if: createIfDirective,
+  repeat: createRepeatDirective,
+  switch: createSwitchDirective,
+  try: createTryDirective,
 };
 
 const Properties = new Set( [ 'value', 'checked', 'textContent', 'innerHTML' ] );
@@ -779,7 +1033,7 @@ function setElementProperties( element, properties ) {
 
 function setElementProperty( element, key, value ) {
   if ( key.startsWith( 'on' ) ) {
-    element.addEventListener( key.substring( 2 ), value );
+    element.addEventListener( key.substring( 2 ), createSafeHandler( value ) );
   } else if ( Properties.has( key ) ) {
     if ( typeof value == 'function' )
       reactive( value, value => element[ key ] = value != null ? value : '' );
@@ -807,6 +1061,10 @@ function setElementAttribute( element, name, value ) {
   }
 }
 
+function unexpectedDirective( template ) {
+  throw new TypeError( `Unexpected ${template[ 0 ]} directive` );
+}
+
 function createApp( component ) {
   const context = createContext( null );
 

package/package.json

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

package/types/core.d.ts

@@ -14,7 +14,7 @@ type ArrayGetter<T> = {
   readonly [ index: number ]: Getter<T>;
   get( index: number | ( () => number ) ): Getter<T>;
   length(): number;
-}
+};
 
 declare class Mutator<T> {
   private callback: ( value: T ) => void;