leaner 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (C) 2024 Michał Męciński
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# Leaner.js
+
+**Leaner.js** is a thin wrapper over the HTML DOM API. Although it contains many features of modern JavaScript frameworks (reactive state, components, etc.), it doesn’t require any special compilers or build tools, and it doesn’t use a virtual DOM so it's very lightweight and efficient.
+
+**Note:** the current version is a proof of concept.

package/dist/core.js

@@ -0,0 +1,562 @@
+function isPlainObject( value ) {
+  if ( typeof value == 'object' && value != null ) {
+    const prototype = Object.getPrototypeOf( value );
+    if ( prototype == null || prototype == Object.prototype )
+      return true;
+  }
+  return false;
+}
+
+function isPlainObjectOrArray( value ) {
+  return isPlainObject( value ) || Array.isArray( value );
+}
+
+let deps = null;
+
+function track( record ) {
+  if ( deps != null )
+    deps.add( record );
+}
+
+function react( record ) {
+  if ( record.watches != null ) {
+    for ( const watch of record.watches.values() )
+      watch();
+  }
+}
+
+function withDeps( callback ) {
+  const oldDeps = deps;
+  deps = new Set();
+
+  try {
+    const result = callback();
+
+    return [ result, deps ];
+  } finally {
+    deps = oldDeps;
+  }
+}
+
+function addDeps( newDeps ) {
+  if ( deps != null && newDeps != null ) {
+    for ( const dep of newDeps.values() )
+      deps.add( dep );
+  }
+}
+
+function updateDeps( newDeps, deps, callback ) {
+  for ( const dep of newDeps ) {
+    if ( dep.watches == null )
+      dep.watches = new Set();
+    dep.watches.add( callback );
+    if ( deps != null )
+      deps.delete( dep );
+  }
+
+  if ( deps != null ) {
+    for ( const dep of deps )
+      dep.watches.delete( callback );
+  }
+
+  return newDeps;
+}
+
+const stateGetterHandler = {
+  get: stateGetterGet,
+  apply: stateGetterApply,
+  set() {
+    throw new TypeError( 'Mutating a state getter is not allowed' );
+  },
+  deleteProperty() {
+    throw new TypeError( 'Mutating a state getter is not allowed' );
+  },
+};
+
+const stateGetterRecords = new WeakMap();
+
+function stateGetterGet( target, prop ) {
+  if ( prop === 'get' ) {
+    return arg => {
+      if ( typeof arg == 'function' )
+        return createDynamicStateRecord( target, arg ).proxy;
+      else
+        return createChildStateRecord( target, arg ).proxy;
+    };
+  }
+
+  if ( prop === Symbol.toPrimitive )
+    throw new Error( 'Using a state getter as a primitive value is not allowed' );
+
+  return createChildStateRecord( target, prop ).proxy;
+}
+
+function stateGetterApply( target ) {
+  const value = target();
+
+  if ( isPlainObjectOrArray( value ) ) {
+    const record = stateGetterRecords.get( target );
+    return createReaderRecord( record, value ).proxy;
+  }
+
+  return value;
+}
+
+function createRecord( prop, getter ) {
+  return {
+    prop,
+    target: getter,
+    proxy: new Proxy( getter, stateGetterHandler ),
+    children: null,
+    reader: null,
+    watches: null,
+  };
+}
+
+function createRootStateRecord( getter ) {
+  const record = createRecord( '(root)', getter );
+
+  stateGetterRecords.set( getter, record );
+
+  return record;
+}
+
+function createChildStateRecord( target, prop ) {
+  const record = stateGetterRecords.get( target );
+
+  if ( record.children != null && record.children[ prop ] != null )
+    return record.children[ prop ];
+
+  if ( record.children == null )
+    record.children = Object.create( null );
+
+  const childRecord = createRecord( prop, getter );
+
+  function getter() {
+    const value = target();
+    track( childRecord );
+    return value[ prop ];
+  }
+  stateGetterRecords.set( getter, childRecord );
+
+  record.children[ prop ] = childRecord;
+
+  return childRecord;
+}
+
+function createDynamicStateRecord( target, arg ) {
+  const dynamicRecord = {
+    prop: '(dynamic)',
+    target: getter,
+    proxy: new Proxy( getter, stateGetterHandler ),
+  };
+
+  function getter() {
+    const value = target();
+    const index = arg();
+    track( createChildStateRecord( target, index ) );
+    return value[ index ];
+  }
+
+  stateGetterRecords.set( getter, dynamicRecord );
+
+  return dynamicRecord;
+}
+
+const stateReaderHandler = {
+  get: stateReaderGet,
+  set() {
+    throw new TypeError( 'Mutating a reactive value is not allowed' );
+  },
+  deleteProperty() {
+    throw new TypeError( 'Mutating a reactive value is not allowed' );
+  },
+};
+
+const stateReaderRecords = new WeakMap();
+
+const stateReaderProxies = new WeakSet();
+
+function stateReaderGet( target, prop ) {
+  const record = stateReaderRecords.get( target );
+
+  const childRecord = createChildStateRecord( record.target, prop );
+
+  track( childRecord );
+
+  const value = target[ prop ];
+
+  if ( isPlainObjectOrArray( value ) )
+    return createReaderRecord( childRecord, value ).proxy;
+
+  return value;
+}
+
+function createReaderRecord( record, value ) {
+  if ( record.reader != null && record.reader.value === value )
+    return record.reader;
+
+  // reuse an existing record; this happens e.g. if an array was rearranged using splice/unshift
+  const existingRecord = stateReaderRecords.get( value );
+  if ( existingRecord != null ) {
+    record.reader = existingRecord;
+    existingRecord.target = record.target;
+    return existingRecord;
+  }
+
+  record.reader = {
+    value,
+    target: record.target,
+    proxy: new Proxy( value, stateReaderHandler ),
+  };
+
+  stateReaderRecords.set( value, record.reader );
+  stateReaderProxies.add( record.reader.proxy );
+
+  return record.reader;
+}
+
+function isStateReader( value ) {
+  if ( stateReaderProxies.has( value ) )
+    return true;
+  return false;
+}
+
+const computedGetterHandler = {
+  get: computedGetterGet,
+  apply: computedGetterApply,
+  set() {
+    throw new TypeError( 'Mutating a computed getter is not allowed' );
+  },
+  deleteProperty() {
+    throw new TypeError( 'Mutating a computed getter is not allowed' );
+  },
+};
+
+function computedGetterGet( target, prop ) {
+  if ( prop === 'get' ) {
+    return arg => {
+      if ( typeof arg == 'function' )
+        return createDynamicComputedProxy( target, arg );
+      else
+        return createChildComputedProxy( target, arg );
+    };
+  }
+
+  if ( prop == Symbol.toPrimitive )
+    throw new Error( 'Cannot use a computed getter as array index; use the get() method instead' );
+
+  return createChildComputedProxy( target, prop );
+}
+
+function createRootComputedProxy( getter ) {
+  return new Proxy( getter, computedGetterHandler );
+}
+
+function createChildComputedProxy( target, prop ) {
+  return new Proxy( getter, computedGetterHandler );
+
+  function getter() {
+    return target()[ prop ];
+  }
+}
+
+function createDynamicComputedProxy( target, arg ) {
+  return new Proxy( getter, computedGetterHandler );
+
+  function getter() {
+    return target()[ arg() ];
+  }
+}
+
+function computedGetterApply( target ) {
+  const value = target();
+
+  if ( isPlainObjectOrArray( value ) && !isStateReader( value ) )
+    return new Proxy( value, computedReaderHandler );
+
+  return value;
+}
+
+const computedReaderHandler = {
+  get: computedReaderGet,
+  set() {
+    throw new TypeError( 'Mutating a computed value is not allowed' );
+  },
+  deleteProperty() {
+    throw new TypeError( 'Mutating a computed value is not allowed' );
+  },
+};
+
+function computedReaderGet( target, prop ) {
+  const value = target[ prop ];
+
+  if ( isPlainObjectOrArray( value ) && !isStateReader( value ) )
+    return new Proxy( value, computedReaderHandler );
+
+  return value;
+}
+
+class Mutator {
+  constructor( callback ) {
+    this.callback = callback;
+  }
+}
+
+function applyMutator( record, value, callback ) {
+  mutableValues = new WeakMap();
+  mutableValues.set( value, record );
+
+  const proxy = new Proxy( value, stateMutatorHandler );
+
+  stateMutatorTargets = new WeakMap();
+  stateMutatorTargets.set( proxy, value );
+
+  mutated = new Set();
+
+  try {
+    callback( proxy );
+
+    return mutated;
+  } finally {
+    mutableValues = null;
+    stateMutatorTargets = null;
+    mutated = null;
+  }
+}
+
+const stateMutatorHandler = {
+  get: stateMutatorGet,
+  set: stateMutatorSet,
+  deleteProperty: stateMutatorDelete,
+};
+
+let mutableValues = null;
+let stateMutatorTargets = null;
+
+let mutated = null;
+
+function stateMutatorGet( target, prop ) {
+  const value = target[ prop ];
+
+  if ( isPlainObjectOrArray( value ) ) {
+    const record = mutableValues.get( target );
+
+    const childRecord = createChildStateRecord( record.target, prop );
+    mutableValues.set( value, childRecord );
+
+    const proxy = new Proxy( value, stateMutatorHandler );
+    stateMutatorTargets.set( proxy, value );
+
+    return proxy;
+  }
+
+  return value;
+}
+
+function stateMutatorSet( target, prop, value ) {
+  const record = mutableValues.get( target );
+
+  if ( Array.isArray( target ) && isIntegerKey( prop ) && Number( prop ) >= target.length ) {
+    // the length of the array is changed implicitly when a new element is added
+    const lengthRecord = createChildStateRecord( record.target, 'length' );
+    mutated.add( lengthRecord );
+  }
+
+  if ( isPlainObjectOrArray( value ) ) {
+    const valueTarget = stateMutatorTargets.get( value );
+    if ( valueTarget != null )
+      value = valueTarget;
+  }
+
+  if ( target[ prop ] === value )
+    return true;
+
+  target[ prop ] = value;
+
+  const childRecord = createChildStateRecord( record.target, prop );
+  mutated.add( childRecord );
+
+  return true;
+}
+
+function stateMutatorDelete( target, prop ) {
+  if ( !( prop in target ) )
+    return true;
+
+  delete target[ prop ];
+
+  const record = mutableValues.get( target );
+
+  const childRecord = createChildStateRecord( record.target, prop );
+  mutated.add( childRecord );
+
+  return true;
+}
+
+function isIntegerKey( key ) {
+  return typeof key == 'string' && key != 'NaN' && key[ 0 ] != '-' && '' + parseInt( key, 10 ) == key;
+}
+
+let scheduled = null;
+
+function schedule( callback ) {
+  if ( scheduled == null ) {
+    scheduled = new Set();
+    Promise.resolve().then( () => {
+      const watches = scheduled.values();
+      scheduled = null;
+      for ( const watch of watches )
+        watch();
+    } );
+  }
+
+  scheduled.add( callback );
+}
+
+function useState( initial ) {
+  let current = initial;
+
+  const record = createRootStateRecord( getter );
+
+  return [ record.proxy, setter ];
+
+  function getter() {
+    track( record );
+    return current;
+  }
+  function setter( value ) {
+    if ( value instanceof Mutator ) {
+      const mutated = applyMutator( record, current, value.callback );
+
+      for ( const record of mutated )
+        react( record );
+    } else {
+      if ( typeof value == 'function' ) {
+        const readOnlyValue = stateGetterApply( getter );
+        value = value( readOnlyValue );
+      }
+
+      if ( current !== value ) {
+        current = value;
+        react( record );
+      }
+    }
+  }
+}
+
+function useWatchEffect( callback ) {
+  let deps = null;
+
+  update();
+
+  function update() {
+    const [ _, newDeps ] = withDeps( callback );
+
+    deps = updateDeps( newDeps, deps, update );
+  }
+}
+
+function useWatch( getter, callback ) {
+  let [ value, deps ] = withDeps( getter );
+
+  updateDeps( deps, null, update );
+
+  function update() {
+    const [ newValue, newDeps ] = withDeps( getter );
+
+    deps = updateDeps( newDeps, deps, update );
+
+    if ( newValue !== value ) {
+      callback( newValue, value );
+      value = newValue;
+    }
+  }
+}
+
+function useEffect( callback ) {
+  let deps = null;
+
+  schedule( update );
+
+  function update() {
+    const [ _, newDeps ] = withDeps( callback );
+
+    deps = updateDeps( newDeps, deps, () => schedule( update ) );
+  }
+}
+
+function useReactive( callback ) {
+  let deps = null;
+
+  update();
+
+  function update() {
+    const [ _, newDeps ] = withDeps( callback );
+
+    deps = updateDeps( newDeps, deps, () => schedule( update ) );
+  }
+}
+
+function useReactiveWatch( getter, callback ) {
+  let value = null, deps = null;
+
+  update( true );
+
+  function update( force ) {
+    const [ newValue, newDeps ] = withDeps( getter );
+
+    deps = updateDeps( newDeps, deps, () => schedule( update ) );
+
+    if ( force || newValue !== value ) {
+      callback( newValue, value );
+      value = newValue;
+    }
+  }
+}
+
+function useComputed( callback ) {
+  let deps = null, value = null, valid = false;
+
+  return createRootComputedProxy( execute );
+
+  function execute() {
+    if ( !valid ) {
+      const [ newValue, newDeps ] = withDeps( callback );
+
+      deps = updateDeps( newDeps, deps, invalidate );
+
+      value = newValue;
+      valid = true;
+    }
+
+    addDeps( deps );
+
+    return value;
+  }
+
+  function invalidate() {
+    value = null;
+    valid = false;
+  }
+}
+
+function useConstant( value ) {
+  return createRootComputedProxy( getter );
+
+  function getter() {
+    return value;
+  }
+}
+
+function mutate( callback ) {
+  return new Mutator( callback );
+}
+
+function current( value ) {
+  if ( typeof value == 'function' )
+    return value();
+  return value;
+}
+
+export { current, mutate, schedule, useComputed, useConstant, useEffect, useReactive, useReactiveWatch, useState, useWatch, useWatchEffect };

package/dist/web.js

@@ -0,0 +1,638 @@
+import { useReactive, useReactiveWatch, useConstant } from 'leaner';
+
+function appendToArray( item, target ) {
+  if ( Array.isArray( item ) )
+    target.push( ...item );
+  else
+    target.push( item );
+}
+
+function isPlainObject( value ) {
+  if ( typeof value == 'object' && value != null ) {
+    const prototype = Object.getPrototypeOf( value );
+    if ( prototype == null || prototype == Object.prototype )
+      return true;
+  }
+  return false;
+}
+
+function isPlainObjectOrArray( value ) {
+  return isPlainObject( value ) || Array.isArray( value );
+}
+
+let current = null;
+
+function createComponent( template ) {
+  const component = template[ 0 ];
+
+  let props, i = 1;
+  if ( i < template.length && isPlainObject( template[ i ] ) )
+    props = template[ i++ ];
+  else
+    props = {};
+
+  const children = template.slice( i );
+
+  return component( props, children );
+}
+
+function createContext( parent ) {
+  return {
+    parent,
+    children: null,
+    mount: null,
+    destroy: null,
+  };
+}
+
+function createChildContext() {
+  const context = createContext( current );
+
+  if ( current != null ) {
+    if ( current.children == null )
+      current.children = [];
+    current.children.push( context );
+  }
+
+  return context;
+}
+
+function withContext( context, callback ) {
+  const last = current;
+  current = context;
+  try {
+    return callback();
+  } finally {
+    current = last;
+  }
+}
+
+function withChildContext( callback ) {
+  current = createChildContext();
+  try {
+    return callback();
+  } finally {
+    current = current.parent;
+  }
+}
+
+function onMount( callback ) {
+  if ( current == null )
+    throw new Error( 'onMount() cannot be called outside of a component' );
+  if ( current.mount == null )
+    current.mount = [];
+  current.mount.push( callback );
+}
+
+function onDestroy( callback ) {
+  if ( current == null )
+    throw new Error( 'onDestroy() cannot be called outside of a component' );
+  if ( current.destroy == null )
+    current.destroy = [];
+  current.destroy.push( callback );
+}
+
+function mountContext( context ) {
+  if ( context.children != null ) {
+    for ( const child of context.children )
+      mountContext( child );
+  }
+
+  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();
+  }
+
+  if ( context.children != null ) {
+    for ( const child of context.children )
+      destroyContext( child );
+
+    context.children = null;
+  }
+}
+
+function setClasses( element, classes ) {
+  if ( typeof classes == 'function' ) {
+    useReactive( () => {
+      const value = classes();
+      if ( Array.isArray( value ) ) {
+        element.className = '';
+        element.classList.add( ...value );
+      } else {
+        element.className = value;
+      }
+    } );
+  } else if ( isPlainObject( classes ) ) {
+    setClassesObject( element, classes );
+  } else if ( Array.isArray( classes ) ) {
+    setClassesArray( element, classes );
+  } else {
+    element.className = 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 );
+      } );
+    } else if ( value ) {
+      element.classList.add( key );
+    }
+  }
+}
+
+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;
+      } );
+    } else if ( isPlainObject( item ) ) {
+      setClassesObject( element, item );
+    } else {
+      element.classList.add( item );
+    }
+  }
+}
+
+class DynamicNode {
+  constructor( content ) {
+    this.content = content;
+  }
+}
+
+function appendNode( node, target ) {
+  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 );
+      }
+    } else {
+      target.append( ...node );
+    }
+  } else if ( node instanceof DynamicNode ) {
+    appendNode( node.content, target );
+  } else {
+    target.append( node );
+  }
+}
+
+function insertBefore( node, parent, before ) {
+  if ( Array.isArray( node ) ) {
+    for ( const item of node ) {
+      if ( item instanceof DynamicNode )
+        insertBefore( item.content, parent, before );
+      else
+        parent.insertBefore( item, before );
+    }
+  } else if ( node instanceof DynamicNode ) {
+    insertBefore( node.content, before );
+  } else {
+    parent.insertBefore( node, 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 );
+      } else {
+        parent = item.parentNode;
+        before = item.nextSibling;
+        parent.removeChild( item );
+      }
+    }
+    return [ parent, before ];
+  }
+
+  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 );
+
+    insertBefore( newNode, parent, before );
+  }
+}
+
+function ensureNotEmpty( node ) {
+  if ( isEmpty( node ) ) {
+    const comment = document.createComment( '' );
+    if ( Array.isArray( node ) )
+      node.push( comment );
+    else
+      return comment;
+  }
+  return node;
+}
+
+function isEmpty( node ) {
+  if ( Array.isArray( node ) ) {
+    for ( const item of node ) {
+      if ( !isEmpty( item ) )
+        return false;
+    }
+    return true;
+  }
+
+  return node == null;
+}
+
+function updateDynamicNode( node, context, template ) {
+  let content = null;
+
+  if ( node.content != null )
+    destroyContext( context );
+
+  if ( template != null )
+    content = withContext( context, () => make( template ) );
+
+  content = ensureNotEmpty( content );
+
+  if ( node.content != null ) {
+    replaceNode( content, node.content );
+    mountContext( context );
+  }
+
+  node.content = content;
+}
+
+function createDynamicDirective( template ) {
+  if ( template.length < 2 || typeof template[ 1 ] != 'function' )
+      throw new TypeError( 'Invalid dynamic template' );
+
+  const [ , type, ...args ] = template;
+
+  const result = new DynamicNode( null );
+
+  const context = createChildContext();
+
+  useReactiveWatch( type, update );
+
+  return result;
+
+  function update( type ) {
+    updateDynamicNode( result, context, [ type, ...args ] );
+  }
+}
+
+function createForDirective( template ) {
+  if ( template.length != 3 || typeof template[ 1 ] != 'function' || typeof template[ 2 ] != 'function' )
+    throw new TypeError( 'Invalid for template' );
+
+  let length = 0;
+  let items = null;
+
+  let watchingContent = false;
+
+  const result = new DynamicNode( null );
+
+  const context = createChildContext();
+
+  useReactiveWatch( watchLength, 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 ]() ];
+  }
+
+  function updateContent( newItems ) {
+    if ( watchingContent )
+      update( newItems );
+    items = newItems;
+    length = newItems.length;
+  }
+
+  function update( newItems ) {
+    const nodes = [];
+    const itemContexts = [];
+
+    const oldItemContexts = context.children != null ? new Set( context.children ) : null;
+    let newItemContexts = null;
+
+    let containsMatchedByValue = false;
+
+    for ( let index = 0; index < newItems.length; index++ ) {
+      const value = newItems[ index ];
+
+      const isMatchedByValue = isPlainObjectOrArray( value );
+
+      if ( isMatchedByValue )
+        containsMatchedByValue = true;
+
+      let oldIndex = -1;
+
+      // 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 );
+        } else if ( index < length ) {
+          if ( items == null || !isPlainObjectOrArray( items[ index ] ) )
+            oldIndex = index;
+        }
+      }
+
+      if ( oldIndex >= 0 ) {
+        nodes.push( result.content[ oldIndex ] );
+
+        const itemContext = context.children[ oldIndex ];
+        itemContexts.push( itemContext );
+
+        if ( oldItemContexts != null )
+          oldItemContexts.delete( itemContext );
+      } else {
+        const itemContext = createContext( context );
+        itemContexts.push( itemContext );
+
+        if ( newItemContexts == null )
+          newItemContexts = [];
+        newItemContexts.push( itemContext );
+
+        const item = isMatchedByValue ? useConstant( value ) : template[ 1 ][ index ];
+
+        const itemTemplate = template[ 2 ]( item, index );
+
+        const node = withContext( itemContext, () => make( itemTemplate ) );
+
+        if ( Array.isArray( node ) )
+          nodes.push( new DynamicNode( node ) );
+        else
+          nodes.push( node );
+      }
+    }
+
+    ensureNotEmpty( nodes );
+
+    if ( result.content != null ) {
+      if ( oldItemContexts != null ) {
+        for ( const itemContext of oldItemContexts )
+          destroyContext( itemContext );
+      }
+
+      replaceNode( nodes, result.content );
+
+      if ( newItemContexts != null ) {
+        for ( const itemContext of newItemContexts )
+          mountContext( itemContext );
+      }
+    }
+
+    result.content = nodes;
+    if ( itemContexts.length > 0 )
+      context.children = itemContexts;
+    else
+      context.children = null;
+
+    if ( containsMatchedByValue && !watchingContent ) {
+      useReactiveWatch( watchContent, updateContent );
+      watchingContent = true;
+    }
+  }
+}
+
+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' );
+
+  const result = new DynamicNode( null );
+
+  const context = createChildContext();
+
+  useReactiveWatch( watchState, update );
+
+  return result;
+
+  function watchState() {
+    let state = null;
+
+    for ( let i = 0; i < numberOfConditions; i++ ) {
+      if ( template[ 2 * i + 1 ]() ) {
+        state = 2 * i + 2;
+        break;
+      }
+    }
+
+    if ( state == null && hasElse )
+      state = template.length - 1;
+
+    return state;
+  }
+
+  function update( state ) {
+    updateDynamicNode( result, context, state != null ? template[ state ] : null );
+  }
+}
+
+function setStyles( element, styles ) {
+  if ( typeof styles == 'function' ) {
+    useReactive( () => {
+      const value = styles();
+      if ( isPlainObject( value ) ) {
+        element.style = '';
+        for ( const [ key, value ] of Object.entries( value ) )
+          setStyleProperty( element, key, value );
+      } else {
+        element.style = value;
+      }
+    } );
+  } else if ( isPlainObject( styles ) ) {
+    setStylesObject( element, styles );
+  } else {
+    element.style = styles;
+  }
+}
+
+function setStylesObject( element, styles ) {
+  for ( const [ key, value ] of Object.entries( styles ) ) {
+    if ( typeof value == 'function' )
+      useReactive( () => element.style[ key ] = value() );
+    else
+      setStyleProperty( element, key, value );
+  }
+}
+
+function setStyleProperty( element, key, value ) {
+  if ( key.startsWith( '--' ) )
+    element.style.setProperty( key, value );
+  else
+    element.style[ key ] = value;
+}
+
+const directives = {
+  if: createIfDirective,
+  for: createForDirective,
+  dynamic: createDynamicDirective,
+};
+
+function make( template ) {
+  if ( template == null )
+    return [];
+
+  if ( Array.isArray( template ) ) {
+    if ( template.length == 0 )
+      return [];
+
+    if ( template.length == 1 && Array.isArray( template[ 0 ] ) ) {
+      const result = [];
+      for ( const item of template[ 0 ] )
+        appendToArray( make( item ), result );
+      return result;
+    }
+
+    if ( typeof template[ 0 ] == 'string' ) {
+      const tag = template[ 0 ];
+
+      if ( directives.hasOwnProperty( tag ) )
+        return directives[ tag ]( template );
+
+      const element = document.createElement( tag );
+
+      let i = 1;
+      if ( i < template.length && isPlainObject( template[ i ] ) )
+        setElementProperties( element, template[ i++ ] );
+
+      for ( ; i < template.length; i++ )
+        appendNode( make( template[ i ] ), element );
+
+      return element;
+    }
+
+    if ( typeof template[ 0 ] == 'function' )
+      return withChildContext( () => make( createComponent( template ) ) );
+
+    throw new TypeError( 'Unexpected value passed to make()' );
+  }
+
+  if ( typeof template == 'function' ) {
+    const textNode = document.createTextNode( '' );
+    useReactive( () => textNode.textContent = template() );
+    return textNode;
+  }
+
+  if ( template instanceof Node || template instanceof DynamicNode )
+    return template;
+
+  return document.createTextNode( template );
+}
+
+function setElementProperties( element, properties ) {
+  for ( const [ key, value ] of Object.entries( properties ) ) {
+    switch ( key ) {
+      case 'class':
+        setClasses( element, value );
+        break;
+      case 'style':
+        setStyles( element, value );
+        break;
+      case 'ref':
+        value( element );
+        break;
+      default:
+        setElementProperty( element, key, value );
+        break;
+    }
+  }
+}
+
+function setElementProperty( element, key, value ) {
+  if ( key in element ) {
+    if ( typeof value == 'function' && !key.startsWith( 'on' ) )
+      useReactive( () => element[ key ] = value() );
+    else
+      element[ key ] = value;
+  } else {
+    if ( typeof value == 'function' )
+      useReactive( () => element.setAttribute( key, value() ) );
+    else
+      element.setAttribute( key, value );
+  }
+}
+
+function mount( component, target ) {
+  const context = {
+    parent: null,
+    children: [],
+  };
+
+  const root = withContext( context, () => make( component( {}, [] ) ) );
+
+  appendNode( root, target );
+
+  mountContext( context );
+
+  return {
+    destroy,
+  };
+
+  function destroy() {
+    destroyContext( context );
+    removeNode( root );
+  }
+}
+
+export { mount, onDestroy, onMount };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "leaner",
+  "version": "0.0.1",
+  "description": "Leaner.js",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/core.js",
+    "./web": "./dist/web.js",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mimecorg/leaner.git"
+  },
+  "keywords": [
+    "leaner",
+    "javascript",
+    "framework"
+  ],
+  "author": "Michał Męciński",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mimecorg/leaner/issues"
+  },
+  "homepage": "https://github.com/mimecorg/leaner",
+  "devDependencies": {
+    "rollup": "^4.17.2"
+  }
+}