leaner 0.2.0 → 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 ) {

package/dist/web.js

@@ -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() {
@@ -141,9 +147,9 @@ function destroyContext( context ) {
 
   context.mount = null;
 
-  if ( context.scope.length > 0 ) {
+  if ( context.scope.watchers.length > 0 ) {
     destroyScope( context.scope );
-    context.scope = [];
+    context.scope.watchers = [];
   }
 
   if ( context.children != null ) {
@@ -155,6 +161,25 @@ function destroyContext( context ) {
   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.watchers = [];
+  }
+
+  if ( context.children != null ) {
+    for ( const child of context.children )
+      cleanUpContext( child );
+    context.children = null;
+  }
+
+  context.services = null;
+}
+
 function provide( key, value ) {
   if ( current == null )
     throw new Error( 'provide() cannot be called outside of a component' );
@@ -175,6 +200,35 @@ function inject( 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 => {
@@ -643,7 +697,7 @@ function createForDirective( template ) {
 
     if ( containsMatchedByValue && !watchingContent ) {
       destroyScope( context.scope );
-      context.scope = [];
+      context.scope.watchers = [];
       withScope( context.scope, () => {
         // clone the array to watch all elements
         reactive( () => [ ...itemsGetter() ], updateContent );
@@ -844,6 +898,41 @@ function createSwitchDirective( template ) {
   }
 }
 
+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 = {
   dynamic: createDynamicDirective,
   else: unexpectedDirective,
@@ -851,6 +940,7 @@ const Directives = {
   if: createIfDirective,
   repeat: createRepeatDirective,
   switch: createSwitchDirective,
+  try: createTryDirective,
 };
 
 const Properties = new Set( [ 'value', 'checked', 'textContent', 'innerHTML' ] );
@@ -943,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 : '' );

package/package.json

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