leaner 0.0.1 → 0.1.0

package/dist/web.js

@@ -1,4 +1,4 @@
-import { useReactive, useReactiveWatch, useConstant } from 'leaner';
+import { withScope, destroyScope, reactive, constant } from 'leaner';
 
 function appendToArray( item, target ) {
   if ( Array.isArray( item ) )
@@ -40,8 +40,10 @@ function createContext( parent ) {
   return {
     parent,
     children: null,
+    scope: [],
     mount: null,
     destroy: null,
+    services: null,
   };
 }
 
@@ -61,7 +63,7 @@ function withContext( context, callback ) {
   const last = current;
   current = context;
   try {
-    return callback();
+    return withScope( current.scope, callback );
   } finally {
     current = last;
   }
@@ -70,7 +72,7 @@ function withContext( context, callback ) {
 function withChildContext( callback ) {
   current = createChildContext();
   try {
-    return callback();
+    return withScope( current.scope, callback );
   } finally {
     current = current.parent;
   }
@@ -108,20 +110,43 @@ function destroyContext( context ) {
   if ( context.destroy != null ) {
     for ( const callback of context.destroy )
       callback();
+    context.destroy = null;
+  }
+
+  context.mounted = null;
+
+  if ( context.scope.length > 0 ) {
+    destroyScope( context.scope );
+    context.scope = [];
   }
 
   if ( context.children != null ) {
     for ( const child of context.children )
       destroyContext( child );
-
     context.children = null;
   }
 }
 
+function provide( key, value ) {
+  if ( current == null )
+    throw new Error( 'provide() cannot be called outside of a component' );
+
+  if ( current.services == null )
+    current.services = new Map();
+
+  current.services.set( key, value );
+}
+
+function inject( key ) {
+  for ( let context = current; context != null; context = context.parent ) {
+    if ( context.services != null && context.services.has( key ) )
+      return context.services.get( key );
+  }
+}
+
 function setClasses( element, classes ) {
   if ( typeof classes == 'function' ) {
-    useReactive( () => {
-      const value = classes();
+    reactive( classes, value => {
       if ( Array.isArray( value ) ) {
         element.className = '';
         element.classList.add( ...value );
@@ -141,11 +166,14 @@ function setClasses( element, classes ) {
 function setClassesObject( element, classes ) {
   for ( const [ key, value ] of Object.entries( classes ) ) {
     if ( typeof value == 'function' ) {
-      useReactive( () => {
-        if ( value() )
-          element.classList.add( key );
-        else
-          element.classList.remove( key );
+      reactive( value, ( newValue, value ) => {
+        if ( newValue ) {
+          if ( !value )
+            element.classList.add( key );
+        } else {
+          if ( value )
+            element.classList.remove( key );
+        }
       } );
     } else if ( value ) {
       element.classList.add( key );
@@ -156,18 +184,16 @@ function setClassesObject( element, classes ) {
 function setClassesArray( element, classes ) {
   for ( const item of classes ) {
     if ( typeof item == 'function' ) {
-      let value = '';
-      useReactive( () => {
-        const newValue = item();
-        if ( newValue === value )
-          return;
-        if ( value === '' )
-          element.classList.add( newValue );
-        else if ( newValue === '' )
-          element.classList.remove( value );
-        else
-          element.classList.replace( value, newValue );
-        value = newValue;
+      reactive( item, ( newValue, value ) => {
+        if ( newValue ) {
+          if ( value )
+            element.classList.replace( value, newValue );
+          else
+            element.classList.add( newValue );
+        } else {
+          if ( value )
+            element.classList.remove( value );
+        }
       } );
     } else if ( isPlainObject( item ) ) {
       setClassesObject( element, item );
@@ -180,38 +206,45 @@ function setClassesArray( element, classes ) {
 class DynamicNode {
   constructor( content ) {
     this.content = content;
+    this.parentNode = null;
   }
 }
 
-function appendNode( node, target ) {
+function appendNode( node, parent ) {
   if ( Array.isArray( node ) ) {
     if ( node.some( item => item instanceof DynamicNode ) ) {
       for ( const item of node ) {
-        if ( item instanceof DynamicNode )
-          appendNode( item.content, target );
-        else
-          target.append( item );
+        if ( item instanceof DynamicNode ) {
+          item.parentNode = parent;
+          appendNode( item.content, parent );
+        } else {
+          parent.append( item );
+        }
       }
     } else {
-      target.append( ...node );
+      parent.append( ...node );
     }
   } else if ( node instanceof DynamicNode ) {
-    appendNode( node.content, target );
+    node.parentNode = parent;
+    appendNode( node.content, parent );
   } else {
-    target.append( node );
+    parent.append( node );
   }
 }
 
 function insertBefore( node, parent, before ) {
   if ( Array.isArray( node ) ) {
     for ( const item of node ) {
-      if ( item instanceof DynamicNode )
+      if ( item instanceof DynamicNode ) {
+        item.parentNode = parent;
         insertBefore( item.content, parent, before );
-      else
+      } else {
         parent.insertBefore( item, before );
+      }
     }
   } else if ( node instanceof DynamicNode ) {
-    insertBefore( node.content, before );
+    node.parentNode = parent;
+    insertBefore( node.content, parent, before );
   } else {
     parent.insertBefore( node, before );
   }
@@ -219,40 +252,133 @@ function insertBefore( node, parent, before ) {
 
 function removeNode( node ) {
   if ( Array.isArray( node ) ) {
-    let parent = null, before = null;
     for ( const item of node ) {
       if ( item instanceof DynamicNode ) {
-        [ parent, before ] = removeNode( item.content );
+        removeNode( item.content );
+        item.parentNode = null;
       } else {
-        parent = item.parentNode;
-        before = item.nextSibling;
-        parent.removeChild( item );
+        item.parentNode.removeChild( item );
       }
     }
-    return [ parent, before ];
+  } else if ( node instanceof DynamicNode ) {
+    removeNode( node.content );
+    node.parentNode = null;
+  } else {
+    node.parentNode.removeChild( node );
   }
-
-  if ( node instanceof DynamicNode )
-    return removeNode( node.content );
-
-  const parent = node.parentNode;
-  const before = node.nextSibling;
-
-  parent.removeChild( node );
-
-  return [ parent, before ];
 }
 
 function replaceNode( newNode, node ) {
   if ( newNode instanceof Node && node instanceof Node ) {
     node.parentNode.replaceChild( newNode, node );
-  } else {
-    const [ parent, before ] = removeNode( 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;
+
+    while ( newStart < newEnd || start < end ) {
+      // skip equal nodes at the start
+      if ( newNode[ newStart ] == node[ start ] ) {
+        newStart++;
+        start++;
+        before = null;
+        continue;
+      }
+
+      // skip equal nodes at the end
+      while ( newNode[ newEnd - 1 ] == node[ end - 1 ] ) {
+        newEnd--;
+        end--;
+      }
+
+      // insert new node
+      if ( newStart < newEnd && newNode[ newStart ].parentNode == null ) {
+        if ( before == null ) {
+          if ( start < end ) {
+            before = node[ start ];
+            if ( before instanceof DynamicNode )
+              before = findFirstChild( before.content );
+            parent = before.parentNode;
+          } else {
+            let after = newNode[ newStart - 1 ];
+            if ( after instanceof DynamicNode )
+              after = findLastChild( after.content );
+            before = after.nextSibling;
+            parent = after.parentNode;
+          }
+        }
+        insertBefore( newNode[ newStart ], parent, before );
+        newStart++;
+        continue;
+      }
+
+      // swap nodes
+      if ( newNode[ newStart ] == node[ end - 1 ] && newNode[ newEnd - 1 ] == node[ start ] ) {
+        let after, before2;
+        if ( end - start > 2 ) {
+          after = node[ end - 1 ];
+          if ( after instanceof DynamicNode )
+            after = findLastChild( after.content );
+          before2 = after.nextSibling;
+        }
+
+        if ( before == null ) {
+          before = node[ start ];
+          if ( before instanceof DynamicNode )
+            before = findFirstChild( before.content );
+          parent = before.parentNode;
+        }
+        insertBefore( node[ end - 1 ], parent, before );
+
+        if ( after != null )
+          insertBefore( node[ start ], parent, before2 );
+
+        start++;
+        newStart++;
+        end--;
+        newEnd--;
 
+        continue;
+      }
+
+      // remove node
+      removeNode( node[ start ] );
+      start++;
+      before = null;
+    }
+  } else {
+    const after = findLastChild( node );
+    const before = after.nextSibling;
+    const parent = after.parentNode;
+    removeNode( node );
     insertBefore( newNode, parent, before );
   }
 }
 
+function findFirstChild( node ) {
+  if ( Array.isArray( node ) ) {
+    const item = node[ 0 ];
+    if ( item instanceof DynamicNode )
+      return findFirstChild( item.content );
+    return item;
+  }
+  if ( node instanceof DynamicNode )
+    return findFirstChild( node.content );
+  return node;
+}
+
+function findLastChild( node ) {
+  if ( Array.isArray( node ) ) {
+    const item = node[ node.length - 1 ];
+    if ( item instanceof DynamicNode )
+      return findLastChild( item.content );
+    return item;
+  }
+  if ( node instanceof DynamicNode )
+    return findLastChild( node.content );
+  return node;
+}
+
 function ensureNotEmpty( node ) {
   if ( isEmpty( node ) ) {
     const comment = document.createComment( '' );
@@ -305,7 +431,7 @@ function createDynamicDirective( template ) {
 
   const context = createChildContext();
 
-  useReactiveWatch( type, update );
+  reactive( type, update );
 
   return result;
 
@@ -318,6 +444,8 @@ function createForDirective( template ) {
   if ( template.length != 3 || typeof template[ 1 ] != 'function' || typeof template[ 2 ] != 'function' )
     throw new TypeError( 'Invalid for template' );
 
+  const itemsGetter = template[ 1 ];
+
   let length = 0;
   let items = null;
 
@@ -327,25 +455,16 @@ function createForDirective( template ) {
 
   const context = createChildContext();
 
-  useReactiveWatch( watchLength, updateLength );
+  withScope( context.scope, () => {
+    // initially only watch the length of the items array
+    reactive( itemsGetter.length, updateLength );
+  } );
 
   return result;
 
-  function watchLength() {
-    if ( !watchingContent )
-      return template[ 1 ].length();
-  }
-
   function updateLength( newLength ) {
-    if ( !watchingContent ) {
-      update( template[ 1 ]() );
-      length = newLength;
-    }
-  }
-
-  function watchContent() {
-    // clone the array to watch all elements
-    return [ ...template[ 1 ]() ];
+    update( itemsGetter() );
+    length = newLength;
   }
 
   function updateContent( newItems ) {
@@ -364,6 +483,13 @@ function createForDirective( template ) {
 
     let containsMatchedByValue = false;
 
+    let oldIndexMap = null;
+    if ( watchingContent && items.length != 0 && newItems.length != 0 ) {
+      oldIndexMap = new Map();
+      for ( let i = 0; i < items.length; i++ )
+        oldIndexMap.set( items[ i ], i );
+    }
+
     for ( let index = 0; index < newItems.length; index++ ) {
       const value = newItems[ index ];
 
@@ -372,20 +498,20 @@ function createForDirective( template ) {
       if ( isMatchedByValue )
         containsMatchedByValue = true;
 
-      let oldIndex = -1;
+      let oldIndex = null;
 
       // reuse existing items - objects and arrays are matched by value, other items by index
       if ( result.content != null ) {
         if ( isMatchedByValue ) {
-          if ( items != null )
-            oldIndex = items.indexOf( value );
+          if ( oldIndexMap != null )
+            oldIndex = oldIndexMap.get( value );
         } else if ( index < length ) {
           if ( items == null || !isPlainObjectOrArray( items[ index ] ) )
             oldIndex = index;
         }
       }
 
-      if ( oldIndex >= 0 ) {
+      if ( oldIndex != null ) {
         nodes.push( result.content[ oldIndex ] );
 
         const itemContext = context.children[ oldIndex ];
@@ -401,7 +527,7 @@ function createForDirective( template ) {
           newItemContexts = [];
         newItemContexts.push( itemContext );
 
-        const item = isMatchedByValue ? useConstant( value ) : template[ 1 ][ index ];
+        const item = isMatchedByValue ? constant( value ) : itemsGetter[ index ];
 
         const itemTemplate = template[ 2 ]( item, index );
 
@@ -437,7 +563,12 @@ function createForDirective( template ) {
       context.children = null;
 
     if ( containsMatchedByValue && !watchingContent ) {
-      useReactiveWatch( watchContent, updateContent );
+      destroyScope( context.scope );
+      context.scope = [];
+      withScope( context.scope, () => {
+        // clone the array to watch all elements
+        reactive( () => [ ...itemsGetter() ], updateContent );
+      } );
       watchingContent = true;
     }
   }
@@ -463,7 +594,7 @@ function createIfDirective( template ) {
 
   const context = createChildContext();
 
-  useReactiveWatch( watchState, update );
+  reactive( watchState, update );
 
   return result;
 
@@ -490,8 +621,7 @@ function createIfDirective( template ) {
 
 function setStyles( element, styles ) {
   if ( typeof styles == 'function' ) {
-    useReactive( () => {
-      const value = styles();
+    reactive( styles, value => {
       if ( isPlainObject( value ) ) {
         element.style = '';
         for ( const [ key, value ] of Object.entries( value ) )
@@ -510,7 +640,7 @@ function setStyles( element, styles ) {
 function setStylesObject( element, styles ) {
   for ( const [ key, value ] of Object.entries( styles ) ) {
     if ( typeof value == 'function' )
-      useReactive( () => element.style[ key ] = value() );
+      reactive( value, value => element.style[ key ] = value );
     else
       setStyleProperty( element, key, value );
   }
@@ -523,12 +653,20 @@ function setStyleProperty( element, key, value ) {
     element.style[ key ] = value;
 }
 
-const directives = {
+const Directives = {
   if: createIfDirective,
   for: createForDirective,
   dynamic: createDynamicDirective,
 };
 
+const Properties = new Set( [ 'value', 'checked', 'textContent', 'innerHTML' ] );
+
+const BooleanAttributes = new Set( [
+  'allowfullscreen', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'defer', 'disabled', 'formnovalidate', 'hidden',
+  'inert', 'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly',
+  'required', 'reversed', 'seamless', 'scoped', 'selected',
+] );
+
 function make( template ) {
   if ( template == null )
     return [];
@@ -547,8 +685,8 @@ function make( template ) {
     if ( typeof template[ 0 ] == 'string' ) {
       const tag = template[ 0 ];
 
-      if ( directives.hasOwnProperty( tag ) )
-        return directives[ tag ]( template );
+      if ( Directives.hasOwnProperty( tag ) )
+        return Directives[ tag ]( template );
 
       const element = document.createElement( tag );
 
@@ -570,7 +708,7 @@ function make( template ) {
 
   if ( typeof template == 'function' ) {
     const textNode = document.createTextNode( '' );
-    useReactive( () => textNode.textContent = template() );
+    reactive( template, value => textNode.textContent = value );
     return textNode;
   }
 
@@ -600,39 +738,61 @@ function setElementProperties( element, properties ) {
 }
 
 function setElementProperty( element, key, value ) {
-  if ( key in element ) {
-    if ( typeof value == 'function' && !key.startsWith( 'on' ) )
-      useReactive( () => element[ key ] = value() );
+  if ( key.startsWith( 'on' ) ) {
+    element.addEventListener( key.substring( 2 ), value );
+  } else if ( Properties.has( key ) ) {
+    if ( typeof value == 'function' )
+      reactive( value, value => element[ key ] = value );
     else
       element[ key ] = value;
   } else {
     if ( typeof value == 'function' )
-      useReactive( () => element.setAttribute( key, value() ) );
+      reactive( value, value => setElementAttribute( element, key, value ) );
     else
-      element.setAttribute( key, value );
+      setElementAttribute( element, key, value );
   }
 }
 
-function mount( component, target ) {
-  const context = {
-    parent: null,
-    children: [],
-  };
-
-  const root = withContext( context, () => make( component( {}, [] ) ) );
+function setElementAttribute( element, name, value ) {
+  if ( BooleanAttributes.has( name ) ) {
+    if ( value || value === '' )
+      element.setAttribute( name, '' );
+    else
+      element.removeAttribute( name );
+  } else {
+    if ( value != null )
+      element.setAttribute( name, value );
+    else
+      element.removeAttribute( name );
+  }
+}
 
-  appendNode( root, target );
+function createApp( component ) {
+  const context = createContext( null );
 
-  mountContext( context );
+  let root;
 
   return {
-    destroy,
+    mount( target ) {
+      root = withContext( context, () => make( component( {}, [] ) ) );
+      appendNode( root, target );
+      mountContext( context );
+    },
+
+    destroy() {
+      destroyContext( context );
+      removeNode( root );
+      root = null;
+    },
+
+    provide( key, value ) {
+      withContext( context, () => provide( key, value ) );
+    },
+
+    use( callback ) {
+      withContext( context, callback );
+    },
   };
-
-  function destroy() {
-    destroyContext( context );
-    removeNode( root );
-  }
 }
 
-export { mount, onDestroy, onMount };
+export { createApp, inject, onDestroy, onMount, provide };

package/package.json

@@ -1,23 +1,32 @@
 {
   "name": "leaner",
-  "version": "0.0.1",
-  "description": "Leaner.js",
+  "version": "0.1.0",
+  "description": "Thin, reactive wrapper for DOM",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "types"
   ],
   "exports": {
-    ".": "./dist/core.js",
-    "./web": "./dist/web.js",
+    ".": {
+      "types": "./types/core.d.ts",
+      "default": "./dist/core.js"
+    },
+    "./web": {
+      "types": "./types/web.d.ts",
+      "default": "./dist/web.js"
+    },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mimecorg/leaner.git"
+    "url": "git+https://github.com/leaner-js/leaner.git"
   },
   "keywords": [
     "leaner",
@@ -27,10 +36,12 @@
   "author": "Michał Męciński",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/mimecorg/leaner/issues"
+    "url": "https://github.com/leaner-js/leaner/issues"
   },
-  "homepage": "https://github.com/mimecorg/leaner",
+  "homepage": "https://leanerjs.org/",
   "devDependencies": {
-    "rollup": "^4.17.2"
+    "jsdom": "^24.0.0",
+    "rollup": "^4.17.2",
+    "vitest": "^1.6.0"
   }
 }